Meter
canonA 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 …
Default
export const Default = () => (
<div style={{ width: 320 }}>
<Meter pct={62} />
</div>
);Variants
export const Variants = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="default — positive fill">
<Meter pct={45} />
</Labeled>
<Labeled text={`usage ${86} % — tone warn (usageTone > 80 %)`}>
<Meter pct={86} tone={usageTone(86)} />
</Labeled>
<Labeled text={`usage ${112} % — tone crit (usageTone > 100 %), clamped to a full bar`}>
<Meter pct={112} tone={usageTone(112)} />
</Labeled>
<Labeled text="KPI not reached — fillColor accent">
<Meter pct={38} fillColor="var(--accent)" />
</Labeled>
<Labeled text="KPI reached — fillColor positive">
<Meter pct={100} fillColor="var(--positive)" />
</Labeled>
<Labeled text="no value in the host's text — ariaLabel makes it role=img">
<Meter pct={70} ariaLabel="Vytížení zasedačky 70 %" />
</Labeled>
</div>
);Sizes
export const Sizes = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
<Labeled text="default — 6 px">
<Meter pct={62} />
</Labeled>
<Labeled text='size="sm" — 4 px, dense rows (meeting rail speaker share, list cells)'>
<Meter pct={62} size="sm" />
</Labeled>
<div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-2)' }}>
<span style={label}>34 %</span>
<Meter pct={34} size="sm" fillColor="var(--accent)" style={{ width: 56 }} />
</div>
</div>
);States
export const States = () => (
<div style={{ display: 'grid', gap: 'var(--sp-5)', paddingTop: 'var(--sp-3)' }}>
<Labeled text="mark under the value — 72 % against threshold 60 %">
<Meter pct={72} mark={60} ariaLabel="Jistota 72 %" markLabel="práh 60 %" />
</Labeled>
<Labeled text="mark over the value — 38 % against threshold 60 %">
<Meter pct={38} mark={60} ariaLabel="Jistota 38 %" markLabel="práh 60 %" />
</Labeled>
<Labeled text="mark with tone warn — 86 % against limit 80 %">
<Meter pct={86} tone={usageTone(86)} mark={80} />
</Labeled>
<Labeled text="mark at the edges (0 and 100) stays inside the rounded track">
<div style={{ display: 'grid', gap: 'var(--sp-2)' }}>
<Meter pct={20} mark={0} />
<Meter pct={20} mark={100} />
</div>
</Labeled>
</div>
);Composition
export const Composition = () => (
<div style={{ display: 'flex', gap: 'var(--sp-4)', flexWrap: 'wrap' }}>
<Tile lbl="Schůzky" value="14" target="/ cíl 20" pct={70} sub="zbývá 6 do konce měsíce" />
<Tile lbl="Nové obchody" value="12" target="/ cíl 10" pct={100} sub="cíl splněn" reached />
</div>
);