@lekoala/slot-picker 0.1.0

package/dist/types/views/shared.d.ts

@@ -0,0 +1,99 @@
+export type Slot = import("../model.js").Slot;
+export type SlotCountMessages = {
+    oneSlot: string;
+    manySlots: string;
+};
+export type RangeEmptyMessages = {
+    rangeEmptyTitle: string;
+    rangeEmptyDescription: string;
+    rangeEmptyNext: string;
+    nextAvailability: string;
+    closedRange: string;
+};
+/** @param {string} value */
+export declare function escapeHtml(value: string): string;
+/** @param {string} value */
+export declare function escapeAttr(value: string): string;
+/**
+ * Ordered values of enabled slots only. Disabled slots stay discoverable
+ * in the DOM but never take the roving tabindex.
+ * @param {{date:string,slots:Slot[]}[]} days
+ */
+export declare function enabledValues(days: {
+    date: string;
+    slots: Slot[];
+}[]): string[];
+/**
+ * Pick the single roving value: first preferred value that is enabled,
+ * otherwise the first enabled value, otherwise "".
+ * @param {string[]} enabled
+ * @param {...string} preferred
+ */
+export declare function rovingValue(enabled: string[], ...preferred: string[]): string;
+/**
+ * Single slot button. Semantics must stay identical across projections.
+ * @param {{date:string,slot:Slot,dayIndex:number,slotIndex:number,selected:boolean,tabbed:boolean}} options
+ */
+export declare function slotButton({ date, slot, dayIndex, slotIndex, selected, tabbed }: {
+    date: string;
+    slot: Slot;
+    dayIndex: number;
+    slotIndex: number;
+    selected: boolean;
+    tabbed: boolean;
+}): string;
+/**
+ * Per-day notice indicator. Without options it is purely decorative. With
+ * `interactive: true` it is the only control that emits `noticeactivate`:
+ * the accessible name carries the description, the native `title` is a
+ * desktop-only bonus.
+ * @param {{interactive?:boolean,dayIndex?:number,label?:string,description?:string}} [options]
+ */
+export declare function noticeIndicator(options?: {
+    interactive?: boolean;
+    dayIndex?: number;
+    label?: string;
+    description?: string;
+}): string;
+/**
+ * Readable day notice. Deliberately non-interactive: `noticeactivate` belongs
+ * to the explicit control, never to displayed text, so there is no mouse-only
+ * activation.
+ * @param {{label:string,description?:string}} notice
+ */
+export declare function noticeBlock({ label, description }: {
+    label: string;
+    description?: string;
+}): string;
+/**
+ * Real DOM empty state. Text comes from messages, never from CSS.
+ * @param {string} message
+ */
+export declare function dayEmpty(message: string): string;
+/**
+ * Localized slot count for the day strip. Zero renders as an en dash,
+ * keeping the indicator distinct from a real sentence.
+ * @param {number} count
+ * @param {SlotCountMessages} messages
+ */
+export declare function slotCountText(count: number, messages: SlotCountMessages): string;
+/**
+ * Range-level empty state, distinct from per-day empty days.
+ * Rendered only when the whole window has no slot and no notice; the theme
+ * decides how prominent it is. Two actions stay distinct: `next()` moves to
+ * the immediately following window, while `next availability` (opt-in via
+ * `next-availability`) is the contextual business search that may skip
+ * several windows through the source. They are never merged.
+ * @param {{start:string,end:string,invalid:boolean,canNext:boolean,nextAvailability:boolean,closed:boolean,locale:string,messages:RangeEmptyMessages}} options
+ */
+export declare function rangeEmpty({ start, end, invalid, canNext, nextAvailability, closed, locale, messages }: {
+    start: string;
+    end: string;
+    invalid: boolean;
+    canNext: boolean;
+    nextAvailability: boolean;
+    closed: boolean;
+    locale: string;
+    messages: RangeEmptyMessages;
+}): string;
+//# sourceMappingURL=shared.d.ts.map

