@brandsync/wc 1.9.0 → 1.10.0

package/dist/collection/components/bs-datepicker/bs-datepicker.js

@@ -0,0 +1,782 @@
+import { h } from "@stencil/core";
+/**
+ * An inline calendar for picking a single date, or a start/end date range. Matches the Figma
+ * "Date picker" component's two types: "Default" (month and year dropdowns above the grid) and
+ * "Range" (start and end date fields above the grid, with the days between highlighted).
+ *
+ * Dates are always `YYYY-MM-DD` strings, interpreted in the user's local time zone -- never full
+ * ISO timestamps -- so a date can't shift by a day across time zones.
+ *
+ * The calendar renders inline at a fixed width; to show it as a popover, put it inside a
+ * `bs-menu` or your own overlay.
+ *
+ * ## When to use
+ * - Picking a date where seeing the surrounding days of the week/month helps (a booking, a
+ *   deadline, a report window).
+ * - Picking a period (`range`) such as a start and end date.
+ *
+ * ## When not to use
+ * - A date the user knows by heart and can type quickly (a birth date) -- `bs-input type="date"`
+ *   is faster there.
+ *
+ * ## Keyboard
+ * Arrow keys move by day/week, Home/End jump to the start/end of the week, PageUp/PageDown move by
+ * month (with Shift, by year), Enter/Space select the focused day.
+ *
+ * @part container - The outer card.
+ * @part header - The row of month/year dropdowns (default) or start/end fields (range).
+ * @part menu - The month/year dropdown list, when open (default mode).
+ * @part nav - The row holding the previous/next buttons and the title.
+ * @part prev - The previous-month button.
+ * @part next - The next-month button.
+ * @part title - The title between the nav buttons.
+ * @part weekday - Each weekday column header.
+ * @part grid - The day grid.
+ * @part day - Each day button.
+ * @part selected - A selected day (the single date, or either end of a range), in addition to `day`.
+ * @part in-range - A day strictly between the range start and end, in addition to `day`.
+ * @part outside - A day from the previous/next month, in addition to `day`.
+ * @part today - Today's day button, in addition to `day`.
+ */
+export class BsDatepicker {
+    el;
+    internals;
+    initialValue = '';
+    initialStart = '';
+    initialEnd = '';
+    /** The `name` the value is submitted under in a surrounding `<form>`. In `range` mode the dates
+     * are submitted as `<name>-start` and `<name>-end`. */
+    name;
+    /** Select a start/end range instead of a single date. */
+    range = false;
+    /** The selected date (`YYYY-MM-DD`) in single mode. Mutable so a click updates it directly;
+     * `bsChange` still fires for the consumer to react. Ignored when `range` is set. */
+    value = '';
+    /** The range start (`YYYY-MM-DD`) in `range` mode. */
+    start = '';
+    /** The range end (`YYYY-MM-DD`) in `range` mode. */
+    end = '';
+    /** Earliest selectable date (`YYYY-MM-DD`). Earlier days render disabled. */
+    min;
+    /** Latest selectable date (`YYYY-MM-DD`). Later days render disabled. */
+    max;
+    /** BCP 47 locale used for month names, weekday names and the title. */
+    locale = 'en-GB';
+    /** First column of the grid: `0` for Sunday (the Figma spec), `1` for Monday, ... `6`. */
+    firstDayOfWeek = 0;
+    /** Label above the start field in `range` mode. */
+    startLabel = 'Start date';
+    /** Label above the end field in `range` mode. */
+    endLabel = 'End date';
+    /** Accessible name for the month dropdown (single mode). */
+    monthLabel = 'Month';
+    /** Accessible name for the year dropdown (single mode). */
+    yearLabel = 'Year';
+    /** Accessible name for the previous-month button. */
+    previousLabel = 'Previous month';
+    /** Accessible name for the next-month button. */
+    nextLabel = 'Next month';
+    /** Fires when the user changes the selection. Single mode: `{ value }`. Range mode: `{ start,
+     * end }` -- fired once for the first click (with an empty `end`) and again when the range is
+     * completed. Not fired when the props are set programmatically. */
+    bsChange;
+    /** First day of the month currently displayed. */
+    viewDate = firstOfMonth(new Date());
+    /** The day holding the roving tabindex. */
+    focusedIso = '';
+    /** The day the pointer is over while a range is half-picked, for the live range preview. */
+    hoverIso = '';
+    /** Text the user is typing into a range field, keyed by which field. Cleared on commit. */
+    draft = {};
+    /** Which header dropdown (single mode) is open. */
+    openMenu = null;
+    shouldFocusDay = false;
+    menuToScroll = false;
+    componentWillLoad() {
+        this.initialValue = this.value;
+        this.initialStart = this.start;
+        this.initialEnd = this.end;
+        this.showSelection();
+        this.syncFormValue();
+    }
+    componentDidRender() {
+        if (this.menuToScroll) {
+            this.menuToScroll = false;
+            // Centre the current month/year in the list. Done by hand rather than scrollIntoView, which
+            // would also scroll the page.
+            const menu = this.el.shadowRoot.querySelector('.bs-datepicker__menu');
+            const current = menu?.querySelector('[data-current]');
+            if (menu && current)
+                menu.scrollTop = current.offsetTop - menu.clientHeight / 2 + current.offsetHeight / 2;
+        }
+        if (!this.shouldFocusDay)
+            return;
+        this.shouldFocusDay = false;
+        const day = this.el.shadowRoot.querySelector(`[data-date="${this.focusedIso}"]`);
+        day?.focus();
+    }
+    onSelectionChange() {
+        this.syncFormValue();
+    }
+    onSelectionJump() {
+        // A programmatic change should bring the new selection into view.
+        this.showSelection();
+    }
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.start = this.initialStart;
+        this.end = this.initialEnd;
+        this.draft = {};
+    }
+    showSelection() {
+        const anchor = parseIso(this.range ? this.start : this.value);
+        if (anchor)
+            this.viewDate = firstOfMonth(anchor);
+    }
+    syncFormValue() {
+        if (!this.internals?.setFormValue)
+            return;
+        if (this.range) {
+            if (!this.name) {
+                this.internals.setFormValue(null);
+                return;
+            }
+            const data = new FormData();
+            data.append(`${this.name}-start`, this.start ?? '');
+            data.append(`${this.name}-end`, this.end ?? '');
+            this.internals.setFormValue(data);
+        }
+        else {
+            this.internals.setFormValue(this.value ?? '');
+        }
+    }
+    // --- selection ---------------------------------------------------------------------------
+    isDisabled(d) {
+        const min = parseIso(this.min);
+        const max = parseIso(this.max);
+        return (!!min && d < min) || (!!max && d > max);
+    }
+    selectDay(d) {
+        if (this.isDisabled(d))
+            return;
+        const iso = toIso(d);
+        if (d.getMonth() !== this.viewDate.getMonth() || d.getFullYear() !== this.viewDate.getFullYear()) {
+            this.viewDate = firstOfMonth(d);
+        }
+        this.focusedIso = iso;
+        if (!this.range) {
+            this.value = iso;
+            this.bsChange.emit({ value: iso });
+            return;
+        }
+        // First click, or a click after a completed range, starts a new range. A click before the
+        // current start restarts from there rather than producing a backwards range.
+        if (!this.start || this.end || iso < this.start) {
+            this.start = iso;
+            this.end = '';
+        }
+        else {
+            this.end = iso;
+        }
+        this.hoverIso = '';
+        this.draft = {};
+        this.bsChange.emit({ start: this.start, end: this.end });
+    }
+    commitDraft(field) {
+        const text = this.draft[field];
+        if (text === undefined)
+            return;
+        const d = parseIso(text);
+        const next = { ...this.draft };
+        delete next[field];
+        this.draft = next;
+        if (!d || this.isDisabled(d))
+            return; // invalid text: fall back to the committed value
+        let start = field === 'start' ? toIso(d) : this.start;
+        let end = field === 'end' ? toIso(d) : this.end;
+        if (start && end && end < start) {
+            if (field === 'start')
+                end = '';
+            else
+                start = '';
+        }
+        this.start = start;
+        this.end = end;
+        this.showSelection();
+        this.bsChange.emit({ start, end });
+    }
+    // --- navigation --------------------------------------------------------------------------
+    moveView(months) {
+        const v = this.viewDate;
+        this.viewDate = new Date(v.getFullYear(), v.getMonth() + months, 1);
+    }
+    onKeyDown = (ev, current) => {
+        const step = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+        let next;
+        if (ev.key in step) {
+            next = addDays(current, step[ev.key]);
+        }
+        else if (ev.key === 'Home' || ev.key === 'End') {
+            const col = (current.getDay() - this.safeFirstDay + 7) % 7;
+            next = addDays(current, ev.key === 'Home' ? -col : 6 - col);
+        }
+        else if (ev.key === 'PageUp' || ev.key === 'PageDown') {
+            const dir = ev.key === 'PageUp' ? -1 : 1;
+            next = addMonths(current, ev.shiftKey ? dir * 12 : dir);
+        }
+        else {
+            return;
+        }
+        ev.preventDefault();
+        this.focusedIso = toIso(next);
+        this.viewDate = firstOfMonth(next);
+        this.shouldFocusDay = true;
+    };
+    get safeFirstDay() {
+        const n = Math.trunc(Number(this.firstDayOfWeek));
+        return Number.isFinite(n) ? ((n % 7) + 7) % 7 : 0;
+    }
+    // --- rendering ---------------------------------------------------------------------------
+    get fmt() {
+        const locale = this.locale || 'en-GB';
+        try {
+            Intl.DateTimeFormat.supportedLocalesOf(locale);
+            return locale;
+        }
+        catch {
+            return 'en-GB';
+        }
+    }
+    formatField(iso) {
+        const d = parseIso(iso);
+        return d ? new Intl.DateTimeFormat(this.fmt, { day: 'numeric', month: 'short', year: 'numeric' }).format(d) : '';
+    }
+    titleText() {
+        const selected = !this.range ? parseIso(this.value) : undefined;
+        if (selected) {
+            return new Intl.DateTimeFormat(this.fmt, { day: 'numeric', month: 'long', year: 'numeric' }).format(selected);
+        }
+        return new Intl.DateTimeFormat(this.fmt, { month: 'long', year: 'numeric' }).format(this.viewDate);
+    }
+    monthOptions() {
+        const f = new Intl.DateTimeFormat(this.fmt, { month: 'long' });
+        return Array.from({ length: 12 }, (_, m) => ({ label: f.format(new Date(2000, m, 1)), value: String(m) }));
+    }
+    yearOptions() {
+        const current = this.viewDate.getFullYear();
+        const min = parseIso(this.min)?.getFullYear() ?? current - 100;
+        const max = parseIso(this.max)?.getFullYear() ?? current + 100;
+        const options = [];
+        for (let y = Math.min(min, current); y <= Math.max(max, current); y++) {
+            options.push({ label: String(y), value: String(y) });
+        }
+        return options;
+    }
+    weekdays() {
+        const f = new Intl.DateTimeFormat(this.fmt, { weekday: 'short' });
+        // 2023-01-01 was a Sunday.
+        return Array.from({ length: 7 }, (_, i) => f.format(new Date(2023, 0, 1 + ((this.safeFirstDay + i) % 7))));
+    }
+    gridDays() {
+        const first = this.viewDate;
+        const lead = (first.getDay() - this.safeFirstDay + 7) % 7;
+        const gridStart = addDays(first, -lead);
+        // Always 6 rows, so the card doesn't change height from month to month (as in the Figma).
+        return Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+    }
+    renderHeader() {
+        if (this.range) {
+            const field = (which, label) => (h("bs-input", { label: label, placeholder: "YYYY-MM-DD", value: this.draft[which] ?? this.formatField(this[which]), onBsInput: (ev) => (this.draft = { ...this.draft, [which]: ev.detail }), onBsChange: () => this.commitDraft(which), onFocusin: () => {
+                    // Typing is ISO: swap the pretty "12 Sept, 2026" for something parseable on focus.
+                    if (this.draft[which] === undefined)
+                        this.draft = { ...this.draft, [which]: this[which] };
+                }, onFocusout: () => this.commitDraft(which) }));
+            return (h("div", { part: "header", class: "bs-datepicker__header bs-datepicker__header--range" }, field('start', this.startLabel), field('end', this.endLabel)));
+        }
+        return (h("div", { part: "header", class: "bs-datepicker__header" }, this.renderDropdown('month', this.monthLabel, this.monthOptions(), String(this.viewDate.getMonth()), (value) => (this.viewDate = new Date(this.viewDate.getFullYear(), Number(value), 1))), this.renderDropdown('year', this.yearLabel, this.yearOptions(), String(this.viewDate.getFullYear()), (value) => (this.viewDate = new Date(Number(value), this.viewDate.getMonth(), 1)))));
+    }
+    /** A `bs-input type="dropdown"` trigger with our own `bs-menu` list below it. bs-input's built-in
+     * menu has no checkmark or scroll limit, so it's used only as the field look: it gets no
+     * `options` (so renders no menu of its own) and its `bsOpen` toggles ours. */
+    renderDropdown(which, label, options, current, onPick) {
+        const open = this.openMenu === which;
+        const close = () => {
+            this.openMenu = null;
+        };
+        return (h("div", { class: "bs-datepicker__dropdown", onKeyDown: (ev) => {
+                if (ev.key !== 'Escape' || !open)
+                    return;
+                close();
+                ev.currentTarget.querySelector('bs-input')?.focus();
+            }, onFocusout: (ev) => {
+                const related = ev.relatedTarget;
+                if (open && (!related || !ev.currentTarget.contains(related)))
+                    close();
+            } }, h("bs-input", { type: "dropdown", class: "bs-datepicker__select", label: label, value: options.find(o => o.value === current)?.label ?? '', open: open, onBsOpen: () => {
+                this.menuToScroll = !open;
+                this.openMenu = open ? null : which;
+            } }), open && (h("bs-menu", { part: "menu", class: "bs-datepicker__menu", role: "listbox" }, options.map(o => (h("bs-menu-item", { key: o.value, "data-current": o.value === current ? '' : undefined, "aria-current": o.value === current ? 'true' : undefined, onBsSelect: () => {
+                onPick(o.value);
+                close();
+                this.el.shadowRoot.querySelector(`.bs-datepicker__dropdown bs-input[label="${label}"]`)?.focus();
+            } }, h("span", { class: "bs-datepicker__option" }, h("span", null, o.label), o.value === current && (h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { d: "M5 12.5L10 17.5L19 7.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))))))));
+    }
+    render() {
+        const days = this.gridDays();
+        const todayIso = toIso(new Date());
+        const selectedStart = this.range ? this.start : this.value;
+        const selectedEnd = this.range ? this.end : '';
+        // While the range is half-picked, preview it up to the hovered day.
+        const previewEnd = this.range && this.start && !this.end && this.hoverIso > this.start ? this.hoverIso : selectedEnd;
+        const tabbable = days.some(d => toIso(d) === this.focusedIso && d.getMonth() === this.viewDate.getMonth())
+            ? this.focusedIso
+            : this.defaultTabbable(days);
+        const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
+        const weekdays = this.weekdays();
+        return (h("div", { key: '49e2ce73c32ee98eb2c8276fb23b159392b9292a', part: "container", class: "bs-datepicker" }, this.renderHeader(), h("div", { key: 'da69881edff77ee3584b4565a4b39024ce2cd4f7', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: 'f96dea3cc2821bf757afcee158c092deefe45b8b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '7be3e0ca1588852357d13ade50f594633f86a56a', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '513165ad97411656af1742376cf7d75eda544814', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'bc55234eb1bd053c87388e7d6ebe31049f903cea', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '2436e91d78710f7d0716553660c8e1fff2e7d2da', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '47f183221234d91d736f45207e84b14ee57b469f', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'bd4abceed66ef781fab224646d371b648d3c0d1d', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e669ad28eb8461dcf5a24191dca379ab3cbc0111', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '440719175dd4f4a745b9de22126029633bfe91a3', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+            const row = days.slice(r * 7, r * 7 + 7);
+            return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
+                const iso = toIso(d);
+                const outside = d.getMonth() !== this.viewDate.getMonth();
+                const isStart = iso === selectedStart;
+                const isEnd = !!selectedEnd && iso === selectedEnd;
+                const selected = isStart || isEnd;
+                const inRange = isInRange(iso);
+                // Figma: the band covers only the days between the two ends, rounded where a run
+                // starts/ends (also at a week boundary), with the end days sitting outside it.
+                const classes = {
+                    'bs-datepicker__cell': true,
+                    'bs-datepicker__cell--in-range': inRange,
+                    'bs-datepicker__cell--band-start': inRange && !(c > 0 && isInRange(toIso(row[c - 1]))),
+                    'bs-datepicker__cell--band-end': inRange && !(c < 6 && isInRange(toIso(row[c + 1]))),
+                };
+                const parts = ['day', selected && 'selected', inRange && 'in-range', outside && 'outside', iso === todayIso && 'today']
+                    .filter(Boolean)
+                    .join(' ');
+                return (h("div", { class: classes, role: "gridcell", "aria-selected": selected || inRange ? 'true' : 'false' }, h("button", { part: parts, type: "button", class: {
+                        'bs-datepicker__day': true,
+                        'bs-datepicker__day--selected': selected,
+                        'bs-datepicker__day--in-range': inRange,
+                        'bs-datepicker__day--outside': outside,
+                        'bs-datepicker__day--today': iso === todayIso,
+                    }, "data-date": iso, tabindex: iso === tabbable ? 0 : -1, disabled: this.isDisabled(d), "aria-current": iso === todayIso ? 'date' : undefined, "aria-label": new Intl.DateTimeFormat(this.fmt, { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric' }).format(d), onClick: () => this.selectDay(d), onKeyDown: ev => this.onKeyDown(ev, d), onMouseEnter: () => {
+                        if (this.range && this.start && !this.end)
+                            this.hoverIso = iso;
+                    } }, String(d.getDate()).padStart(2, '0'))));
+            })));
+        }))));
+    }
+    /** The day that should be reachable with Tab when nothing in view has been focused yet: the
+     * selection if it's in the displayed month, else today if it is, else the 1st. */
+    defaultTabbable(days) {
+        const inView = (iso) => days.some(d => toIso(d) === iso && d.getMonth() === this.viewDate.getMonth());
+        const selected = this.range ? this.start : this.value;
+        if (selected && inView(selected))
+            return selected;
+        const today = toIso(new Date());
+        if (inView(today))
+            return today;
+        return toIso(this.viewDate);
+    }
+    static get is() { return "bs-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-datepicker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` the value is submitted under in a surrounding `<form>`. In `range` mode the dates\nare submitted as `<name>-start` and `<name>-end`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Select a start/end range instead of a single date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "range",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date (`YYYY-MM-DD`) in single mode. Mutable so a click updates it directly;\n`bsChange` still fires for the consumer to react. Ignored when `range` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "start": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The range start (`YYYY-MM-DD`) in `range` mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "start",
+                "defaultValue": "''"
+            },
+            "end": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The range end (`YYYY-MM-DD`) in `range` mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "end",
+                "defaultValue": "''"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest selectable date (`YYYY-MM-DD`). Earlier days render disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest selectable date (`YYYY-MM-DD`). Later days render disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "BCP 47 locale used for month names, weekday names and the title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'en-GB'"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "First column of the grid: `0` for Sunday (the Figma spec), `1` for Monday, ... `6`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week",
+                "defaultValue": "0"
+            },
+            "startLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label above the start field in `range` mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-label",
+                "defaultValue": "'Start date'"
+            },
+            "endLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label above the end field in `range` mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-label",
+                "defaultValue": "'End date'"
+            },
+            "monthLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the month dropdown (single mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month-label",
+                "defaultValue": "'Month'"
+            },
+            "yearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the year dropdown (single mode)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "year-label",
+                "defaultValue": "'Year'"
+            },
+            "previousLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the previous-month button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "previous-label",
+                "defaultValue": "'Previous month'"
+            },
+            "nextLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the next-month button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-label",
+                "defaultValue": "'Next month'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "viewDate": {},
+            "focusedIso": {},
+            "hoverIso": {},
+            "draft": {},
+            "openMenu": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsChange",
+                "name": "bsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user changes the selection. Single mode: `{ value }`. Range mode: `{ start,\nend }` -- fired once for the first click (with an empty `end`) and again when the range is\ncompleted. Not fired when the props are set programmatically."
+                },
+                "complexType": {
+                    "original": "BsDatepickerChange",
+                    "resolved": "BsDatepickerChange",
+                    "references": {
+                        "BsDatepickerChange": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-datepicker/bs-datepicker.tsx",
+                            "id": "src/components/bs-datepicker/bs-datepicker.tsx::BsDatepickerChange"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onSelectionChange"
+            }, {
+                "propName": "start",
+                "methodName": "onSelectionChange"
+            }, {
+                "propName": "end",
+                "methodName": "onSelectionChange"
+            }, {
+                "propName": "range",
+                "methodName": "onSelectionChange"
+            }, {
+                "propName": "name",
+                "methodName": "onSelectionChange"
+            }, {
+                "propName": "value",
+                "methodName": "onSelectionJump"
+            }, {
+                "propName": "start",
+                "methodName": "onSelectionJump"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+// --- date helpers (local time; `YYYY-MM-DD` strings) ---------------------------------------
+function pad(n) {
+    return String(n).padStart(2, '0');
+}
+function toIso(d) {
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function parseIso(s) {
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec((s ?? '').trim());
+    if (!m)
+        return undefined;
+    const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+    // Reject overflow such as 2026-02-31, which `Date` silently rolls into March.
+    return toIso(d) === `${m[1]}-${m[2]}-${m[3]}` ? d : undefined;
+}
+function firstOfMonth(d) {
+    return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function addDays(d, n) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+}
+function addMonths(d, n) {
+    // Clamp so Jan 31 + 1 month is Feb 28, not Mar 3.
+    const target = new Date(d.getFullYear(), d.getMonth() + n, 1);
+    const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+    return new Date(target.getFullYear(), target.getMonth(), Math.min(d.getDate(), lastDay));
+}