セレクトボックスSelect

「セレクトボックス（Select）」を実装してください。

## これは何か
押すと選択肢が下に開く入力欄。都道府県のように、選択肢が決まっていて数が多いときに使う。

## 使いどころ
- 選択肢が6個以上あり、ラジオボタンで並べると場所を取るとき
- 選択肢が固定で、利用者が新しい値を足す必要がないとき

## 実装の要件
- label + select + option。標準の select を優先する
- select と ::picker(select) に appearance: base-select を付けて作るときは、矢印は ::picker-icon が出す。自前の矢印（背景画像か擬似要素）と appearance: none は @supports not (appearance: base-select) の中に入れ、二重に出さない
- 選択肢が5個以下ならラジオボタンのほうが速い。開く操作のぶん遅くなる
- 最初の項目を「選択してください」にしたら、その値を送信できないようにする
- 見た目を作り込みたくなるが、独自実装はキーボード操作と読み上げの再現が難しい
- 選択肢の一覧まで見た目を変えたいときも、select と ::picker(select) に appearance: base-select を付けて標準の select のまま作る（Chrome・Edge は 135 から、Safari は 27 から。Firefox は未対応で普通の select として動く）

## アクセシビリティの要件
- label を for / id で結ぶ
- 標準の select を使えば、キーボード操作と読み上げはブラウザが面倒を見る
- 独自実装にするなら role="combobox" と aria-expanded / aria-activedescendant が要る。工数を見積もってから決める

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

```html
<div class="x-select">
  <label class="x-select__l" for="x-select-pref">お住まいの都道府県</label>
  <select class="x-select__s" id="x-select-pref" name="pref" required>
    <option value="">選択してください</option>
    <option value="13">東京都</option>
    <option value="27">大阪府</option>
  </select>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-select,
.x-select *:not([class*="fa-"]),
.x-select *:not([class*="fa-"])::before,
.x-select *: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-select {
  width: 250px;
}
.x-select__l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-select__s {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #7f8a99;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 14px;
}
.x-select__s:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
```

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