Step Loader

`<pura-step-loader>` is the multi-step loader for long operations, the pattern dominant in AI-product loading screens: a vertical checklist where each step shows a spinner while it runs and draws a check (animated `stroke-dashoffset`) when it completes, with the current step highlighted. Labels come from `steps` (pipe-separated) and `step` is the index of the step currently running; everything before it renders as done, so the SSR paint already shows the right state with zero JS. Add `auto` to advance one step per `interval` milliseconds on a WAAPI timer, plus `loop` to restart after finishing. It fires `advance` on every change and `complete` at the end, announces the current step in a polite live region, and under reduced motion the spinner becomes a static ring while auto mode still finishes. Each instance registers in `window.__puraStepLoaders` by `data-pura-id` with `{ step, total, advance, reset }` and mirrors state in `data-pura-step` / `data-pura-state`.

Preview

<!-- auto mode: advances one step per interval, loops while you wait -->
<pura-step-loader auto loop interval="1200"
  steps="Uploading file|Extracting text|Generating summary">
</pura-step-loader>

<!-- manual mode: bump step as your real pipeline progresses -->
<pura-step-loader id="deploy" steps="Building|Running tests|Publishing"></pura-step-loader>
<script type="module">
  const loader = document.getElementById("deploy");
  loader.addEventListener("complete", () => console.log("deployed"));
  await build();   loader.setAttribute("step", "1");
  await test();    loader.setAttribute("step", "2");
  await publish(); loader.setAttribute("step", "3");
</script>

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

import "./pura/lib/step-loader.js";