↑↓キーで増減するフォーカス対応ステッパー

<div class="d08-10-12-stepper">
          <label class="d08-10-12-label" for="d08-10-12-qty">数量</label>
          <div class="d08-10-12-box">
            <button class="d08-10-12-dec" type="button" aria-label="数量を減らす">−</button>
            <input class="d08-10-12-input" id="d08-10-12-qty" type="text" inputmode="numeric" value="1" aria-label="数量（↑↓キーで増減）">
            <button class="d08-10-12-inc" type="button" aria-label="数量を増やす">＋</button>
          </div>
          <p class="d08-10-12-hint">入力欄をフォーカスして↑↓キーでも変更できます</p>
        </div>

.d08-10-12-stepper{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
        .d08-10-12-label{font-size:12px;font-weight:700;color:#3a3d4a}
        .d08-10-12-box{display:flex;align-items:stretch;border:1.5px solid #e2e2e8;border-radius:10px;overflow:hidden}
        .d08-10-12-dec,.d08-10-12-inc{width:36px;background:#f7f7fb;border:none;font-size:16px;font-weight:700;color:#3a3d4a;cursor:pointer;outline:none}
        .d08-10-12-dec:hover,.d08-10-12-inc:hover{background:#eef0f7}
        .d08-10-12-input{width:52px;border:none;border-left:1.5px solid #e2e2e8;border-right:1.5px solid #e2e2e8;text-align:center;font-size:14px;font-weight:700;color:#2a2d3a;outline:none}
        .d08-10-12-input.is-pulse{animation:d08-10-12-pulse .3s ease}
        @keyframes d08-10-12-pulse{0%{background:#f1efff}100%{background:transparent}}
        .d08-10-12-box:focus-within{box-shadow:0 0 0 3px rgba(106,92,255,.28);border-color:#6a5cff}
        .d08-10-12-dec:focus-visible,.d08-10-12-inc:focus-visible{box-shadow:inset 0 0 0 2px #6a5cff}
        .d08-10-12-hint{margin:0;font-size:10.5px;color:#8a8f9c;text-align:center}

(function(){
        var root=document.getElementById('item-08-10-12');if(!root)return;
        var input=root.querySelector('.d08-10-12-input');
        var dec=root.querySelector('.d08-10-12-dec');
        var inc=root.querySelector('.d08-10-12-inc');
        if(!input||!dec||!inc)return;
        var MIN=1,MAX=99;
        function clamp(v){return Math.max(MIN,Math.min(MAX,v));}
        function setVal(v){
          input.value=String(clamp(v));
          input.classList.remove('is-pulse');void input.offsetWidth;input.classList.add('is-pulse');
        }
        function current(){return parseInt(input.value,10)||MIN;}
        dec.addEventListener('click',function(){setVal(current()-1);});
        inc.addEventListener('click',function(){setVal(current()+1);});
        input.addEventListener('keydown',function(e){
          if(e.key==='ArrowUp'){e.preventDefault();setVal(current()+1);}
          else if(e.key==='ArrowDown'){e.preventDefault();setVal(current()-1);}
        });
        input.addEventListener('change',function(){setVal(current());});
      })();