Components › Records & data › Stat tile › Meter

Meter

canon

A thin static bar showing how full something is against a limit or a goal; the value stands next to it as text.

AD 26 Sep 2026 (wave B inventory): Meter and Progress are two legitimate elements, the same pair as HTML <meter> vs <progress>. Meter = a static ratio to a limit or goal (budget drawn, room occupancy, KPI, progress to promotion, project done/total, portfolio weight); Progress = work running now that ends done or failed. 7 uses on main (Rozpočty ×2, Zasedačky, Tým detail, Člen týmu KPI + Rozpočty, Portfolio výsledky, StatTile pct); Kariéra (.kar-bar, acrm !3898) and the public project page (ProgressBar.tsx deleted, .dp-*, acrm !3900) were migrated onto it on 27 Sep 2026. Moved into @acrm/ui on 27 Sep 2026 (acrm !3929: Meter + usageTone, CSS layer ds/meter.css, stories with baseline, zero visual change on 776 snapshots). TaskList .tl-prog turned out to be dead API (no screen passed progress/pct) and is deleted (acrm !3947). Track = --border like Progress — approved by the owner 27 Sep 2026 (preview meter-draha: the --surface-75 track was practically invisible on white cards). Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories.

Used in 19 files · 15 areas · 23× — components/StatTile, components/agent-desk, components/assistant, components/clen-tymu, components/mail, components/meetings …

@acrm/ui <Meter>.fin-bar .fin-bar-fill .fin-bar-fill.warn .fin-bar-fill.critSourceStory
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Not focusable; it is not a control.

ARIA

  • Without ariaLabel the bar is decorative (aria-hidden) — the value must stand next to it as text.
  • With ariaLabel it is role="img" with that label; use it only where the value is not in the text next to it, and say the value in the label („Čerpání 62 %").

Focus

  • None.

Contrast

  • Fill tokens --positive, --warning, --critical, --accent on the track; the meaning never rests on colour alone — the number is in the text.

Known limits

  • No role="meter": support in screen readers is uneven, so the value is carried by the text next to the bar instead.

Threshold mark (acrm !4414)

  • The mark is visual only; its meaning goes into the accessible name via markLabel (with ariaLabel) or into the host text. Colour is never the only carrier: the mark is a shape (vertical tick with overshoot), not a colour change.

Source: docs/stat-tile/meter.a11y.md · GitLab