Hover Highlight

`<pura-hover-highlight>` renders a single highlight rectangle that slides and resizes smoothly from one item to another as the pointer moves across a list, menu or card grid, the way the Vercel docs sidebar does. The highlight sits behind the slotted items in the shadow root; each move is a FLIP step animated with WAAPI, and on leave it fades out in place so the next entry picks up from where it stopped. Items are the direct slotted children by default, or whatever `selector` matches inside the slot. Keyboard focus drives the highlight exactly like hover. `padding` grows the highlight beyond the item rect (useful as a soft halo behind cards), `duration` and `easing` shape the slide, and `--pura-hover-highlight-bg` / `--pura-hover-highlight-radius` / `--pura-hover-highlight-fade` theme it. SSR renders the items with no highlight; reduced motion swaps the slide for an instant jump. Each instance registers in `window.__puraHoverHighlights` by `data-pura-id` with `{ highlight(index), clear }`, and `data-pura-hh-active` mirrors the active item index.

Preview

<!-- sidebar nav: the pill slides between links as hover or focus moves -->
<pura-hover-highlight style="display: flex; flex-direction: column;">
  <a href="/docs">Docs</a>
  <a href="/guides">Guides</a>
  <a href="/api">API</a>
</pura-hover-highlight>

<!-- card grid: a soft halo slides behind the hovered card -->
<pura-hover-highlight selector=".card" padding="8" duration="350"
  style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; --pura-hover-highlight-radius: 1rem;">
  <article class="card"><img src="https://picsum.photos/seed/hh1/400/240" alt="" /></article>
  <article class="card"><img src="https://picsum.photos/seed/hh2/400/240" alt="" /></article>
  <article class="card"><img src="https://picsum.photos/seed/hh3/400/240" alt="" /></article>
</pura-hover-highlight>

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

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