Stat

Preview

<Stat value="1,284" label="Active permits" />

With a caption

The sub line is muted meta — a delta, a reporting period, a qualifier. Keep it short enough not to compete with the label.

<Stat value="1,284" label="Active permits" sub="+12 this quarter" />
<Stat value="94%" label="On-time review" sub="rolling 90 days" />

Accent

accent tints the value with --color-content-brand. Use it to single out one figure in a row — a headline number among supporting ones. A row where every stat is accented reads as no emphasis at all.

<Stat value="14" label="Monitored sites" />
<Stat value="3" label="Needs attention" accent />
<Stat value="27" label="Reports filed" />

Stat rows

The component is a bare flex column with a transparent background and no padding of its own — the surface is the caller's job. Lay a row out with a layout primitive or a grid; wrap it in an esa-card when the group needs chrome. Deliberately no <esa-stat-group>: spacing between stats belongs to the page, not to the metric.

<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;">
  <Stat value="14" label="Monitored sites" sub="across 3 counties" />
  <Stat value="1,284" label="Active permits" sub="+12 this quarter" />
  <Stat value="94%" label="On-time review" sub="rolling 90 days" />
  <Stat value="3" label="Needs attention" accent />
</div>

API

Accessibility

• Renders plain <div>s — no heading semantics. The value is not an <h*>, so a stat row never disturbs the page's heading outline.
• The value comes before the label in the DOM, which is also the reading order screen readers announce. Keep the label self-describing ("Active permits", not "Active") so the pair makes sense read aloud.
• Abbreviate carefully: 1.2M is announced as written. Prefer the full figure, or add an aria-label at the call site.
• accent is decoration, not meaning — never let the tint be the only signal that a number is the alarming one. Say so in the label or sub.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-stat is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.