@brandsync/wc 1.17.0 → 1.19.0

package/dist/esm/bs-company-switcher.entry.js

@@ -0,0 +1,209 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3SkQJpw.js';
+
+const bsCompanySwitcherCss = () => `:host{display:inline-block;box-sizing:border-box;width:var(--bs-company-switcher-width);max-width:100%;--bs-company-switcher-width:260px;--bs-company-switcher-panel-width:360px;--bs-company-switcher-radius:var(--bs-border-radius-100);--bs-company-switcher-trigger-bg:transparent;--bs-company-switcher-trigger-bg-hover:var(--bs-surface-hover);--bs-company-switcher-trigger-bg-pressed:var(--bs-surface-pressed);--bs-company-switcher-trigger-bg-open:var(--bs-surface-selected);--bs-company-switcher-focus-ring:var(--bs-border-neutral-focus);--bs-company-switcher-panel-bg:var(--bs-surface-base);--bs-company-switcher-panel-border-color:var(--bs-border-default);--bs-company-switcher-shadow:var(--bs-shadow-md);--bs-company-switcher-max-height:320px;--bs-company-switcher-text-color:var(--bs-text-default);--bs-company-switcher-muted-color:var(--bs-text-secondary);--bs-company-switcher-header-color:var(--bs-text-muted);--bs-company-switcher-z-index:var(--bs-z-index-popover)}.bs-company-switcher{display:block;width:100%;--bs-popover-radius:var(--bs-company-switcher-radius);--bs-popover-shadow:var(--bs-company-switcher-shadow);--bs-popover-z-index:var(--bs-company-switcher-z-index);--bs-popover-min-width:0px;--bs-popover-bg:transparent}.bs-company-switcher__trigger{box-sizing:border-box;display:flex;align-items:center;gap:var(--bs-spacing-150);width:100%;min-height:54px;padding:var(--bs-spacing-100) var(--bs-spacing-150);border:0;border-radius:var(--bs-company-switcher-radius);background:var(--bs-company-switcher-trigger-bg);color:var(--bs-company-switcher-text-color);font-family:var(--bs-typography-font-family-body, Roboto), sans-serif;text-align:left;cursor:pointer}.bs-company-switcher__trigger:hover{background:var(--bs-company-switcher-trigger-bg-hover)}.bs-company-switcher__trigger:active{background:var(--bs-company-switcher-trigger-bg-pressed)}:host([open]) .bs-company-switcher__trigger,.bs-company-switcher__trigger[aria-busy='true']{background:var(--bs-company-switcher-trigger-bg-open)}.bs-company-switcher__trigger:focus-visible{outline:2px solid var(--bs-company-switcher-focus-ring);outline-offset:2px}.bs-company-switcher__avatar{display:inline-flex;flex:0 0 auto}.bs-company-switcher__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column}.bs-company-switcher__name{font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-company-switcher__subtitle{color:var(--bs-company-switcher-muted-color);font-size:var(--bs-font-size-xs);line-height:16px}.bs-company-switcher__name,.bs-company-switcher__subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bs-company-switcher__trail{flex:0 0 auto;width:20px;height:20px;color:var(--bs-icon-default)}.bs-company-switcher__panel{display:block;width:var(--bs-company-switcher-panel-width);max-width:calc(100vw - var(--bs-spacing-200));--bs-card-bg:var(--bs-company-switcher-panel-bg);--bs-card-radius:var(--bs-company-switcher-radius);--bs-card-padding:0px;--bs-card-border-width:1px;--bs-card-border-color:var(--bs-company-switcher-panel-border-color);--bs-card-shadow:none}.bs-company-switcher__search{padding:var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100)}.bs-company-switcher__search bs-input{width:100%}.bs-company-switcher__list{box-sizing:border-box;max-height:var(--bs-company-switcher-max-height);overflow-y:auto;padding:0 var(--bs-spacing-100) var(--bs-spacing-100)}.bs-company-switcher__group-header{padding:var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);color:var(--bs-company-switcher-header-color);font-family:var(--bs-typography-font-family-body, Roboto), sans-serif;font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-medium);line-height:16px;letter-spacing:0.06em;text-transform:uppercase}.bs-company-switcher__row{--bs-list-item-min-height:52px;--bs-list-item-padding-y:var(--bs-spacing-100);--bs-list-item-padding-x:var(--bs-spacing-100);--bs-list-item-gap:var(--bs-spacing-150)}.bs-company-switcher__row--active{--bs-list-item-bg:var(--bs-surface-hover)}.bs-company-switcher__row-name{display:block;color:var(--bs-company-switcher-text-color);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-company-switcher__row-sub{display:block;color:var(--bs-company-switcher-muted-color);font-size:var(--bs-font-size-xs);line-height:16px}.bs-company-switcher__check{width:20px;height:20px;color:var(--bs-icon-action, var(--bs-icon-default))}.bs-company-switcher__empty{--bs-empty-state-padding-y:var(--bs-spacing-400)}.bs-company-switcher__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--bs-spacing-100);padding:var(--bs-spacing-100) var(--bs-spacing-150)}.bs-company-switcher__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;
+
+let uid = 0;
+const svgProps = {
+    viewBox: '0 0 24 24',
+    fill: 'none',
+    stroke: 'currentColor',
+    'stroke-width': '1.8',
+    'stroke-linecap': 'round',
+    'stroke-linejoin': 'round',
+    'aria-hidden': 'true',
+};
+const initialsOf = (name) => name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map(w => w[0].toUpperCase())
+    .join('');
+const digits = (s) => s.replace(/\s+/g, '');
+const BsCompanySwitcher = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bsCompanySwitch = createEvent(this, "bsCompanySwitch");
+        this.bsManageCompanies = createEvent(this, "bsManageCompanies");
+        this.bsAddCompanies = createEvent(this, "bsAddCompanies");
+        this.bsOpenChange = createEvent(this, "bsOpenChange");
+    }
+    get el() { return getElement(this); }
+    id = `bs-cs-${++uid}`;
+    inputEl;
+    focusSearch = false;
+    /** The companies the user can switch between. JS property only (an array cannot be an attribute). */
+    companies = [];
+    /** `id` of the current company. */
+    currentId;
+    /** `id`s of recently used companies, most recent first. The current company is not repeated in the Recent group. */
+    recentIds = [];
+    /** `id` of the company being switched to. Shows the switching state: a spinner in the trigger and on that row. */
+    switchingId;
+    /** Whether the panel is open. */
+    open = false;
+    /** Text of the trigger when there is no current company. */
+    placeholderLabel = 'Select a company';
+    /** Placeholder (and accessible name) of the search field. */
+    searchPlaceholder = 'Find a company or org. number';
+    /** Accessible name of the company listbox. */
+    listLabel = 'Companies';
+    /** Header of the current company group. */
+    currentLabel = 'Current';
+    /** Header of the recent companies group. */
+    recentLabel = 'Recent';
+    /** Header of the all companies group (the count is appended). */
+    allLabel = 'All companies';
+    /** Header of the search view when there are several matches ("3 matches"). */
+    matchesLabel = 'matches';
+    /** Header of the search view when there is one match ("1 match"). */
+    matchLabel = 'match';
+    /** Prefix of the org. number, e.g. "Org. no.". */
+    orgNumberLabel = 'Org. no.';
+    /** Trigger subtitle while switching. */
+    switchingLabel = 'Switching…';
+    /** No-results heading. `{query}` is replaced by the query. */
+    emptyHeading = 'No companies match “{query}”';
+    /** No-results description. */
+    emptyDescription = 'Check the spelling, or search by org. number.';
+    /** Text of the "Manage Companies" footer button. */
+    manageLabel = 'Manage Companies';
+    /** Text of the "Add companies" footer button. */
+    addLabel = 'Add companies';
+    query = '';
+    activeId = null;
+    /** Fires when a company other than the current one is chosen (click or Enter), with the company. */
+    bsCompanySwitch;
+    /** Fires when "Manage Companies" is pressed. */
+    bsManageCompanies;
+    /** Fires when "Add companies" is pressed. */
+    bsAddCompanies;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange;
+    onOpen(next) {
+        this.query = '';
+        this.activeId = null;
+        this.focusSearch = next;
+    }
+    componentDidRender() {
+        if (this.open && this.focusSearch) {
+            this.focusSearch = false;
+            this.inputEl?.focus();
+        }
+    }
+    byId(id) {
+        return id ? this.companies.find(c => c.id === id) : undefined;
+    }
+    get q() {
+        return this.query.trim().toLowerCase();
+    }
+    matches() {
+        const q = this.q;
+        const qd = digits(q);
+        return this.companies.filter(c => c.name.toLowerCase().includes(q) || digits(c.orgNumber).includes(qd));
+    }
+    groups() {
+        if (this.q) {
+            const items = this.matches();
+            if (!items.length)
+                return [];
+            return [{ key: 'matches', header: `${items.length} ${items.length === 1 ? this.matchLabel : this.matchesLabel}`, items }];
+        }
+        const current = this.byId(this.currentId);
+        const recent = this.recentIds.map(i => this.byId(i)).filter((c) => !!c && c.id !== this.currentId);
+        const shown = new Set([current?.id, ...recent.map(c => c.id)]);
+        const rest = this.companies.filter(c => !shown.has(c.id));
+        const out = [];
+        if (current)
+            out.push({ key: 'current', header: this.currentLabel, items: [current] });
+        if (recent.length)
+            out.push({ key: 'recent', header: this.recentLabel, items: recent });
+        if (rest.length)
+            out.push({ key: 'all', header: `${this.allLabel} · ${rest.length}`, items: rest });
+        return out;
+    }
+    rowId(c) {
+        return `${this.id}-opt-${c.id}`;
+    }
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    choose(c) {
+        if (c.id === this.currentId || c.id === this.switchingId) {
+            this.setOpen(false);
+            return;
+        }
+        this.bsCompanySwitch.emit(c);
+        // The consumer asks for the switching state from its handler; otherwise there is nothing to wait for.
+        if (!this.switchingId)
+            this.setOpen(false);
+    }
+    onPopoverOpenChange = (ev) => {
+        // bs-popover's own event would bubble out of this host too; ours replaces it.
+        ev.stopPropagation();
+        this.setOpen(ev.detail);
+    };
+    onInput = (ev) => {
+        ev.stopPropagation();
+        this.query = ev.detail;
+        this.activeId = null;
+    };
+    onKeyDown = (ev) => {
+        if (ev.key !== 'ArrowDown' && ev.key !== 'ArrowUp' && ev.key !== 'Enter')
+            return;
+        const rows = this.groups().flatMap(g => g.items);
+        if (ev.key === 'Enter') {
+            const active = rows.find(c => this.rowId(c) === this.activeId);
+            if (active) {
+                ev.preventDefault();
+                this.choose(active);
+            }
+            return;
+        }
+        ev.preventDefault();
+        if (!rows.length)
+            return;
+        const idx = rows.findIndex(c => this.rowId(c) === this.activeId);
+        const next = ev.key === 'ArrowDown' ? (idx + 1) % rows.length : idx <= 0 ? rows.length - 1 : idx - 1;
+        this.activeId = this.rowId(rows[next]);
+        // Wait for the re-render so the row exists with its new state before scrolling to it.
+        requestAnimationFrame(() => this.el.shadowRoot?.getElementById(this.activeId ?? '')?.scrollIntoView?.({ block: 'nearest' }));
+    };
+    subtitle(c) {
+        return `${c.country} · ${this.orgNumberLabel} ${c.orgNumber}`;
+    }
+    renderTrigger() {
+        const switching = this.byId(this.switchingId);
+        const shown = switching ?? this.byId(this.currentId);
+        return (h("button", { slot: "trigger", part: "trigger", type: "button", class: "bs-company-switcher__trigger", "aria-haspopup": "listbox", "aria-expanded": String(this.open), "aria-busy": switching ? 'true' : undefined }, h("span", { "aria-hidden": "true", class: "bs-company-switcher__avatar" }, shown ? h("bs-avatar", { part: "avatar", type: "initials", size: "sm", initials: initialsOf(shown.name) }) : h("bs-avatar", { part: "avatar", type: "icon", size: "sm" })), h("span", { class: "bs-company-switcher__text" }, h("span", { part: "name", class: "bs-company-switcher__name" }, shown ? shown.name : this.placeholderLabel), shown && (h("span", { part: "subtitle", class: "bs-company-switcher__subtitle" }, switching ? this.switchingLabel : `${this.orgNumberLabel} ${shown.orgNumber}`))), switching ? (h("bs-spinner", { class: "bs-company-switcher__trail", size: "sm", label: this.switchingLabel })) : (h("svg", { class: "bs-company-switcher__trail bs-company-switcher__chevron", ...svgProps }, h("path", { d: "m6 9 6 6 6-6" })))));
+    }
+    renderRow(c) {
+        const id = this.rowId(c);
+        const isCurrent = c.id === this.currentId;
+        const isSwitching = c.id === this.switchingId;
+        return (h("bs-list-item", { part: "row", id: id, class: { 'bs-company-switcher__row': true, 'bs-company-switcher__row--active': this.activeId === id }, selectionRole: "option", value: c.id, selected: isCurrent, "aria-busy": isSwitching ? 'true' : undefined, onMouseEnter: () => (this.activeId = id), onBsItemClick: (ev) => {
+                ev.stopPropagation();
+                this.choose(c);
+            } }, h("span", { slot: "leading", "aria-hidden": "true" }, h("bs-avatar", { type: "initials", size: "sm", initials: initialsOf(c.name) })), h("span", { class: "bs-company-switcher__row-name" }, c.name), h("span", { class: "bs-company-switcher__row-sub" }, this.subtitle(c)), isSwitching ? (h("bs-spinner", { slot: "trailing", size: "sm", label: this.switchingLabel })) : isCurrent ? (h("svg", { slot: "trailing", class: "bs-company-switcher__check", ...svgProps }, h("path", { d: "m5 12.5 4.5 4.5L19 7.5" }))) : null));
+    }
+    render() {
+        const groups = this.groups();
+        const empty = !!this.q && groups.length === 0;
+        const listId = `${this.id}-listbox`;
+        const total = groups.reduce((n, g) => n + g.items.length, 0);
+        return (h("bs-popover", { key: '9ce15612a22c2401bdeb75f5dbae869d76d9310c', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: '848ef0a3498aa67b55b4c1885c88b6e7b9e4534d', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: '9ec54e9e78fb33c4e8049691ca8fb391ad05fa42', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: '222550548c6bdd41584a1a7c55c6e0bf23d07b8b', part: "search", role: "combobox", "aria-label": this.searchPlaceholder, "aria-expanded": "true", "aria-haspopup": "listbox", "aria-controls": groups.length ? listId : undefined, "aria-activedescendant": this.activeId ?? undefined, onKeyDown: this.onKeyDown }, h("bs-input", { key: 'd0dd2042031a45ab83b1cb857268df097f2dff5f', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: '28343988f512c3515cd69a6b766d9990cd63d23a', id: listId, part: "list", class: "bs-company-switcher__list", role: "listbox", "aria-label": this.listLabel, onMouseDown: (ev) => ev.preventDefault(), onMouseLeave: () => (this.activeId = null) }, groups.map(g => {
+            const hid = `${this.id}-h-${g.key}`;
+            return (h("div", { part: "group", class: "bs-company-switcher__group", role: "group", "aria-labelledby": hid }, h("div", { part: "group-header", id: hid, class: "bs-company-switcher__group-header" }, g.header), g.items.map(c => this.renderRow(c))));
+        }))), empty && (h("bs-empty-state", { key: 'd4918f499f405f08d1874646442b9a529ae9fd3f', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: 'da86a364c21c7b3dbb3121750b022d348f2ecdab', slot: "icon", ...svgProps }, h("circle", { key: 'f81525086c48f928325c2532089b69ede5528e33', cx: "11", cy: "11", r: "7" }), h("path", { key: '490f2df2b35e29cdff08a60c1d63fb2fdd9ef1a7', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '9a1997a336530026eab0743cbe7cca26f5c4da23', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '361ca8743c2c50fcaadc0541b9a3ceac1289f471', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '0dc207fc2719f926fba2859be9130bb28bee652a', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '5ba9707f09ab325c7f7edff7fbec22196656ad8c', slot: "icon", ...svgProps }, h("circle", { key: '5f99a660c029225dbceb38347c5a6a4141ecbaaf', cx: "12", cy: "12", r: "3" }), h("path", { key: '7f3aec8c463210e81e079051d3a13f0550e6d27c', d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z" })), this.manageLabel), h("bs-button", { key: 'f6204900c1e1f21b59d02a770339c0471efdc379', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: '2381e1068dbd3785995f6946c6215b743feeb323', slot: "icon", ...svgProps }, h("path", { key: '7decd85389ffd646e48d501126b99bc4498604be', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '36cb6c11fa0a3f51985a5272dce01441f8127fb0', class: "bs-company-switcher__live", "aria-live": "polite" }, this.open && this.q ? (empty ? this.emptyHeading.replace('{query}', this.query.trim()) : `${total} ${total === 1 ? this.matchLabel : this.matchesLabel}`) : ''))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpen": 0
+            }]
+    }; }
+};
+BsCompanySwitcher.style = bsCompanySwitcherCss();
+
+export { BsCompanySwitcher as bs_company_switcher };

package/dist/esm/bs-composer-status-banner.entry.js

@@ -49,7 +49,7 @@ const BsComposerStatusBanner = class {
         return this.type === 'error' || this.type === 'warning' ? h(WarningIcon, null) : h(ClockIcon, null);
     }
     render() {
-        return (h("div", { key: '9a18ded6392d5374cdf4357650498f1eff8bc896', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '8acfc215792a889e80d01a08e86a0aa96bfe8967', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '2a4e0a5fe6b4f2fef30d534eae0c15009f813d33', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '5378cfaf8b1fed689eedac4f6a2bf892dda043f8', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '9fe869051bbf300c12f0ec8006d409abf4bebf56', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '6fe2f55c57523ee917ae6d96e2a070f1006f0a44', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '18d5ec846134a57c11c46810bb0b35acac0a20b6', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: 'cbf7993e299eacc8a05efc55cf0dc4539ba9d424' })))));
+        return (h("div", { key: '275d6a4c6eae013bf2f9804857baba9d0a2917a8', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '756473764a79392e539a0f0ec724374866385c0b', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'e49eebafc231aa5987967672df2b9ffe2b3f951e', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '1047ceaf71e08f90bb7224aee6207a65e9fefd4d', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: 'a0433bc0d21420bc561e0fdccfdfc75cb76f8bf3', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '4291b58cc42d22395fe831eda2850725fcc3bda9', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '91d659760339c80414a59ef65bf053f9ad0aaceb', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '47c78a3753c2a62c0a859771b89102bc974b32a6' })))));
     }
 };
 const SpinnerIcon = () => (h("svg", { class: "bs-composer-status-banner__spinner", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-opacity": "0.25", "stroke-width": "1.5" }), h("path", { d: "M17.25 10A7.25 7.25 0 0 0 10 2.75", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round" })));

package/dist/esm/bs-composer.entry.js

@@ -197,7 +197,7 @@ const BsComposer = class {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (h("div", { key: 'f1ccd8ab2299efcf83dc8f858845e87ba87f9c41', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '2edd5ab5b6a67d108d2f8067a639e74b6ab4f39f', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'a7b2acfea4b2498792749e24aaf9329e521a93df', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '0de284b100f38a60b472eadfd89f06690023a1a1', class: "bs-composer__text-row" }, h("textarea", { key: '0c46b8e4f54234b2df62af566f0b6bf9b1f978d1', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'a3ca22299095e398b6dd7a62c9b6ce93a4d49dab', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'c06cad301027ce2fdef180189945bebd2f876081', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'd863cc1734ca9b67447b2cbbe19a2ba75266d169' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: 'aadf13bf18c9215045cf7ea326bbc1495ab21288', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: '36ca7d3824349cd65473553e0a20b14c41b74b8b', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '0965e567d4cb590d7cd072ecf72c10c2c97e1f69', name: "actions-end" }))));
+        return (h("div", { key: 'd63357675cbf508fc50014a9e2d3c8224bdc0108', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: 'be65e62348956075f765621cb30e76063d85b9e3', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '8a1bcb47e809ea09db6918a90df7e3ffd5b6e57d', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: 'a07dff798906b0532b439c0cb02c0dcee4d87f5d', class: "bs-composer__text-row" }, h("textarea", { key: 'b86a424e4012daa5a7fa8074e742fdc52bff87b8', ref: el => (this.inputEl = el), part: "input", class: "bs-composer__input", rows: 1, value: this.value, placeholder: placeholder, disabled: disabled, maxLength: this.maxLength, "aria-label": this.ariaLabel, onInput: this.onInput, onKeyDown: this.onInputKeydown })), h("div", { key: 'e7c4feda7f407f92372415561fa137c3fc124a6e', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: '5d5dad6b3e4e63a0affa27f7522586919b8ba66c', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'd1df5c9d4071e2dede7acd9c3923d264b14cea43' }))), recording ? (h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (h("span", { class: "bs-composer__spacer" })), !this.hideMic && (h("button", { key: 'cb1ca37ee7ce02fb4bfd0fabf762d16030cf5b43', type: "button", part: "mic", class: `bs-composer__mic ${recording ? 'bs-composer__mic--recording' : ''}`, "aria-label": recording ? this.stopRecordingLabel : this.micLabel, disabled: disabled, onClick: this.onMicClick }, recording ? h(StopIcon, null) : h(MicIcon, null))), h("button", { key: 'c0ca786da9492d16c3a86b4a4f81683aeb2fac0f', type: "button", part: "action", class: `bs-composer__action bs-composer__action--${this.state}`, "aria-label": this.actionLabel(), disabled: disabled, "aria-busy": this.loading && this.state === 'idle' ? 'true' : undefined, onClick: this.onActionClick }, this.renderActionIcon()), h("slot", { key: '040cc29528d369ef8e8a513058b1b7379cbb6c4a', name: "actions-end" }))));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/esm/bs-container.entry.js

@@ -13,7 +13,7 @@ const BsContainer = class {
     padding = '300';
     render() {
         const pad = SPACING_TOKENS.includes(String(this.padding)) ? String(this.padding) : '300';
-        return (h(Host, { key: 'af5052dbda078e66b8afcf84e842f124748353b9', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '2493e7614d7fcaf07b24e350e68a65b06fd77640' })));
+        return (h(Host, { key: '340c37cb6fc2d4b45a8581a49e70914c56f6d41e', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '1c20b5de141a8329e9eb6c086073b7afab41b506' })));
     }
 };
 BsContainer.style = bsContainerCss();

package/dist/esm/bs-data-table.entry.js

@@ -74,11 +74,11 @@ const BsDataTable = class {
         }
     }
     render() {
-        return (h("table", { key: '72d4058323ac137aa589476e5b89ed47bd8b996e', part: "table", class: "bs-data-table" }, h("thead", { key: '65e27a1aba0b9eb6892df5b0581672c9fb18ce13', part: "head" }, h("tr", { key: '690d1fab0effa5b0e9e44160ac91d77ab1290079' }, this.selectable && (h("th", { key: 'cf96e314093743b5e6341cf2fce3e0ac6b5e99ef', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'fe6fe4d41420f9a37f11337044173ce5b13340d4', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
+        return (h("table", { key: '646bdc772d8911e9531c8e7a0085c23cf400c5f9', part: "table", class: "bs-data-table" }, h("thead", { key: 'b18ad41e0aa107b8051dde2126456ba5fd86ec44', part: "head" }, h("tr", { key: '67ee2efb68900f4d240fbc3ef4291f4b7ae0ad0b' }, this.selectable && (h("th", { key: 'ccc73b67cc1533c654237e8132224271738fa731', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'b7cf76aeead033daaea4650b90abbacba4a72341', type: "checkbox", "aria-label": this.selectAllLabel, checked: this.selectedIds.size > 0 && this.selectedIds.size === this.rows.length, indeterminate: this.selectedIds.size > 0 && this.selectedIds.size < this.rows.length, onChange: this.onSelectAllChange })))), this.columns.map(column => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), h("tbody", { key: '34e3bb93c663862d1d8b29956c22392b3c2400ac', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), h("tbody", { key: 'e4d8dc0dbaa0a223442bdf307dce7c05f54547b9', part: "body" }, this.rows.map(row => (h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (h("td", { class: "bs-data-table__select-col" }, h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
         // cellRenderer is a developer-supplied, trusted function (JS-property-only, never
         // derived from untrusted input) -- its HTML output is intentionally not escaped,
         // same trust model as React's dangerouslySetInnerHTML.

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

@@ -312,7 +312,7 @@ const BsDatepicker = class {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (h("bs-card", { key: '280abccf2d86d04f392f4daeb9811bf34d71dc6b', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '624706b13929083f05bab4210a5c8444240f8a53', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '69d8f66f154e0e194b77b091bede097407c43902', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '089809f514e4513624749748d639ef6da997618b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: 'd78f4940665d866752772f69de2e8058390bf6e5', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'f34d431a9f77b036fe4417c033f197c72780c1bf', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '36a37548a0bc04db3416f5e206c0990f0d1189eb', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '3bf5616d93ea0d5f8968691692b2b64ce6334d0b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5f9aac5a4e1658051908f5bad88b6c196f6dfea7', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '0515eaeb3cd01b48633675668292cb01634c134a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '2decbaa1fc82ee83c58ae19cd19bd53c51aabe0d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '4720f7dbda3ca990885a56d00860eaf4ab7689e8', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (h("bs-card", { key: '7ec1a401f3de27dbfca02cec5bafddfd65ddb8b1', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '39ef955d7175fbaf485a138ad7bbe3fd00133700', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '304ef15f46dc9dfd30a3fdee1e4d9b4a8a31fd86', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '01ae2998d09497afb4b16950629287e0d6def2d4', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '7d9063f139f079abc906f43458e19bc21b3b05cb', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '7142cdbf7bfd7db26516831ab55c7d9203ab2485', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '492425990862fa53c2be547c7bf8d56b9c369109', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '895f8b4ad72fa0e801b9dcc4701f9b69aad72e83', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '998a268f59503b92a7f7ca0b4832c79d9ee48e78', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '22e141eb617d5a0b009f005bf18abe95c1189efe', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'e6fd0113d7682efee354bce15f74591cf7b9cc30', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: 'e4000fda3ac22ac7d382a89d1e5741bb4555ac8c', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);

package/dist/esm/bs-dialog.entry.js

@@ -1,12 +1,14 @@
-import { r as registerInstance, c as createEvent, h } from './index-D3SkQJpw.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3SkQJpw.js';
+import { c as cancelMotion, r as readMotion, p as play } from './motion-BSt9HeTa.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}}`;
+const bsDialogCss = () => `:host{--bs-dialog-duration:var(--bs-duration-default);--bs-dialog-easing:var(--bs-easing-standard);--bs-dialog-distance:var(--bs-spacing-200)}.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__backdrop--closing{pointer-events:none}.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}}`;
 
 const BsDialog = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.bsClose = createEvent(this, "bsClose");
     }
