アバターグループAvatar group

「アバターグループ（Avatar group）」を実装してください。

## これは何か
丸い顔アイコンを少しずつ重ねて横一列に並べ、入りきらない人数を最後の丸に「+5」とまとめて見せる表示。参加者やメンバーの顔ぶれに使う。

## 使いどころ
- プロジェクトや会議の参加者、共同編集中のメンバーを狭い場所で見せたいとき
- 「誰が関わっているか」の顔ぶれと、おおよその人数を一目で伝えたいとき

## 実装の要件
- ul[role=list] > li（1人ずつ）。li は丸く切り抜き、2つ目以降に負の margin-left を付けて重ねる
- 各 li に地の色と同じ白の border（2px 前後）を付けて境目を作る
- 最後の li を「+n」の丸にし、濃い地で顔ではないことを見分けさせる
- 表示する人数の上限は定数で持ち、合計が上限を超えたときだけ「+n」を出す
- 1人の利用者を表す丸い画像はアバター。こちらはそれを重ねて並べた「集団」の表示で、名前を1人ずつ出す場所ではない
- 重ねるのは4〜5人までにし、残りは「+5」にまとめる。重ねすぎると顔が判別できず、数えるのも難しくなる
- 「+5」の記号だけにしない。読み上げには「ほか5人」と文字で渡し、画面にも「9人が参加中」のような合計を添える
- 重なりの境目は白い縁で示す。縁が無いと、似た色の顔が1つの塊に見える
- 全員の名前を見せたいなら「+5」を押せるボタンにして一覧を開く。そのときはボタンの名前を「+5 ほか5人を表示」のように、見えている文字を含めた言い方にする（WCAG 2.2 の 2.5.3 ラベルを含む名前）

## アクセシビリティの要件
- ul に role="list" と見出しへの aria-labelledby を付け、1人を1つの li にする
- 顔の画像には名前を alt で付ける。頭文字で代用するときは、頭文字を aria-hidden="true" にして名前を視覚的に隠した文字で渡す
- 「+5」は記号として aria-hidden="true" にし、「ほか5人」を読み上げ用の文字で持たせる
- 名前をホバーの title やツールチップだけで見せない。タッチ操作やキーボードでは出てこない
- 頭文字の文字色と地の色は 4.5:1 以上にする（WCAG 2.2 の 1.4.3 コントラスト（最低限））

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

```html
<div class="x-avatar-group">
  <p class="x-avatar-group__h" id="x-avatar-group-h">参加メンバー</p>
  <div class="x-avatar-group__row">
    <!-- 顔が重なって名前は見えないので、読み上げには一人ずつ名前を渡す -->
    <ul class="x-avatar-group__list" role="list" aria-labelledby="x-avatar-group-h">
      <li class="x-avatar-group__i x-avatar-group__i--a"><span aria-hidden="true">佐</span><span class="x-avatar-group__sr">佐藤 花子</span></li>
      <li class="x-avatar-group__i x-avatar-group__i--b"><span aria-hidden="true">鈴</span><span class="x-avatar-group__sr">鈴木 一郎</span></li>
      <li class="x-avatar-group__i x-avatar-group__i--c"><span aria-hidden="true">高</span><span class="x-avatar-group__sr">高橋 美咲</span></li>
      <li class="x-avatar-group__i x-avatar-group__i--d"><span aria-hidden="true">田</span><span class="x-avatar-group__sr">田中 健</span></li>
      <!-- 画面の「+5」は記号なので、読み上げには「ほか5人」と文字で渡す -->
      <li class="x-avatar-group__i x-avatar-group__more"><span aria-hidden="true">+5</span><span class="x-avatar-group__sr">ほか5人</span></li>
    </ul>
    <p class="x-avatar-group__n">9人が参加中</p>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-avatar-group,
.x-avatar-group *:not([class*="fa-"]),
.x-avatar-group *:not([class*="fa-"])::before,
.x-avatar-group *: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-avatar-group {
  width: 260px;
  max-width: 100%;
  color: #1b2028;
}
.x-avatar-group__h {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
}
.x-avatar-group__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.x-avatar-group__list {
  display: flex;
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;
}
/* 後ろの顔を少しずつ左へ重ねる。白い縁で1つずつの境目を見せる */
.x-avatar-group__i {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -10px;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.x-avatar-group__i--a {
  background: #dbeafe;
  color: #1e40af;
}
.x-avatar-group__i--b {
  background: #dcfce7;
  color: #166534;
}
.x-avatar-group__i--c {
  background: #fce7f3;
  color: #9d174d;
}
.x-avatar-group__i--d {
  background: #fef3c7;
  color: #92400e;
}
/* 残りの人数は顔と同じ丸に入れ、濃い地で「人ではない」ことを見分けさせる */
.x-avatar-group__more {
  background: #4b5563;
  color: #fff;
  font-size: 12px;
}
.x-avatar-group__n {
  margin: 0;
  color: #5b6472;
  font-size: 12px;
}
/* 画面には出さず、読み上げにだけ渡す */
.x-avatar-group__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
```

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