ツリー表示Tree view

「ツリー表示（Tree view）」を実装してください。

## これは何か
親子の関係を、字下げと開閉で表す表示。フォルダやカテゴリーの階層に使う。

## 使いどころ
- 階層が3段以上あり、上下の関係を見せたいとき
- フォルダやカテゴリーを辿らせたいとき

## 実装の要件
- role="tree" の中に role="treeitem"。開閉は aria-expanded
- キーボードの上下左右キーに対応する
- 深い階層を全部開いたまま出さない。字下げで横幅が足りなくなる
- スマートフォンでは横幅が厳しい。1段ずつ画面を切り替える形も検討する
- 開閉の状態を覚えないと、操作のたびに畳まれて苛立たせる

## アクセシビリティの要件
- role="tree" / role="treeitem" / role="group" を使い、aria-expanded で開閉を示す
- 矢印キーで上下移動と開閉ができるようにする
- 階層の深さを aria-level で伝える
- 単なるリンク集なら tree にしない。ul と details で足りることが多い

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

```html
<ul class="x-tree" role="tree" aria-label="カテゴリー">
  <li class="x-tree__i" role="treeitem" aria-expanded="true" tabindex="0">
    <span class="x-tree__t"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i>デザイン</span>
    <ul class="x-tree__c" role="group">
      <li role="treeitem" tabindex="-1"><span class="x-tree__t">配色</span></li>
      <li role="treeitem" tabindex="-1"><span class="x-tree__t">タイポグラフィ</span></li>
    </ul>
  </li>
</ul>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-tree,
.x-tree *:not([class*="fa-"]),
.x-tree *:not([class*="fa-"])::before,
.x-tree *: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-tree {
  width: 214px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  list-style: none;
}
.x-tree__c {
  margin: 0;
  padding-left: 18px;
  list-style: none;
}
.x-tree__t {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: 12px;
}
.x-tree__t i {
  font-size: 9px;
  color: #606a7b;
}
```

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