+    get el() { return getElement(this); }
     /** Mutable + reflected so the component can close itself (backdrop click, Escape, close button)
      * the same way a native `<dialog>` does, while still emitting `bsClose` for the consumer to react to. */
     open = false;
@@ -40,6 +42,42 @@ const BsDialog = class {
     onIconSlotchange = (ev) => {
         this.hasIcon = ev.target.assignedNodes().length > 0;
     };
+    /** True while the exit motion plays after `open` went false, so the dialog stays mounted for it. */
+    closing = false;
+    backdropRef;
+    enterPending = false;
+    exitPending = false;
+    motionRun = 0;
+    onOpenChange(next) {
+        this.motionRun++;
+        cancelMotion(this.backdropRef, this.dialogRef);
+        if (next) {
+            this.closing = false;
+            this.enterPending = true;
+        }
+        else if (this.wasOpen && readMotion(this.el, 'bs-dialog').ms > 0) {
+            this.closing = true;
+            this.exitPending = true;
+        }
+    }
+    playEnter() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-dialog');
+        if (ms === 0)
+            return;
+        play(this.backdropRef, [{ opacity: 0 }, { opacity: 1 }], ms, easing);
+        play(this.dialogRef, [{ opacity: 0, transform: `translateY(${distance}px) scale(0.96)` }, { opacity: 1, transform: 'none' }], ms, easing);
+    }
+    playExit() {
+        const { ms, easing, distance } = readMotion(this.el, 'bs-dialog');
+        const run = ++this.motionRun;
+        Promise.all([
+            play(this.backdropRef, [{ opacity: 1 }, { opacity: 0 }], ms, easing, 'forwards'),
+            play(this.dialogRef, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: `translateY(${distance}px) scale(0.96)` }], ms, easing, 'forwards'),
+        ]).then(() => {
+            if (run === this.motionRun)
+                this.closing = false;
+        });
+    }
     dialogRef;
     previouslyFocused;
     previousBodyOverflow;
