Action
`<pura-action>` wraps a control in the default slot and exposes it as a machine-readable affordance: it mirrors `data-agent-action`/`data-intent` attributes and an `aria-label` onto the control in the light DOM, and registers the action in a global registry `window.__puraActions` (a Map indexed by `action-id`) whose entries expose `invoke()`. Use it so AI or browser agents can discover, understand (via `intent`), and trigger your UI's actions programmatically, without relying on brittle DOM heuristics. It is a transparent wrapper (`display: contents`), so it does not change the layout of the wrapped control.
Preview
<pura-action id="acao-salvar" intent="save document" action-id="save-doc" params='{"force":false}'>
<button>Save document</button>
</pura-action>
<p id="acao-status">Waiting for action...</p>
<button id="acao-invoke">Invoke via agent</button>
<script type="module">
const status = document.getElementById('acao-status');
document.getElementById('acao-salvar').addEventListener('invoke', (e) => {
status.textContent = 'Action "' + e.detail.intent + '" (' + e.detail.actionId + ') invoked. params=' + JSON.stringify(e.detail.params);
});
// Simulates an agent discovering and triggering the action through the global registry.
document.getElementById('acao-invoke').addEventListener('click', () => {
window.__puraActions?.get('save-doc')?.invoke();
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
intent | string | — | Human/agent-readable verb phrase describing the action, e.g. "save document". Mirrored as data-intent and used as the control's aria-label if it does not already have one. |
action-id | string | — | Stable identifier used as the key in the window.__puraActions registry and mirrored as data-agent-action on the control. Without it the action is not discoverable. |
params | json | — | JSON object describing the action's parameters. It is parsed (invalid JSON becomes null) and exposed in the event detail and in the registry entry. |
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/action.js"></script>import "./pura/lib/action.js";