ボタングループButton group

「ボタングループ（Button group）」を実装してください。

## これは何か
関係のあるボタンを隙間なく並べて1つのまとまりに見せる部品。表示の切り替えなど、選択肢が少ないときに使う。

## 使いどころ
- 「日／週／月」のように、2〜5個の排他的な選択肢を切り替えるとき
- プルダウンにするほど数が多くなく、常に全部見せておきたいとき

## 実装の要件
- 選択中の状態を aria-pressed か radio の checked で持つ
- 角丸は両端だけに付け、隣り合う境界線を重ねて二重線にしない
- 選択肢が6個を超えたらプルダウンかタブに変える。横に伸びて折り返すと、まとまりに見えない
- 選択中を色だけで示さない。文字の太さも変える
- タブと見た目が似るが、タブは画面の内容そのものを切り替えるもの。役割を混ぜない

## アクセシビリティの要件
- 排他選択なら、見た目はボタンでも中身はラジオボタンで作るのが確実
- button で作るなら role="group" でまとめ、選択中に aria-pressed="true" を付ける
- 左右キーで移動できるようにする

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

```html
<div class="x-button-group" role="group" aria-label="表示する期間">
  <button class="x-button-group__b" type="button" aria-pressed="true">日</button>
  <button class="x-button-group__b" type="button" aria-pressed="false">週</button>
  <button class="x-button-group__b" type="button" aria-pressed="false">月</button>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-button-group,
.x-button-group *:not([class*="fa-"]),
.x-button-group *:not([class*="fa-"])::before,
.x-button-group *: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-button-group {
  display: inline-flex;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  overflow: hidden;
}
.x-button-group__b {
  min-width: 56px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-left: 1px solid #cfd4dc;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.x-button-group__b:first-child {
  border-left: 0;
}
.x-button-group__b[aria-pressed="true"] {
  background: #1d4ed8;
  color: #fff;
  font-weight: 700;
}
.x-button-group__b:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: -2px;
}
```

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