@@ -72,6 +110,14 @@ const BsDialog = class {
         }
     }
     componentDidRender() {
+        if (this.open && this.enterPending) {
+            this.enterPending = false;
+            this.playEnter();
+        }
+        else if (!this.open && this.closing && this.exitPending) {
+            this.exitPending = false;
+            this.playExit();
+        }
         if (this.open && !this.wasOpen) {
             this.previouslyFocused = document.activeElement;
             // Deferred to the next frame -- calling .focus() synchronously here, in the same task as
@@ -103,14 +149,19 @@ const BsDialog = class {
         }
     }
     render() {
-        if (!this.open) {
+        if (!this.open && !this.closing) {
             return null;
         }
         // The close button floats (absolute, over the top of the dialog) whenever there's a hero image
         // to sit over, or the centered layout has no header row to put an inline close button in.
         const floatingClose = this.centered || this.hasImage;
-        return (h("div", { part: "backdrop", class: "bs-dialog__backdrop", onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null))), h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null)))), h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, h("slot", null)), h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
+        return (h("div", { ref: el => (this.backdropRef = el), part: "backdrop", class: `bs-dialog__backdrop ${this.open ? '' : 'bs-dialog__backdrop--closing'}`, onClick: this.onBackdropClick }, h("div", { ref: el => (this.dialogRef = el), tabIndex: -1, part: "dialog", class: `bs-dialog__dialog bs-dialog__dialog--${this.size}`, role: "dialog", "aria-modal": "true", "aria-label": this.heading }, floatingClose && (h("bs-icon-button", { part: "close", class: "bs-dialog__close--floating", variant: "neutral", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null))), h("div", { part: "image", class: `bs-dialog__image ${this.hasImage ? 'bs-dialog__image--visible' : ''}` }, h("slot", { name: "image", onSlotchange: this.onImageSlotchange })), this.centered && (h("div", { part: "icon", class: `bs-dialog__icon ${this.hasIcon ? 'bs-dialog__icon--visible' : ''}` }, h("slot", { name: "icon", onSlotchange: this.onIconSlotchange }))), h("div", { part: "header", class: `bs-dialog__header ${this.centered ? 'bs-dialog__header--centered' : ''}` }, h("span", { class: "bs-dialog__heading" }, this.heading), !floatingClose && (h("bs-icon-button", { part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: this.close }, h(CloseIcon, null)))), h("div", { part: "body", class: `bs-dialog__body ${this.centered ? 'bs-dialog__body--centered' : ''}` }, h("slot", null)), h("div", { part: "footer", class: `bs-dialog__footer ${this.hasFooter ? 'bs-dialog__footer--visible' : ''}` }, h("slot", { name: "footer", onSlotchange: this.onFooterSlotchange })))));
     }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
 };
 // 16x16 native viewBox, matching bs-attachment's own CloseIcon proportions (two crossing diagonal
 // strokes) -- shared between both close button variants above rather than duplicated inline.

