Gauge
`<pura-gauge>` is a read-only meter: it draws a 180-degree SVG arc filled from `min` to `value`, with a needle that rotates and the numeric value plus an optional label in the center. Use it to indicate progress, occupancy, a score, or any scalar reading (CPU usage, NPS, battery). Beyond role="meter" with full ARIA, it exposes an agent-native layer: `data-pura-gauge-*` attributes mirror the live state, and each instance registers itself in `window.__puraGauges` (by `data-pura-id`), so an agent can enumerate and read every gauge on the page without inspecting the internal DOM.
Preview
<pura-gauge value="72" min="0" max="100" label="CPU usage" style="width:12rem"></pura-gauge>
<!-- Update via property or attribute -->
<script type="module">
import "/pura/lib/gauge.js";
const g = document.querySelector("pura-gauge");
g.value = 85; // also accepts setAttribute("value", "85")
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current reading, clamped within [min, max]. |
min | number | 0 | Start of the scale. |
max | number | 100 | End of the scale. If max <= min, it becomes min+1. |
label | string | "" | Caption shown below the value and used as the accessible name. |
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/gauge.js"></script>import "./pura/lib/gauge.js";