テーブルの操作バーTable toolbar

「テーブルの操作バー（Table toolbar）」を実装してください。

## これは何か
表のすぐ上に置く横長の帯。検索欄・並べ替え・表示する列の設定と件数を並べ、行を選ぶと「n件を選択中」と一括操作のボタンが現れる。

## 使いどころ
- 管理画面の注文や会員の一覧のように、件数が多い表から探して、まとめて処理させたいとき
- 同じ操作（書き出し・削除・状態の変更）を複数の行に一度に行わせたいとき

## 実装の要件
- 帯（検索 + 並べ替え + 列の設定）→ 一括操作の帯 → table の順に並べる
- 一括操作の帯は、選択が1件以上のときだけ hidden を外す。display を指定したら、帯のクラスに絞って .帯[hidden] { display: none; } も書く
- 見出しの「すべて選択」は、一部だけ選ばれているとき JavaScript で indeterminate を true にする（HTML の属性では指定できない）
- 検索語・並べ替え・ページ番号は URL のクエリ（?q=…&sort=…）にも残し、再読み込みや共有で同じ一覧に戻れるようにする
- 絞り込みの条件が多いなら、帯に詰め込まず絞り込みパネル（form/filter-panel）に分ける。帯に置くのは検索と並べ替えと、よく使う条件1〜2個まで
- 一括操作のボタンは、行を選ぶまで出さないか押せない状態にする。何も選ばずに押せると、何に効くのか分からない
- 見出しの「すべて選択」が表示中のページだけなのか全件なのかを、文言で分ける。全件を選べるなら「24件すべてを選択」を別に出す
- 削除のように取り消せない一括操作は、件数を書いた確認をはさむ（「2件を削除します」）
- 列見出しでも並べ替えられる表では、帯の並べ替えと列見出しの並べ替え（data/sortable-header）の状態を食い違わせない

## アクセシビリティの要件
- 検索欄や並べ替えのセレクトには、見えるラベルが無いなら aria-label で名前を付ける
- 絞り込んだ結果の件数は role="status" の領域に書き、フォーカスを動かさずに知らせる
- 一括操作のボタン群は role="group" にして「2件を選択中」の文字で名前を付けると、何に効くボタンかが伝わる
- 行のチェックボックスには「注文 1024 を選択」のように行を特定できる名前を付ける。「選択」だけが並ぶと区別できない
- role="toolbar" を付けるなら、WAI-ARIA APG の Toolbar の形どおり中を矢印キーで移れるようにする。付けないなら Tab で順に移るボタンの並びのままでよい

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

