タブTabs

「タブ（Tabs）」を実装してください。

## これは何か
同じ場所に複数の内容を重ねて置き、見出しを押して切り替える部品。書類のインデックスが由来。

## 使いどころ
- 同じ対象についての情報を、面を分けて見せたいとき（概要・仕様・レビューなど）
- 同時に見比べる必要がない内容を、1画面に収めたいとき

## 実装の要件
- tablist / tab / tabpanel の3点セットで作る
- 矢印キーの移動を実装する。Tab キーだけで全タブを回さない
- 見比べたい内容をタブで分けない。切り替えるたびに記憶で比べることになる
- タブの数が多いと横に溢れる。5個を超えたら別の分け方を考える
- 中身が検索やリンクの対象になるなら、タブではなく別ページにする

## アクセシビリティの要件
- role="tablist" / role="tab" / role="tabpanel" を対で使う
- 選択中のタブに aria-selected="true"、それ以外は false を付ける
- 左右の矢印キーで移動できるようにし、非選択のタブは tabindex="-1" にする
- タブと中身を aria-controls / aria-labelledby で結ぶ

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

```html
<div class="x-tab">
  <div class="x-tab__list" role="tablist" aria-label="商品の情報">
    <button class="x-tab__b" type="button" role="tab" aria-selected="true" aria-controls="x-tab-p1" id="x-tab-t1">概要</button>
    <button class="x-tab__b" type="button" role="tab" aria-selected="false" aria-controls="x-tab-p2" id="x-tab-t2" tabindex="-1">仕様</button>
  </div>
  <div class="x-tab__panel" role="tabpanel" id="x-tab-p1" aria-labelledby="x-tab-t1">
    毎日の持ち歩きを前提にした軽さです。
  </div>
  <div class="x-tab__panel" role="tabpanel" id="x-tab-p2" aria-labelledby="x-tab-t2" hidden>
    重さ 980g / 厚さ 15.9mm
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-tab,
.x-tab *:not([class*="fa-"]),
.x-tab *:not([class*="fa-"])::before,
.x-tab *: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-tab {
  width: 264px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.x-tab__list {
  display: flex;
  border-bottom: 1px solid #e3e6ea;
}
.x-tab__b {
  padding: 9px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: #606a7b;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.x-tab__b[aria-selected="true"] {
  border-bottom-color: #1d4ed8;
  color: #1d4ed8;
  font-weight: 700;
}
.x-tab__panel {
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
}
```

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