@lekoala/slot-picker 0.1.0 → 0.1.2

package/README.md

@@ -53,6 +53,11 @@ picker.source = async ({ start, end, signal }) => {
 };
 ```
 
+`start` and `end` are the inclusive civil envelope of the visible window. With
+`hiddenDays` set it can be wider than `dayCount`, so load the whole envelope and
+let the component pick the columns; days outside it are ignored. No adaptive
+fetching is ever required: the envelope is known before the request.
+
 A source may also be an object that additionally resolves the next known
 availability beyond the visible range:
 
@@ -89,10 +94,16 @@ metadata stay outside core.
 ></slot-picker>
 ```
 
-- `day-count` is the maximum intention; `visibleDayCount` is the capacity actually resolved from `min`/`max` and the component's own width (opt-in via `responsive`, overridable with `responsiveBreakpoints`, observed with `ResizeObserver`).
+- `day-count` is the maximum intention, counted in **columns**; `visibleDayCount` is the capacity actually resolved from `min`/`max` and the component's own width (opt-in via `responsive`, overridable with `responsiveBreakpoints`, observed with `ResizeObserver`).
 - `min`/`max` are hard bounds. `min > max` is an invalid configuration: `range` becomes `{ start: "", end: "", dayCount: 0 }`, `data-invalid-range` is set, and the source is never called.
+- `hiddenDays` removes weekdays from the calendar structure; it never costs a column.
 - `home-date` is a reference date for `goHome()`, never confused with `min`.
 
+At equal width and bounds the picker keeps its column capacity: only `min`/`max`
+can really reduce it, and only when the interval itself holds too few
+projectable days. `previous()`/`next()` move by projected days, so the count of
+columns never changes as you navigate.
+
 ```js
 picker.goTo("2026-12-08");   // bring a date into view and consult it
 picker.goHome();             // reference window
@@ -242,17 +253,60 @@ setter rejects an impossible civil date such as `2026-02-31T10:00`; a malformed
 `value` attribute is ignored and reads as empty, so imperfect markup never
 breaks the element upgrade.
 
-### Open, empty and closed days
+### Hidden days, closed days, empty days
+
+Three separate ideas, deliberately not merged:
+
+| | what it is | column? |
+| --- | --- | --- |
+| `hiddenDays` | calendar structure, known before loading | never rendered |
+| `closed: true` | business state of a real date | rendered, says `Closed` |
+| `slots: []` | open date with nothing bookable | rendered, says `No availability` |
 
-Three cases stay distinct:
+#### hiddenDays
 
-- slots present → normal availability;
-- `slots: []`, open → `messages.empty` ("No availability");
-- `slots: []`, `closed: true` → `messages.closed` ("Closed").
+```js
+picker.hiddenDays = [0, 6]; // Sunday and Saturday are never a column
+```
 
-`closed` is a normal day state set by the application (weekend, weekly
-closure); the component computes no opening hours. Closed days stay in the
-civil window and are stylable through `[data-closed]`:
+Weekday indexes match `Date#getDay` (0 = Sunday). Because the rule is known
+before any request, `dayCount` keeps meaning "columns": a hidden weekday widens
+the civil envelope instead of eating a column.
+
+```js
+picker.configure({ start: "2026-11-19", dayCount: 5, hiddenDays: [0, 6] });
+picker.range; // { start: "2026-11-19", end: "2026-11-25", dayCount: 5 }
+```
+
+Five columns (Thu, Fri, Mon, Tue, Wed) over a seven-day envelope; `source.load()`
+receives `2026-11-19` to `2026-11-25`. `previous()`/`next()` step by five
+projected days, so the grid never changes shape. A `start` landing on a hidden
+weekday resolves forward to the first projected day, and `activeDate` resolves
+to the next projected column. It is a property, like `days` and `source`, with no
+matching attribute; `configure({ hiddenDays })` applies it inside a transaction.
+Anything but integers `0`–`6` throws, and hiding all seven weekdays is rejected.
+
+This is what makes a sparse weekly schedule usable. A practitioner working only
+Tuesdays and Thursdays is calendar structure, not availability:
+
+```js
+picker.configure({ dayCount: 5, hiddenDays: [0, 1, 3, 5, 6] });
+picker.range.dayCount; // 5 columns: Tue, Thu, Tue, Thu, Tue
+picker.range;          // spanning about three weeks of civil time
+```
+
+Five columns are five real opening days, instead of a grid mostly made of
+closed ones, and `next()` moves to the five following opening days. Without
+`hiddenDays` the same consumer would have to page through weeks to find two
+bookable columns.
+
+Combined with `responsive`, this is what makes a narrow screen usable.
+`day-count` is a ceiling, and the width resolves it: a phone may only fit two
+columns, but they are two real opening days rather than two arbitrary civil
+days. Width, bounds and `hiddenDays` are all resolved before the request, so the
+capacity is known before any data arrives and a response can never change it.
+
+#### closed
 
 ```js
 picker.days = [{ date: "2026-11-22", slots: [], closed: true }];
@@ -264,32 +318,18 @@ slot-picker .sp-day[data-closed] {
 }
 ```
 
+`closed` is set by the application (a holiday, an exceptional closure); the
+component computes no opening hours and never derives a recurrence from the
+data. It is a rendered state, exactly like `notice`: loaded data can never add
+or remove a column, so a closed day keeps its place and explains why there is
+nothing that day. A window made only of closed days still renders its columns.
+
 `notice` remains reserved for exceptional information and may coexist with
 `closed`. A closed day carrying slots is invalid input and is rejected by
 normalization.
 
