Animated Theme Toggle

`<pura-theme-toggle>` is an animated light/dark switch: clicking it wraps the `document.documentElement.dataset.theme` flip in a View Transition, so the new theme expands as a circle from the button's center (`clip-path: circle()` animated on `::view-transition-new(root)`) instead of swapping abruptly. It plugs straight into pura's theme infra: the same `[data-theme]` attribute `tokens.css` reads, and when the attribute is absent the icon follows `prefers-color-scheme`. `duration` and `easing` shape the reveal. Browsers without the View Transitions API, and users with reduced motion, get an instant swap; SSR renders a static button whose sun/moon icon already matches the OS preference. Fires `toggle` with `{ theme }` after each flip, and each instance registers in `window.__puraThemeToggles` by `data-pura-id` with `{ theme, toggle, setTheme }`.

Preview

<!-- drop it in a header; it drives document-level [data-theme] directly -->
<pura-theme-toggle></pura-theme-toggle>

<!-- slower reveal, custom easing, themed as a filled round button -->
<pura-theme-toggle
  duration="800"
  easing="cubic-bezier(0.4, 0, 0.2, 1)"
  style="--pura-theme-toggle-bg: var(--pura-surface, #f4f4f5); --pura-theme-toggle-radius: 9999px;"
></pura-theme-toggle>

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

import "./pura/lib/theme-toggle.js";