package/dist/types/views/shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/views/shared.js"],"names":[],"mappings":"AAGI,YAAsC,IAAI,GAAhC,OAAO,aAAa,EAAE,IAAI,CAAM;AAC1C,YAA6C,iBAAiB,GAApD;IAAC,OAAO,EAAC,MAAM,CAAC;IAAA,SAAS,EAAC,MAAM,CAAA;CAAC,CAAmB;AAC9D,YAAkI,kBAAkB,GAA1I;IAAC,eAAe,EAAC,MAAM,CAAC;IAAA,qBAAqB,EAAC,MAAM,CAAC;IAAA,cAAc,EAAC,MAAM,CAAC;IAAA,gBAAgB,EAAC,MAAM,CAAC;IAAA,WAAW,EAAC,MAAM,CAAA;CAAC,CAAoB;AAKxJ,4BAA4B;AAC5B,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,UAE/B;AAED,4BAA4B;AAC5B,wBAAgB,UAAU,CAAC,KAAK,EADpB,MACoB,UAE/B;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAFvB;IAAC,IAAI,EAAC,MAAM,CAAC;IAAA,KAAK,EAAC,IAAI,EAAE,CAAA;CAAC,EAEH,YASjC;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAHxB,MAAM,EAGkB,EAAE,GAAG,SAAS,EAFnC,MAAM,EAE6B,UAKhD;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,EAFrE;IAAC,IAAI,EAAC,MAAM,CAAC;IAAA,IAAI,EAAC,IAAI,CAAC;IAAA,QAAQ,EAAC,MAAM,CAAC;IAAA,SAAS,EAAC,MAAM,CAAC;IAAA,QAAQ,EAAC,OAAO,CAAC;IAAA,MAAM,EAAC,OAAO,CAAA;CAElB,UAU/E;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,AAFpC,CAA4F,EAApF;IAAC,WAAW,CAAC,EAAC,OAAO,CAAC;IAAA,QAAQ,CAAC,EAAC,MAAM,CAAC;IAAA,KAAK,CAAC,EAAC,MAAM,CAAC;IAAA,WAAW,CAAC,EAAC,MAAM,CAAA;CAEvC,UAO3C;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAFvC;IAAC,KAAK,EAAC,MAAM,CAAC;IAAA,WAAW,CAAC,EAAC,MAAM,CAAA;CAEM,UAKjD;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAFrB,MAEqB,UAE/B;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAHxB,MAGwB,EAAE,QAAQ,EAFlC,iBAEkC,UAI5C;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,EAF5F;IAAC,KAAK,EAAC,MAAM,CAAC;IAAA,GAAG,EAAC,MAAM,CAAC;IAAA,OAAO,EAAC,OAAO,CAAC;IAAA,OAAO,EAAC,OAAO,CAAC;IAAA,gBAAgB,EAAC,OAAO,CAAC;IAAA,MAAM,EAAC,OAAO,CAAC;IAAA,MAAM,EAAC,MAAM,CAAC;IAAA,QAAQ,EAAC,kBAAkB,CAAA;CAE9C,UAiCtG"}

package/docs/USE_CASES.md

