Idle
`<pura-idle>` is a non-visual wrapper (display: contents) that monitors input events and fires the transition to idle when the inactivity time expires, useful for auto-save, auto-lock, and "are you still there?" prompts. Being agent-native, it exposes a machine-readable layer: `data-*` attributes on the light host, the `status` ARIA role/`aria-live`, and a global registry `window.__puraIdle` (with `.anyActive()` / `.allIdle()`) that lets agents inspect human presence across the whole page without touching the shadow DOM. Use it when you need to react to the user's absence or signal that presence programmatically.
Preview
<pura-idle id="detector" timeout="3000">
<div id="painel" style="padding: 16px; border: 1px solid #ddd; border-radius: 8px;">
<p>State: <strong id="estado">active</strong></p>
<p style="color:#666; font-size:13px;">Stop moving the mouse and keyboard for 3 seconds to see the state turn "idle".</p>
<button id="ping" type="button">I'm here (reset)</button>
</div>
</pura-idle>
<script type="module">
import "/pura/lib/idle.js";
const det = document.getElementById("detector");
const estado = document.getElementById("estado");
const painel = document.getElementById("painel");
det.addEventListener("pura-idle:change", (e) => {
const ocioso = e.detail.idle;
estado.textContent = ocioso ? "idle" : "active";
painel.style.opacity = ocioso ? "0.5" : "1";
});
document.getElementById("ping").addEventListener("click", () => det.reset());
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
timeout | number | 60000 | Inactivity window in ms before going idle. Non-numeric or negative values fall back to the default. |
events | string | mousemove keydown pointerdown wheel touchstart scroll | Space-separated list of input events to observe. An empty attribute keeps the defaults. |
target | string | document | Where to listen: "document" | "window" | "self" (host only, scoped activity). |
paused | boolean | false | When present, suspends the timer (always reported as active, no transitions) until it is removed. |
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/idle.js"></script>import "./pura/lib/idle.js";