@brandsync/wc 1.9.0 → 1.10.0

package/dist/cjs/bs-datepicker.cjs.entry.js

@@ -0,0 +1,410 @@
+'use strict';
+
+var index = require('./index-kk9YXF2S.js');
+
+const bsDatepickerCss = () => `:host{display:inline-block;--bs-datepicker-width:364px;--bs-datepicker-bg:var(--bs-surface-raised);--bs-datepicker-radius:var(--bs-border-radius-150);--bs-datepicker-padding:var(--bs-spacing-200);--bs-datepicker-gap:var(--bs-spacing-150);--bs-datepicker-shadow:var(--bs-shadow-md);--bs-datepicker-menu-max-height:280px;--bs-datepicker-day-size:var(--bs-spacing-550);--bs-datepicker-day-radius:var(--bs-border-radius-100);--bs-datepicker-day-gap:var(--bs-spacing-50);--bs-datepicker-band-bridge:var(--bs-spacing-50);--bs-datepicker-font-size:var(--bs-font-size-md);--bs-datepicker-line-height:var(--bs-line-height-body-md);--bs-datepicker-weekday-font-size:var(--bs-font-size-sm);--bs-datepicker-weekday-line-height:var(--bs-line-height-body-sm);--bs-datepicker-color:var(--bs-text-default);--bs-datepicker-color-muted:var(--bs-text-muted);--bs-datepicker-color-weekday:var(--bs-text-secondary);--bs-datepicker-color-disabled:var(--bs-text-on-disabled);--bs-datepicker-hover:var(--bs-surface-hover);--bs-datepicker-pressed:var(--bs-surface-pressed);--bs-datepicker-focus-bg:var(--bs-surface-focus);--bs-datepicker-selected-bg:var(--bs-color-primary-default);--bs-datepicker-selected-bg-hover:var(--bs-color-primary-hover);--bs-datepicker-selected-bg-pressed:var(--bs-color-primary-pressed);--bs-datepicker-selected-bg-focus:var(--bs-color-primary-focused);--bs-datepicker-selected-bg-disabled:var(--bs-surface-action-disabled);--bs-datepicker-selected-color:var(--bs-text-on-action);--bs-datepicker-range-bg:var(--bs-color-primary-container);--bs-datepicker-today-border:var(--bs-border-primary);--bs-datepicker-focus-ring-color:var(--bs-border-neutral-focus)}.bs-datepicker{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-datepicker-gap);width:var(--bs-datepicker-width);max-width:100%;padding:var(--bs-datepicker-padding);border-radius:var(--bs-datepicker-radius);background:var(--bs-datepicker-bg);box-shadow:var(--bs-datepicker-shadow);color:var(--bs-datepicker-color);font-family:inherit;font-size:var(--bs-datepicker-font-size)}.bs-datepicker__header{display:flex;align-items:flex-start;gap:var(--bs-spacing-100)}.bs-datepicker__header>bs-input{flex:1 1 0;min-width:0}.bs-datepicker__select::part(label){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bs-datepicker__dropdown{position:relative;flex:1 1 0;min-width:0}.bs-datepicker__dropdown bs-input{width:100%}.bs-datepicker__menu{position:absolute;top:calc(100% + var(--bs-spacing-50));inset-inline:0;z-index:2;max-height:var(--bs-datepicker-menu-max-height);overflow-y:auto;border-radius:var(--bs-border-radius-100);background:var(--bs-surface-raised);box-shadow:var(--bs-shadow-md);--bs-menu-shadow:none}.bs-datepicker__menu bs-menu-item{--bs-menu-item-color:var(--bs-datepicker-color)}.bs-datepicker__menu bs-menu-item::part(label){flex:1;text-align:start}.bs-datepicker__option{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100)}.bs-datepicker__option svg{width:20px;height:20px;flex:none}.bs-datepicker__nav{display:flex;align-items:center;justify-content:space-between}.bs-datepicker__title{font-weight:var(--bs-font-weight-semibold);line-height:calc(var(--bs-datepicker-line-height) * 1px)}.bs-datepicker__nav-button{display:flex;align-items:center;justify-content:center;width:var(--bs-spacing-600);height:var(--bs-spacing-600);padding:0;border:none;border-radius:var(--bs-datepicker-day-radius);background:transparent;color:var(--bs-icon-default);cursor:pointer}.bs-datepicker__nav-button svg{width:24px;height:24px}.bs-datepicker__nav-button:hover{background:var(--bs-datepicker-hover)}.bs-datepicker__grid{display:flex;flex-direction:column;gap:var(--bs-datepicker-day-gap)}.bs-datepicker__row{display:grid;grid-template-columns:repeat(7, var(--bs-datepicker-day-size));justify-content:space-between}.bs-datepicker__weekday{display:flex;align-items:center;justify-content:center;height:var(--bs-datepicker-day-size);color:var(--bs-datepicker-color-weekday);font-size:var(--bs-datepicker-weekday-font-size);font-weight:var(--bs-font-weight-semibold);line-height:calc(var(--bs-datepicker-weekday-line-height) * 1px)}.bs-datepicker__cell{display:flex;justify-content:center}.bs-datepicker__cell--in-range{background:var(--bs-datepicker-range-bg);box-shadow:calc(var(--bs-datepicker-band-bridge) + 1px) 0 0 var(--bs-datepicker-range-bg)}.bs-datepicker__cell--band-start{border-start-start-radius:var(--bs-datepicker-day-radius);border-end-start-radius:var(--bs-datepicker-day-radius)}.bs-datepicker__cell--band-end{border-start-end-radius:var(--bs-datepicker-day-radius);border-end-end-radius:var(--bs-datepicker-day-radius);box-shadow:none}.bs-datepicker__day{width:var(--bs-datepicker-day-size);height:var(--bs-datepicker-day-size);padding:0;border:none;border-radius:var(--bs-datepicker-day-radius);background:transparent;color:var(--bs-datepicker-color);font-family:inherit;font-size:var(--bs-datepicker-font-size);line-height:calc(var(--bs-datepicker-line-height) * 1px);cursor:pointer}.bs-datepicker__day--outside{color:var(--bs-datepicker-color-muted)}.bs-datepicker__day--today{box-shadow:inset 0 0 0 1px var(--bs-datepicker-today-border)}.bs-datepicker__day:not(:disabled):hover{background:var(--bs-datepicker-hover)}.bs-datepicker__day:not(:disabled):active{background:var(--bs-datepicker-pressed)}.bs-datepicker__day--in-range:not(:disabled):hover,.bs-datepicker__day--in-range:not(:disabled):active{background:var(--bs-datepicker-range-bg)}.bs-datepicker__day--selected,.bs-datepicker__day--selected.bs-datepicker__day--outside{background:var(--bs-datepicker-selected-bg);color:var(--bs-datepicker-selected-color)}.bs-datepicker__day--selected:not(:disabled):hover{background:var(--bs-datepicker-selected-bg-hover)}.bs-datepicker__day--selected:not(:disabled):active{background:var(--bs-datepicker-selected-bg-pressed)}.bs-datepicker__day:disabled{color:var(--bs-datepicker-color-disabled);cursor:not-allowed}.bs-datepicker__day--selected:disabled{background:var(--bs-datepicker-selected-bg-disabled)}.bs-datepicker__day:focus-visible{background:var(--bs-datepicker-focus-bg);outline:2px solid var(--bs-datepicker-focus-ring-color);outline-offset:0}.bs-datepicker__day--selected:focus-visible{background:var(--bs-datepicker-selected-bg-focus)}.bs-datepicker__nav-button:focus-visible{outline:2px solid var(--bs-datepicker-focus-ring-color);outline-offset:2px}`;
+
+const BsDatepicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsChange = index.createEvent(this, "bsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    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 {
+            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) => (index.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 (index.h("div", { part: "header", class: "bs-datepicker__header bs-datepicker__header--range" }, field('start', this.startLabel), field('end', this.endLabel)));
+        }
+        return (index.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 (index.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();
+            } }, index.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 && (index.h("bs-menu", { part: "menu", class: "bs-datepicker__menu", role: "listbox" }, options.map(o => (index.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();
+            } }, index.h("span", { class: "bs-datepicker__option" }, index.h("span", null, o.label), o.value === current && (index.h("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.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 (index.h("div", { key: '49e2ce73c32ee98eb2c8276fb23b159392b9292a', part: "container", class: "bs-datepicker" }, this.renderHeader(), index.h("div", { key: 'da69881edff77ee3584b4565a4b39024ce2cd4f7', part: "nav", class: "bs-datepicker__nav" }, index.h("button", { key: 'f96dea3cc2821bf757afcee158c092deefe45b8b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, index.h("svg", { key: '7be3e0ca1588852357d13ade50f594633f86a56a', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '513165ad97411656af1742376cf7d75eda544814', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { key: 'bc55234eb1bd053c87388e7d6ebe31049f903cea', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), index.h("button", { key: '2436e91d78710f7d0716553660c8e1fff2e7d2da', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, index.h("svg", { key: '47f183221234d91d736f45207e84b14ee57b469f', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'bd4abceed66ef781fab224646d371b648d3c0d1d', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: 'e669ad28eb8461dcf5a24191dca379ab3cbc0111', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, index.h("div", { key: '440719175dd4f4a745b9de22126029633bfe91a3', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (index.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 (index.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 (index.h("div", { class: classes, role: "gridcell", "aria-selected": selected || inRange ? 'true' : 'false' }, index.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 formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "onSelectionChange": 0
+            }, {
+                "onSelectionJump": 0
+            }],
+        "start": [{
+                "onSelectionChange": 0
+            }, {
+                "onSelectionJump": 0
+            }],
+        "end": [{
+                "onSelectionChange": 0
+            }],
+        "range": [{
+                "onSelectionChange": 0
+            }],
+        "name": [{
+                "onSelectionChange": 0
+            }]
+    }; }
+};
+// --- 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));
+}
+BsDatepicker.style = bsDatepickerCss();
+
+exports.bs_datepicker = BsDatepicker;

