Hover Underline

`<pura-hover-underline>` wraps a link or nav item and draws an animated underline on hover and keyboard focus: the Hover.css "Underline From Left/Center/Right" and "Underline Reveal" moves. The underline is a real shadow element (exposed via `::part(underline)`) transitioned with pure CSS, so no per-frame JS runs. `from` picks where the grow variant starts (left, center or right), `variant="reveal"` rises the bar from the baseline instead, `duration` sets the transition time and `active` keeps the underline shown for the current nav item (also the SSR static state). Theme it with `--pura-hover-underline-color`, `--pura-hover-underline-thickness`, `--pura-hover-underline-offset`, `--pura-hover-underline-radius` and `--pura-hover-underline-ease`. Slotted links drop their native `text-decoration` so the animated bar is the only underline. Keyboard focus inside the element draws the underline exactly like hover; reduced motion makes it appear instantly. Each instance registers in `window.__puraHoverUnderlines` by `data-pura-id` with `{ from, variant, show, hide }`.

Preview

<!-- nav bar: underline grows from the center on hover/focus; active page stays underlined -->
<nav style="display: flex; gap: 1.5rem;">
  <pura-hover-underline from="center" active><a href="/">Home</a></pura-hover-underline>
  <pura-hover-underline from="center"><a href="/docs">Docs</a></pura-hover-underline>
  <pura-hover-underline from="center"><a href="/blog">Blog</a></pura-hover-underline>
</nav>

<!-- thick accent bar that rises from the baseline -->
<pura-hover-underline variant="reveal" duration="180"
  style="--pura-hover-underline-thickness: 0.4em; --pura-hover-underline-color: #f59e0b; --pura-hover-underline-offset: 0.05em;">
  <a href="/pricing">See pricing</a>
</pura-hover-underline>

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

import "./pura/lib/hover-underline.js";