通知ドットNotification dot

「通知ドット（Notification dot）」を実装してください。

## これは何か
アイコンの右上に付ける小さな丸。新しいものがあることだけを伝え、件数を添えることもある。

## 使いどころ
- 未読があることを、場所を取らずに知らせたいとき
- 件数まで出すと圧迫感がある場面

## 実装の要件
- position: relative の親に、absolute の丸を重ねる
- 読み上げ用の文言は親要素の aria-label に入れる
- 消し方が分からないと、ずっと気になり続ける。開いたら消える決まりを守る
- 件数が3桁になると読めない。「99+」で丸める
- 赤い丸だけでは、色が見えにくい人に伝わらない。読み上げの文言で補う

## アクセシビリティの要件
- 丸そのものは aria-hidden="true" にし、親のボタンの名前に件数を含める（「お知らせ 3件の未読」）
- 件数の変化は aria-live="polite" で控えめに伝える
- 色に頼らず、数字か文字で意味を持たせる

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

```html
<button class="x-notification-dot" type="button" aria-label="お知らせ 3件の未読">
  <i class="fa-regular fa-bell" aria-hidden="true"></i>
  <span class="x-notification-dot__n" aria-hidden="true">3</span>
</button>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-notification-dot,
.x-notification-dot *:not([class*="fa-"]),
.x-notification-dot *:not([class*="fa-"])::before,
.x-notification-dot *: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-notification-dot {
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid #cfd4dc;
  border-radius: 8px;
  background: #fff;
  color: #1b2028;
  font-size: 15px;
  cursor: pointer;
}
.x-notification-dot__n {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
```

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