-`closed-days="hide"` drops closed days from the projection without changing the
-civil range:
-
-```html
-<slot-picker closed-days="hide" start="2026-11-21" day-count="5"></slot-picker>
-```
-
-```js
-picker.range; // still { start: "2026-11-21", end: "2026-11-25", dayCount: 5 }
-```
-
-Hiding a closed day does not extend the civil range to compensate for the
-hidden column: `day-count="5"` with two closed days renders three columns.
-`range`, `visibleDayCount`, `previous()`/`next()`, `goTo()` and `source.load()`
-stay civil, and toggling `closed-days` never reloads the source. In
-`layout="day"`, a closed day that is the consulted `activeDate` stays visible
-until another day is activated, so data arrival never moves `activeDate`. A
-window that is closed in its entirety renders the range empty state with
-`messages.closedRange`.
-
 To jump between windows by real availability, let the source expose `next()`
-and call `goToNextAvailability()`; the civil shape of a window never changes.
+and call `goToNextAvailability()`; the shape of a window never changes.
 
 ## Per-slot presentation
 
@@ -302,7 +342,7 @@ picker.days = [{ date: "2026-11-17", slots: [{ start: "13:35", tone: "video" }]
 
 ```html
 <!-- rendered -->
-<button type="button" role="option" class="sp-slot" data-tone="video" ...>13:35</button>
+<button type="button" role="option" class="sp-slot" data-tone="video" ...><span class="sp-slot-time">13:35</span></button>
 ```
 
 Map tones to color with the dedicated slot tokens, so a tone never touches the
@@ -318,17 +358,16 @@ slot-picker .sp-slot[data-tone="video"] {
 The slot surface is `--sp-slot-bg`, `--sp-slot-fg`, `--sp-slot-border`,
 `--sp-slot-hover-bg`, `--sp-slot-selected-bg`, `--sp-slot-selected-fg`.
 
-An icon next to the time is theme-owned too. `::after` needs
-`grid-auto-flow: column`, because `.sp-slot` centers its content with a grid:
+An icon next to the time is theme-owned too. The time lives in a
+`.sp-slot-time` inline-flex wrapper, so append the glyph to that wrapper with a
+`::after` and a logical margin: it stays in flow, thus really adjacent to the
+time, and readjusts in RTL. The slot is width-clamped (`min-inline-size: 0;
+max-inline-size: 100%`), so the icon never widens the day column.
 
 ```css
-slot-picker .sp-slot[data-tone="instant"] {
-  grid-auto-flow: column;
-  justify-content: center;
-  gap: 0.35rem;
-}
-slot-picker .sp-slot[data-tone="instant"]::after {
+slot-picker .sp-slot[data-tone="instant"] .sp-slot-time::after {
   content: "⚡";
+  margin-inline-start: 0.35rem;
   font-size: 0.85em;
   line-height: 1;
 }
@@ -368,3 +407,10 @@ Then open `demo/index.html` directly, or serve it with `bun run dev`.
 It shows both `columns` and `day` projections, wide and in narrow
 phone-like containers, plus bounded/responsive navigation and the range empty
 state.
+
+The same page is published from `master` at
+<https://lekoala.github.io/slot-picker/> (GitHub Pages serves the repository
+root and redirects to `demo/`). Pages publishes the committed `dist/` bundles,
+so run `bun run build:bundle` and commit `dist/slot-picker.js` /
+`dist/slot-picker.css` whenever `src/` changes; CI rejects a stale bundle.
+

package/custom-elements.json

@@ -29,11 +29,6 @@
               "type": { "text": "\"inline\" | \"action\" | \"none\"" },
               "default": "action"
             },
-            {
-              "name": "closed-days",
-              "type": { "text": "\"show\" | \"hide\"" },
-              "default": "show"
-            },
             { "name": "locale", "type": { "text": "string" } }
           ],
           "events": [

package/dist/slot-picker.css

@@ -56,6 +56,11 @@
   font: inherit;
 }
 
+/* The component renders in light DOM, so a page stylesheet can reach these
+   declarations. `!important` is what keeps assistive-technology-only text (the
+   loading status, the day strip's spoken labels) out of sight: losing it is an
+   accessibility regression, not a cosmetic one. */
+/* biome-ignore-start lint/complexity/noImportantStyles: visually-hidden must win over page styles */
 .sp-visually-hidden {
   position: absolute !important;
   inline-size: 1px !important;
@@ -67,6 +72,7 @@
   white-space: nowrap !important;
   border: 0 !important;
 }
+/* biome-ignore-end lint/complexity/noImportantStyles: visually-hidden must win over page styles */
 
 .sp-shell {
   display: block;
@@ -214,6 +220,9 @@ slot-picker[home-date] .sp-shortcuts {
 
 .sp-slots {
   display: grid;
+  /* Bound the single column to the day column: an `auto` track follows the
+     widest slot's min-content and would push every slot past the day card. */
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--sp-gap);
 }
 
@@ -225,6 +234,19 @@ slot-picker[home-date] .sp-shortcuts {
   box-sizing: border-box;
   border-radius: var(--sp-radius);
   font: inherit;
+  /* A grid item defaults to `min-width: auto`, i.e. its min-content; that would
+     let a wide slot (a theme icon next to the time) push the bounded day column.
+     Clamp the button to its track instead; the content stays centered. */
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+/* Time wrapper: inline-flex so a theme can append an in-flow icon (`::after`)
+   that stays adjacent to the time and vertically centered. */
+.sp-slot-time {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .sp-slot {