@@ -0,0 +1,197 @@
+# Use cases
+
+These cases define the product more strongly than a feature checklist.
+
+## U1 — Inline appointment availability
+
+A consumer provides five civil days containing zero or more appointment slots.
+
+Acceptance:
+
+- each day is clearly labelled;
+- slots render chronologically;
+- activating a slot dispatches `slotactivate`;
+- the selected value is a local civil datetime (`YYYY-MM-DDTHH:mm`);
+- empty days remain visible;
+- `slot.tone` is a neutral presentation token surfaced as `data-tone`; the core defines no palette and never interprets the token;
+- `slot.description` carries accessible detail; a tooltip or popover remains application-owned.
+
+## U2 — Controlled range navigation
+
+The consumer can show three or five days depending on its layout.
+
+Acceptance:
+
+- `dayCount` means exactly N consecutive civil days;
+- previous/next navigation changes `start`, not `value`;
+- `rangechange` exposes the requested start/end range;
+- min/max bounds disable impossible navigation;
+- responsive policy remains consumer-owned.
+
+## U3 — Remote availability
+
+A source function loads availability for the visible range.
+
+Acceptance:
+
+- the source receives the exact visible range;
+- superseded requests are aborted;
+- stale responses never repaint the current range;
+- source/backend URL conventions are application-owned;
+- loading and error states do not mutate selection;
+- loading is signalled without layout shift: `aria-busy="true"` on the host, the loading text announced through a visually hidden `role="status"`, and only a delayed CSS fade once the response is actually slow;
+
+## U4 — Day notice / exceptional unavailability
+
+A day can carry a notice such as "exceptionally unavailable".
+
+Acceptance:
+
+- the notice is distinct from an appointment slot;
+- it does not become a fake slot;
+- `notice-display` selects the projection strategy: `action` (default), `inline`, or `none`;
+- `action` renders only a real control (the dot button) with an accessible name; no inline text is shown;
+- `inline` additionally renders the readable notice content, by layout: compact label in `columns` (description kept in the DOM, revealed by themes) and full label + description in `day`;
+- `inline` never overflows its column, even with an unbroken long label;
+- displayed notice text is never interactive: `noticeactivate` belongs to an explicit control only, so there is no mouse-only activation;
+- `notice-display="action"` renders the control in the day header (`columns`) or the panel header (`day`); `inline` keeps it in `columns` and relies on the text in `day`;
+- `none` renders nothing; the application owns the notice elsewhere;
+- activating the control dispatches `noticeactivate` with `{ day, notice, anchor }`, bubbling, without a default behavior and without selecting a slot;
+- the component never owns a tooltip, popover or floating engine; the application decides (modal, popover, drawer or nothing).
+
+## U5 — Collapsed availability
+
+A dense range can initially show only the first N slot rows.
+
+Acceptance:
+
+- collapsing is presentation only;
+- hidden slots remain part of the loaded model;
+- "show more" expands without fetching again;
+- selection remains stable across expand/collapse;
+- while collapsed, "show more" floats inside the reserved footer band and a gradient hints at the availability that is not rendered; expanding returns it to normal flow with no overlay;
+- hidden slots are not rendered in the DOM while collapsed, so no invisible button can be focused.
+
+## U6 — Keyboard-only slot choice
+
+A user can navigate and select without a pointing device.
+
+Acceptance:
+
+- one slot is in the Tab sequence;
+- ArrowUp/ArrowDown move within a day;
+- ArrowLeft/ArrowRight move to the nearest row in the adjacent day;
+- Home/End move to the first/last slot of the current day;
+- Enter/Space activates;
+- focus movement never changes `value`;
+- `slotactivate` bubbles, so one ancestor listener can delegate several pickers.
+
+## U7 — Controlled selection
+
+An application can set or clear `value`.
+
+Acceptance:
+
+- `value` is `YYYY-MM-DDTHH:mm` or empty;
+- an impossible civil date (for example `2026-02-31T10:00`) is rejected by the property setter;
+- a malformed `value` attribute is ignored and reads as empty, so imperfect markup never breaks the element upgrade;
+- setting `value` only changes visual selection;
+- programmatic assignment does not emit `slotactivate`;
+- selecting a disabled slot is impossible.
+
+## U8 — Legacy application adapter
+
+A legacy application converts its existing event payload to normalized days/slots.
+
+Acceptance:
+
+- FullCalendar class names never enter the component;
+- booking URLs and domain metadata can be retained as opaque `meta`;
+- the adapter maps its domain status to a neutral `slot.tone`; the core never interprets it;
+- the application owns post-selection booking behavior;
+- replacing the legacy backend does not require changing the picker.
+
+## U9 — Day projection of the same model
+
+The same selection model can be projected as a day strip plus the slots of one consulted day.
+
+Acceptance:
+
+- `layout` is `columns` (default) or `day`; the consumer chooses it explicitly;
+- there is no automatic `columns` to `day` breakpoint on viewport size;
+- `activeDate` is the last day explicitly targeted by the user (day click or slot activation);
+- `activeDate` resolution is civil-only: absent maps to `start`, before-range maps to `start`, after-range maps to `end`; loaded slots never influence it;
+- activating a slot sets `activeDate` to that slot's day before dispatching `slotactivate`;
+- changing `layout` preserves `activeDate` and `value`;
+- the active day uses `aria-pressed`, never `aria-current="date"`;
+- today remains independently discoverable from the consulted day;
+- empty days render a real DOM empty state driven by `messages.empty`, never CSS-generated text;
+- keyboard offers two comprehensible tab stops (day strip, then day slots) with roving tabindex in each zone;
+- Left/Right/Home/End on the strip change `activeDate` without selecting a slot.
+
+## U10 — Bounded and responsive navigation
+
+A consumer can bound the visible range, adapt the number of days to the
+component's own width, and navigate by window, by reference date, or to the
+next known availability. A wholly empty window is a distinct state.
+
+Acceptance:
+
+- `min`/`max` are hard bounds: `min <= start` and `end <= max`;
+- when the requested `dayCount` does not fit the bounds, the resolved `visibleDayCount` shrinks instead of showing out-of-bounds days;
+- `min > max` is an explicit invalid configuration: `range` is `{ start: "", end: "", dayCount: 0 }`, `data-invalid-range` is set, navigation is disabled, and the source is never called;
+- `dayCount` is the consumer's maximum intention; `visibleDayCount` is the capacity resolved from bounds and the width available to the projection;
+- responsive resolution is opt-in via `responsive`, uses `ResizeObserver`, and never reads `window.innerWidth`; it measures the projection width (inside the navigation rail), not the host width; `responsiveBreakpoints` is overridable;
+- changing `visibleDayCount` keeps `activeDate` visible by shifting `start` just enough, within the bounds;
+- `previous()`/`next()` move to the adjacent window of `visibleDayCount` days and never select;
+- `goTo(date)` brings `date` into the window and consults it, respecting the bounds;
+- `goHome()` returns to `homeDate`, a reference date that is never confused with `min`;
+- `goToNextAvailability()` asks the source (`source.next`) or falls back to a `nextrequest` event; it may skip several windows and is never merged with `next()`; it returns the destination actually reached (clamped to `min`/`max`), never the raw source proposal;
+- `configure()` validates all options before applying any: an invalid option throws and leaves the component unchanged;
+- navigation controls are a symmetric `previous`/`next` pair framing the projection; they are the only range-navigation chrome;
+- `goHome()` (opt-in via `home-date`) is a persistent capability but an auxiliary shortcut, kept outside the prev/next rail; it is offered only while `homeDate` is outside the visible range; its wrapper reserves its height whenever `home-date` is set, so the shortcut appearing later never shifts the content;
+- there is no "go to end" action;
+- `goToNextAvailability()` is a contextual action, never permanent chrome: it is surfaced in the range empty state when `next-availability` is set;
+- a window with no slot, no notice and no closed day renders a range empty state (`.sp-range-empty` replacing the projection, with a `next()` action, plus the contextual availability action when `next-availability` is set);
+- a window with a notice or a closed day but no slots keeps the normal projection, so the exception or the closure stays visible;
+- resize changes the range, never `value`; event order is stable (`rangechange`, then `daychange`, then any reload);
+- collapsed `columns` projection keeps a stable footprint derived from `max-visible-rows`: full, sparse and wholly empty ranges reserve the same height, so navigating between equivalent ranges never causes avoidable vertical layout shift;
+- `expanded` content may grow naturally past that floor; in `layout="day"`, only the empty state gets a baseline.
+
+## U11 — Closed days / sparse availability
+
+The source can distinguish a closed day from an open day with no availability,
+without the component knowing any opening-hours rule.
+
+Acceptance:
+
+- a day carries `closed: true` (for example a weekend or a weekly closure); the component never computes opening hours, recurrence or "Monday only";
+- the window still contains `visibleDayCount` consecutive civil days: closed days remain visible and are never compressed or hidden;
+- three cases stay distinct: slots present; `slots: []` and open → `messages.empty`; `slots: []` and `closed` → `messages.closed`;
+- a closed day is stylable through `[data-closed]` on the day, the panel and the day strip; `--sp-closed-opacity` is the default theming hook;
+- `notice` stays reserved for exceptional information and may coexist with `closed`;
+- a window whose only content is closed days keeps the normal projection instead of collapsing into the range empty state;
+- `source.next()` / `goToNextAvailability()` let the application jump to the next real availability between windows; they never change the civil shape of a window;
+- `closed-days="show"` (default) renders every civil day; `closed-days="hide"` removes closed days from the projection only;
+- hiding a closed day never extends the civil range to compensate: `day-count` stays the civil count, and the rendered column count follows the projected days;
+- hiding never alters `range`, `visibleDayCount`, `previous()`/`next()`, `goTo()` or `source.load()`, 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; data arrival never moves `activeDate`;
+- a window whose civil days are all closed renders the range empty state with `messages.closedRange`, distinct from `messages.empty`;
+- `closed: true` with bookable slots is invalid input and is rejected by normalization;
+- no recurrence or opening-hours rule enters the core.
+
+## Not a use case for this package
+
+Keep these outside the component:
+
+- booking confirmation flows;
+- login/signup;
+- doctor/reason/security identifiers;
+- "anti swiss cheese" booking rules;
+- payment;
+- resource scheduling;
+- drag/drop;
+- event rendering;
+- recurrence;
+- timezone conversion;
+- tooltip/flyout positioning frameworks.

