Ripple

`<pura-ripple>` wraps any clickable surface and expands a Material-style ripple from the pointer position on press, fading it out. The motion is pure CSS `@keyframes`: JS only spawns the ripple span at the right coordinates and removes it on `animationend`, so there is no animation runtime. Theme it with `--pura-ripple-color`, `--pura-ripple-opacity`, and `--pura-ripple-duration`; use `centered` for icon buttons and `disabled` to switch it off. Under reduced motion the ripple resolves instantly via the base reset. It registers in `window.__puraRipples` by `data-pura-id` for agent enumeration.

Preview

<pura-ripple>
  <button>Press me</button>
</pura-ripple>

<!-- Icon button: ripple from center, custom color -->
<pura-ripple centered style="--pura-ripple-color: #2563eb;">
  <button aria-label="Favorite">★</button>
</pura-ripple>

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

import "./pura/lib/ripple.js";