Stat
Single-metric primitive. Label, value, optional delta, optional caption. Pure HTML/CSS, no JS class. Compose with Card for a surface, with Sparkline for the trend strip, or with Grid for a KPI row. The delta indicator is just a small Badge with the right tone and a trending-up / trending-down / minus icon — reusing the system's status palette so it stays in lockstep with the theme.
a11y (built in): Stat ships no roles and no JS controller — label, value and caption are plain text in DOM order, so it inherits whatever heading structure the host page already has. The optional leading glyph is aria-hidden="true" and always fg-muted: the .lb-stat__label text carries the meaning. Direction never rides on color alone — each delta Badge pairs its tone with a trending-up / trending-down / minus glyph beside the value.
Usage: .lb-stat wrapper holds .lb-stat__label, .lb-stat__value, optional .lb-stat__sub with a Badge and .lb-stat__caption. Modifiers: --compact, --row.
Default
Label + value is the minimum.
With delta chip
Three tones via the Badge component — success for gains, danger for losses, default for flat. Pair with trending-up / trending-down / minus icons.
With caption — comparison context
A short note next to the delta tells the reader what the comparison is against.
With icon — scan anchors for large grids
Optional leading icon in the label row: <span class="lb-stat__icon" data-lb-icon="…"> before the label text, aria-hidden (the label carries the meaning), always fg-muted — never accent or delta colors. Absent by default — an icon on every tile adds noise without adding meaning; icons earn their place only as scan anchors in large mixed-metric dashboards. Consistency rule: all tiles in a grid get one, or none — skip them on small same-family strips.
KPI strip — Stat × Card × Grid
The dashboard pattern: four Cards in a Grid, each holding a Stat. Tokens carry the surface and breathing.
Compact — for dense sidebars
--compact drops the value to a heading-s scale so multiple stats fit a narrow rail.