@brandsync/wc 1.16.0 → 1.18.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: 'cc655dc39514e72df47d69f8be630970be76b37f', class: "bs-company-switcher", open: this.open, placement: "bottom-start", onBsOpenChange: this.onPopoverOpenChange }, this.renderTrigger(), h("bs-card", { key: 'baf9e5cfd4e730962070dbdee2b3bf686f42ad97', part: "panel", class: "bs-company-switcher__panel", surface: "base" }, h("div", { key: 'e71781a9c7ad79eab8d850bb5f681ee1791178f4', class: "bs-company-switcher__search", onMouseDown: (ev) => ev.preventDefault() }, h("div", { key: 'f80b6e79ea19bcb8338f336775396409aae0dcf3', 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: '8bd76cccf990cc6b465a5f359d1dd0f1c48b315e', ref: el => (this.inputEl = el), type: "search", value: this.query, placeholder: this.searchPlaceholder, onBsInput: this.onInput }))), groups.length > 0 && (h("div", { key: '67d0149206610be71f55eed12b0a355e0cab16dd', 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: 'a7f485949bee4ed76fffe78b2a5d78279c172d22', part: "empty", class: "bs-company-switcher__empty", heading: this.emptyHeading.replace('{query}', this.query.trim()), description: this.emptyDescription }, h("svg", { key: '12885c0dc593629552f33d38e40180cd8ffaec04', slot: "icon", ...svgProps }, h("circle", { key: '8ee00209929c17a73243ca35c6f035ff86280147', cx: "11", cy: "11", r: "7" }), h("path", { key: '8c87279536c3a2f1945d2e9ed40362283b05c7e5', d: "m20 20-3.5-3.5" })))), h("bs-divider", { key: '6dc7d75e3050ef689a9c24bd925a8afa9e425270', class: "bs-company-switcher__divider", decorative: true }), h("div", { key: '5e0dc791b9c79bfd2ddf87798070bc985ff15000', part: "footer", class: "bs-company-switcher__footer" }, h("bs-button", { key: '159eb21eb73724bd6fc395b2a06a8cc03dc656dd', variant: "subtle", size: "sm", onClick: () => this.bsManageCompanies.emit() }, h("svg", { key: '56981b99ff02d600fb392492894d3e677b6c3baa', slot: "icon", ...svgProps }, h("circle", { key: 'e5113734e7139e5dbf4e1a51bb653206efa8a523', cx: "12", cy: "12", r: "3" }), h("path", { key: '371976988bd2c5ccdbdc98495256ee447223a88a', 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: '0f5c57df82c038e7f273d66d52e6bcf1a656b521', variant: "subtle", size: "sm", onClick: () => this.bsAddCompanies.emit() }, h("svg", { key: 'bd03689d5a44537f3b98fa728012e91f9f1fa923', slot: "icon", ...svgProps }, h("path", { key: '09a64a5cd36d3dfaa8924b69bd887d5a4f4cefd6', d: "M12 5v14M5 12h14" })), this.addLabel)), h("span", { key: '2c2123c995f2b891e7f73869c0d8cc8384b7e01b', 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: '7ddbbad5af14adf35a87097ce7e7644fd9e50ec3', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: '1fb9a5fb707db89056115ec0992484b310a47590', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: 'c9cf1d3be7dd33b73f8a2813295ed90e2dbc865a', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: '86735a463ca03af8359ef17d971a63d5c518f587', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '046dad63d8a6b12c5c4fe766edef811d945b427f', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '3c8d3d824413b32ff596f63b579c8b7ce683af81', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '3d5dbe65b4ba7e04202fc260b0ca665a4eb3b516', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: '86efc37f964fd1440ac10cc47077605dbc0664ce' })))));
+        return (h("div", { key: 'e7ee5d0dca888ba5126a292fd7ff9cefbdc47eda', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, h("div", { key: 'c44a8f911942a310b8cc706a10a97180f75013ff', class: "bs-composer-status-banner__message-group" }, this.showIcon && (h("span", { key: '7787871c8f6885068739d9fffd8d589b6babbd43', part: "icon", class: "bs-composer-status-banner__icon" }, h("slot", { key: 'a8dd0077f51e4a8b872ab6778d0387999022285b', name: "icon" }, this.renderDefaultIcon()))), h("p", { key: '398fb7946e36d45bd8ade95154d9d686fc5de6e1', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (h("button", { key: '18874261ba3638533d3fdb876d19303d79c75259', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (h("button", { key: '187e50bbe911683937a7895cfe862028cc9f775a', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, h(CloseIcon, { key: 'c9dac11a2af23ba04d7c6836cbda7adbace51d8d' })))));
     }
 };
 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: '2ce76ec3bd4b265f11bb99dee3a3c90d9172597c', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '413304d4f29b85642bf75beb879a9551d5be8263', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: 'e548c8e0f26f25748f4873c22ad97431f9de3ce8', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '1df76f515366b9ef952714b8454b6aa36fd905c8', class: "bs-composer__text-row" }, h("textarea", { key: '27f0367c0eb47824e66f41cd6d90838e18116b7a', 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: 'b27a014146d993fc41d80c233365964de65cf34c', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'b1fe110b360b29a371a68626a1507213e11facf1', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: 'b925e8b4e010f17594edf604401423b00ff72cba' }))), 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: '52248240911d69cbb69d11ef2368a9dbce2d545a', 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: '653e4a36899abaddb91ebf975e53514b400d2497', 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: 'de551ed30be4f5008c58c4ec441daf8842209edd', name: "actions-end" }))));
