Narrated Transition

`<pura-narrated-transition>` runs a UI state change inside the native View Transitions API like `<pura-view-transition>`, but it *narrates* the change: it captures the named state before and after, diffs them, and emits a structured `transitionnarrate` event `{ from, to, reason, changed }` plus a polite screen-reader announcement. Where a plain view transition only answers "play a morph", this also answers "it went from `{status:'idle'}` to `{status:'done'}` because 'order placed', changing `status`", so an agent reading the page learns the semantic delta, not just that pixels moved. You own the state: seed it with the `.state` property (or a JSON `state` attribute), then drive changes through `transition({ to, reason }, updateFn)` (morph + narrate) or `narrate(to, reason)` (narrate only). Under reduced motion or an unsupported engine the morph degrades to an instant update while the narration still fires identically. Each instance registers in `window.__puraNarratedTransitions` by `data-pura-id` and mirrors the latest narration in `data-pura-narration-reason` / `data-pura-narration-changed`.

Preview

<pura-narrated-transition id="order" state='{"status":"idle"}'>
  <div id="panel">idle</div>
</pura-narrated-transition>

<script type="module">
  const nt = document.getElementById('order');
  nt.addEventListener('transitionnarrate', (e) => console.log(e.detail));
  await nt.transition(
    { to: { status: 'done' }, reason: 'order placed' },
    () => { document.getElementById('panel').textContent = 'done'; },
  );
  // -> { from:{status:'idle'}, to:{status:'done'}, reason:'order placed',
  //      changed:[{ key:'status', from:'idle', to:'done' }] }
</script>

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

import "./pura/lib/narrated-transition.js";