package/dist/cjs/bs-file-upload-item.cjs.entry.js

@@ -71,7 +71,7 @@ const BsFileUploadItem = class {
     }
     render() {
         const removing = this.state === 'success';
-        return (index.h("div", { key: 'd26aebbbdb7858444d2ff3084c421ce1e70acd9e', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, index.h("div", { key: '2bf21442cc31bc9f85178e97bdae140de59fd7ce', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, index.h("slot", { key: 'fb9a9d723855e6d2556e61fb5cc7414e296ddf89', name: "thumbnail" }, this.thumbnailSrc ? (index.h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (index.h(ImageIcon, null)))), index.h("div", { key: 'ca1cab03c21d93b4fe754e8e4575bbee5c6c11bd', class: "bs-file-upload-item__content" }, index.h("div", { key: '072532a7cfb4a699ab9920594ed4299bd094eea3', class: "bs-file-upload-item__meta" }, index.h("span", { key: 'f30ec89b3af9d5a4fc3ea2cf9252713f47a68ba2', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (index.h("span", { key: '63aeb6db94d78011a649fa1a0771d488890c330b', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), index.h("bs-icon-button", { key: '5434d917777db308f8b16f84e2ccd5efcfb46dc8', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? index.h(TrashIcon, null) : index.h(CloseIcon, null))));
+        return (index.h("div", { key: '6b7fc89949cfa70838cc60d94ccb91afe09f75cd', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, index.h("div", { key: '55923d2fc56d8b1794a3a0d835440cd428e1e168', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, index.h("slot", { key: '25f93a00ba465db98c73f1bf38abc46110ae5c82', name: "thumbnail" }, this.thumbnailSrc ? (index.h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (index.h(ImageIcon, null)))), index.h("div", { key: 'ab975fe4e7e888755f9ceae00b6633f86b856c47', class: "bs-file-upload-item__content" }, index.h("div", { key: '6b1c9161edd76c799f0c545e2f939907bbb1dcee', class: "bs-file-upload-item__meta" }, index.h("span", { key: '3b7ca85e645d19b1ef1affff55a8e2a2284aff72', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (index.h("span", { key: '70dd2e29628bd536dac520ffe653bc7651f41c33', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), index.h("bs-icon-button", { key: '5ac7e596601ebdb35add9e278f17f67db4758e48', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? index.h(TrashIcon, null) : index.h(CloseIcon, null))));
     }
 };
 // Figma exports, recolored via currentColor so the CSS tokens drive the color.

package/dist/cjs/bs-file-upload.cjs.entry.js

@@ -100,7 +100,7 @@ const BsFileUpload = class {
             this.handleFiles(files);
     };
     render() {
-        return (index.h("div", { key: 'baa70a704a4c3508cd3186f567d0887218a9c04d', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("div", { key: 'c5fe3207ba56506a272c42097ec23881bcf863d4', part: "icon", class: "bs-file-upload__icon" }, index.h("slot", { key: 'd33d8f0f7b17bab679124823c61a1b7c6d031345', name: "icon" }, index.h(UploadIcon, { key: 'd0356e97a031867f323de21905a2bbca57963962' }))), index.h("div", { key: 'a5f4fb403556b2b596291bfddad2b73b1765f91f', class: "bs-file-upload__content" }, index.h("div", { key: 'b99afac250a8d40e54c97f74afde42620da2ff07', class: "bs-file-upload__text" }, this.heading && (index.h("span", { key: '33a2ce5aac1d8bf15c55dcf8ccfe4fbce6892fd1', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (index.h("span", { key: 'eec7f2fcc598412107e7b9c78efae30a3714c674', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), index.h("bs-button", { key: 'f44a5747bb0e9452aefa1fe2fc1d51b1af7da9b1', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), index.h("input", { key: 'c8e19f95978d103f535bf26fb64c34ff69c4c7ee', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
+        return (index.h("div", { key: 'b33535fd240d2d406118fd64fd9c227dea7ecd6e', part: "dropzone", class: `bs-file-upload bs-file-upload--${this.direction} ${this.dragging ? 'bs-file-upload--dragging' : ''} ${this.disabled ? 'bs-file-upload--disabled' : ''}`, onDragEnter: this.onDragOver, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("div", { key: '38cc0d7e10cbdfd9daef5749c2b50ec7c9123f71', part: "icon", class: "bs-file-upload__icon" }, index.h("slot", { key: '0e9cadb8101a73f55410eb30b2ddbf9c5e2cd0ed', name: "icon" }, index.h(UploadIcon, { key: '3f745666d0967ab5de4a6824a0fc8b3e0f7f900b' }))), index.h("div", { key: '7e347497915149907ade2e90aa19bd339b013be9', class: "bs-file-upload__content" }, index.h("div", { key: 'ea3a760d44b38cd5397d5952dbee998ddb2bea1b', class: "bs-file-upload__text" }, this.heading && (index.h("span", { key: '9e00cc05d2b479964502243e1dda32eb7fa81e42', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (index.h("span", { key: 'abb9857cdd2c85a7730101d05a5704d947c669bd', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), index.h("bs-button", { key: '98dea0715d7c0c641c552025403febd13fe4c32f', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), index.h("input", { key: '0c83fdaba93b46128e4990f9d15a746fd95479f5', ref: el => (this.inputEl = el), class: "bs-file-upload__input", type: "file", hidden: true, tabindex: -1, accept: this.accept, multiple: this.multiple, disabled: this.disabled, "aria-describedby": this.description ? 'description' : undefined, onChange: this.onInputChange })));
     }
 };
 // Figma's "UploadSimple" icon (3272:50330), exported SVG, recolored via currentColor.

package/dist/cjs/bs-icon-button.cjs.entry.js

@@ -49,7 +49,7 @@ const BsIconButton = class {
             form.reset();
     };
     render() {
-        return (index.h("button", { key: '538cd121df25e20ea7e21a7b5269e73d275f8bff', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, index.h("span", { key: '35548fe082134edb85dbdcb0caf820ec3b5233c2', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: '7f16ef5f2c08fc5d2bb852bd5c36598be5aa1175' }))));
+        return (index.h("button", { key: '433827a167fc7ce5183358c3e8469d68dd67788a', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, index.h("span", { key: 'e7d50a6755e7e4de39db799abef38c118d888b98', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: 'a737620ca5d0baf69abc1964a160492c32359d09' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

package/dist/cjs/bs-inline-tab.cjs.entry.js

@@ -69,7 +69,7 @@ const BsInlineTab = class {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (index.h("button", { key: '0d6927b0b39a7d84add287e6473681e5052b5f2d', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, index.h("span", { key: '866660f0f79927cd018df42286719f2f48262cbb', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: '58e11c8a0a57646644cb0b7c950d73f5cee52310', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '38d2e1df2b4e494f68d3c4b9ea34d7a317401953', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: '51fb6ec04479b18af787bca4e64f8105a0b19311', onSlotchange: this.onLabelSlotchange }))));
+        return (index.h("button", { key: '2b53f8013cdcd94dd7297ece3cff679d158a86a8', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, index.h("span", { key: '4e4832cffe54b28cdd68f7c35c9741dfe001b4d5', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: 'ccc3225b1a9047a0a346b8fb8bf6f02a63ecc988', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '95c8ac8ba725cf9ed20887dfee0c88d0dd0ce180', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: 'f9551ac1fe994a7e66fe48d23b39f2936c6b5a37', onSlotchange: this.onLabelSlotchange }))));
     }
 };
 BsInlineTab.style = bsInlineTabCss();

package/dist/cjs/{bs-input.cjs.entry.js → bs-input_2.cjs.entry.js}

@@ -288,7 +288,10 @@ const BsInput = class {
     }
     renderStandardControl() {
         const nativeType = this.type === 'password' ? (this.passwordVisible ? 'text' : 'password') : this.type === 'dropdown' ? 'text' : this.type;
-        return (index.h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown', min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
+        return (index.h("input", { id: "control", part: "control", class: "bs-input__control", type: nativeType, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.type === 'dropdown',
+            // The popup state belongs on the focusable control (a roleless wrapper div can't carry
+            // aria-haspopup/aria-expanded -- axe's aria-allowed-attr flags it).
+            role: this.type === 'dropdown' ? 'combobox' : undefined, "aria-haspopup": this.type === 'dropdown' ? 'listbox' : undefined, "aria-expanded": this.type === 'dropdown' ? String(this.open) : undefined, min: this.type === 'number' ? this.min : undefined, max: this.type === 'number' ? this.max : undefined, step: this.type === 'number' ? this.step : undefined, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }));
     }
     renderSelectControl() {
         return (index.h("select", { id: "control", part: "control", class: "bs-input__control", disabled: this.disabled, "aria-describedby": this.error || this.description ? 'description-or-error' : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.onInput, onChange: this.onChange }, this.options.map(opt => (index.h("option", { value: opt.value, selected: opt.value === this.value }, opt.label)))));
@@ -348,7 +351,7 @@ const BsInput = class {
             .filter(Boolean)
             .join(' ');
         const isDropdown = this.type === 'dropdown';
-        return (index.h("div", { class: "bs-input__field-wrapper" }, index.h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined, "aria-haspopup": isDropdown ? 'listbox' : undefined, "aria-expanded": isDropdown ? String(this.open) : undefined }, index.h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), index.h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (index.h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (index.h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
+        return (index.h("div", { class: "bs-input__field-wrapper" }, index.h("div", { part: "field", class: fieldClasses, onClick: isDropdown ? this.onDropdownToggle : undefined, onKeyDown: isDropdown ? this.onDropdownKeydown : undefined }, index.h("span", { part: "icon", class: `bs-input__icon ${this.showsIconArea ? 'bs-input__icon--visible' : ''}` }, this.renderIconContent()), this.renderControl(), index.h("span", { part: "end-icon", class: `bs-input__end-icon ${this.showsEndIconArea ? 'bs-input__end-icon--visible' : ''}` }, this.renderEndIconContent())), isDropdown && this.open && this.options.length > 0 && (index.h("bs-menu", { part: "menu", class: "bs-input__dropdown-menu", role: "listbox" }, this.options.map(option => (index.h("bs-menu-item", { key: option.value, onBsSelect: this.onDropdownOptionSelect(option) }, option.label)))))));
     }
     renderPinField() {
         this.pinInputs = [];
@@ -357,10 +360,10 @@ const BsInput = class {
         return (index.h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (index.h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (index.h("div", { key: '1149cfe8eaa6085007a8d9a963b6c909bb6cda13', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (index.h("div", { key: '70497bf30b0a244e1df36075d0db77cec5345d6c', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        index.h("label", { key: 'd737018c1e1ebcde529710d8ea58c6bed76f2abf', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: '5993b19cbfcb8725550c1292c00795c8463e554c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, index.h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), index.h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (index.h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        index.h("label", { key: '527e0d146170d9d11a004d452fa2cb363c5cc7d2', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: '9dd54a626ec80c774d6deacc3c9dcf02d1fef8a9', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, index.h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), index.h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (index.h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -381,4 +384,34 @@ const BsInput = class {
 };
 BsInput.style = bsInputCss();
 
+const bsMenuItemCss = () => `:host{display:block;--bs-menu-item-radius:var(--bs-border-radius-100);--bs-menu-item-padding-y:var(--bs-spacing-100);--bs-menu-item-padding-x:var(--bs-spacing-150);--bs-menu-item-gap:var(--bs-spacing-100);--bs-menu-item-hover:var(--bs-color-neutral-container-hover);--bs-menu-item-pressed:var(--bs-color-neutral-container-pressed);--bs-menu-item-disabled-bg:var(--bs-surface-action-disabled);--bs-menu-item-icon-color:var(--bs-icon-default);--bs-menu-item-icon-color-disabled:var(--bs-icon-disabled);--bs-menu-item-color:var(--bs-text-muted);--bs-menu-item-color-disabled:var(--bs-text-on-disabled);--bs-menu-item-font-size:var(--bs-font-size-md);--bs-menu-item-line-height:var(--bs-line-height-body-md)}.bs-menu-item{box-sizing:border-box;display:flex;align-items:center;width:100%;height:48px;border:none;cursor:pointer;background:transparent;color:var(--bs-menu-item-color);font-family:inherit;border-radius:var(--bs-menu-item-radius);padding:var(--bs-menu-item-padding-y) var(--bs-menu-item-padding-x);gap:var(--bs-menu-item-gap);transition:background-color var(--bs-duration-fast) var(--bs-easing-standard)}.bs-menu-item:focus-visible{outline:2px solid var(--bs-border-neutral-focus);outline-offset:2px}.bs-menu-item:hover{background:var(--bs-menu-item-hover)}.bs-menu-item:active{background:var(--bs-menu-item-pressed)}.bs-menu-item--disabled{background:var(--bs-menu-item-disabled-bg);color:var(--bs-menu-item-color-disabled);cursor:not-allowed}.bs-menu-item--disabled:hover,.bs-menu-item--disabled:active{background:var(--bs-menu-item-disabled-bg)}.bs-menu-item--disabled .bs-menu-item__icon{color:var(--bs-menu-item-icon-color-disabled)}.bs-menu-item__icon{display:none;width:24px;height:24px;flex-shrink:0;color:var(--bs-menu-item-icon-color)}.bs-menu-item__icon--has-content{display:inline-flex;align-items:center;justify-content:center}.bs-menu-item__icon ::slotted(svg){width:24px;height:24px}.bs-menu-item__label{font-size:var(--bs-menu-item-font-size);line-height:calc(var(--bs-menu-item-line-height) * 1px);white-space:nowrap}`;
+
+const BsMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsSelect = index.createEvent(this, "bsSelect");
+    }
+    /** Disables the item: no hover/pressed/focus styling, no pointer cursor, not reachable by
+     * keyboard tabbing, and clicking it does not emit `bsSelect`. */
+    disabled = false;
+    /** Tracks whether the `icon` slot has assigned content, so the icon wrapper (and its gap) only
+     * renders when there's actually an icon to show. */
+    hasIcon = false;
+    /** Fires when the item is clicked. */
+    bsSelect;
+    onIconSlotchange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.bsSelect.emit();
+    };
+    render() {
+        return (index.h("button", { key: '5aabea2ec3ad0181e3ff53b3f22873563da69ccd', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, index.h("span", { key: '7e180921d99d4f430d72d8dbfeda0ca00881b74a', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, index.h("slot", { key: '9d6d15f2d51c271de699b0101f781d8c0f3ab7e9', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '88645fe2991eb91a145e33a4f5e5e59a9ade3248', part: "label", class: "bs-menu-item__label" }, index.h("slot", { key: 'd3cc0ffcf0f354ffa9c48cbc88a99ec99d4f2db4' }))));
+    }
+};
+BsMenuItem.style = bsMenuItemCss();
+
 exports.bs_input = BsInput;
+exports.bs_menu_item = BsMenuItem;

package/dist/cjs/bs-menu.cjs.entry.js

@@ -31,7 +31,7 @@ const BsMenu = class {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (index.h("div", { key: '4f2995d0f53f85656de8595fb6a9909833c6369d', part: "list", class: "bs-menu", role: "menu" }, index.h("slot", { key: '0824f2a784eb4cfa28a2868f19c056570b56ba63' })));
+        return (index.h("div", { key: '24e54ac14b17bc1e45bcd5d7d0fda3250350672a', part: "list", class: "bs-menu", role: "menu" }, index.h("slot", { key: '57e28eafbb83da6bb14dfe588793edd33b2b5316' })));
     }
 };
 BsMenu.style = bsMenuCss();

package/dist/cjs/bs-navigation-drawer-item.cjs.entry.js

@@ -93,7 +93,7 @@ const BsNavigationDrawerItem = class {
         // incorrectly also toggle this parent row on every child click. Both are wrapped in a
         // `display: contents` container so render() still returns a single root node (this codebase's
         // convention, e.g. bs-input.tsx) without that wrapper affecting layout at all.
-        return (index.h("div", { key: '34d31ff7c612fa135b6dc14b757d66d4b00f99e4', class: "bs-navigation-drawer-item__root" }, index.h("button", { key: '08e244c8ada605dc7705df5b1d45ebce80165f3e', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (index.h("span", { key: 'a6e09b5edb35ec8f76ed6d6a78ddd1eb141f87b6', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, index.h("slot", { key: '851289379dacae965639ed7963d800c8a92472c2', name: "icon", onSlotchange: this.onIconSlotchange }))), index.h("span", { key: '4b46c2ca6a5bf4d5e777ae72c9ea826ffcffea02', part: "label", class: "bs-navigation-drawer-item__label" }, index.h("slot", { key: 'df214a2bcea435a678c18d0f461d9011c767a995' })), this.expandable && (index.h("span", { key: 'd12e91043617e96567acd5497a53dd98c612c6af', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, index.h(ChevronDownIcon, { key: 'c278774ae33cf86e7d1b3f70f4e99b8c7afc4d68' })))), this.expandable && (index.h("span", { key: '85081ed698d078b94225c7b984eaee1edfd22b49', part: "children", class: "bs-navigation-drawer-item__children" }, index.h("slot", { key: '85c22788467a67f18b9cca6018c179a28d06fa19', name: "children" })))));
+        return (index.h("div", { key: 'a62142391a3302dd6379135af11aa3215786df60', class: "bs-navigation-drawer-item__root" }, index.h("button", { key: '859f32bb1588ec661fea55d405a60a20e803b969', type: "button", part: "item", class: rowClasses, "aria-expanded": this.expandable ? String(this.expanded) : undefined, "aria-label": this.ariaLabel ?? undefined, onClick: this.onClick }, !this.nested && (index.h("span", { key: '0191eb506a8fa145732fb250d52d1ad650ea9a0f', part: "icon", class: `bs-navigation-drawer-item__icon ${this.hasIcon ? 'bs-navigation-drawer-item__icon--has-content' : ''}` }, index.h("slot", { key: '29bfc6b85d32172ac4f92ca482ffcbf71ed2158c', name: "icon", onSlotchange: this.onIconSlotchange }))), index.h("span", { key: 'd5e681c8dfc6b8517a01caea2daa49089ef73994', part: "label", class: "bs-navigation-drawer-item__label" }, index.h("slot", { key: '6f60e5831a064caae85747d6c6b735912abc9a3c' })), this.expandable && (index.h("span", { key: '37eebaa53518961ac10e37abe8a6f68e1066b173', part: "chevron", class: `bs-navigation-drawer-item__chevron ${this.expanded ? 'bs-navigation-drawer-item__chevron--expanded' : ''}` }, index.h(ChevronDownIcon, { key: '5c212defdf0226202d710f799dbf380aca087ff6' })))), this.expandable && (index.h("span", { key: 'abc9eb5ca2161706511b3691c71d5fedd33ee74f', part: "children", class: "bs-navigation-drawer-item__children" }, index.h("slot", { key: '9b501d624d2bd055e4a71848d08dfb7198e17ece', name: "children" })))));
     }
 };
 // 16x16 native viewBox (not a 24x24 icon scaled down) -- authored directly at display size, per

package/dist/cjs/bs-navigation-drawer.cjs.entry.js

@@ -174,11 +174,11 @@ const BsNavigationDrawer = class {
     };
     render() {
         const classes = ['bs-navigation-drawer', this.mobile ? 'bs-navigation-drawer--overlay' : '', this.overlayOpen ? 'bs-navigation-drawer--open' : ''].filter(Boolean).join(' ');
-        return (index.h(index.Host, { key: '94c3fbfb2d9826979f2f90ec0c9571aadc484450', "data-overlay": this.mobile ? '' : undefined }, this.mobile && index.h("div", { key: 'cc8b62b02a561dfbb0a15918e4bbbf241919ea7d', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), index.h("nav", { key: 'ad3e970438fca27636992cc434584bfae7888895', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
+        return (index.h(index.Host, { key: 'c1e563e7b2a9474286671a3f6e1f2d3aed312620', "data-overlay": this.mobile ? '' : undefined }, this.mobile && index.h("div", { key: 'f6885e88df1607bb9e85a27c4e1cb616ce6b6c0d', part: "backdrop", class: "bs-navigation-drawer__backdrop", onClick: this.requestClose }), index.h("nav", { key: 'a3086b5203fd3724fce5fe82be394a77a6d9a1e1', ref: el => (this.navRef = el), class: classes, "aria-label": this.heading,
             // Stays a plain <nav> landmark in every state: ARIA does not allow role="dialog" on <nav>
             // (axe: aria-allowed-role). Modality is behavioral -- focus is held inside, the page behind is
             // scrimmed, Escape closes -- rather than announced through aria-modal.
-            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (index.h("div", { key: '41552cc9bc1fd33081119b6b6a475e9a81281e97', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, index.h("bs-logo", { key: '96503cee7e467c535747171f46ab8b36f2d9262a', variant: "full", background: this.logoBackground }))), this.showLogo && (index.h("div", { key: '6b4e91b0296772ea492a2e12c1f81933be1af02b', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, index.h("bs-logo", { key: '72c4cae8f25aebef923d2b346ee3a3224a1a4550', variant: "mark", background: this.logoBackground }))), index.h("div", { key: '2fde5f92e629d34321e0e0e6eaf776027614836a', class: "bs-navigation-drawer__title-row" }, index.h("span", { key: 'fde5717eeec30bbade48f574e44f9eec841bab36', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (index.h("button", { key: '59d514aec296c5b4eb459de259aa29d77a435ecf', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, index.h(CaretLeftIcon, { key: 'a992c1fcaa3e143ee9f1469958eeab12e03bce03' })))), index.h("div", { key: '1a74885abe2e50b3a6eccd7d4cacca4582dc5fa9', part: "search", class: "bs-navigation-drawer__search" }, index.h("slot", { key: 'ac98f9ca62a289e21fcbf0f005c6c0f7e02d9967', name: "search" })), index.h("button", { key: 'c7c50e5cf2c81ec8445a557505faf2ea40add094', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, index.h(SearchIcon, { key: '538bcfc474036d2c79fe821011490bf7cbd4d018' })), index.h("div", { key: '1a7aa824a99823b2d06309c5192a200afe378a7b', part: "items", class: "bs-navigation-drawer__items" }, index.h("slot", { key: '1a79d4f0e809b16a9d19efb06d36052c0539bba2' })))));
+            tabIndex: this.mobile ? -1 : undefined }, this.showLogo && (index.h("div", { key: 'c1b8700d6936ae14acf900d3cc83c6a8a7d79a20', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--full" }, index.h("bs-logo", { key: '27f4205dcdd609c4709a09dbeb7d4d59a41340db', variant: "full", background: this.logoBackground }))), this.showLogo && (index.h("div", { key: 'b8474734a50dbd690a9a8d8febd6cda084498d02', part: "logo", class: "bs-navigation-drawer__logo bs-navigation-drawer__logo--mark" }, index.h("bs-logo", { key: 'c89909a16f7255d24ddaae54ddd2c6cfca361572', variant: "mark", background: this.logoBackground }))), index.h("div", { key: '83b7641c3c1f8b8307bf8006bbef147ccfdc917c', class: "bs-navigation-drawer__title-row" }, index.h("span", { key: '97075d0df805b02f3f520c42ef4eceaa377e7064', part: "title", class: "bs-navigation-drawer__title" }, this.heading), this.collapsible && (index.h("button", { key: '184f4f2f35f74f145621d2854a6a50e52006ebd1', type: "button", part: "collapse", class: "bs-navigation-drawer__collapse", "aria-label": this.collapsed ? 'Expand' : 'Collapse', "aria-pressed": this.collapsed ? 'true' : 'false', onClick: this.onCollapseClick }, index.h(CaretLeftIcon, { key: '168c4a4f30f9cf92afd5cffc63e989e0a3d4e45a' })))), index.h("div", { key: 'd93ec72e4f6ba6f01d4fdc8fc3d9e0c9f0649242', part: "search", class: "bs-navigation-drawer__search" }, index.h("slot", { key: '3441fb753d206b84e68bb777e60ec849185882b9', name: "search" })), index.h("button", { key: '98b3bf5e4807afb1ba5a91e2b5238d917f584ab8', type: "button", part: "search-trigger", class: "bs-navigation-drawer__search-trigger", "aria-label": "Search", onClick: this.onSearchTriggerClick }, index.h(SearchIcon, { key: 'c61c32465503084caab0b3741bc95e3f0f274214' })), index.h("div", { key: 'f75111a609795d6ed83e3e843a433440a932b730', part: "items", class: "bs-navigation-drawer__items" }, index.h("slot", { key: '50f7cee1ae4e352b56561740bfc6ff035d521354' })))));
     }
     static get watchers() { return {
         "collapsed": [{