ステッパーStepper

「ステッパー（Stepper）」を実装してください。

## これは何か
プラスとマイナスのボタンで数値を1つずつ増減させる入力。買い物かごの個数などに使う。

## 使いどころ
- 1〜10程度の小さな数を、手早く変えてもらいたいとき
- スマートフォンで数字キーボードを出したくないとき

## 実装の要件
- button（−）+ input[type=number]（min / max / step）+ button（＋）
- 上限下限でボタンを disabled にする
- 直接入力もできるようにする。50個を選ぶのにボタンを50回押させない
- 下限でマイナスを押せるままにしない。0個や負の数になる
- 押し続けで増え続ける実装は、行き過ぎたときに戻せず苛立たせる

## アクセシビリティの要件
- 増減ボタンに aria-label（「1つ増やす」「1つ減らす」）を付ける
- 数値は input[type=number] にして、キーボードからも入力できるようにする
- 値が変わったことは input の値の変化で伝わるが、フォーカスが増減ボタンにあると読み上げられない環境がある。届かないときだけ aria-live="polite" で現在値を伝える
- 下限・上限に達したらボタンを disabled にし、理由も文字で示す

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<div class="x-stepper">
  <label class="x-stepper__l" for="x-stepper-qty">数量</label>
  <div class="x-stepper__row">
    <button class="x-stepper__b" type="button" aria-label="1つ減らす">
      <i class="fa-solid fa-minus" aria-hidden="true"></i>
    </button>
    <input class="x-stepper__i" id="x-stepper-qty" type="number" min="1" max="99" step="1" value="2">
    <button class="x-stepper__b" type="button" aria-label="1つ増やす">
      <i class="fa-solid fa-plus" aria-hidden="true"></i>
    </button>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-stepper,
.x-stepper *:not([class*="fa-"]),
.x-stepper *:not([class*="fa-"])::before,
.x-stepper *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-stepper__l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-stepper__row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.x-stepper__b {
  width: 40px;
  height: 40px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  cursor: pointer;
}
.x-stepper__b:hover {
  border-color: #1d4ed8;
  color: #1d4ed8;
}
.x-stepper__i {
  width: 60px;
  height: 40px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  text-align: center;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。