package/package.json

@@ -0,0 +1,148 @@
+{
+  "name": "@lekoala/slot-picker",
+  "version": "0.1.0",
+  "description": "Native-first day and appointment slot picker primitive",
+  "type": "module",
+  "sideEffects": [
+    "./src/define.js",
+    "./src/slot-picker.css",
+    "./dist/slot-picker.js",
+    "./dist/slot-picker.min.js",
+    "./dist/slot-picker.css",
+    "./dist/slot-picker.min.css"
+  ],
+  "license": "MIT",
+  "customElements": "custom-elements.json",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lekoala/slot-picker.git"
+  },
+  "homepage": "https://github.com/lekoala/slot-picker",
+  "bugs": "https://github.com/lekoala/slot-picker/issues",
+  "packageManager": "bun@1.4.2",
+  "keywords": [
+    "slot-picker",
+    "appointment",
+    "availability",
+    "web-component",
+    "accessibility"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "docs",
+    "custom-elements.json",
+    "LICENSE",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./src/index.js"
+    },
+    "./define": {
+      "types": "./dist/types/define.d.ts",
+      "import": "./src/define.js"
+    },
+    "./locales/ar": {
+      "types": "./dist/types/locales/ar.d.ts",
+      "import": "./src/locales/ar.js"
+    },
+    "./locales/de": {
+      "types": "./dist/types/locales/de.d.ts",
+      "import": "./src/locales/de.js"
+    },
+    "./locales/en": {
+      "types": "./dist/types/locales/en.d.ts",
+      "import": "./src/locales/en.js"
+    },
+    "./locales/es": {
+      "types": "./dist/types/locales/es.d.ts",
+      "import": "./src/locales/es.js"
+    },
+    "./locales/fr": {
+      "types": "./dist/types/locales/fr.d.ts",
+      "import": "./src/locales/fr.js"
+    },
+    "./locales/hi": {
+      "types": "./dist/types/locales/hi.d.ts",
+      "import": "./src/locales/hi.js"
+    },
+    "./locales/id": {
+      "types": "./dist/types/locales/id.d.ts",
+      "import": "./src/locales/id.js"
+    },
+    "./locales/it": {
+      "types": "./dist/types/locales/it.d.ts",
+      "import": "./src/locales/it.js"
+    },
+    "./locales/ja": {
+      "types": "./dist/types/locales/ja.d.ts",
+      "import": "./src/locales/ja.js"
+    },
+    "./locales/ko": {
+      "types": "./dist/types/locales/ko.d.ts",
+      "import": "./src/locales/ko.js"
+    },
+    "./locales/nl": {
+      "types": "./dist/types/locales/nl.d.ts",
+      "import": "./src/locales/nl.js"
+    },
+    "./locales/pl": {
+      "types": "./dist/types/locales/pl.d.ts",
+      "import": "./src/locales/pl.js"
+    },
+    "./locales/pt-BR": {
+      "types": "./dist/types/locales/pt-BR.d.ts",
+      "import": "./src/locales/pt-BR.js"
+    },
+    "./locales/pt-PT": {
+      "types": "./dist/types/locales/pt-PT.d.ts",
+      "import": "./src/locales/pt-PT.js"
+    },
+    "./locales/ru": {
+      "types": "./dist/types/locales/ru.d.ts",
+      "import": "./src/locales/ru.js"
+    },
+    "./locales/tr": {
+      "types": "./dist/types/locales/tr.d.ts",
+      "import": "./src/locales/tr.js"
+    },
+    "./locales/zh-CN": {
+      "types": "./dist/types/locales/zh-CN.d.ts",
+      "import": "./src/locales/zh-CN.js"
+    },
+    "./slot-picker.css": "./src/slot-picker.css",
+    "./dist/slot-picker.js": "./dist/slot-picker.js",
+    "./dist/slot-picker.min.js": "./dist/slot-picker.min.js",
+    "./dist/slot-picker.css": "./dist/slot-picker.css",
+    "./dist/slot-picker.min.css": "./dist/slot-picker.min.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "node test/server.js",
+    "build:bundle": "bun scripts/build.js",
+    "build:types": "bun run types",
+    "build": "bun run build:bundle && bun run build:types",
+    "sync": "bun run build",
+    "lint": "biome check .",
+    "format": "biome format --write .",
+    "typecheck": "tsc -p jsconfig.json",
+    "types": "tsc -p tsconfig.types.json",
+    "test": "bun test test/unit",
+    "test:syntax": "node --check src/date.js && node --check src/model.js && node --check src/source.js && node --check src/messages.js && node --check src/slot-picker.js && node --check src/index.js && node --check src/define.js && node --check src/views/shared.js && node --check src/views/columns.js && node --check src/views/day.js",
+    "test:browser": "bun run build:bundle && playwright test browser --project chromium",
+    "test:browser:all": "bun run build:bundle && playwright test browser",
+    "check": "bun run test:syntax && bun run lint && bun run typecheck && bun run test",
+    "verify": "bun run check && bun run sync",
+    "prepack": "bun run sync",
+    "prepublishOnly": "bun run verify"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.13",
+    "@playwright/test": "1.63.0",
+    "typescript": "7.0.2"
+  }
+}

