空状態Empty state

「空状態（Empty state）」を実装してください。

## これは何か
データが1件も無いときに出す画面。何も無い理由と、次にできることを書く。

## 使いどころ
- まだ何も登録していない利用者に、最初の一歩を示すとき
- 検索や絞り込みの結果が0件だったとき

## 実装の要件
- アイコン + 見出し + 一文の説明 + 次の操作ボタン
- 検索0件では入力した語を表示する
- 真っ白にしない。壊れているのか空なのか区別が付かない
- 「データがありません」だけで終わらせない。条件を変える方法や、作る導線を置く
- 検索0件のときは、入力した語をそのまま見せる。打ち間違いに自分で気づける

## アクセシビリティの要件
- 結果の件数が変わったことを aria-live="polite" で伝える
- 挿絵は aria-hidden="true" にする
- 次の操作へのボタンを必ず1つ置き、名前を動作で書く

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

```html
<div class="x-empty-state">
  <i class="fa-solid fa-inbox x-empty-state__i" aria-hidden="true"></i>
  <p class="x-empty-state__t">まだ保存した項目はありません</p>
  <p class="x-empty-state__d">気になるページの星印を押すと、ここに並びます。</p>
  <a class="x-empty-state__b" href="/list/">一覧から探す</a>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-empty-state,
.x-empty-state *:not([class*="fa-"]),
.x-empty-state *:not([class*="fa-"])::before,
.x-empty-state *: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-empty-state {
  width: 236px;
  padding: 18px 16px;
  border: 1px solid #e3e6ea;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}
.x-empty-state__i {
  font-size: 20px;
  color: #cfd4dc;
}
.x-empty-state__t {
  margin: 9px 0 3px;
  font-size: 12.5px;
  font-weight: 700;
}
.x-empty-state__b {
  display: inline-block;
  margin-top: 11px;
  padding: 7px 16px;
  border-radius: 7px;
  background: #1d4ed8;
  color: #fff;
  font-size: 11.5px;
  text-decoration: none;
}
.x-empty-state__d {
  margin: 0;
  font-size: 11px;
  line-height: 1.7;
  color: #606a7b;
}
```

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