Slot picker

The component did not load. Run bun run build, then reload this page.

Columns

Standard Video tone="video" Urgent tone="urgent" Instant tone="instant"

tone stays neutral: the component does not know any of these values, it surfaces them as data-tone and the page maps --sp-slot-*.

Day

Narrow containers

Columns · 3 days

Day · 3 days

Bounded / responsive navigation

day-count="7" is an intention; the actual capacity (visibleDayCount) depends on min/max and on the component's width.

Fully empty range

No slots but a notice

Hidden days vs closed days

Two different ideas. Hidden days are calendar structure: the component knows them before loading anything, so hiddenDays = [0, 6] never spends a column on a weekend and day-count="5" still means five columns — only the civil envelope sent to the source gets wider. closed: true is the business state of a real date: it keeps its column, shows Closed and is styled through [data-closed], distinct again from an open day with no availability.

Bounded range that starts today. Switch the projection and navigate: the column count never moves, only which dates fill it.

One or two opening days a week

A practitioner who only works a couple of weekdays. Which weekdays they work is calendar structure, not availability, so hiddenDays removes the rest before anything is loaded. day-count="5" still means five columns — and they are five real opening days instead of a grid mostly made of closed ones. The civil envelope simply stretches over the weeks those columns span, and next() jumps a whole window of opening days.

It is responsive, so narrow the container: day-count="5" is a ceiling, never a promise. The width decides how many of those columns fit, and they stay real opening days — two useful columns on a phone instead of two weekend ones.

Messages / locale