package/src/date.js

@@ -0,0 +1,66 @@
+const DATE_RE = /^\d{4}-\d{2}-\d{2}$/;
+
+/** @param {string} value */
+export function isDateValue(value) {
+  if (!DATE_RE.test(value)) return false;
+  const [year, month, day] = value.split("-").map(Number);
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day;
+}
+
+/** @param {string} value */
+function parts(value) {
+  if (!isDateValue(value)) throw new TypeError(`Invalid civil date: ${value}`);
+  const [year, month, day] = value.split("-").map(Number);
+  return { year, month, day };
+}
+
+/** @param {string} value @param {number} amount */
+export function addDays(value, amount) {
+  const { year, month, day } = parts(value);
+  const date = new Date(Date.UTC(year, month - 1, day + amount));
+  return [
+    String(date.getUTCFullYear()).padStart(4, "0"),
+    String(date.getUTCMonth() + 1).padStart(2, "0"),
+    String(date.getUTCDate()).padStart(2, "0"),
+  ].join("-");
+}
+
+/** @param {string} a @param {string} b */
+export function compareDates(a, b) {
+  return a.localeCompare(b);
+}
+
+/**
+ * Signed civil day difference (b - a).
+ * @param {string} a
+ * @param {string} b
+ */
+export function daysBetween(a, b) {
+  return Math.round((toUtcDate(b).getTime() - toUtcDate(a).getTime()) / 86_400_000);
+}
+
+/**
+ * Inclusive visible civil range.
+ * @param {string} start
+ * @param {number} dayCount
+ */
+export function rangeEnd(start, dayCount) {
+  return addDays(start, Math.max(1, dayCount) - 1);
+}
+
+/** @param {string} value */
+export function toUtcDate(value) {
+  const { year, month, day } = parts(value);
+  return new Date(Date.UTC(year, month - 1, day));
+}
+
+/** Local civil "today" without timezone conversion of public values. */
+export function todayValue() {
+  const now = new Date();
+  return [
+    String(now.getFullYear()).padStart(4, "0"),
+    String(now.getMonth() + 1).padStart(2, "0"),
+    String(now.getDate()).padStart(2, "0"),
+  ].join("-");
+}

