Rating
`<pura-rating>` is a star rating selector that accepts click, hover, and full keyboard input (arrows, Home/End, number keys), with optional half-star support. Use it in feedback forms, reviews, or any rating capture from 0 up to `max`. The agent-native layer mirrors the live state in `data-pura-rating-*` attributes (value, max, readonly, step) on the element itself and registers each instance in `window.__puraRatings` (keyed by `data-pura-id`), allowing agents to read and drive every rating on the page without inspecting the shadow DOM.
Preview
<pura-rating id="nota" value="3" max="5" allow-half label="Rate the product"></pura-rating>
<p id="saida">Selected rating: 3</p>
<script type="module">
const r = document.getElementById("nota");
const out = document.getElementById("saida");
r.addEventListener("change", (e) => {
out.textContent = "Selected rating: " + e.detail.value;
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating. It can be fractional (0.5) when allow-half is active; it is clamped between 0 and max. |
max | number | 5 | Number of stars. |
readonly | boolean | false | Read-only mode: not interactive and not focusable (tabindex -1). |
allow-half | boolean | false | Allows half-star increments (0.5) on hover, click, and keyboard. |
label | string | "Rating" | Accessible label (aria-label of the slider). |
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/rating.js"></script>import "./pura/lib/rating.js";