Stat
The `<pura-stat>` displays a numeric indicator (KPI) with a label, a main value, and a change (delta) that automatically gains an arrow and color: green for an increase, red for a decrease, neutral for stable. Use it in dashboards and summary panels where each number needs to communicate a trend at a glance. It is agent-native: in addition to mirroring its live state in stable `data-pura-stat-*` attributes, each instance registers itself in `window.__puraStats` (a map keyed by `data-pura-id`), letting an agent enumerate and read all the metrics on the page without inspecting the DOM.
Preview
<div style="display:flex;gap:1rem;flex-wrap:wrap">
<pura-stat label="Revenue" value="$48.2k" delta="+12%">
<svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
</pura-stat>
<pura-stat label="Cancellations" value="3.4%" delta="-1.2%"></pura-stat>
<pura-stat label="Active customers" value="1,204" delta="0%" trend="flat"></pura-stat>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Descriptive caption for the metric (e.g. "Revenue"). |
value | string | — | The prominent number (e.g. "$48.2k", "1,204"). |
delta | string | — | Change text (e.g. "+12%", "-3.4%"). The delta line only appears when filled in. |
trend | "up" | "down" | "flat" | (inferred from the sign of the delta) | Arrow direction and color. When omitted, it is inferred from the sign of the delta (+ = up, - = down, otherwise flat). |
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.js"></script>import "./pura/lib/stat.js";