package/dist/esm/bs-divider.entry.js

@@ -19,7 +19,7 @@ const BsDivider = class {
         const a11y = this.decorative
             ? { role: 'none', 'aria-hidden': 'true' }
             : { role: 'separator', 'aria-orientation': orientation };
-        return (h(Host, { key: '0146af9f63ddd328e30262cf9767222445da478b', ...a11y }, h("div", { key: 'a621923c43fd326fe5ee6e7223bd5e7103b01e9e', class: "line", part: "line" })));
+        return (h(Host, { key: 'e075bd62e465491383d5377676b87c297f32f623', ...a11y }, h("div", { key: '0eb6f8b8b36d4da2ead95d19193e111060ca0b10', class: "line", part: "line" })));
     }
 };
 BsDivider.style = bsDividerCss();

package/dist/esm/bs-empty-state.entry.js

@@ -37,7 +37,7 @@ const BsEmptyState = class {
     render() {
         const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
         const Heading = `h${level}`;
-        return (h("div", { key: '0f841411b4b0f38d29487f3f52f79cb7a281f32a', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: '69c1e66424d966aed5e29582c2947bbfe0725cde', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: '3243c54d7760d27cee1463ffe1acd1d886929a77', name: "icon" })), this.heading && (h(Heading, { key: '06075e06b4917ba28276c8b4c77e7dcc000c6f23', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '00dab545646803b8ed2f9723e6aa80f620f085a1', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '1a984f1efd3bfbe6e5fd981e2f367ddd25e6f3c7', part: "action", class: "bs-empty-state__action" }, h("slot", { key: 'ea9b962f5652238d74625a11627992f0f4fb34bf', name: "action" })))));
+        return (h("div", { key: '7c9a598641c29fd747d042759d1b84401a2102d5', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: 'a11aa98623be1b76678092fc1a81dec33fb77e63', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: 'f91436013c89319f2a06ae38f12c655d023bf485', name: "icon" })), this.heading && (h(Heading, { key: 'c93b6af8f937dafa8e1047384ed1246b7db6df4c', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: '05a336857bb29e1df9405cf8cb5d0ae0f6d28f74', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '02dbc3448e2cbe706c3db1c9bfbf70e8c129c36f', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '42f3ec130d476919046540406af68d686d425c19', name: "action" })))));
     }
 };
 BsEmptyState.style = bsEmptyStateCss();

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

