Intent

`<pura-intent>` is an agent-native, non-visual component: it renders `display: contents` (its children flow as if the wrapper didn't exist) and adds no styling of its own. Its value lies in the semantic layer it reflects on the host in light DOM (`role="region"`, `aria-label`, `data-intent`, and `data-intent-actions`) and in a global registry `window.__puraIntents`, letting agents discover "what this area is for" and "what can be done here" by scanning the DOM. Use it to annotate UI sections with declared goals and actions (via JSON) that AIs and assistive technologies can enumerate.

Preview

<pura-intent goal="Complete the cart checkout" actions='[{"name":"submit","label":"Confirm order"},{"name":"cancel","label":"Cancel"}]'>
  <section>
    <h3>Order summary</h3>
    <p>Total: $149.90</p>
    <button>Confirm order</button>
  </section>
</pura-intent>

<script type="module">
  import "/pura/lib/intent.js";
  // Agents enumerate annotated regions via the DOM or the global registry:
  const regioes = document.querySelectorAll('[data-intent]');
  const snapshot = window.__puraIntents; // [{ id, goal, element, actions }]
</script>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/intent.js"></script>

import "./pura/lib/intent.js";