package/src/define.js

@@ -0,0 +1,5 @@
+import { SlotPickerElement } from "./slot-picker.js";
+
+if (!customElements.get("slot-picker")) {
+  customElements.define("slot-picker", SlotPickerElement);
+}

package/src/index.js

@@ -0,0 +1,25 @@
+export { addDays, compareDates, daysBetween, isDateValue, rangeEnd, todayValue } from "./date.js";
+export { DEFAULT_MESSAGES, getDefaultMessages, resolveMessages, setDefaultMessages } from "./messages.js";
+export {
+  boundedDayCount,
+  clampStart,
+  collapsedDays,
+  ensureVisible,
+  focusableSlots,
+  hasDayContent,
+  hasSlots,
+  isSlotValue,
+  isTimeValue,
+  isValidRange,
+  moveFocus,
+  normalizeBreakpoints,
+  normalizeDays,
+  RESPONSIVE_BREAKPOINTS,
+  rangeDetail,
+  resolveActiveDate,
+  resolveVisibleDayCount,
+  slotValue,
+  visibleDays,
+} from "./model.js";
+export { SlotPickerElement } from "./slot-picker.js";
+export { SlotSourceController } from "./source.js";

package/src/locales/ar.js

@@ -0,0 +1,18 @@
+export default {
+  previous: "الأيام السابقة",
+  next: "الأيام التالية",
+  home: "العودة إلى البداية",
+  nextAvailability: "التوفر التالي",
+  showMore: "إظهار مزيد من التوفر",
+  showLess: "إظهار أقل",
+  loading: "جارٍ تحميل التوفر",
+  empty: "لا يوجد توفر",
+  closed: "مغلق",
+  closedRange: "مغلق خلال هذه الفترة",
+  rangeEmptyTitle: "لا يوجد أي موعد متاح في هذه الفترة",
+  rangeEmptyDescription: "من {start} إلى {end}",
+  rangeEmptyNext: "عرض الفترة التالية",
+  oneSlot: "موعد واحد",
+  manySlots: "{n} مواعيد",
+  days: "الأيام",
+};

