@agencecinq/calendar 1.0.0

package/README.md

@@ -0,0 +1,187 @@
+# @agencecinq/calendar
+
+[![](https://img.shields.io/npm/v/@agencecinq/calendar)](https://www.npmjs.com/package/@agencecinq/calendar)
+
+> Accessible date / range picker as a lightweight Web Component (`<cinq-calendar>`).
+
+Markup and CSS are yours — the package fills the grid and handles selection.
+Aligned with the
+[WAI-ARIA Authoring Practices date picker grid](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/).
+
+Inspired by [`@19h47/calendar`](https://github.com/19h47/19h47-calendar).
+
+## Installation
+
+```bash
+pnpm add @agencecinq/calendar
+```
+
+## Markup
+
+Required hooks:
+
+| Selector | Role |
+| -------- | ---- |
+| `<cinq-calendar>` | Host element |
+| `.js-previous` / `.js-next` | Month navigation (optional) |
+| `.js-title` | Month / year label; click advances to the next month (same as `.js-next`) |
+| `.js-days` | Weekday headers row |
+| `.js-body` | Day cells |
+| `.js-day` | Day button (generated) |
+
+```html
+<cinq-calendar locale="fr" deselect>
+  <header>
+    <button type="button" class="js-previous" aria-label="Previous month">Previous</button>
+    <button type="button" class="js-title" id="calendar-label" aria-live="polite"></button>
+    <button type="button" class="js-next" aria-label="Next month">Next</button>
+  </header>
+  <table role="grid" aria-labelledby="calendar-label">
+    <thead>
+      <tr class="js-days"></tr>
+    </thead>
+    <tbody class="js-body"></tbody>
+  </table>
+</cinq-calendar>
+```
+
+## Usage
+
+```js
+import "@agencecinq/calendar";
+import { EVENTS } from "@agencecinq/utils";
+
+const el = document.querySelector("cinq-calendar");
+
+el.addEventListener(EVENTS.CALENDAR_CHANGE, ({ detail }) => {
+  // detail.values → string[] (`YYYY-MM-DD`)
+  console.log(detail.values);
+});
+```
+
+Importing the package registers the custom element. The calendar mounts on
+`connectedCallback` — no manual `init()` is required.
+
+> **HTML is the source of truth.** Provide `role="grid"`, `aria-labelledby`,
+> `aria-live` on the title, and `aria-label` on nav buttons yourself.
+
+### Single date
+
+```html
+<cinq-calendar single deselect>…</cinq-calendar>
+```
+
+### Date range
+
+```html
+<cinq-calendar single="false">…</cinq-calendar>
+```
+
+### Locale & week start
+
+`locale` drives labels via `Intl`. Week start defaults from the locale
+(`weekInfo`); pass `first-day` to override.
+
+```html
+<cinq-calendar locale="fr">…</cinq-calendar>
+<!-- fr → week starts Monday -->
+
+<cinq-calendar locale="en" first-day="1">…</cinq-calendar>
+<!-- force Monday despite en -->
+```
+
+Update at runtime:
+
+```js
+import { getWeekStart } from "@agencecinq/calendar";
+
+el.options.locale = "ja";
+el.options.firstDay = getWeekStart("ja");
+el.render();
+```
+
+### Custom labels
+
+```js
+el.options.days = ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"];
+el.options.months = [
+  "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
+  "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre",
+];
+el.render();
+```
+
+### Cell hook
+
+Override `renderInner` to enrich or rebuild each day cell. Keep `.js-day` and
+`data-day`.
+
+```js
+el.renderInner = (inner, date) => {
+  const button = inner.querySelector(".js-day");
+  if (!button) return;
+
+  button.classList.add("MyDay");
+  button.innerHTML = `<time datetime="${date.toISOString().slice(0, 10)}">${date.getDate()}</time>`;
+};
+```
+
+## Attributes
+
+| Attribute | Description |
+| --------- | ----------- |
+| `locale` / `data-locale` | BCP 47 locale for title and weekday/month labels |
+| `single` | Single date (`true`, default) vs range (`false`) |
+| `deselect` | Allow clearing the selection in single mode |
+| `allow-past` | Allow selecting past dates |
+| `first-day` | Week start (`0`=Sun … `6`=Sat); defaults from locale |
+| `button-class` | Extra classes on day buttons |
+| `name` | Forwarded in `calendar:change` detail |
+| `data-month` | Initial month (`0`–`11`) |
+| `data-year` | Initial year |
+| `data-picked-dates` | JSON array of `YYYY-MM-DD` days to preselect |
+
+## Keyboard (focus in the grid)
+
+| Key | Action |
+| --- | ------ |
+| Arrow keys | Move by day / week (crosses months) |
+| Home / End | First / last day of the week |
+| Page Up / Page Down | Previous / next month |
+| Shift + Page Up / Down | Previous / next year |
+| Enter / Space | Select the focused day |
+
+## Events
+
+Dispatched on the host `<cinq-calendar>` (bubble). Constants live on
+`@agencecinq/utils` `EVENTS`:
+
+| Event | Constant | Detail |
+| ----- | -------- | ------ |
+| `calendar:change` | `CALENDAR_CHANGE` | `{ values: string[], name?: string }` |
+
+## API
+
+| Method / property | Description |
+| ----------------- | ----------- |
+| `options` | Runtime options object |
+| `picked` | Selected days as `YYYY-MM-DD` |
+| `current` | Viewed `{ month, year, day }` |
+| `render()` | Rebuild the grid |
+| `move(deltaMonths)` | Navigate by months |
+| `destroy()` | Detach listeners and clear the grid |
+| `renderInner(inner, date)` | Per-cell hook (override) |
+
+Exported helpers: `getWeekStart`, `toDayString`, `fromDayString`.
+
+## Build setup
+
+```bash
+pnpm -C packages/calendar build
+```
+
+## Acknowledgments
+
+- [`@19h47/calendar`](https://github.com/19h47/19h47-calendar) — original implementation
+- [WAI-ARIA APG — Date Picker Dialog](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)
+- Litepicker

package/dist/calendar.d.ts

@@ -0,0 +1,51 @@
+import { Current, Options } from './types.js';
+/**
+ * Date / range picker Web Component.
+ *
+ * Markup and CSS are yours — the package fills the grid and handles selection.
+ * Follows the WAI-ARIA APG date grid practices.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/
+ * @see https://github.com/19h47/19h47-calendar
+ */
+export declare class Calendar extends HTMLElement {
+    today: Date;
+    day: string;
+    options: Options;
+    current: Current;
+    private keyboard;
+    $body: HTMLTableSectionElement | null;
+    $title: HTMLElement | null;
+    $next: HTMLButtonElement | null;
+    $previous: HTMLButtonElement | null;
+    /** Selected days as `YYYY-MM-DD`. */
+    picked: string[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readOptions;
+    init(): void;
+    destroy(): void;
+    move(deltaMonths: number, { focus }?: {
+        focus?: boolean | undefined;
+    }): void;
+    persistPicked(): void;
+    setDaySelected($el: HTMLElement, selected: boolean): void;
+    handleClick: (event: MouseEvent) => void;
+    /** Paint in-between days while choosing the range end (mouse or keyboard). */
+    previewRange(to: string): void;
+    handleMousemove: (event: MouseEvent) => void;
+    getMonthName(month: number): string;
+    getWeekdays(): string[];
+    renderDays(): void;
+    renderHeader(month: number, year: number): void;
+    renderCalendar(month: number, year: number, { focus }?: {
+        focus?: boolean | undefined;
+    }): void;
+    reset(): void;
+    render({ focus }?: {
+        focus?: boolean | undefined;
+    }): void;
+    /** Override to enrich or rebuild each day cell. Keep `.js-day` and `data-day`. */
+    renderInner(_inner: HTMLElement, _date: Date): void;
+}
+//# sourceMappingURL=calendar.d.ts.map

package/dist/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../src/calendar.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,OAAO,EAAE,OAAO,EAAgB,MAAM,YAAY,CAAC;AAkD/E;;;;;;;;GAQG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACvC,KAAK,EAAE,IAAI,CAAc;IACzB,GAAG,SAAM;IACT,OAAO,EAAE,OAAO,CAQd;IACF,OAAO,EAAE,OAAO,CAAoC;IAEpD,OAAO,CAAC,QAAQ,CAAyB;IAEzC,KAAK,EAAE,uBAAuB,GAAG,IAAI,CAAQ;IAC7C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAQ;IAClC,KAAK,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IACvC,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAE3C,qCAAqC;IACrC,MAAM,EAAE,MAAM,EAAE,CAAM;IAEtB,iBAAiB,IAAI,IAAI;IAgCzB,oBAAoB,IAAI,IAAI;IAS5B,OAAO,CAAC,WAAW;IAuBnB,IAAI,IAAI,IAAI;IAqBZ,OAAO,IAAI,IAAI;IAef,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,KAAY,EAAE;;KAAK;IAW/C,aAAa;IAWb,cAAc,CAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,OAAO;IAWlD,WAAW,GAAI,OAAO,UAAU,UAsD9B;IAEF,8EAA8E;IAC9E,YAAY,CAAC,EAAE,EAAE,MAAM;IAkDvB,eAAe,GAAI,OAAO,UAAU,UAalC;IAEF,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAOnC,WAAW,IAAI,MAAM,EAAE;IAMvB,UAAU;IAsBV,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM;IAqBxC,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,KAAa,EAAE;;KAAK;IAoFlE,KAAK;IAML,MAAM,CAAC,EAAE,KAAa,EAAE;;KAAK;IAO7B,kFAAkF;IAClF,WAAW,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI;CAC7C"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Calendar } from './calendar.js';
+export { Calendar };
+export type { ChangeDetail, Current, Options, StateClasses } from './types.js';
+export { getWeekStart, toDayString, fromDayString } from './utils.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,340 @@
+//#region ../utils/dist/index.js
+var e = {
+	DRAWER_CLOSE: "drawer-close",
+	DRAWER_OPEN: "drawer-open",
+	DRAWER_TOGGLE: "drawer-toggle",
+	MODAL_CLOSE: "modal-close",
+	MODAL_OPEN: "modal-open",
+	MODAL_TOGGLE: "modal-toggle",
+	SPINBUTTON_CHANGE: "spinbutton-change",
+	DISCLOSURE_BUTTON_OPEN: "disclosure-button:open",
+	DISCLOSURE_BUTTON_CLOSE: "disclosure-button:close",
+	SWITCH_ACTIVATE: "switch:activate",
+	SWITCH_DEACTIVATE: "switch:deactivate",
+	ACCORDION_PANEL_OPEN: "accordion-panel:open",
+	ACCORDION_PANEL_CLOSE: "accordion-panel:close",
+	COMBOBOX_LOADING: "combobox:loading",
+	COMBOBOX_LOADED: "combobox:loaded",
+	COMBOBOX_UPDATE: "combobox:update",
+	COMBOBOX_SUBMIT: "combobox:submit",
+	COMBOBOX_EMPTY: "combobox:empty",
+	WINDOWSPLITTER_CHANGE: "windowsplitter:change",
+	CALENDAR_CHANGE: "calendar:change",
+	TAB_BEFORE_ACTIVATE: "tab-before-activate",
+	TAB_ACTIVATE: "tab-activate",
+	TAB_DELETE: "tab-delete",
+	CART_BEFORE_ADD: "cart-before-add",
+	CART_BEFORE_UPDATE: "cart-before-update",
+	CART_UPDATE: "cart-update",
+	VARIANT_CHANGE: "variant-change"
+}, t = (e, t, n, r = {}) => {
+	let { bubbles: i = !0, cancelable: a = !0 } = r;
+	return e.dispatchEvent(new CustomEvent(t, {
+		bubbles: i,
+		cancelable: a,
+		detail: n
+	}));
+}, n = (e, t) => {
+	if (e == null || e === "") return t;
+	let n = Number(e);
+	return Number.isFinite(n) ? n : t;
+}, r = (e, t = !1) => e == null ? t : e !== "false" && e !== "0", i = (e, t) => {
+	let n = null, r = null, i = () => {
+		r && e(...r), n = null;
+	};
+	return (...e) => {
+		r = e, n ||= setTimeout(i, t);
+	};
+}, a = document.documentElement, { body: o } = document;
+a.hasAttribute("data-debug");
+var s = {
+	x: 0,
+	y: 0
+};
+window.addEventListener("pointermove", i(({ x: e, y: t }) => {
+	s.x = e, s.y = t;
+}, 100), { passive: !0 }), window.matchMedia("(width >= 64rem)"), window.matchMedia("(min-width: 1280px)"), window.matchMedia("(min-width: 1440px)"), window.matchMedia("(min-width: 1920px)");
+//#endregion
+//#region src/utils.ts
+function c(e) {
+	return `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
+}
+function l(e) {
+	let [t, n, r] = e.split("-").map(Number);
+	return new Date(t, n - 1, r);
+}
+function u(e, t, n) {
+	return e <= n && e >= t;
+}
+function d(e, t) {
+	return 32 - new Date(e, t, 32).getDate();
+}
+function f(e, t, n = 0) {
+	return (new Date(t, e).getDay() - n + 7) % 7;
+}
+function p(e) {
+	try {
+		let t = new Intl.Locale(e).getWeekInfo?.();
+		if (t) return t.firstDay === 7 ? 0 : t.firstDay;
+	} catch {}
+	return 0;
+}
+function m(e, t = "short") {
+	return Array.from({ length: 7 }, (n, r) => new Date(2020, 0, 5 + r).toLocaleDateString(e, { weekday: t }));
+}
+function h(e, t) {
+	return new Date(2020, t, 1).toLocaleDateString(e, { month: "long" });
+}
+//#endregion
+//#region src/keyboard.ts
+var g = class {
+	host;
+	constructor(e) {
+		this.host = e;
+	}
+	setFocusDay(e, { focus: t = !0 } = {}) {
+		this.host.$body?.querySelectorAll(".js-day").forEach((e) => {
+			e.tabIndex = -1;
+		}), e.tabIndex = 0, this.host.current.day = e.getAttribute("data-day"), t && e.focus(), this.host.current.day && this.host.previewRange(this.host.current.day);
+	}
+	dayInView() {
+		let { current: e } = this.host, t = e.day ? l(e.day).getDate() : 1, n = d(e.year, e.month);
+		return c(new Date(e.year, e.month, Math.min(t, n)));
+	}
+	focusDayByOffset(e, t) {
+		let n = l(e);
+		n.setDate(n.getDate() + t);
+		let r = c(n);
+		this.host.current.day = r, this.host.current.year = n.getFullYear(), this.host.current.month = n.getMonth();
+		let i = this.host.$body?.querySelector(`[data-day="${r}"]`);
+		if (i) {
+			this.setFocusDay(i);
+			return;
+		}
+		this.host.render({ focus: !0 });
+	}
+	sync({ focus: e = !1 } = {}) {
+		if (!this.host.$body) return;
+		let t = Array.from(this.host.$body.querySelectorAll(".js-day"));
+		if (!t.length) return;
+		let n = (e) => t.find((t) => t.getAttribute("data-day") === e), r = this.host.current.day && (n(this.host.current.day) || n(this.dayInView())) || t.find((e) => this.host.picked.includes(e.getAttribute("data-day") || "")) || n(this.host.day) || t[0];
+		this.setFocusDay(r, { focus: e });
+	}
+	handleKeydown = (e) => {
+		let t = e.target.closest(".js-day");
+		if (!t) return;
+		let n = t.getAttribute("data-day"), r = (l(n).getDay() - this.host.options.firstDay + 7) % 7, { key: i, code: a } = e, o = () => {
+			t.getAttribute("aria-disabled") !== "true" && (e.preventDefault(), t.click());
+		}, s = {
+			ArrowLeft: () => {
+				e.preventDefault(), this.focusDayByOffset(n, -1);
+			},
+			ArrowRight: () => {
+				e.preventDefault(), this.focusDayByOffset(n, 1);
+			},
+			ArrowUp: () => {
+				e.preventDefault(), this.focusDayByOffset(n, -7);
+			},
+			ArrowDown: () => {
+				e.preventDefault(), this.focusDayByOffset(n, 7);
+			},
+			Home: () => {
+				e.preventDefault(), this.focusDayByOffset(n, -r);
+			},
+			End: () => {
+				e.preventDefault(), this.focusDayByOffset(n, 6 - r);
+			},
+			PageUp: () => {
+				e.preventDefault(), this.host.move(e.shiftKey ? -12 : -1);
+			},
+			PageDown: () => {
+				e.preventDefault(), this.host.move(e.shiftKey ? 12 : 1);
+			},
+			Enter: o,
+			" ": o,
+			default: () => !1
+		};
+		return (s[i || a] || s.default)();
+	};
+}, _ = {
+	active: "active",
+	range: "range",
+	start: "start",
+	end: "end"
+}, v = (e, t, n, { disabled: r, selected: i, current: a, tabIndex: o }) => `
+	<button
+		type="button"
+		class="js-day${n ? ` ${n}` : ""}"
+		data-day="${e}"
+		tabindex="${o}"
+		${r ? "aria-disabled=\"true\"" : ""}
+		${i ? "aria-selected=\"true\"" : ""}
+		${a ? "aria-current=\"date\"" : ""}
+	>
+		${t}
+	</button>
+`, y = () => document.documentElement.getAttribute("lang") || "en", b = class extends HTMLElement {
+	today = /* @__PURE__ */ new Date();
+	day = "";
+	options = {
+		single: !0,
+		firstDay: 0,
+		stateClasses: { ..._ },
+		locale: "en",
+		buttonClass: "",
+		deselect: !1,
+		allowPast: !1
+	};
+	current = {
+		month: 0,
+		year: 0,
+		day: null
+	};
+	keyboard = null;
+	$body = null;
+	$title = null;
+	$next = null;
+	$previous = null;
+	picked = [];
+	connectedCallback() {
+		let e = /* @__PURE__ */ new Date();
+		if (this.today = new Date(e.getFullYear(), e.getMonth(), e.getDate()), this.day = c(this.today), this.options = this.readOptions(), this.current = {
+			month: n(this.getAttribute("data-month"), this.today.getMonth()),
+			year: n(this.getAttribute("data-year"), this.today.getFullYear()),
+			day: null
+		}, this.$title = this.querySelector(".js-title"), this.$body = this.querySelector(".js-body"), this.$next = this.querySelector(".js-next"), this.$previous = this.querySelector(".js-previous"), !this.$body) throw Error("Calendar: .js-body element not found");
+		this.keyboard = new g(this), this.init();
+	}
+	disconnectedCallback() {
+		this.destroy(), this.keyboard = null, this.$body = null, this.$title = null, this.$next = null, this.$previous = null;
+	}
+	readOptions() {
+		let e = this.getAttribute("locale") || this.getAttribute("data-locale") || y(), t = this.getAttribute("first-day");
+		return {
+			single: r(this.getAttribute("single"), !0),
+			firstDay: t != null && t !== "" ? n(t, p(e)) : p(e),
+			stateClasses: { ..._ },
+			locale: e,
+			buttonClass: this.getAttribute("button-class") || "",
+			deselect: r(this.getAttribute("deselect"), !1),
+			allowPast: r(this.getAttribute("allow-past"), !1),
+			name: this.getAttribute("name") || void 0
+		};
+	}
+	init() {
+		try {
+			this.picked = JSON.parse(this.getAttribute("data-picked-dates") || "[]");
+		} catch {
+			this.picked = [];
+		}
+		this.render(), this.addEventListener("click", this.handleClick), this.$body && this.keyboard && (this.$body.addEventListener("keydown", this.keyboard.handleKeydown, !1), this.options.single || this.$body.addEventListener("mousemove", this.handleMousemove, !1));
+	}
+	destroy() {
+		this.removeEventListener("click", this.handleClick), this.$body && this.keyboard && (this.$body.removeEventListener("keydown", this.keyboard.handleKeydown, !1), this.$body.removeEventListener("mousemove", this.handleMousemove, !1)), this.reset();
+	}
+	move(e, { focus: t = !0 } = {}) {
+		let n = new Date(this.current.year, this.current.month + e, 1);
+		this.current.year = n.getFullYear(), this.current.month = n.getMonth(), this.render({ focus: t });
+	}
+	persistPicked() {
+		this.setAttribute("data-picked-dates", JSON.stringify(this.picked));
+		let n = {
+			values: this.picked,
+			name: this.options.name
+		};
+		t(this, e.CALENDAR_CHANGE, n, { cancelable: !1 });
+	}
+	setDaySelected(e, t) {
+		if (t) {
+			e.classList.add(this.options.stateClasses.active), e.setAttribute("aria-selected", "true");
+			return;
+		}
+		e.classList.remove(this.options.stateClasses.active), e.removeAttribute("aria-selected");
+	}
+	handleClick = (e) => {
+		let t = e.target;
+		if (t.closest(".js-next") || t.closest(".js-title")) return this.move(1, { focus: !1 });
+		if (t.closest(".js-previous")) return this.move(-1, { focus: !1 });
+		if (t = t.closest(".js-day"), !t || t.getAttribute("aria-disabled") === "true") return;
+		let n = t.getAttribute("data-day");
+		return this.keyboard?.setFocusDay(t, { focus: !1 }), this.options.single ? t.classList.contains(this.options.stateClasses.active) && this.options.deselect ? (this.picked = [], this.setDaySelected(t, !1), this.persistPicked()) : (this.picked.forEach((e) => {
+			let t = this.$body?.querySelector(`[data-day="${e}"]`);
+			t && this.setDaySelected(t, !1);
+		}), this.picked = [n], this.setDaySelected(t, !0), this.persistPicked()) : (1 < this.picked.length && (this.$body?.querySelectorAll(".js-day").forEach((e) => {
+			e.classList.remove(this.options.stateClasses.range), this.setDaySelected(e, !1);
+		}), this.picked = [], this.setAttribute("data-picked-dates", JSON.stringify(this.picked))), this.picked.push(n), this.picked.sort(), this.setDaySelected(t, !0), this.persistPicked());
+	};
+	previewRange(e) {
+		if (this.options.single || this.picked.length !== 1 || !this.$body) return;
+		let t = this.$body.querySelector(`[data-day="${e}"]`);
+		if (!t || t.getAttribute("aria-disabled") === "true") return;
+		let n = this.$body.querySelectorAll(".js-day"), r = this.$body.querySelector(`[data-day="${this.picked[0]}"]`), i = !1, a = this.picked[0], o = e;
+		a > o && (i = !0, o = this.picked[0], a = e), n.forEach((e) => {
+			let t = e.getAttribute("data-day");
+			e.classList.remove(this.options.stateClasses.range, this.options.stateClasses.end, this.options.stateClasses.start), u(t, a, o) && e.classList.add(this.options.stateClasses.range);
+		}), r?.classList.add(this.options.stateClasses.start), t.classList.add(this.options.stateClasses.end), i && (r?.classList.add(this.options.stateClasses.end), r?.classList.remove(this.options.stateClasses.start), t.classList.add(this.options.stateClasses.start), t.classList.remove(this.options.stateClasses.end));
+	}
+	handleMousemove = (e) => {
+		let t = e.target.closest(".js-day");
+		if (!t) return;
+		let n = t.getAttribute("data-day");
+		n && this.previewRange(n);
+	};
+	getMonthName(e) {
+		return this.options.months?.[e] ?? h(this.options.locale, e);
+	}
+	getWeekdays() {
+		return this.options.days ?? m(this.options.locale, "short");
+	}
+	renderDays() {
+		let e = this.querySelector(".js-days");
+		if (!e) return;
+		let t = this.getWeekdays(), n = m(this.options.locale, "long");
+		e.innerHTML = "";
+		for (let r = 0; r < 7; r += 1) {
+			let i = (this.options.firstDay + r) % 7, a = document.createElement("th");
+			a.scope = "col", a.abbr = n[i], a.textContent = t[i], e.appendChild(a);
+		}
+	}
+	renderHeader(e, t) {
+		this.$title && (this.$title.textContent = new Date(t, e, 1).toLocaleDateString(this.options.locale, {
+			month: "long",
+			year: "numeric"
+		})), this.$previous?.setAttribute("data-content", this.getMonthName(0 > e - 1 ? 11 : e - 1)), this.$next?.setAttribute("data-content", this.getMonthName(11 < e + 1 ? 0 : e + 1));
+	}
+	renderCalendar(e, t, { focus: n = !1 } = {}) {
+		if (!this.$body) return;
+		let r = this.options.buttonClass ?? "", i = 1;
+		for (let n = 0; 6 >= n; n += 1) {
+			let a = document.createElement("tr");
+			for (let o = this.options.firstDay; o < 7 + this.options.firstDay; o += 1) {
+				let s = new Date(t, e, i), l = document.createElement("td"), p = document.createElement("div");
+				if (n === 0 && o < this.options.firstDay + f(e, t, this.options.firstDay)) a.appendChild(l);
+				else if (i > d(t, e)) break;
+				else {
+					let e = c(s), t = e === this.day, n = this.options.allowPast || e >= this.day, o = this.picked.includes(e);
+					p.innerHTML = v(e, i, r, {
+						disabled: !n,
+						selected: o,
+						current: t,
+						tabIndex: -1
+					});
+					let d = p.querySelector("button");
+					o && (d.classList.add(this.options.stateClasses.active), e === this.picked[0] && d.classList.add(this.options.stateClasses.start), this.picked.length > 1 && e === this.picked[this.picked.length - 1] && d.classList.add(this.options.stateClasses.end)), !this.options.single && this.picked.length === 2 && u(e, this.picked[0], this.picked[1]) && d.classList.add(this.options.stateClasses.range), this.renderInner(p, s), l.appendChild(p), a.appendChild(l), i += 1;
+				}
+			}
+			a.childNodes.length && this.$body.appendChild(a);
+		}
+		this.keyboard?.sync({ focus: n });
+	}
+	reset() {
+		this.$body && (this.$body.innerHTML = "");
+	}
+	render({ focus: e = !1 } = {}) {
+		this.reset(), this.renderDays(), this.renderHeader(this.current.month, this.current.year), this.renderCalendar(this.current.month, this.current.year, { focus: e });
+	}
+	renderInner(e, t) {}
+};
+customElements.get("cinq-calendar") || customElements.define("cinq-calendar", b);
+//#endregion
+export { b as Calendar, l as fromDayString, p as getWeekStart, c as toDayString };

package/dist/keyboard.d.ts

@@ -0,0 +1,17 @@
+import { Calendar } from './calendar.js';
+/** APG day-grid focus: roving tabindex + keyboard navigation. */
+export default class Keyboard {
+    host: Calendar;
+    constructor(host: Calendar);
+    setFocusDay($button: HTMLButtonElement, { focus }?: {
+        focus?: boolean | undefined;
+    }): void;
+    /** Same day-of-month in the viewed month, or last day if it does not exist (APG). */
+    dayInView(): string;
+    focusDayByOffset(fromDay: string, dayDelta: number): void;
+    sync({ focus }?: {
+        focus?: boolean | undefined;
+    }): void;
+    handleKeydown: (event: KeyboardEvent) => false | void;
+}
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../src/keyboard.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,iEAAiE;AACjE,MAAM,CAAC,OAAO,OAAO,QAAQ;IAC3B,IAAI,EAAE,QAAQ,CAAC;gBAEH,IAAI,EAAE,QAAQ;IAI1B,WAAW,CAAC,OAAO,EAAE,iBAAiB,EAAE,EAAE,KAAY,EAAE;;KAAK;IAiB7D,qFAAqF;IACrF,SAAS,IAAI,MAAM;IAYnB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAqBlD,IAAI,CAAC,EAAE,KAAa,EAAE;;KAAK;IA4B3B,aAAa,GAAI,OAAO,aAAa,kBA4DnC;CACH"}

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+export interface StateClasses {
+    active: string;
+    range: string;
+    start: string;
+    end: string;
+}
+export interface Options {
+    single?: boolean;
+    firstDay: number;
+    stateClasses: StateClasses;
+    locale: string;
+    buttonClass?: string;
+    months?: string[];
+    days?: string[];
+    deselect?: boolean;
+    name?: string;
+    allowPast?: boolean;
+}
+export interface Current {
+    month: number;
+    year: number;
+    /** Navigation day as `YYYY-MM-DD` (may be outside the viewed month until render). */
+    day: string | null;
+}
+export interface ChangeDetail {
+    values: string[];
+    name?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,OAAO;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,qFAAqF;IACrF,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}

package/dist/utils.d.ts

@@ -0,0 +1,24 @@
+/** Local calendar day as `YYYY-MM-DD`. */
+export declare function toDayString(date: Date): string;
+/** Parse a local `YYYY-MM-DD` day into a Date at local midnight. */
+export declare function fromDayString(day: string): Date;
+/** Inclusive `YYYY-MM-DD` range check. */
+export declare function isBetween(check: string, from: string, to: string): boolean;
+/** @see https://dzone.com/articles/determining-number-days-month */
+export declare function getDaysInMonth(year: number, month: number): number;
+/**
+ * How many weekdays precede the 1st of the month, given a week start
+ * (`0`=Sun … `6`=Sat).
+ *
+ * @see https://stackoverflow.com/a/33508649/5091221
+ */
+export declare function getLeadingDays(month: number, year: number, weekStart?: number): number;
+/**
+ * Week start for a locale as JS `getDay()` (0=Sun … 6=Sat).
+ * Falls back to Sunday when `Intl.Locale.getWeekInfo` is unavailable.
+ */
+export declare function getWeekStart(locale: string): number;
+/** Sunday-first weekday labels (Jan 5, 2020 was a Sunday). */
+export declare function getIntlWeekdays(locale: string, weekday?: Intl.DateTimeFormatOptions["weekday"]): string[];
+export declare function getIntlMonth(locale: string, month: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C,wBAAgB,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAM9C;AAED,oEAAoE;AACpE,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAI/C;AAED,0CAA0C;AAC1C,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,OAAO,CAE1E;AAED,oEAAoE;AACpE,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAElE;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,SAAS,SAAI,GACZ,MAAM,CAGR;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAcnD;AAED,8DAA8D;AAC9D,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,OAAO,GAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAW,GACvD,MAAM,EAAE,CAIV;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAIlE"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@agencecinq/calendar",
+  "version": "1.0.0",
+  "description": "Accessible date / range picker as a lightweight Web Component.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jérémy Levron <jeremy@agencecinq.com> (https://agencecinq.com)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agencecinq/shopify.git",
+    "directory": "packages/calendar"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@agencecinq/utils": "*"
+  },
+  "devDependencies": {
+    "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
+    "@agencecinq/utils": "5.2.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch"
+  }
+}