Stat

fandhe-frontend-pre-styled-ui の stat mod が提供するスタイル済み Stat 部品です。

数値指標を表示する部品です。label/value-text/value-unit/help-text/up-indicator/down-indicator/delta の 7 パーツで構成し、増減インジケータ（up-indicator/down-indicator）は装飾用途のため aria-hidden="true" を固定付与します。ラベルと値の一覧表示には Data List を検討してください。

size（xs〜xl、既定 md。chakra-ui の sm/md/lg は本実装の Sm/Md/Lg に対応）で value-text のフォントサイズが変化します。増減インジケータは固定セマンティック色（up-indicator は success、down-indicator は danger）を使用し、colorPalette 軸には連動しません。

delta パートは矢印を伴わず、tone（neutral/success/danger）の意味色だけで増減の良し悪しを示します。方向と色が固定の up/down-indicator と異なり、「増加しているが悪化」のような方向と意味が一致しない増減率も表現できます。ラベル・値（いずれも flex）の子として置くと行末へ自動で寄ります。

Demo

数値指標 1 件をラベル・値・補助テキスト・増減方向インジケーターの組で表示する静的部品です。size（xs〜xl、既定 md。chakra-ui の sm/md/lg は本実装の Sm/Md/Lg に対応）で value-text のフォントサイズを切り替えます。delta パート（イシュー #3138）は矢印を伴わず tone（neutral/success/danger）の意味色だけで増減の良し悪しを示します。

Revenue: 1,234USD

Churn: 4.2%

Sm: 1,234

Md: 1,234

Lg: 1,234

Error rate+4.75%（悪化）: 1.2%

Goal attainment+54.02%（改善）: 92%

Active sessions+0.3%: 8,492

Features

label/value-text/value-unit/help-text/up-indicator/down-indicator/delta の 7 パーツで指標表示を構造化する（crates/pre-styled-ui/src/stat.rs）
up-indicator/down-indicator は装飾用途のため aria-hidden="true" を固定付与する（stat.rs「プレーンな HTML を尊重するタグ選択」節）
呼び出し側が aria-hidden を渡してもフレームワーク値の後に連結される
delta（イシュー #3138）は矢印を伴わず tone（neutral/success/danger）の意味色だけで増減の良し悪しを示す。方向固定の up/down-indicator と異なり「増加しているが悪化」も表現できる（stat.rs「delta パートと tone 軸」節）

Anatomy

root
  label
  value-text
    value-unit
  help-text
    up-indicator
    down-indicator
    delta

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Md`	root（dl）のサイズ（xs〜xl、既定 md。chakra-ui の sm/md/lg は本実装の Sm/Md/Lg に対応）。
`tone`	`StatDeltaTone`	（既定なし・必須）	delta パートへ付与する意味色軸（neutral/success/danger）。root の class には影響しない（default_variant 未登録）。

CSS Variables

Variable	Default
`--fandhe-stat-value-font-size`	`var(--fandhe-font-font-size-2xl)`

Examples

Revenue

value-unit と up-indicator を組み合わせた指標表示の例です。

Revenue: 1,234USD

Trend delta

delta パート（tone=danger）でラベル行末に矢印なしの増減率を表示する例です（イシュー #3138）。

Error rate+4.75%（悪化）: 1.2%

Accessibility

WAI-ARIA

Attribute	Description
aria-hidden="true"（up-indicator/down-indicator のみ）	装飾用途の増減インジケータに固定付与される。root/label/value-text/delta 自体は固有の ARIA を出力しない（delta は可視テキストで情報を伝えるため aria-hidden を付けない）。