package/src/locales/de.js

@@ -0,0 +1,18 @@
+export default {
+  previous: "Vorherige Tage",
+  next: "Nächste Tage",
+  home: "Zurück zum Anfang",
+  nextAvailability: "Nächste Verfügbarkeit",
+  showMore: "Mehr Verfügbarkeiten anzeigen",
+  showLess: "Weniger anzeigen",
+  loading: "Verfügbarkeiten werden geladen",
+  empty: "Keine Verfügbarkeit",
+  closed: "Geschlossen",
+  closedRange: "In diesem Zeitraum geschlossen",
+  rangeEmptyTitle: "Keine Verfügbarkeit in diesem Zeitraum",
+  rangeEmptyDescription: "Vom {start} bis {end}",
+  rangeEmptyNext: "Nächsten Zeitraum anzeigen",
+  oneSlot: "1 Termin",
+  manySlots: "{n} Termine",
+  days: "Tage",
+};

package/src/locales/en.js

@@ -0,0 +1,18 @@
+export default {
+  previous: "Previous days",
+  next: "Next days",
+  home: "Back to start",
+  nextAvailability: "Next availability",
+  showMore: "Show more availability",
+  showLess: "Show less",
+  loading: "Loading availability",
+  empty: "No availability",
+  closed: "Closed",
+  closedRange: "Closed during this period",
+  rangeEmptyTitle: "No availability in this period",
+  rangeEmptyDescription: "From {start} to {end}",
+  rangeEmptyNext: "See the next period",
+  oneSlot: "1 slot",
+  manySlots: "{n} slots",
+  days: "Days",
+};