```html
<div class="x-table-toolbar">
  <div class="x-table-toolbar__bar">
    <div class="x-table-toolbar__search" role="search">
      <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
      <input class="x-table-toolbar__q" type="search" aria-label="注文を検索" placeholder="注文番号・名前">
    </div>
    <select class="x-table-toolbar__sort" aria-label="並べ替え">
      <option>新しい順</option>
      <option>古い順</option>
      <option>金額の高い順</option>
    </select>
    <button class="x-table-toolbar__icon" type="button" aria-label="表示する列" aria-expanded="false">
      <i class="fa-solid fa-table-columns" aria-hidden="true"></i>
    </button>
  </div>
  <!-- 行を選んだときだけ出す一括操作。選んでいない間は hidden にする -->
  <div class="x-table-toolbar__bulk" role="group" aria-labelledby="x-table-toolbar-n">
    <span class="x-table-toolbar__n" id="x-table-toolbar-n">2件を選択中</span>
    <button class="x-table-toolbar__act" type="button"><i class="fa-solid fa-download" aria-hidden="true"></i>書き出す</button>
    <button class="x-table-toolbar__act x-table-toolbar__danger" type="button"><i class="fa-solid fa-trash-can" aria-hidden="true"></i>削除</button>
    <span class="x-table-toolbar__count" role="status">全24件</span>
  </div>
  <table class="x-table-toolbar__t">
    <caption class="x-table-toolbar__vh">注文の一覧</caption>
    <thead>
      <tr>
        <th scope="col"><input type="checkbox" aria-label="表示中の注文をすべて選択"></th>
        <th scope="col">注文番号</th>
        <th scope="col">名前</th>
        <th scope="col">金額</th>
      </tr>
    </thead>
    <tbody>
      <tr class="x-table-toolbar__on"><td><input type="checkbox" checked aria-label="注文 1024 を選択"></td><td>1024</td><td>山田</td><td>3,200円</td></tr>
      <tr class="x-table-toolbar__on"><td><input type="checkbox" checked aria-label="注文 1023 を選択"></td><td>1023</td><td>佐藤</td><td>1,480円</td></tr>
      <tr><td><input type="checkbox" aria-label="注文 1022 を選択"></td><td>1022</td><td>鈴木</td><td>5,600円</td></tr>
    </tbody>
  </table>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-table-toolbar,
.x-table-toolbar *:not([class*="fa-"]),
.x-table-toolbar *:not([class*="fa-"])::before,
.x-table-toolbar *: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-table-toolbar {
  width: 340px;
  max-width: 100%;  /* 狭い画面では親の幅に合わせて縮む */
  color: #1b2028;
  font-size: 12px;
}
.x-table-toolbar__bar {
  display: flex;
  gap: 6px;
}
.x-table-toolbar__search {
  position: relative;
  flex: 1;
}
.x-table-toolbar__search .fa-magnifying-glass {
  position: absolute;
  top: 50%;
  left: 9px;
  color: #5b6472;
  font-size: 11px;
  transform: translateY(-50%);
}
.x-table-toolbar__q,
.x-table-toolbar__sort,
.x-table-toolbar__icon {
  height: 32px;
  border: 1px solid #7f8a99;
  border-radius: 6px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 12px;
}
.x-table-toolbar__q {
  width: 100%;
  padding: 0 8px 0 27px;
}
.x-table-toolbar__q::placeholder {
  color: #6b7280;
}
.x-table-toolbar__sort {
  padding: 0 4px;
}
.x-table-toolbar__icon {
  width: 32px;
  color: #3a4250;
  cursor: pointer;
}
/* 一括操作の帯。選択中であることを背景の色と「n件を選択中」の文字の両方で示す */
.x-table-toolbar__bulk {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  background: #e8eefb;
}
.x-table-toolbar__bulk[hidden] {
  display: none;
}
.x-table-toolbar__n {
  margin-right: 4px;
  color: #1d4ed8;
  font-weight: 700;
}
.x-table-toolbar__act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid #7f8a99;
  border-radius: 5px;
  background: #fff;
  color: #1b2028;
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.x-table-toolbar__danger {
  border-color: #b91c1c;
  color: #b91c1c;
}
.x-table-toolbar__count {
  margin-left: auto;
  color: #3a4250;
  font-size: 11.5px;
}
.x-table-toolbar__q:focus-visible,
.x-table-toolbar__sort:focus-visible,
.x-table-toolbar__icon:focus-visible,
.x-table-toolbar__act:focus-visible,
.x-table-toolbar__t input:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
}
.x-table-toolbar__icon:hover,
.x-table-toolbar__act:hover {
  background: #f1f3f6;
}
.x-table-toolbar__t {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  background: #fff;
}
.x-table-toolbar__t th,
.x-table-toolbar__t td {
  height: 28px;
  padding: 0 8px;
  border-bottom: 1px solid #e3e6ea;
  text-align: left;
}
.x-table-toolbar__t th {
  background: #f1f3f6;
  font-size: 11.5px;
}
.x-table-toolbar__t th:first-child,
.x-table-toolbar__t td:first-child {
  width: 30px;
}
.x-table-toolbar__t td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.x-table-toolbar__t th:last-child {
  text-align: right;
}
.x-table-toolbar__t input {
  margin: 0;
  accent-color: #1d4ed8;
}
.x-table-toolbar__on td {
  background: #f3f6fd;
}
/* 画面には出さず、読み上げにだけ渡す文字 */
.x-table-toolbar__vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* 行の選択欄。素のままだと 13px で押しにくいので 18px にする */
.x-table-toolbar__t input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
}
```

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