Hide-on-scroll Bar

`<pura-hide-on-scroll>` is the shy navbar: wrap a header (or any bar) in it and the bar slides out of view when the user scrolls down, then reappears the moment they scroll back up. Below `threshold` it never hides; `tolerance` filters out trackpad jitter. The `shrink` variant also condenses the bar (tighter `padding-block` plus a shadow, themeable via `--pura-hide-on-scroll-*` tokens) once past the threshold. `position="bottom"` makes a bottom banner that slides down instead, and `fixed` switches from sticky to fixed positioning. A single passive, rAF-throttled scroll listener on the nearest scroll container compares the previous scroll position and only flips `data-direction` and `data-pura-hos-hidden` / `data-pura-hos-shrunk` on the host; the CSS transition on `transform` does all the motion. SSR and pre-JS render a plain visible sticky bar; reduced motion turns the slide into a hard cut. Each instance registers in `window.__puraHideOnScrolls` by `data-pura-id` with `{ show, hide }`.

Preview

<!-- shy site header: hides on scroll down, returns on scroll up -->
<pura-hide-on-scroll threshold="100" style="--pura-hide-on-scroll-bg: white;">
  <header class="site-nav">
    <a href="/">Logo</a>
    <nav>...</nav>
  </header>
</pura-hide-on-scroll>

<!-- condensing navbar plus a bottom banner that slides down to hide -->
<pura-hide-on-scroll shrink threshold="60"
  style="--pura-hide-on-scroll-padding: 20px; --pura-hide-on-scroll-shrink-padding: 8px;">
  <header class="site-nav">...</header>
</pura-hide-on-scroll>

<pura-hide-on-scroll position="bottom" fixed tolerance="12">
  <div class="cookie-banner">We use cookies.</div>
</pura-hide-on-scroll>

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

import "./pura/lib/hide-on-scroll.js";