Direction Hover

`<pura-direction-hover>` is the direction-aware hover card: the overlay caption (slot `overlay`) slides in from the same edge the cursor entered the card through, and slides out through the exit edge. On `pointerenter` the entry quadrant is computed via `atan2` of the entry point and written to `data-dir` on the host; the overlay is parked at that edge with the transition suppressed for one frame, then slides to center with a plain CSS transition. `duration` and `easing` tune the slide; `--pura-direction-hover-bg`, `--pura-direction-hover-fg`, `--pura-direction-hover-padding` and `--pura-direction-hover-radius` tune the look. Keyboard focus inside the card shows the overlay via `:focus-within`; touch pointers are ignored. SSR and reduced motion both render the card at rest with no overlay covering the media. Each instance registers in `window.__puraDirectionHovers` by `data-pura-id` with `{ show, hide }`.

Preview

<!-- caption slides in from the edge the cursor enters through -->
<pura-direction-hover style="aspect-ratio: 4 / 3;">
  <img src="/photos/lisbon.jpg" alt="Lisbon rooftops" />
  <div slot="overlay">
    <h3>Lisbon</h3>
    <p>Rooftops at golden hour</p>
  </div>
</pura-direction-hover>

<!-- slower slide with a custom look -->
<pura-direction-hover duration="500" easing="cubic-bezier(0.22, 1, 0.36, 1)"
  style="aspect-ratio: 1; --pura-direction-hover-bg: rgba(20, 20, 30, 0.85); --pura-direction-hover-radius: 1rem;">
  <img src="/photos/team/ana.jpg" alt="Ana, design lead" />
  <div slot="overlay"><strong>Ana</strong> Design lead</div>
</pura-direction-hover>

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

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