+        return (h("div", { key: 'ec6fd11d15f862e5d5633ee153572831562f8635', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, h("div", { key: '4de8e636ad98cf8cd280f35bab8723df0c59bcee', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, h("slot", { key: '8abb10aca311a2d53d1e2980f7a9985b8467e9af', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), h("div", { key: '2e8de5850afda9498f9f08bbe5e2e5fbf86005dc', class: "bs-composer__text-row" }, h("textarea", { key: '8f75958b9a04785e32f347d87e5362e0e83a7aec', 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: 'd18ad65d7aefaa3b23ee0be475cdfa97dbcea546', class: "bs-composer__controls-row" }, !this.hideAttach && (h("button", { key: 'e953064c20184d159f0ef7b352bee7b7c1a28d1d', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, h(PlusIcon, { key: '459ac92ed2c057f2882715f3cadbbf70faf1d180' }))), 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: '4f1039338eb4ae672f32da55fdd67ccb820983be', 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: '07b8f71f8d5a9ce1288e5cd42179935389b8aef8', 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: '5e14d6db5a96be5123d7374bd66d5d044ffb767d', 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: '001d2089d9e69657dad10a4d95c550900bdb5252', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '8f983ed8ad608a386d84468682296d9318089d28' })));
+        return (h(Host, { key: 'c72bb071abd58c825dcd4b87351362de82a402fa', style: { '--bs-container-padding-token': `var(--bs-spacing-${pad})` } }, h("slot", { key: '341e67abd2a13b47d9d852696f212847c2624b38' })));
     }
 };
 BsContainer.style = bsContainerCss();

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

@@ -74,11 +74,11 @@ const BsDataTable = class {
         }
     }
     render() {
-        return (h("table", { key: '5b61e4f581c2ab0da069cabf9a612285f98b0865', part: "table", class: "bs-data-table" }, h("thead", { key: 'c3bed54d42e2e2c3d54cfa9754251ab0d34c55fd', part: "head" }, h("tr", { key: '8f0aaa90b06650719423de98e05f39ffce407a67' }, this.selectable && (h("th", { key: 'ed065c125b50493c621c8922cdd3d7ca26222b8e', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: '0e4f29de07f7818e7024714281f5faadcd288c88', 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: 'd6b278e5252570f3b97ef3fdd53b132974041e6c', part: "table", class: "bs-data-table" }, h("thead", { key: '16280faa094841550a637466fa37ec2df6950e4b', part: "head" }, h("tr", { key: 'e78510a9b1b7966257cb626218aaf9f51bde402e' }, this.selectable && (h("th", { key: '1a79de8886d8d394fc0b06f283258db94e0f3b1f', class: "bs-data-table__select-col" }, this.rows.length > 0 && (h("input", { key: 'c34bd5b47dcea30418fce8674a2aefff7f8bf601', 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: 'b993a2e1c22d094936c49ad33486b2ecc02861c8', 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: '80266f8d66ffdf7132bf2f331568db34ed53ed28', 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: 'd2794a112b72b3dc871360b1e57273c9ef097fc4', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: 'bee55a1cd06aa44171f40babae77b1f2f742d160', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: 'd4ab1cfd76fcea8b64daeb951da7b36300c036f0', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '5fcbb3f928db51049fd034beb3519400afe4f128', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '18889f8f9dd9364bd73595635b72515b91d35ade', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '3d648cd4be611ef4de37cc08f9017809388d36e3', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: 'c0647871f1c140472807ae51e04604c6d87ccaa4', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: 'ec3d33aeea146534d6640ac336905a002d0e7dc2', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: '5cbac8630a30064d940e5f03ce767b525c09dd7c', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '2c47ca0911b8b42cd3590ff053905df327363e9f', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: '91a6942792287f3044962fd278e36ed04ec03878', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: '445e0548f0913426fe2eb730f291423d9165f839', 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: 'cdb34fb56c5dd485e68fdbaf846c13ecc0547117', part: "container", class: "bs-datepicker", surface: "raised" }, h("div", { key: '348836d221ea9d88f81d74c756f6e33749185e77', class: "bs-datepicker__body" }, this.renderHeader(), h("div", { key: '19192cd83a674a876ddebb3048cf61392f5ce1b4', part: "nav", class: "bs-datepicker__nav" }, h("button", { key: '936dd7846972754b3e3e12e0b5d1ebf459f6626b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, h("svg", { key: '8adff95c2ac4160773ba27b2bba2690376bf7b6e', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'e07e13f74b49ef8676ef9b2b61648f2fbcd7ff26', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("div", { key: '60e2dccce60ce780002b5a37b7bce2cb77a7ded2', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), h("button", { key: '4ea132ee9b1d1b7df1dd3595dc52e9cd977dc9d4', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, h("svg", { key: 'e648752590a0483c152a06ff2ebe1a4c7f459fd1', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: '61f9ebdc93a4636284fe3215f0ff6699ef7bb8de', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("div", { key: 'd94bd61c202b575b3ae4b8312224f302cf13330e', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, h("div", { key: 'ac7713f2ebdc1d429641d14856ed597866fb5a07', 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-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: '72be86556d663c54fde0d585ae5850b236389b23', ...a11y }, h("div", { key: 'a08f191d8f900bc88fc0c44be08da1a7d8eb2e3c', class: "line", part: "line" })));
+        return (h(Host, { key: '858582c09f3f2712a3ee9d51a80a1f53b2a29dfb', ...a11y }, h("div", { key: '184d290fbfdabab256850af57792e7d6c5ebf563', class: "line", part: "line" })));
     }
 };
 BsDivider.style = bsDividerCss();

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

@@ -0,0 +1,45 @@
+import { r as registerInstance, a as getElement, h } from './index-D3SkQJpw.js';
+
+const bsEmptyStateCss = () => `:host{display:block;box-sizing:border-box;--bs-empty-state-padding-y:var(--bs-spacing-700);--bs-empty-state-padding-x:var(--bs-spacing-300);--bs-empty-state-gap:var(--bs-spacing-150);--bs-empty-state-heading-color:var(--bs-text-default);--bs-empty-state-description-color:var(--bs-text-secondary)}.bs-empty-state{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:var(--bs-empty-state-gap);padding:var(--bs-empty-state-padding-y) var(--bs-empty-state-padding-x);text-align:center}.bs-empty-state__heading{margin:0;align-self:stretch;color:var(--bs-empty-state-heading-color);font-family:inherit;font-size:var(--bs-font-size-xl);font-weight:var(--bs-font-weight-bold);line-height:24px}.bs-empty-state__description{margin:0;align-self:stretch;color:var(--bs-empty-state-description-color);font-family:inherit;font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-regular);line-height:20px}.bs-empty-state__action{display:flex;justify-content:center}`;
+
+const BsEmptyState = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** The heading text. */
+    heading;
+    /** The description text. The default slot overrides it. */
+    description;
+    /** Colour and default glyph of the icon tile. Use `error` for failures. */
+    intent = 'default';
+    /** Heading level, 2 to 6 (renders `h2`..`h6`). Pick the one that fits the page outline. */
+    headingLevel = 3;
+    hasIcon = false;
+    hasDescriptionSlot = false;
+    hasAction = false;
+    observer;
+    componentWillLoad() {
+        this.readSlots();
+        this.observer = new MutationObserver(() => this.readSlots());
+        this.observer.observe(this.el, { childList: true, subtree: false, characterData: false });
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    readSlots() {
+        const nodes = Array.from(this.el.childNodes);
+        const slotOf = (n) => (n.nodeType === Node.ELEMENT_NODE ? n.getAttribute('slot') : null);
+        this.hasIcon = nodes.some(n => slotOf(n) === 'icon');
+        this.hasAction = nodes.some(n => slotOf(n) === 'action');
+        this.hasDescriptionSlot = nodes.some(n => !slotOf(n) && (n.nodeType === Node.ELEMENT_NODE || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())));
+    }
+    render() {
+        const level = Math.min(6, Math.max(2, Math.round(Number(this.headingLevel)) || 3));
+        const Heading = `h${level}`;
+        return (h("div", { key: 'dabc994fcb254cb35958f8bde54d7935bb6ff70a', part: "container", class: "bs-empty-state" }, h("bs-icon-tile", { key: 'efec1cc06eb3447fbd81b12634c12ee96f9fd0d2', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && h("slot", { key: 'd8a7482e2b32f6361b82232652edcc1aadb74a5b', name: "icon" })), this.heading && (h(Heading, { key: '6625baa3d00097951042608aeb888f7c1665e987', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (h("p", { key: 'c367d9d3aa154e8413c04ca47de7cd9f5eed6883', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? h("slot", null) : this.description)), this.hasAction && (h("div", { key: '7b9b78de4e71e6d07d94d4595290492542d7bf62', part: "action", class: "bs-empty-state__action" }, h("slot", { key: '7b57218ca03edfd6f972a2bb6ce458db8dc33d9a', name: "action" })))));
+    }
+};
+BsEmptyState.style = bsEmptyStateCss();
+
+export { BsEmptyState as bs_empty_state };

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: '68774f7ab0252b92905900f06f564d1c2a8ce163', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: 'f263ce4991e2aa4553e430e60e646df5fc257120', class: "bs-error-page__body" }, h("div", { key: '3aa6b36e1aa05ea63e52e8c79684b166853e5950', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: 'b0b7f3fa925acef6b95e23136df7f9bac3e43ff4', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: 'e33db2aa8c275de0e32effc759e177ef1ee46c6d', name: "icon" }, d.glyph())), code && (h("span", { key: '9f576963f7399e4ca6e86cfd0331f0c7c7119886', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'ea4861b666f95c7416a4d54152f8ffd1b900eb61', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'e0ec38c28b957390486fce52497f91661abc7ef1', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'a2b190366240c9fbe3e7a78a16b9881a3ad4468a', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'bef26b3dcc61c4e968c054d35ed67430884c9f99', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'b8de6e83c2c68ca8880afc781e8ffceb03f23164', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (h("bs-card", { key: '4214c79438721c66089be3a4ae64fcd6bdcbdea6', part: "container", class: "bs-error-page", surface: "base" }, h("div", { key: '39b2a7292d488442fc2465635a5be9dd704dc42e', class: "bs-error-page__body" }, h("div", { key: 'beb353eefb6b77b03fe7d1ea3894b6a625eebe06', class: "bs-error-page__art-group" }, h("bs-icon-tile", { key: '516a9c87ddb3ac5140d2880d4638eb5eca01db73', part: "art", class: `bs-error-page__art ${d.info ? 'bs-error-page__art--info' : ''}`, intent: d.intent, size: "lg" }, h("slot", { key: '3c3029ce78413f49c4bb839260c432848329b428', name: "icon" }, d.glyph())), code && (h("span", { key: 'fc4058b507c0b60ca417f09f7838664716b17fc3', part: "code", class: "bs-error-page__code" }, code))), h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (h("p", { key: 'b914f77506217b401e26694205104d623596d270', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (h("div", { key: 'b6dc2e92b34960f754a54b31a659337135e63607', part: "actions", class: "bs-error-page__actions" }, primary && (h("bs-button", { key: 'e4f85bf6e86a80fbf1bd09fc77e16768c435a97b', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (h("bs-button", { key: 'a1469448cfbf1edb0bb8fe1d613101782dc87145', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (h("p", { key: 'e8f32f0cc84051d02418bb48bc6116675ec55097', 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: 'e109650dda74a0a0db7af7f621da5e70079a7830', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '800f1bd6a8cabd97c0aa43fe9a521876d4e6feb8', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'e5696a2cf9d69579ff8fd79688f83879c4093c74', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'bc52ee589c5cf4040dcb1aa86cce0150136d71ae', class: "bs-file-upload-item__content" }, h("div", { key: 'a70dc514e89ebfb1de3e772652e6ab8b2987007a', class: "bs-file-upload-item__meta" }, h("span", { key: '1c0a8e151f284a8344650fb00912582c17d2d5ee', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: 'f608a1ee6e44e34e9e67600622a180e676fb960a', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5781f2aa401d12d3a4f4b0172d64cb0b9ceacf00', 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: '26933845798c1cee2739c2a5a3d402175244717b', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: 'b7312bfd0a7bcbeac8e098be4cb6d565283f2e0f', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: '69350d5224f540e0f4d5033e3ac92ccff397b565', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'fbe429e0dd56af6fe5d955ce384a335c9ce3843a', class: "bs-file-upload-item__content" }, h("div", { key: 'b45f5b5500d760dcfb0d8fe3e87638db9325ae99', class: "bs-file-upload-item__meta" }, h("span", { key: '7e5a8cd3ccca37c88182d0e430841f36f29f56e7', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '114e9167c4542c9e071ebb21ee77d25d5c9221b4', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: 'f6a9a212a6436ac50eaab6b0224b58245171a7de', 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: 'd9f116b4dcf8641a590581c24176d4659a2b6892', 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: '5aa0c733860505646bde5cad571a4d850d38f979', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: '292d3074620f2a228dbe544363f7ef8cce4f194c', name: "icon" }, h(UploadIcon, { key: '65c343be45634d10d561ba0f7a3cdd201a7664e6' }))), h("div", { key: '69d1ddde89b8c26d7a40a963cf16d1519b5b1fd4', class: "bs-file-upload__content" }, h("div", { key: '7730fdb7efb8eeffb374fff22fdd9d60497eebce', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '0ca349bd1fedd84d869b363da150e13c07623f3b', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: '522d99de1b5caf70cd7e44bf8e821fe49951c788', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'f7af51522dfb762102f0c17bcbfd0e737b52d783', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: '71a2262124fd84b52dbffa18966eb1479e1ad95a', 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: '5312a866a1db63fd378f265fc200a509bfd50ce1', 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: '7276ccfa10a086d933b5563a208393a75e0dd821', part: "icon", class: "bs-file-upload__icon" }, h("slot", { key: 'e828eaa70303c82cb2bea5e647807079946b62e7', name: "icon" }, h(UploadIcon, { key: 'bd6ee5b8b20996ee68f972cb79db7c47f645c4d3' }))), h("div", { key: '784440974685713b31ba97642b931b99e64433a3', class: "bs-file-upload__content" }, h("div", { key: 'c7568214218e02ecb794f3429b843462f88bf216', class: "bs-file-upload__text" }, this.heading && (h("span", { key: '4872f617be4f30b9ab98aeca2dca7012d9391905', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (h("span", { key: 'd8f446f1f8690ec773b094aeeb66af49ec1de291', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), h("bs-button", { key: 'bb0634e3e0dcb4a4ef59fa7c5daeaacbff5bceda', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), h("input", { key: 'f55602446ec222ca46b7dab95aaff26d6d5b1632', 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.