Hold Confirm

`<pura-hold-confirm>` is the motion.dev "hold to confirm" move: a destructive or important action that requires a deliberate press-and-hold instead of a click. While the button is held, a ring fills around the indicator (a `stroke-dashoffset` transition running linearly over `duration`); releasing early snaps it back and fires `cancel`, holding to the end fires `confirm` and the ring morphs into a self-drawing check. Holding Space or Enter works like holding the pointer. The ring is functional progress feedback, so it is not gated behind reduced motion. Call `reset()` to arm the button again after a confirm. Each instance registers in `window.__puraHoldConfirms` by `data-pura-id` with `{ duration, confirm, reset }`.

Preview

<pura-hold-confirm duration="1500">Hold to delete</pura-hold-confirm>

<script>
  const hold = document.querySelector("pura-hold-confirm");
  hold.addEventListener("confirm", () => {
    deleteThing();
    hold.reset(); // arm it again
  });
</script>

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

import "./pura/lib/hold-confirm.js";