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.
Walk-ins welcome
Tue–Sun during opening hours; last walk-in 30 minutes before close.
Walk-ins welcome
Walk-ins welcome
Walk-ins welcome
Sample hours for a fictional salon. Only real hours on a client site: no invented wait times.
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.
data-closed-dates.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>.data-walk-text overrides the headline (e.g. "Walk in, no appointment needed").<!-- 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>