Stat Grid
The `<pura-stat-grid>` is a container that arranges `<pura-stat>` elements into a fluid grid (auto-fit columns, no fixed count) with 1px dividers that adapt to however many columns wrap at the available width. Use it for KPI panels, dashboard summaries, or blocks of highlighted numbers. Agent-native layer: each grid gets a stable `data-pura-stat-grid` id and registers a live, machine-readable snapshot in `window.__puraStats[id]` in the format `{ label, stats: [{ id, label, value, delta, trend }] }`, letting agents read the metrics without scraping the DOM; each `<pura-stat>` also exposes a public `snapshot()` method.
Preview
<pura-stat-grid label="Monthly overview" min="13rem">
<pura-stat label="Revenue" value="$128,430" delta="+12.5%" trend="up">
<span slot="help">vs. previous month</span>
</pura-stat>
<pura-stat label="New customers" value="342" delta="+8.1%" trend="up"></pura-stat>
<pura-stat label="Churn rate" value="2.3%" delta="-0.4 pp" trend="down"></pura-stat>
<pura-stat label="Average order value" value="$375" delta="0.0%" trend="flat"></pura-stat>
</pura-stat-grid>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible name for the group (becomes the aria-label and the snapshot's label field in the registry). Attribute of <pura-stat-grid>. |
min | string (CSS length) | 11rem | Minimum width of each column before it wraps to the next row. Attribute of <pura-stat-grid>. |
dividers | string | (present) | Controls the 1px lines between cells. Use dividers="none" to remove them. Attribute of <pura-stat-grid>. |
label | string | — | Text for the cell's label, used when the label slot is empty. Attribute of <pura-stat>. |
value | string | — | Text for the cell's value, used when the default slot is empty. Attribute of <pura-stat>. |
delta | string | — | Change text (e.g. "+12.5%") rendered next to the value. Attribute of <pura-stat>. |
trend | up | down | flat | — | Change direction: colors the delta (green/red/neutral), adds an arrow, and exposes the direction via data-trend and aria-label. Attribute of <pura-stat>. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/stat-grid.js"></script>import "./pura/lib/stat-grid.js";