Status Badge

`<pura-status-badge>` is the motion.dev "statuses" move: a pill that morphs between async states. Set `state` to `idle`, `loading`, `success` or `error` and the badge animates the change: the icon crossfades and scales in (loading gets a mini ring spinner, success a self-drawing check, error a self-drawing cross), the background color tweens, and the pill width morphs with a FLIP animation (the element measures the old and new widths and animates between them; everything else is CSS). `role="status"` announces label swaps to screen readers; reduced motion swaps states without transitions. Labels come from `idle-label` / `loading-label` / `success-label` / `error-label`; colors from `--pura-status-*-bg` tokens. Each instance registers in `window.__puraStatusBadges` by `data-pura-id` with `{ state, set }`.

Preview

<pura-status-badge id="save-status"
  idle-label="Save" loading-label="Saving"
  success-label="Saved" error-label="Retry"></pura-status-badge>

<script>
  const badge = document.getElementById("save-status");
  async function save() {
    badge.setAttribute("state", "loading");
    try {
      await api.save();
      badge.setAttribute("state", "success");
    } catch {
      badge.setAttribute("state", "error");
    }
  }
</script>

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

import "./pura/lib/status-badge.js";