メーターMeter

「メーター（Meter）」を実装してください。

## これは何か
決まった範囲の中で、いまどのくらいの量かを帯で示す部品。「7.2GB / 10GB」のストレージやバッテリー残量に使い、多すぎ・少なすぎで色が変わる。

## 使いどころ
- ストレージの使用量、バッテリー残量、今月の通信量のように、上限の決まった量をいま示したいとき
- 量が多すぎる・少なすぎるときに、色と文言で注意を促したいとき

## 実装の要件
- meter 要素に min / max / value を付け、low / high / optimum で「良い・やや悪い・悪い」の3段階を決める。色はブラウザが段階に合わせて選ぶ
- 見た目は ::-webkit-meter-bar と ::-webkit-meter-optimum-value など（Chrome・Safari）、::-moz-meter-bar と :-moz-meter-sub-optimum など（Firefox）で整える
- optimum を low より下に置くと「少ないほど良い」（ストレージ）、high より上に置くと「多いほど良い」（バッテリー）になる
- プログレスバーは処理の進み具合（いずれ100%で終わる）を示す。メーターはいまの量を示し、100%に向かって進むものではない。ストレージ使用量にプログレスバーを使わない
- 上限の分からない量（アクセス数など）には使わない。帯の長さが意味を持たない
- 色だけで「危ない」を伝えない。「残りが少なくなっています」のように文言でも出す

## アクセシビリティの要件
- HTML の meter 要素を使い、label で名前を付ける。自前で作るなら role="meter" に aria-valuenow / aria-valuemin / aria-valuemax を付ける
- meter の読み上げ方は支援技術によって差があり、単位までは伝わらない。「7.2GB / 10GB」のような数値と単位を文字でも出す
- 状態は色の用途だけに頼らず、アイコンと文言を添える
- 帯と下地の境目を、非テキストのコントラスト（3:1）以上にする

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

```html
<div class="x-meter">
  <div class="x-meter__row">
    <div class="x-meter__head">
      <label class="x-meter__l" for="x-meter-s">ストレージ</label>
      <span class="x-meter__v">7.2GB / 10GB</span>
    </div>
    <meter class="x-meter__m" id="x-meter-s" min="0" max="10" low="7" high="9" optimum="0" value="7.2">7.2GB / 10GB</meter>
    <p class="x-meter__state x-meter__state--warn"><i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i> 残りが少なくなっています</p>
  </div>
  <div class="x-meter__row">
    <div class="x-meter__head">
      <label class="x-meter__l" for="x-meter-b">バッテリー</label>
      <span class="x-meter__v">85%</span>
    </div>
    <meter class="x-meter__m" id="x-meter-b" min="0" max="100" low="20" high="50" optimum="100" value="85">85%</meter>
    <p class="x-meter__state x-meter__state--ok"><i class="fa-solid fa-circle-check" aria-hidden="true"></i> 十分です</p>
  </div>
</div>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-meter,
.x-meter *:not([class*="fa-"]),
.x-meter *:not([class*="fa-"])::before,
.x-meter *: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-meter {
  display: grid;
  gap: 16px;
  width: 260px;
  max-width: 100%;
}
.x-meter__head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.x-meter__l {
  color: #1b2028;
  font-size: 13px;
  font-weight: 700;
}
.x-meter__v {
  color: #4b5563;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.x-meter__m {
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  border: 1px solid #7f8a99;
  border-radius: 999px;
  background: #e3e6ea;
  overflow: hidden;
}
/* 値の色は low / high / optimum から、ブラウザが3段階のどれかを選ぶ */
.x-meter__m::-webkit-meter-bar {
  height: 100%;
  border: 0;
  border-radius: 999px;
  background: #e3e6ea;
}
.x-meter__m::-webkit-meter-optimum-value {
  background: #15803d;
}
.x-meter__m::-webkit-meter-suboptimum-value {
  background: #b45309;
}
.x-meter__m::-webkit-meter-even-less-good-value {
  background: #b91c1c;
}
.x-meter__m::-moz-meter-bar {
  background: #15803d;
}
.x-meter__m:-moz-meter-sub-optimum::-moz-meter-bar {
  background: #b45309;
}
.x-meter__m:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: #b91c1c;
}
/* 色だけで状態を伝えない。同じ意味を文言とアイコンでも出す */
.x-meter__state {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 700;
}
.x-meter__state--warn {
  color: #92400e;
}
.x-meter__state--ok {
  color: #166534;
}
```

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