Stat and metric display components.
Basic Stats
Stats with Trends
Stats with Icons
Hero Stats
5-step sentiment scale · v2.7.0
The hero delta scale grew from 3 (positive / negative / neutral) to 5 with the addition of very_positive and very_negative for outlier deltas. Neutral colour shifted from --pa-text-color-2 (grey) to --pa-neutral. Compare the five deltas side-by-side below.
Square Stats
Square stats — mixed units · v2.6.0
v2.6.0 redesigned pa-stat--square so the decorative __symbol watermark sits inline with the big __number. Markup order alone drives visual order — pass is_prefix_symbol to render the symbol BEFORE the number for prefix currencies ($847K, ¥12.4M); leave it off for suffix units (87%, 23°C). Number font-size scales with the tile width via cqi (container-query inline-size), so a row of squares stays balanced regardless of grid breakpoint.
Square stats — fit-to-box + progressive disclosure · v2.9.0-rc04
Opt into fit mode with is_fit on a variant="square" stat. It emits
data-pa-stat-fit and wires the PureAdminStatFit hook
(pa-stat-fit.js). The primary __number is sized to fill the tile at the
largest font that still fits — never overflows, independent of character count (a pure-CSS
cqi clamp can't guarantee that). A priority ladder reveals rows as the tile earns
both width and height:
__number (P0) → __symbol (P1) → __label (P2) →
__change (P3) → __context (P4). Fit mode
requires a height source on the tile (each tile below sets an explicit height).
Priority ladder — same content, growing box
Watch the tiers appear as each tile gets taller / wider. Smallest shows the number only; the largest reveals all five rows. The number always fits and stays maxed.
Char-count independence — same box, different numbers
All four tiles are the same size. Each number fills its box at the max font that fits, whatever the character count.
Wide banner layout (pa-stat--fit-wide)
Once a fit tile is ≥ 32rem wide, pa-stat-fit.js toggles the
pa-stat--fit-wide class and the tile flips to a horizontal banner — the number fills
the left, the metadata stacks in a column to its right. This full-width tile is wide enough to
trigger it; the narrow one above stacks vertically.