メーター

hc-meter は標準の <meter> 要素に適用します — 既知の範囲内のスカラー計測値(ディスククォータ、スコア、容量)を表し、 hc-progress(タスクの進捗)と対をなします。ネイティブ要素は role="meter" のセマンティクスと value / min / max / low / high / optimum 属性を保ち、視覚的なクロームだけが appearance: none とベンダーごとの疑似要素で置き換えられます。

別名: ゲージ、レベル表示。

基本の HTML

Review score7 of 10

<label for="score">Review score</label>
<meter class="hc-meter" id="score" min="0" max="10" value="7">7 of 10</meter>

テキストの子(7 of 10)は <meter> を描画しないユーザーエージェントのためのフォールバックです — 意味のある内容に保ってください。

ステータス領域

low / high / optimum は現在値の分類方法をブラウザに伝えます。コンポーネントは 3 つの領域をステータストークンに対応づけます — data-variant は不要で、色はデータから導かれます:

領域	条件	カラートークン
optimum	値が最良の帯にある	`meter.optimum-fill`(success)
suboptimum	1 帯離れている	`meter.suboptimum-fill`(warning)
critical	2 帯離れている	`meter.critical-fill`(error)

Storage used — 42%42%Storage used — 82%82%Storage used — 97%97%

<!-- optimum=10 declares "low is good": ≤70 green, 70–90 amber, ≥90 red -->
<meter class="hc-meter" min="0" max="100"
       low="70" high="90" optimum="10" value="82">82%</meter>

「高いほど良い」スケール(バッテリー、スコア)では optimum を max 側に振ってください — 同じ帯が逆方向に色づきます。

サイズ

data-size は sm、md(デフォルト)、lg を受け付けます。

40%40%40%

<meter class="hc-meter" data-size="sm" min="0" max="100" value="40" aria-label="Small">40%</meter>
<meter class="hc-meter"                min="0" max="100" value="40" aria-label="Default">40%</meter>
<meter class="hc-meter" data-size="lg" min="0" max="100" value="40" aria-label="Large">40%</meter>

メーターとプログレスの使い分け

用途	要素
完了に向かって進むタスク	`<progress class="hc-progress">`
既知の範囲内の計測値(クォータ、スコア、負荷)	`<meter class="hc-meter">`

<meter> に不確定状態はなく、<progress> に良し悪しの領域はありません — この区別は支援技術のために要素がエンコードするものなので、見た目ではなく意味で選んでください。

htmx での利用

<meter> は通常の DOM ノードです — 他の要素と同じようにスワップできます。例: アップロード後に再描画されるクォータのセル:

<meter class="hc-meter" id="quota" min="0" max="100"
       low="70" high="90" optimum="10" value="82"
       data-hx-get="/account/quota" data-hx-trigger="hc:uploaded from:body"
       data-hx-swap="outerHTML">82%</meter>

この hc:uploaded は(アップロード完了側が発火する)あなたのアプリのイベントで、キットのイベントではありません — htmx のトリガーなら何でも使えます(ポーリングするクォータなら every 30s など)。領域の色はスワップ時に自動で更新されます — スクリプトではなく、新しい value からブラウザが導出します。

アクセシビリティ

要素には常にアクセシブルな名前を与えてください — <label for> で包むか aria-label を使います。要素自体は値つきのメーターとして公開されるため、aria-valuenow のミラーリングは不要です。
フォールバックのテキストの子はサーバサイドで value と同期してください — コピー & ペーストやリーダーモードが見るのもこれです。
色は唯一のシグナルではありません: value / max のペアはアクセシビリティツリーにあり、目で見るラベルにも数値を載せるべきです(上のデモのように)。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
`meter.height`	トラックの高さ。
`meter.radius`	トラックの角丸。
`meter.bg`	トラックの背景。
`meter.optimum-fill`	最良領域のフィル(success)。
`meter.suboptimum-fill`	1 帯離れたフィル(warning)。
`meter.critical-fill`	2 帯離れたフィル(error)。
`meter.sm.height` / `lg.height`	サイズバリアント。

CSS 変数

生成される CSS 変数を表示

--hc-meter-height | -radius | -bg
--hc-meter-optimum-fill | -suboptimum-fill | -critical-fill
--hc-meter-sm-height | -lg-height