package/src/locales/es.js

@@ -0,0 +1,18 @@
+export default {
+  previous: "Días anteriores",
+  next: "Días siguientes",
+  home: "Volver al inicio",
+  nextAvailability: "Próxima disponibilidad",
+  showMore: "Mostrar más disponibilidad",
+  showLess: "Mostrar menos",
+  loading: "Cargando disponibilidad",
+  empty: "Sin disponibilidad",
+  closed: "Cerrado",
+  closedRange: "Cerrado durante este período",
+  rangeEmptyTitle: "Sin disponibilidad en este período",
+  rangeEmptyDescription: "Del {start} al {end}",
+  rangeEmptyNext: "Ver el siguiente período",
+  oneSlot: "1 hueco",
+  manySlots: "{n} huecos",
+  days: "Días",
+};

package/src/locales/fr.js

@@ -0,0 +1,18 @@
+export default {
+  previous: "Jours précédents",
+  next: "Jours suivants",
+  home: "Retour au début",
+  nextAvailability: "Prochain créneau disponible",
+  showMore: "Voir plus de disponibilités",
+  showLess: "Voir moins",
+  loading: "Chargement des disponibilités",
+  empty: "Aucune disponibilité",
+  closed: "Fermé",
+  closedRange: "Fermé sur cette période",
+  rangeEmptyTitle: "Aucun créneau disponible sur cette période",
+  rangeEmptyDescription: "Du {start} au {end}",
+  rangeEmptyNext: "Voir la période suivante",
+  oneSlot: "1 créneau",
+  manySlots: "{n} créneaux",
+  days: "Jours",
+};

package/src/locales/hi.js

@@ -0,0 +1,18 @@
+export default {
+  previous: "पिछले दिन",
+  next: "अगले दिन",
+  home: "शुरुआत पर वापस जाएँ",
+  nextAvailability: "अगली उपलब्धता",
+  showMore: "और उपलब्धताएँ दिखाएँ",
+  showLess: "कम दिखाएँ",
+  loading: "उपलब्धता लोड हो रही है",
+  empty: "कोई उपलब्धता नहीं",
+  closed: "बंद",
+  closedRange: "इस अवधि के दौरान बंद",
+  rangeEmptyTitle: "इस अवधि में कोई स्लॉट उपलब्ध नहीं",
+  rangeEmptyDescription: "{start} से {end} तक",
+  rangeEmptyNext: "अगली अवधि देखें",
+  oneSlot: "1 स्लॉट",
+  manySlots: "{n} स्लॉट",
+  days: "दिन",
+};