# Sticky book bar (`book-bar`)

The phone's bottom bar (Call + "From $40 · Book a visit"): there from the first screen, slides away while reading down, back on any scroll up, a pause, the page end or keyboard focus; steps aside for the form and the keyboard.

| | |
|---|---|
| Tag | Flow |
| Size | 1.9 KB gzipped own code (JS 1.2 KB + CSS 0.7 KB; 4.1 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Every BOOK and CALL business on phones |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/book-bar/) |

## What it does
Direction-aware with hysteresis: it hides after 56 px of travel down and returns after 12 px up, so tiny jitters don't flicker it. It also returns after 1.6 s without scrolling, near the top and bottom of the page, and whenever focus enters it. While a data-hide target (the booking form, a Service picker with its own bar) is at least 15% on screen, or the on-screen keyboard is open (visualViewport), it stays away. Hidden = transform + visibility + inert, so it can't be tabbed into while away. Body gets bottom padding so the footer is never covered.

## When to use
- Every phone preview (skill: on phones the sticky bar is the hero CTA; the in-flow hero buttons are hidden under 560 px).
- Use one label everywhere ("Book a visit"), the same as the hero and sections.

## Don't
- Two sticky bottom bars (batch 1 call-bar, batch 2 header handoff): pick one.
- Covering the form or the cookie banner (add them to data-hide).
- Show it on desktop unless the page has no header CTA.

## Reduced motion, no JS, accessibility
- Reduced motion: appears/disappears without sliding.
- No JS: a plain sticky bar that stays put.
- <nav aria-label>, Call link has the number as its name, 52 px targets, safe-area padding for the iPhone home bar; inert while hidden.

## Notes
- Tune with data-down / data-up (px) and data-idle (ms, 0 = never auto-return).

## Relation to the effects libraries
Batch 1's call-bar appears after the hero and stays; batch 1's smart-header hides the top header. This is the bottom bar with hide-on-down/show-on-up, price, form/keyboard awareness.

## Use it
Copy this folder to the site as `/wbl/book-bar/` (keep `vendor/` if there is one), then:

```html
<!-- Sticky book bar (WBL Code Library) -->
<!-- in <head>: -->
<script>document.documentElement.classList.add('wbl-js')</script>
<link rel="stylesheet" href="/wbl/book-bar/module.css">
<script src="/wbl/book-bar/module.js" defer></script>

<!-- markup: -->
<nav class="wbl-bb" data-wbl="book-bar" data-hide="#book-form, .wbl-sp" aria-label="Quick actions">
  <a class="wbl-bb-call" href="tel:+13235550142" aria-label="Call (323) 555-0142">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3h4l2 5-2.5 1.5a11 11 0 0 0 6 6L16 13l5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 5a2 2 0 0 1 2-2"/></svg>
  </a>
  <a class="wbl-bb-book" href="#book"><small>From $40</small>Book a visit</a>
</nav>
```

Colours come from CSS variables with safe defaults: `--wbl-accent`, `--wbl-on-accent`, `--wbl-ink`, `--wbl-paper`,
`--wbl-card`, `--wbl-line`, `--wbl-muted`, `--wbl-band`, `--wbl-radius`, `--wbl-head` (see the library README for the
one-line bridge to the preview builder's `--a / --ink / --bg …`).

## License
Our code: WBL-owned, original. No third-party code.