@@ -44,7 +44,7 @@ const BsErrorPage = class {
         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 (h("bs-card", { key: '376ab30f0eeaf89fb522373b375d0c68eebe8e99', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '380013c4a4ac5208823856bb565f841e4b9aace3', class: "bs-error-page__body" }, h("div", { key: 'ce3ed8170977a0e2c4b1247140734fa3ba4c4896', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '625d8cef3b2969f15e6ba5e94913359f54f277dd', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e4415c41729cc3e9b52f1c61dfb8906a1d8dcc6a', name: "icon" }, d.glyph())), code && (h("span", { key: 'a6d8d24456746f9da3387c2acae20410382d7b62', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: '4cace21798cbd9f40f2eb493938b5c12db43be97', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'aca6cc9c414530bbb657e02c0910bbc4cae35ae6', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'e5ec7c649b3b49e42e2f8132372e5b1b25f850bf', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '7414d2d76186402404cf36ad662340f30e4b65aa', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'cf2fff2d7d2a77dd9f5a1fca1464ae0f687e4b5a', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: 'b236e353ba68c47c300ca7bc8c87744b056261d3', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'dd65a6504d533bbaa7be0134a3853f041836c536', class: "bs-error-page__body" }, h("div", { key: '450194e7695bbea5076ca9ce060f5f5aa0eb6aac', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '5a49ef75e17d2a565d34678792a83b62e64b2f4e', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '06b3356dbc54741538ddeb633a99184c1d4f3e8d', name: "icon" }, d.glyph())), code && (h("span", { key: 'c11c2bdd41d504a5305164df96601b5ef2794027', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'a20c05d36c8b9e9d64119df40ffb8eb8da44dd06', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: '366cbecd6b82bb83a2b137b35bbf0520a2364e44', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'a71c32a3588e38592d3b20dd723ed4b4e17b7d94', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: '4fef13ed699b7df97916eb09686dc7e0b5ac90aa', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: '87d6403fcebf8345fae40329d509f41c6d2d7bfe', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
 };
 const icon = (children) => () => (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));

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

@@ -69,7 +69,7 @@ const BsFileUploadItem = class {
     }
     render() {
         const removing = this.state === 'success';
-        return (h("div", { key: '02ddff16491c33fa61626bca72275ea0a1037c14', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'c465a9216d363ee858933d24abb468d73d66190e', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '5aeaec4d3e9120163dab89c9bb3ca71e8976cae3', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: '3fdf5cb05270ae986e59404758f487932da10fbe', class: "bs-file-upload-item__content" }, h("div", { key: 'eb783412a8f97eaf6d566c06283c0ca0cc735570', class: "bs-file-upload-item__meta" }, h("span", { key: 'a456cfbcbaa19329715d55d80845a6b824bb2d64', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '7810e2855de50d3fa42d7ee29af81e2c58ea1a42', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '7be3bf3d73ec51a2ce3bc23b4e401306c2d6bcc9', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+        return (h("div", { key: 'aff0de0cc425f2bea76407bd4e805ba7662816f1', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'e27d9ccd7f23a1a97eae0af9fa93fd5a45305bce', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '16e52a05a81a1c89e1f74d9e48311a0663d60dec', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: '7b0dd4283f8412c51e3d74e6b3659c769e205c38', class: "bs-file-upload-item__content" }, h("div", { key: '70f55bffad0b17cd2808d26c7117d00b1f1385ec', class: "bs-file-upload-item__meta" }, h("span", { key: '759c23ce263cfab9230cb0b8a5d5322f0af46ca5', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '9667c0fbb54d59d6e1803fabaea475f321bfd985', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '6dc6d78f8bceee678d18aae7747193e32d4bc637', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
     }
 };
 // Figma exports, recolored via currentColor so the CSS tokens drive the color.

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

@@ -98,7 +98,7 @@ const BsFileUpload = class {
             this.handleFiles(files);
     };
     render() {
-        return (h("div", { key: '58fece79d4fb5204ba4edadbdac4a26b5ef3186b', 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 }, h("div", { key: '9339e7a61fd8d2d337c442518b0feca4eac56f4e', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'b361ea7dda65426da604485f8d00022520e96643', name: "icon" }, h(UploadIcon, { key: 'fb08c4f2ec4250293ca66ab7a84c0b77599b15b9' }))), h("div", { key: '1ee60fe58d4196a8aaf95d38e7ba1d6aaaf269fb', class: "bs-file-upload__content" }, h("div", { key: '57e91a29e74a9e02831b32e3ab674607a256e68c', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '389ea949446b63bb976071fec70d3e5398d3ebef', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'f6709820df651e915ee7b0073672820478e3c483', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: '29abda9026efccb881b26794ca5441888ef4c02c', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '3ea4af2d866795676c74138f5ce6f75f5cb13111', 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 (h("div", { key: 'dca680bf51b270a837fe7e8b59ec0e68aab5ccb2', 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 }, h("div", { key: '6553299e75c11c86f5d87a797066977712b40cec', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'f7807bf5237e14f230084ec31777c417efdf1715', name: "icon" }, h(UploadIcon, { key: '8070074c0c7ae30980632842609160604147fa15' }))), h("div", { key: '2d8635c020ee47ff7f69662f5cb3ceae51d7c700', class: "bs-file-upload__content" }, h("div", { key: 'a7274934366c0c99ec9691f3f34c7664a5e0dacf', class: "bs-file-upload__text" }, this.heading && (h("span", { key: 'd8bc7716995b017e7c7d9452d0cd57cbbb20cbaa', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '2b42c3ef723f3d196ffb015fafec77a80c90a053', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'c1a2f9de60ef0b22f04a104fb582abfce703d7d2', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '8330b08007a1c6f9e1a4e161ab31da694ff10a23', 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/esm/bs-global-search.entry.js

@@ -305,10 +305,10 @@ const BsGlobalSearch = class {
         const listId = `${this.id}-listbox`;
         const isList = this.status === 'default' || this.status === 'results';
         const showFooter = this.showFooter && isList;
-        return (h("div", { key: 'dd4477e08b51d52d5309150c4e95f0e560411a05', class: "bs-global-search" }, h("div", { key: 'a37363a1076c4fab1676d4801a0f9751528b42d0', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: 'c0a4d130a36937c90c95659b439eef20655a6c99', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'f85e3f63bf82a5de2648e8fa60f4fd4df288ec3b', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: 'cc926315b2b1d2ad62026531a4174cb84df713a8', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+        return (h("div", { key: '122fd2e1440ff04e7aeb9e12b8071287c9eae7ec', class: "bs-global-search" }, h("div", { key: 'dc2a228d802815873904ca8f0504f71f8ce73dd0', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, h("bs-input", { key: '350322cbdeccd18ac2456fb358ec83589aa835c8', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (h("div", { key: 'c250dc78b38158f9529dbd9c2bd1f2f3e9c107a4', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (h("div", { key: '17c81ab7633498a3de7853a33b2d31db8b304633', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
             const hid = `${this.id}-h-${s}`;
             return (h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), h("slot", { name: s })));
-        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: '4bf9f7fc2a00853aee7b48328819ef0a9181d668', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), h("span", { key: 'fc76b4785031c6ed1b3e3ba5668dfaacdbc0faa4', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
     }
     static get watchers() { return {
         "status": [{

package/dist/esm/bs-grid.entry.js

@@ -40,12 +40,12 @@ const BsGrid = class {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (h("div", { key: '0799adbc2484f270db8ca5c2cadc1a0ec55ecbc0', class: "bs-grid", part: "container", style: {
+        return (h("div", { key: 'cd02b8630bd31c42ffdf9a594a0808aa5f2cea92', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, h("slot", { key: '90d4940c5b1870df9eaae616f8fbe3738f025a3b' })));
+            } }, h("slot", { key: 'ff6f7beebdd212901e3b071f0c02270df6494219' })));
     }
 };
 BsGrid.style = bsGridCss();