# Walk-in card (`walk-in`)

A bold live status tile from real hours: Walk-ins welcome now · last walk-in 6:30 pm, flipping to "book ahead" near closing and to the next opening when closed.

| | |
|---|---|
| Tag | Showcase |
| Size | 3.8 KB gzipped own code (JS 2.8 KB + CSS 1.0 KB; 8.9 KB raw) |
| Dependency | none (vanilla + native APIs) |
| Best for | Barbers, nail bars, brow/lash bars, walk-in clinics, cafes, tire and smog shops |
| Demo | `index.html` in this folder (live: https://wbl-code-lib.pages.dev/modules/walk-in/) |

## What it does
Computes three states from the hours in the business's time zone: walk-ins welcome (open, more than data-cutoff minutes to close), open but too late for a walk-in (book ahead for the next open day), and closed (opens Tue 10 am). Shows today's hours and a collapsible full week with today in bold. A pulse dot beats three times when walk-ins are on, then sits still.

## When to use
- Any business that takes walk-ins; place it high (second screen) or as the hero proof card.
- Pair with Business card strip (above the fold) or use it instead of the hours paragraph.
- Holiday closures: data-closed-dates.

## Don't
- Invent wait times or "2 chairs free": there is no live data behind it (Mobbin research rule: real hours only).
- Use it for appointment-only businesses: say "By appointment" and use Service picker instead.
- Use red for closed.

## Reduced motion, no JS, accessibility
- Reduced motion: no pulse ring.
- No JS: the static sentence ("Walk-ins welcome Tue–Sun during opening hours") and buttons show.
- The big line is aria-live=polite so a minute tick that flips the state is announced; today's row has aria-current=date; the week list is a native <details>.
- Status text slots have a reserved height, so updates never shift the layout.

## Notes
- Default cutoff 30 minutes; barbers often use 15-20.
- data-walk-text overrides the headline (e.g. "Walk in, no appointment needed").

## Relation to the effects libraries
New. Batch 3's bounce-reveal "OPEN sign" is a decorative drop; this is the information tile.

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

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

<!-- markup: -->
<section class="wbl-wi" data-wbl="walk-in" data-cutoff="30" aria-label="Walk-in status"
  data-hours='{"tz":"America/Los_Angeles","mon":"closed","tue":"10:00-19:00","wed":"10:00-19:00","thu":"10:00-20:00","fri":"10:00-20:00","sat":"9:00-17:00","sun":"10:00-15:00"}'>
  <div class="wbl-wi-top"><span class="wbl-wi-dot" aria-hidden="true"></span>
    <p class="wbl-wi-big" data-wi-big aria-live="polite">Walk-ins welcome</p></div>
  <p class="wbl-wi-sub" data-wi-sub>Tue–Sun during opening hours; last walk-in 30 minutes before close.</p>
  <p class="wbl-wi-today" data-wi-today></p>
  <details><summary>All hours</summary><ul data-wi-week></ul></details>
  <div class="wbl-wi-act"><a href="#book">Book a time</a><a href="tel:+13235550142">Call (323) 555-0142</a></div>
</section>
```

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.