@brandsync/wc 1.9.0 → 1.11.0

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

@@ -0,0 +1,414 @@
+'use strict';
+
+var index = require('./index-tFJjflK5.js');
+
+const bsDatepickerCss = () => `:host{display:inline-block;--bs-datepicker-width:364px;--bs-datepicker-bg:var(--bs-paper-bg-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{width:var(--bs-datepicker-width);max-width:100%;color:var(--bs-datepicker-color);font-size:var(--bs-datepicker-font-size);--bs-card-bg:var(--bs-datepicker-bg);--bs-card-radius:var(--bs-datepicker-radius);--bs-card-padding:var(--bs-datepicker-padding);--bs-card-shadow:var(--bs-datepicker-shadow);--bs-card-overflow:visible}.bs-datepicker__body{display:flex;flex-direction:column;gap:var(--bs-datepicker-gap)}.bs-datepicker__header{display:flex;align-items:flex-start;gap:var(--bs-spacing-100)}.bs-datepicker__header--range>bs-input{--bs-input-label-font-size:var(--bs-font-size-md);--bs-input-label-font-weight:var(--bs-font-weight-semibold);--bs-input-label-line-height:calc(var(--bs-line-height-body-md) * 1px)}.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, and after layout: the bs-menu-items inside the menu only have
+            // a measurable offsetTop once they've rendered, which is a frame after this hook.
+            const scroll = () => {
+                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;
+            };
+            requestAnimationFrame(() => requestAnimationFrame(scroll));
+        }
+        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("bs-card", { key: 'cd66b2bc8f611383ea5df6d01e29b03a940bc06b', part: "container", class: "bs-datepicker", surface: "raised" }, index.h("div", { key: '7020d13ee4ea5f05c2548966cb56c20b59eb067b', class: "bs-datepicker__body" }, this.renderHeader(), index.h("div", { key: '4ed03f1fb642d2a3a226a27e6e86001a478eab4c', part: "nav", class: "bs-datepicker__nav" }, index.h("button", { key: 'e844a021afa02f834026ebb4237f5b2f5b9d1a4c', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, index.h("svg", { key: 'f68be6b62a9deb6334b63c6e7152b4968ebdbeab', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'a7ee70143ce7b839c44483c1d15daf2714306bf7', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { key: '7eb7fd38ca59a4a6ba9692180bcd5096f54ac783', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), index.h("button", { key: '1e515d27746a10acfe9f04f08c4a09753cb5b98b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, index.h("svg", { key: 'f5dde56a61d31b93aa9877b0fc473264d40305ba', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '765b53c7f7e8618618622a5121ecab294610bf8a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: 'e56fa1a425055d77ae04039890758b823f14ee8d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, index.h("div", { key: '2471a9291aa29111217aaaa1f02f2cfc8861e49e', 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-dialog.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsDialogCss = () => `.bs-dialog__backdrop{position:fixed;inset:0;z-index:var(--bs-z-index-modal);display:flex;align-items:center;justify-content:center;background:rgba(0, 0, 0, 0.4)}.bs-dialog__dialog{position:relative;display:flex;flex-direction:column;max-height:calc(100vh - var(--bs-spacing-800));background:var(--bs-surface-base);color:var(--bs-text-default);border-radius:var(--bs-border-radius-200);box-shadow:var(--bs-shadow-xl);font-family:inherit}.bs-dialog__dialog--sm{width:360px}.bs-dialog__dialog--md{width:560px}.bs-dialog__dialog--lg{width:800px}.bs-dialog__header{display:flex;align-items:center;justify-content:space-between;padding:var(--bs-spacing-200) var(--bs-spacing-200) var(--bs-spacing-100)}.bs-dialog__image--visible+.bs-dialog__header,.bs-dialog__icon--visible+.bs-dialog__header{padding-top:0}.bs-dialog__heading{font-size:var(--bs-font-size-lg);font-weight:var(--bs-font-weight-semibold);color:var(--bs-text-default)}.bs-dialog__close--floating{position:absolute;top:var(--bs-spacing-200);inset-inline-end:var(--bs-spacing-200);z-index:1}.bs-dialog__body{padding:0 var(--bs-spacing-200) var(--bs-spacing-200);overflow-y:auto}.bs-dialog__body--centered{text-align:center}.bs-dialog__footer--visible{display:flex;justify-content:flex-end;gap:var(--bs-spacing-200);padding:0 var(--bs-spacing-200) var(--bs-spacing-200)}.bs-dialog__image--visible{overflow:hidden;border-radius:var(--bs-border-radius-200) var(--bs-border-radius-200) 0 0;margin-bottom:var(--bs-spacing-200)}.bs-dialog__image--visible ::slotted(img){display:block;width:100%;height:auto;object-fit:cover}.bs-dialog__icon--visible{display:flex;align-items:center;justify-content:center;padding:var(--bs-spacing-200) var(--bs-spacing-200) 0;margin-bottom:var(--bs-spacing-200)}.bs-dialog__icon--visible ::slotted(*){width:64px;height:64px}.bs-dialog__header--centered{justify-content:center;text-align:center}@media (forced-colors: active){.bs-dialog__dialog{border:1px solid CanvasText}}`;
 

package/dist/cjs/bs-error-page.cjs.entry.js

@@ -0,0 +1,103 @@
+'use strict';
+
+var index = require('./index-tFJjflK5.js');
+
+const bsErrorPageCss = () => `:host{display:block;--bs-error-page-bg:var(--bs-paper-bg-base);--bs-error-page-radius:var(--bs-border-radius-100);--bs-error-page-padding:var(--bs-spacing-400);--bs-error-page-min-height:440px;--bs-error-page-gap:var(--bs-spacing-150);--bs-error-page-description-width:420px;--bs-error-page-color:var(--bs-text-default);--bs-error-page-color-secondary:var(--bs-text-secondary);--bs-error-page-color-muted:var(--bs-text-muted);--bs-error-page-info-bg:var(--bs-color-info-container)}.bs-error-page{--bs-card-bg:var(--bs-error-page-bg);--bs-card-radius:var(--bs-error-page-radius);--bs-card-padding:var(--bs-error-page-padding);--bs-card-shadow:none;color:var(--bs-error-page-color)}.bs-error-page__body{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--bs-error-page-gap);min-height:calc(var(--bs-error-page-min-height) - var(--bs-error-page-padding) * 2);text-align:center}.bs-error-page__art-group{display:flex;flex-direction:column;align-items:center;gap:var(--bs-spacing-150)}.bs-error-page__art--info{--bs-icon-tile-bg:var(--bs-error-page-info-bg)}.bs-error-page__glyph,::slotted([slot='icon']){width:24px;height:24px}.bs-error-page__code{color:var(--bs-error-page-color-secondary);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-semibold);line-height:20px}.bs-error-page__heading{margin:0;font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:32px}.bs-error-page__description{max-width:var(--bs-error-page-description-width);margin:0;color:var(--bs-error-page-color-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-error-page__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--bs-spacing-100);padding-top:var(--bs-spacing-100)}.bs-error-page__actions bs-button{--bs-button-height-md:var(--bs-spacing-550)}.bs-error-page__reference{margin:0;color:var(--bs-error-page-color-muted);font-size:var(--bs-font-size-xs);line-height:16px}`;
+
+const BsErrorPage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsPrimary = index.createEvent(this, "bsPrimary");
+        this.bsSecondary = index.createEvent(this, "bsSecondary");
+    }
+    /** Which error: `not-found` (404), `server-error` (500), `no-access` (403), `maintenance` or
+     * `offline`. */
+    type = 'not-found';
+    /** The small label under the icon, e.g. "404". Defaults per `type` ("404", "500", "403",
+     * "Maintenance", "Offline"). Set it to an empty string to hide it. */
+    code;
+    /** Heading. Defaults per `type`. */
+    heading;
+    /** HTML heading level for the heading, 1-6. Use 1 when this replaces the whole page; lower when it
+     * sits inside a section that already has a heading above it. */
+    headingLevel = 1;
+    /** Paragraph under the heading. Defaults per `type`. */
+    description;
+    /** Label of the primary button. Defaults per `type`. Set it to an empty string to hide it. */
+    primaryLabel;
+    /** Label of the secondary button. Defaults per `type` (only `not-found`, `server-error` and
+     * `no-access` have one). Set it to an empty string to hide it. */
+    secondaryLabel;
+    /** A small reference line under the buttons, e.g. `"Error ID: 7f3c-21a9 · 30.09.2026 10:42"`, for
+     * support to look up. Nothing is shown when empty. */
+    reference;
+    /** Fires when the primary button is pressed. */
+    bsPrimary;
+    /** Fires when the secondary button is pressed. */
+    bsSecondary;
+    get defaults() {
+        return TYPES[this.type] ?? TYPES['not-found'];
+    }
+    render() {
+        const d = this.defaults;
+        const code = this.code ?? d.code;
+        const heading = this.heading ?? d.heading;
+        const description = this.description ?? d.description;
+        const primary = this.primaryLabel ?? d.primary;
+        const secondary = this.secondaryLabel ?? d.secondary;
+        const level = Math.min(6, Math.max(1, Math.trunc(Number(this.headingLevel)) || 1));
+        return (index.h("bs-card", { key: '27e16dc9013ea60751032fcccd626fb44aa7f708', part: "container", class: "bs-error-page", surface: "base" }, index.h("div", { key: 'bbca94e98665e09c5cd86626bf136f7b1393cbeb', class: "bs-error-page__body" }, index.h("div", { key: 'f358107685a4bfa06f1428bdd203d06b767fa83b', class: "bs-error-page__art-group" }, index.h("bs-icon-tile", { key: '096621ed3f0fa1545ae4e9a55cf316ff8f4349cb', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, index.h("slot", { key: '675e23b9001cb6570d95092f429666bee38368d1', name: "icon" }, d.glyph())), code && (index.h("span", { key: 'f82874da8c28f2f3e7adc17f4532a4b99082fc81', part: "code", class: "bs-error-page__code" }, code))), index.h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (index.h("p", { key: 'ee4a20fa4862df6533eb6de359dbf3f55c613f26', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (index.h("div", { key: 'b921d9f129128a92ce3af409a8cd723ee49b7e02', part: "actions", class: "bs-error-page__actions" }, primary && (index.h("bs-button", { key: '0e8e62423a122ce6bcb41ad93138cb5d2573d5d1', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (index.h("bs-button", { key: '07d4527e4fd8813d4a6c1d5316b34c2678bbae8d', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (index.h("p", { key: '590120eeb06e91ab3617d3f1630a361c207afe42', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+    }
+};
+const icon = (children) => () => (index.h("svg", { class: "bs-error-page__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, children));
+const TYPES = {
+    'not-found': {
+        intent: 'default',
+        info: true,
+        code: '404',
+        heading: 'Page not found',
+        description: 'The link may be old, or the page has moved.',
+        primary: 'Go to Overview',
+        secondary: 'Search',
+        glyph: icon(index.h("g", null, index.h("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), index.h("path", { d: "M15.5 15.5L20.5 20.5" }))),
+    },
+    'server-error': {
+        intent: 'error',
+        code: '500',
+        heading: 'Something went wrong on our side',
+        description: 'We’re working on it. Try again in a moment.',
+        primary: 'Try again',
+        secondary: 'Contact support',
+        glyph: icon(index.h("g", null, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M12 7.5V12.5" }), index.h("path", { d: "M12 16.2V16.3" }))),
+    },
+    'no-access': {
+        intent: 'default',
+        code: '403',
+        heading: 'You don’t have access',
+        description: 'Contact your administrator for the access.',
+        primary: 'Request access',
+        secondary: 'Go back',
+        glyph: icon(index.h("g", null, index.h("rect", { x: "5", y: "10.5", width: "14", height: "9.5", rx: "1.5" }), index.h("path", { d: "M8.5 10.5V8A3.5 3.5 0 0 1 15.5 8V10.5" }))),
+    },
+    maintenance: {
+        intent: 'warning',
+        code: 'Maintenance',
+        heading: 'We’re upgrading the system',
+        description: 'We’ll be back shortly. Your data is safe.',
+        primary: 'View system status',
+        secondary: '',
+        glyph: icon(index.h("path", { d: "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" })),
+    },
+    offline: {
+        intent: 'warning',
+        code: 'Offline',
+        heading: 'No internet connection',
+        description: 'Changes are saved locally and will be updated when you’re back online.',
+        primary: 'Try again',
+        secondary: '',
+        glyph: icon(index.h("g", null, index.h("path", { d: "M4 4L20 20" }), index.h("path", { d: "M2.5 9.5A14 14 0 0 1 8 6.7" }), index.h("path", { d: "M21.5 9.5A14 14 0 0 0 14 6.2" }), index.h("path", { d: "M5.5 13A9.5 9.5 0 0 1 9.5 10.6" }), index.h("path", { d: "M18.5 13A9.5 9.5 0 0 0 16 11.3" }), index.h("path", { d: "M9 16.5A4.5 4.5 0 0 1 12 15.3" }), index.h("path", { d: "M12 19.2V19.3" }))),
+    },
+};
+BsErrorPage.style = bsErrorPageCss();
+
+exports.bs_error_page = BsErrorPage;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsFileUploadItemCss = () => `:host{display:block;--bs-file-upload-item-bg:var(--bs-surface-base);--bs-file-upload-item-border-color:var(--bs-border-default);--bs-file-upload-item-border-width:var(--bs-border-width-thin);--bs-file-upload-item-radius:var(--bs-border-radius-150);--bs-file-upload-item-padding:var(--bs-spacing-200);--bs-file-upload-item-gap:var(--bs-spacing-150);--bs-file-upload-item-thumbnail-size:80px;--bs-file-upload-item-thumbnail-radius:var(--bs-border-radius-100);--bs-file-upload-item-thumbnail-bg:var(--bs-surface-container);--bs-file-upload-item-thumbnail-icon-color:var(--bs-icon-muted);--bs-file-upload-item-content-gap:var(--bs-spacing-100);--bs-file-upload-item-name-color:var(--bs-text-default);--bs-file-upload-item-size-color:var(--bs-text-default);--bs-file-upload-item-success-color:var(--bs-text-success);--bs-file-upload-item-success-icon-color:var(--bs-icon-success);--bs-file-upload-item-error-color:var(--bs-text-error);--bs-file-upload-item-error-icon-color:var(--bs-icon-error)}.bs-file-upload-item{box-sizing:border-box;display:flex;align-items:flex-start;gap:var(--bs-file-upload-item-gap);padding:var(--bs-file-upload-item-padding);border:var(--bs-file-upload-item-border-width) solid var(--bs-file-upload-item-border-color);border-radius:var(--bs-file-upload-item-radius);background:var(--bs-file-upload-item-bg);font-size:var(--bs-font-size-md);line-height:calc(var(--bs-line-height-body-md) * 1px)}.bs-file-upload-item__thumbnail{display:flex;flex:none;align-items:center;justify-content:center;width:var(--bs-file-upload-item-thumbnail-size);height:var(--bs-file-upload-item-thumbnail-size);overflow:hidden;border-radius:var(--bs-file-upload-item-thumbnail-radius);background:var(--bs-file-upload-item-thumbnail-bg);color:var(--bs-file-upload-item-thumbnail-icon-color)}.bs-file-upload-item__placeholder{display:block;width:32px;height:32px}.bs-file-upload-item__image{display:block;width:100%;height:100%;object-fit:cover}.bs-file-upload-item__content{display:flex;flex:1;flex-direction:column;justify-content:center;gap:var(--bs-file-upload-item-content-gap);align-self:stretch;min-width:0}.bs-file-upload-item__meta{display:flex;flex-direction:column}.bs-file-upload-item__name{color:var(--bs-file-upload-item-name-color);font-weight:600;overflow-wrap:anywhere}.bs-file-upload-item__size{color:var(--bs-file-upload-item-size-color);font-size:var(--bs-font-size-sm);line-height:calc(var(--bs-line-height-body-sm) * 1px)}.bs-file-upload-item__status{display:flex;align-items:center;gap:var(--bs-spacing-50);min-height:24px}.bs-file-upload-item__status-icon{display:block;flex:none;width:16px;height:16px}.bs-file-upload-item__status--success{color:var(--bs-file-upload-item-success-color)}.bs-file-upload-item__status--success .bs-file-upload-item__status-icon{color:var(--bs-file-upload-item-success-icon-color)}.bs-file-upload-item__status--error{color:var(--bs-file-upload-item-error-color)}.bs-file-upload-item__status--error .bs-file-upload-item__status-icon{color:var(--bs-file-upload-item-error-icon-color)}bs-progress-linear{width:100%}bs-icon-button{flex:none;--bs-icon-neutral-default:var(--bs-icon-default)}@media (forced-colors: active){.bs-file-upload-item{border-color:CanvasText}}`;
 
@@ -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: 'b239ca2558d3f0c25c58e0deeff988b29696a4a2', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, index.h("div", { key: 'c146e98abf457f86aaca4f22e1813e51b9f8bfea', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, index.h("slot", { key: '1d7b35010b00fcedcf8f3e94ccc710ff44a1de9f', 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: 'ba248f04ec0c44a4419f2e87d800500259d50c39', class: "bs-file-upload-item__content" }, index.h("div", { key: '9feafd65955cd80cd7e8878dc2af73e2c4184455', class: "bs-file-upload-item__meta" }, index.h("span", { key: '95214fe26b2256399a0ab3ea3568f868ac22984e', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (index.h("span", { key: '8ffece05f1ecb00839fbdd4086ad55a485f0bbca', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), index.h("bs-icon-button", { key: '63508a0938b11dabfba623f0197c91e024b004b7', 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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kk9YXF2S.js');
+var index = require('./index-tFJjflK5.js');
 
 const bsFileUploadCss = () => `:host{display:block;--bs-file-upload-bg:var(--bs-surface-raised);--bs-file-upload-bg-dragging:var(--bs-surface-container);--bs-file-upload-border-color:var(--bs-border-neutral-container);--bs-file-upload-border-color-dragging:var(--bs-border-neutral-container-pressed);--bs-file-upload-border-width:var(--bs-border-width-medium);--bs-file-upload-radius:var(--bs-border-radius-150);--bs-file-upload-padding:var(--bs-spacing-300);--bs-file-upload-gap:var(--bs-spacing-300);--bs-file-upload-icon-size:102px;--bs-file-upload-icon-bg:var(--bs-surface-hover);--bs-file-upload-icon-bg-dragging:var(--bs-surface-raised);--bs-file-upload-icon-color:var(--bs-icon-default);--bs-file-upload-content-gap:var(--bs-spacing-100);--bs-file-upload-text-gap:var(--bs-spacing-25);--bs-file-upload-heading-color:var(--bs-text-default);--bs-file-upload-description-color:var(--bs-text-secondary);--bs-file-upload-font-size:var(--bs-font-size-md);--bs-file-upload-line-height:var(--bs-line-height-body-md)}.bs-file-upload{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--bs-file-upload-gap);padding:var(--bs-file-upload-padding);border:var(--bs-file-upload-border-width) dashed var(--bs-file-upload-border-color);border-radius:var(--bs-file-upload-radius);background:var(--bs-file-upload-bg);font-size:var(--bs-file-upload-font-size);line-height:calc(var(--bs-file-upload-line-height) * 1px)}.bs-file-upload--horizontal{flex-direction:row;justify-content:flex-start}.bs-file-upload--vertical{flex-direction:column;text-align:center}.bs-file-upload--dragging{background:var(--bs-file-upload-bg-dragging);border-color:var(--bs-file-upload-border-color-dragging)}.bs-file-upload__icon{display:flex;flex:none;align-items:center;justify-content:center;width:var(--bs-file-upload-icon-size);height:var(--bs-file-upload-icon-size);border-radius:var(--bs-border-radius-full);background:var(--bs-file-upload-icon-bg);color:var(--bs-file-upload-icon-color)}.bs-file-upload--dragging .bs-file-upload__icon{background:var(--bs-file-upload-icon-bg-dragging)}.bs-file-upload__icon-svg,.bs-file-upload__icon ::slotted(*){display:block;width:32px;height:32px}.bs-file-upload__content{display:flex;flex-direction:column;gap:var(--bs-file-upload-content-gap);min-width:0}.bs-file-upload--horizontal .bs-file-upload__content{align-items:flex-start}.bs-file-upload--vertical .bs-file-upload__content{align-items:center}.bs-file-upload__text{display:flex;flex-direction:column;gap:var(--bs-file-upload-text-gap)}.bs-file-upload__heading{color:var(--bs-file-upload-heading-color);font-weight:600}.bs-file-upload__description{color:var(--bs-file-upload-description-color)}.bs-file-upload--disabled{cursor:not-allowed}@media (forced-colors: active){.bs-file-upload{border-color:CanvasText}.bs-file-upload--dragging{border-color:Highlight}}`;
 
@@ -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: '0d56df66efcaae8ae01435f81755a2cbfe9e6735', 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: '63d1f3d7b64f9efe016f5720f2e78224cde2d4ee', part: "icon", class: "bs-file-upload__icon" }, index.h("slot", { key: '8bd5a62c50cce5608bd48b5db4d414c00dcdb68d', name: "icon" }, index.h(UploadIcon, { key: '478fcbbd730135bc396837ff1fcdee22418cf662' }))), index.h("div", { key: 'b4403e04e359e0d01a9f2e06d90ccaf0ce9ed5dd', class: "bs-file-upload__content" }, index.h("div", { key: '2b2d4dd5492ff8b88acbf4e3525f94d427e66e05', class: "bs-file-upload__text" }, this.heading && (index.h("span", { key: '25110b17458d6ac5d8f41c75b1cac44e7aa5b726', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (index.h("span", { key: '362c13ebac808e066aa583c861f7d540715ebf2b', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), index.h("bs-button", { key: '09fd3013539163d2478abc7cd127cc2121aa206e', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), index.h("input", { key: '2829fea7f7d8b4f3aae730678c9193eadd075422', 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.