@brandsync/wc 1.16.0 → 1.17.0

package/dist/cjs/bs-command-palette.cjs.entry.js

@@ -0,0 +1,374 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsCommandPaletteCss = () => `:host{display:contents;--bs-command-palette-width:640px;--bs-command-palette-top:12vh;--bs-command-palette-max-height:60vh;--bs-command-palette-radius:var(--bs-border-radius-150);--bs-command-palette-bg:var(--bs-surface-base);--bs-command-palette-shadow:0 var(--bs-shadow-position-100) var(--bs-shadow-blur-200) 0 var(--bs-elevation-higher);--bs-command-palette-overlay:var(--bs-surface-overlay);--bs-command-palette-footer-bg:var(--bs-surface-container);--bs-command-palette-divider-color:var(--bs-border-default);--bs-command-palette-header-border-color:var(--bs-border-neutral-container);--bs-command-palette-header-color:var(--bs-text-muted);--bs-command-palette-hint-color:var(--bs-text-secondary);--bs-command-palette-z-index:var(--bs-z-index-modal)}.bs-command-palette{box-sizing:border-box;width:min(var(--bs-command-palette-width), calc(100vw - 2 * var(--bs-spacing-200)));max-width:none;max-height:none;margin:var(--bs-command-palette-top) auto auto;padding:0;border:0;background:transparent;color:var(--bs-text-default);overflow:visible;z-index:var(--bs-command-palette-z-index)}.bs-command-palette::backdrop{background:var(--bs-command-palette-overlay, var(--bs-surface-overlay))}.bs-command-palette__panel{display:flex;flex-direction:column;box-sizing:border-box;overflow:clip;border-radius:var(--bs-command-palette-radius);background:var(--bs-command-palette-bg);box-shadow:var(--bs-command-palette-shadow)}@media (prefers-reduced-motion: no-preference){.bs-command-palette[open] .bs-command-palette__panel{animation:bs-command-palette-in 120ms ease-out}}@keyframes bs-command-palette-in{from{opacity:0;transform:scale(0.98)}}.bs-command-palette__search{position:relative;display:flex;align-items:center;gap:var(--bs-spacing-100);padding:var(--bs-spacing-150)}.bs-command-palette__field{flex:1 1 auto;min-width:0}.bs-command-palette__field bs-input{width:100%}.bs-command-palette__scope{flex:none}.bs-command-palette__esc{position:absolute;top:50%;right:calc(var(--bs-spacing-150) + 9px);transform:translateY(-50%);display:inline-flex;pointer-events:none}.bs-command-palette__divider{height:1px;background:var(--bs-command-palette-divider-color)}.bs-command-palette__results{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-spacing-100);padding:var(--bs-spacing-100);max-height:var(--bs-command-palette-max-height);overflow-y:auto}.bs-command-palette__list{display:flex;flex-direction:column;gap:var(--bs-spacing-100)}.bs-command-palette__section{display:flex;flex-direction:column}.bs-command-palette__section-header{padding:var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);border-bottom:1px solid var(--bs-command-palette-header-border-color);color:var(--bs-command-palette-header-color);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-command-palette__loading{display:flex;align-items:center;justify-content:center;gap:var(--bs-spacing-100);padding:var(--bs-spacing-300) var(--bs-spacing-200);color:var(--bs-text-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-command-palette__empty{display:flex;flex-direction:column;align-items:center;gap:var(--bs-spacing-100);padding:var(--bs-spacing-300) var(--bs-spacing-200);text-align:center}.bs-command-palette__empty-icon{width:32px;height:32px;color:var(--bs-icon-default)}.bs-command-palette__empty-heading{color:var(--bs-text-default);font-size:var(--bs-font-size-md);font-weight:var(--bs-font-weight-semibold);line-height:24px}.bs-command-palette__empty-description{color:var(--bs-text-secondary);font-size:var(--bs-font-size-sm);line-height:20px}.bs-command-palette__link{margin:0;padding:0;border:0;border-bottom:1px solid var(--bs-border-info);background:none;color:var(--bs-text-link);font:inherit;line-height:20px;cursor:pointer}.bs-command-palette__link:focus-visible{outline:2px solid var(--bs-border-info);outline-offset:2px}.bs-command-palette__footer{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:10px var(--bs-spacing-200);background:var(--bs-command-palette-footer-bg)}.bs-command-palette__hint{display:inline-flex;align-items:center;gap:var(--bs-spacing-50);color:var(--bs-command-palette-hint-color);font-size:var(--bs-font-size-sm);line-height:20px;white-space:nowrap}.bs-command-palette__spacer{flex:1 1 0}.bs-command-palette__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}`;
+
+/** The result sections, in display (and keyboard) order. */
+const RESULT_SECTIONS = ['recent', 'suggested', 'commands', 'navigation', 'records'];
+const ALL_SECTIONS = [...RESULT_SECTIONS, 'try-instead'];
+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 BsCommandPalette = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsInput = index.createEvent(this, "bsInput");
+        this.bsSelect = index.createEvent(this, "bsSelect");
+        this.bsSuggestion = index.createEvent(this, "bsSuggestion");
+        this.bsOpenChange = index.createEvent(this, "bsOpenChange");
+        this.bsScopeExit = index.createEvent(this, "bsScopeExit");
+    }
+    get el() { return index.getElement(this); }
+    id = `bs-cp-${++uid}`;
+    itemSeq = 0;
+    observer;
+    dialogEl;
+    comboEl;
+    inputEl;
+    previousFocus;
+    userMoved = false;
+    /** The field value. Two-way. A leading `>` means commands-only mode. */
+    value = '';
+    /** Whether the palette is open. */
+    open = false;
+    /** Derived from `value` (it starts with `>`). Read-only; set `value` instead. */
+    commandsOnly = false;
+    /** Which view to show. You choose it; nothing is inferred from `value`. `default` and `results` render the same; they differ for screen readers only. */
+    status = 'default';
+    /** Accessible name of the dialog. */
+    label = 'Command palette';
+    /** Placeholder of the field. */
+    placeholder = 'Type a command or search…';
+    /** Keep the palette open after an item is chosen. */
+    keepOpenOnSelect = false;
+    /** Shows the footer of keyboard hints. */
+    showFooter = true;
+    /** Global shortcut that toggles the palette, e.g. `mod+k` (`mod` is Cmd on Mac, Ctrl elsewhere). Empty = off. */
+    hotkey = '';
+    /** Nested scope: shows this text as a chip before the field. Backspace on an empty field emits `bsScopeExit`. */
+    scopeLabel;
+    /** Section headers. */
+    recentLabel = 'Recent';
+    suggestedLabel = 'Suggested';
+    commandsLabel = 'Commands';
+    navigationLabel = 'Navigation';
+    recordsLabel = 'Records';
+    tryInsteadLabel = 'Try instead';
+    /** Footer hint texts. */
+    navigateLabel = 'Navigate';
+    openLabel = 'Open';
+    closeLabel = 'Close';
+    commandsOnlyLabel = 'Commands only';
+    allResultsLabel = 'All results';
+    /** No-results view copy. Include the query in `emptyHeading` yourself. */
+    emptyHeading = 'No commands or records';
+    emptyDescription = 'Check the spelling, or search records instead.';
+    /** A suggested correction; the "Did you mean" line shows while it is set. */
+    didYouMean;
+    didYouMeanLabel = 'Did you mean';
+    /** Text of the loading row. */
+    loadingLabel = 'Loading…';
+    /** Accessible name of the results listbox. */
+    listLabel = 'Results';
+    filled = { recent: false, suggested: false, commands: false, navigation: false, records: false, 'try-instead': false };
+    activeId = null;
+    /** Fires on every keystroke with `{ value, query, commandsOnly }`. */
+    bsInput;
+    /** Fires when an item is chosen (click or Enter) with `{ value, section, commandsOnly }`. */
+    bsSelect;
+    /** Fires when the "Did you mean" suggestion is pressed, with its text. */
+    bsSuggestion;
+    /** Fires when the palette opens or closes through user interaction (hotkey, Esc, scrim, selection). */
+    bsOpenChange;
+    /** Fires on Backspace in an empty field while `scopeLabel` is set. */
+    bsScopeExit;
+    /** Opens the palette. */
+    async show() {
+        this.open = true;
+    }
+    /** Closes the palette and restores focus. */
+    async close() {
+        this.open = false;
+    }
+    onValueChange() {
+        this.commandsOnly = this.value.startsWith('>');
+    }
+    resetMoved() {
+        this.userMoved = false;
+    }
+    componentWillLoad() {
+        this.commandsOnly = this.value.startsWith('>');
+        this.readFilled();
+        this.prepareItems();
+    }
+    connectedCallback() {
+        document.addEventListener('keydown', this.onDocKeyDown);
+        this.observer = new MutationObserver(() => {
+            this.readFilled();
+            this.prepareItems();
+            this.syncActive();
+        });
+        this.observer.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.onDocKeyDown);
+        this.observer?.disconnect();
+        if (this.dialogEl?.open)
+            this.dialogEl.close();
+    }
+    componentDidRender() {
+        this.syncDialog();
+        this.prepareItems();
+        this.syncActive();
+    }
+    syncDialog() {
+        const d = this.dialogEl;
+        if (!d)
+            return;
+        if (this.open && !d.open) {
+            this.previousFocus = document.activeElement;
+            d.showModal();
+            this.focusInput();
+        }
+        else if (!this.open && d.open) {
+            d.close();
+            const prev = this.previousFocus;
+            this.previousFocus = null;
+            if (prev && prev.isConnected)
+                prev.focus?.();
+        }
+    }
+    focusInput() {
+        this.inputEl?.focus();
+        const native = this.inputEl?.shadowRoot?.querySelector('input');
+        native?.select?.();
+    }
+    onDocKeyDown = (ev) => {
+        if (!this.hotkey || ev.defaultPrevented)
+            return;
+        const parts = this.hotkey.toLowerCase().split('+').map(p => p.trim());
+        const key = parts[parts.length - 1];
+        const mods = parts.slice(0, -1);
+        const isMac = /mac|iphone|ipad/i.test(navigator.platform || navigator.userAgent);
+        const want = (m) => mods.includes(m);
+        const wantMeta = want('meta') || want('cmd') || (want('mod') && isMac);
+        const wantCtrl = want('ctrl') || (want('mod') && !isMac);
+        if (ev.key.toLowerCase() !== key)
+            return;
+        if (ev.metaKey !== wantMeta || ev.ctrlKey !== wantCtrl || ev.altKey !== want('alt') || ev.shiftKey !== want('shift'))
+            return;
+        ev.preventDefault();
+        this.setOpen(!this.open);
+    };
+    setOpen(next) {
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    allItems() {
+        return Array.from(this.el.children).filter(c => c.tagName === 'BS-SEARCH-ITEM' && ALL_SECTIONS.includes(c.getAttribute('slot')));
+    }
+    shownSections() {
+        if (this.status === 'loading')
+            return [];
+        if (this.status === 'empty')
+            return ['try-instead'];
+        return RESULT_SECTIONS;
+    }
+    visibleItems() {
+        if (!this.open)
+            return [];
+        const items = this.allItems();
+        return this.shownSections().flatMap(s => items.filter(i => i.getAttribute('slot') === s));
+    }
+    enabledItems() {
+        return this.visibleItems().filter(i => !i.disabled);
+    }
+    readFilled() {
+        const next = { ...this.filled };
+        let changed = false;
+        for (const s of ALL_SECTIONS) {
+            const has = Array.from(this.el.children).some(c => c.getAttribute('slot') === s);
+            if (next[s] !== has) {
+                next[s] = has;
+                changed = true;
+            }
+        }
+        if (changed)
+            this.filled = next;
+    }
+    prepareItems() {
+        for (const item of this.allItems()) {
+            if (item.selectionRole !== 'option')
+                item.selectionRole = 'option';
+            if (!item.id)
+                item.id = `${this.id}-opt-${++this.itemSeq}`;
+        }
+    }
+    /** First enabled item is active unless the user moved the highlight (and it still exists). */
+    syncActive() {
+        const enabled = this.enabledItems();
+        let id = this.activeId;
+        if (!this.open || !enabled.length)
+            id = null;
+        else if (!this.userMoved || !enabled.some(i => i.id === id))
+            id = enabled[0].id;
+        if (id !== this.activeId)
+            this.activeId = id;
+        let activeItem;
+        for (const item of this.allItems()) {
+            const on = !!id && item.id === id;
+            if (on)
+                activeItem = item;
+            if (item.active !== on)
+                item.active = on;
+        }
+        // The items live in the light DOM, so an id reference cannot reach them from this shadow root; the
+        // element-reference property can (the light DOM is an ancestor scope).
+        if (this.comboEl)
+            this.comboEl.ariaActiveDescendantElement = activeItem ?? null;
+    }
+    setActive(item) {
+        this.userMoved = true;
+        this.activeId = item.id;
+        for (const i of this.allItems())
+            i.active = i.id === item.id;
+        if (this.comboEl)
+            this.comboEl.ariaActiveDescendantElement = item;
+        item.scrollIntoView?.({ block: 'nearest' });
+    }
+    onInput = (ev) => {
+        ev.stopPropagation();
+        this.value = ev.detail;
+        this.userMoved = false;
+        const commandsOnly = this.value.startsWith('>');
+        this.bsInput.emit({ value: this.value, query: (commandsOnly ? this.value.slice(1) : this.value).trim(), commandsOnly });
+    };
+    onKeyDown = (ev) => {
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                const items = this.enabledItems();
+                if (!items.length)
+                    return;
+                const idx = items.findIndex(i => i.id === this.activeId);
+                const next = ev.key === 'ArrowDown' ? (idx + 1) % items.length : idx <= 0 ? items.length - 1 : idx - 1;
+                this.setActive(items[next]);
+                return;
+            }
+            case 'Enter': {
+                const active = this.enabledItems().find(i => i.id === this.activeId);
+                if (active) {
+                    ev.preventDefault();
+                    active.click();
+                }
+                return;
+            }
+            case 'Backspace':
+                if (this.scopeLabel && this.value === '')
+                    this.bsScopeExit.emit();
+                return;
+        }
+    };
+    onDialogKeyDown = (ev) => {
+        if (ev.key === 'Escape') {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.setOpen(false);
+        }
+    };
+    /** Native cancel (Esc through another path): handle it ourselves so state and focus stay in sync. */
+    onCancel = (ev) => {
+        ev.preventDefault();
+        this.setOpen(false);
+    };
+    /** A click that lands on the `<dialog>` itself is a click on the backdrop (the scrim). */
+    onDialogClick = (ev) => {
+        if (ev.target === this.dialogEl)
+            this.setOpen(false);
+    };
+    onItemSelect(ev) {
+        const item = ev.target;
+        if (!item || item.tagName !== 'BS-SEARCH-ITEM')
+            return;
+        ev.stopPropagation();
+        this.bsSelect.emit({ value: ev.detail, section: item.getAttribute('slot') ?? '', commandsOnly: this.commandsOnly });
+        if (!this.keepOpenOnSelect)
+            this.setOpen(false);
+    }
+    onResultsMouseOver = (ev) => {
+        const item = ev.composedPath().find(n => n.tagName === 'BS-SEARCH-ITEM');
+        if (item && !item.disabled && item.id !== this.activeId)
+            this.setActive(item);
+    };
+    sectionLabel(s) {
+        return {
+            recent: this.recentLabel,
+            suggested: this.suggestedLabel,
+            commands: this.commandsLabel,
+            navigation: this.navigationLabel,
+            records: this.recordsLabel,
+            'try-instead': this.tryInsteadLabel,
+        }[s];
+    }
+    renderSection(s) {
+        const hid = `${this.id}-h-${s}`;
+        return (index.h("div", { part: "section", class: "bs-command-palette__section", role: "group", "aria-labelledby": hid }, index.h("div", { part: "section-header", id: hid, class: "bs-command-palette__section-header" }, this.sectionLabel(s)), index.h("slot", { name: s })));
+    }
+    renderHint(keys, label) {
+        return (index.h("span", { part: "hint", class: "bs-command-palette__hint" }, keys, index.h("span", { class: "bs-command-palette__hint-text" }, label)));
+    }
+    renderFooter() {
+        const arrow = (d) => (index.h("bs-key", null, index.h("svg", { slot: "icon", ...svgProps }, index.h("path", { d: d }))));
+        return (index.h("div", { part: "footer", class: "bs-command-palette__footer" }, this.renderHint([arrow('M12 19V5M5 12l7-7 7 7'), arrow('M12 5v14M5 12l7 7 7-7')], this.navigateLabel), this.renderHint([
+            index.h("bs-key", null, index.h("svg", { slot: "icon", ...svgProps }, index.h("path", { d: "M9 14 4 9l5-5" }), index.h("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 0 11H11" }))),
+        ], this.openLabel), this.renderHint([index.h("bs-key", { label: "Esc" })], this.closeLabel), index.h("span", { class: "bs-command-palette__spacer" }), this.commandsOnly
+            ? this.renderHint([index.h("bs-key", { label: "Backspace" })], this.allResultsLabel)
+            : this.renderHint([index.h("bs-key", { label: ">" })], this.commandsOnlyLabel)));
+    }
+    renderEmpty() {
+        return (index.h("div", { part: "empty", class: "bs-command-palette__empty" }, index.h("svg", { class: "bs-command-palette__empty-icon", ...svgProps, "stroke-width": "1.5" }, index.h("circle", { cx: "11", cy: "11", r: "7" }), index.h("path", { d: "m20 20-3.5-3.5M8.5 11h5" })), index.h("div", { class: "bs-command-palette__empty-heading" }, this.emptyHeading), index.h("div", { class: "bs-command-palette__empty-description" }, this.emptyDescription), this.didYouMean && (index.h("div", { class: "bs-command-palette__empty-description" }, this.didYouMeanLabel, ' ', index.h("button", { type: "button", class: "bs-command-palette__link", onClick: () => this.bsSuggestion.emit(this.didYouMean) }, this.didYouMean)))));
+    }
+    announcement() {
+        if (!this.open)
+            return '';
+        if (this.status === 'empty')
+            return this.emptyHeading;
+        if (this.status === 'loading')
+            return this.loadingLabel;
+        return '';
+    }
+    render() {
+        const listId = `${this.id}-listbox`;
+        const loading = this.status === 'loading';
+        const empty = this.status === 'empty';
+        const sections = this.shownSections().filter(s => this.filled[s]);
+        const hasList = sections.length > 0;
+        const showResults = loading || empty || hasList;
+        return (index.h("dialog", { key: '55a38e90a59faa6f0314c7e26ae90326fc82d7dc', ref: el => (this.dialogEl = el), part: "dialog", class: "bs-command-palette", "aria-label": this.label, "aria-modal": "true", role: "dialog", onCancel: this.onCancel, onClose: () => this.open && this.setOpen(false), onClick: this.onDialogClick, onKeyDown: this.onDialogKeyDown }, index.h("div", { key: '793f0509daba42c4a208d3f5ff3cdfa7d963989a', part: "panel", class: "bs-command-palette__panel" }, index.h("div", { key: '9af1794a677b7696e242df6a4e9e7775a8efdbea', part: "search", class: "bs-command-palette__search" }, this.scopeLabel && (index.h("bs-chip-informative", { key: '506dd50cecd610c48d61b24723e5a700a05ec693', class: "bs-command-palette__scope", color: "info" }, this.scopeLabel)), index.h("div", { key: 'ae0d016a687820e4960b9ff3d59c74cd937796bf', class: "bs-command-palette__field", ref: el => (this.comboEl = el), role: "combobox", "aria-label": this.placeholder, "aria-expanded": String(hasList), "aria-haspopup": "listbox", "aria-controls": hasList ? listId : undefined, onKeyDown: this.onKeyDown }, index.h("bs-input", { key: 'd444f70cfd6878434d19364ee1668987ae7da1c2', part: "input", ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, onBsInput: this.onInput })), index.h("span", { key: '8baa325a3af0bd2c4b09e7201c315fbbb37f55e9', class: "bs-command-palette__esc", "aria-hidden": "true" }, index.h("bs-key", { key: 'a9bc3f695d63b32ab227b93a8a46db33da56da27', label: "Esc" }))), showResults && index.h("div", { key: 'e97114037b44d14a51872929314773aa637d64f1', class: "bs-command-palette__divider", role: "presentation" }), showResults && (index.h("div", { key: 'c8bc5e63b0ff902c8a2730775ae7294f025a7dc6', part: "results", class: "bs-command-palette__results", "aria-busy": String(loading), onMouseOver: this.onResultsMouseOver }, loading && (index.h("div", { key: 'c4bfacce3dc902aab472d825494d1e67ca593c32', class: "bs-command-palette__loading", role: "status" }, index.h("bs-spinner", { key: 'fcf43a2a30cc94b67075bbded0eaae329c4e18a4', size: "sm" }), index.h("span", { key: 'b9f195cacbd6ad6acfcd151f47c52b0c937ff1f5' }, this.loadingLabel))), empty && this.renderEmpty(), hasList && (index.h("div", { key: 'e4da543ad73a9b7dc209876d6e8dd1d057f4048e', id: listId, class: "bs-command-palette__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => this.renderSection(s)))))), this.showFooter && this.renderFooter()), index.h("span", { key: 'c4aab5214af689a0332a9730753ca187b91b5ec3', class: "bs-command-palette__live", "aria-live": "polite" }, this.announcement())));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "status": [{
+                "resetMoved": 0
+            }],
+        "open": [{
+                "resetMoved": 0
+            }]
+    }; }
+};
+BsCommandPalette.style = bsCommandPaletteCss();
+
+exports.bs_command_palette = BsCommandPalette;

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

@@ -51,7 +51,7 @@ const BsComposerStatusBanner = class {
         return this.type === 'error' || this.type === 'warning' ? index.h(WarningIcon, null) : index.h(ClockIcon, null);
     }
     render() {
-        return (index.h("div", { key: '7ddbbad5af14adf35a87097ce7e7644fd9e50ec3', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, index.h("div", { key: '1fb9a5fb707db89056115ec0992484b310a47590', class: "bs-composer-status-banner__message-group" }, this.showIcon && (index.h("span", { key: 'c9cf1d3be7dd33b73f8a2813295ed90e2dbc865a', part: "icon", class: "bs-composer-status-banner__icon" }, index.h("slot", { key: '86735a463ca03af8359ef17d971a63d5c518f587', name: "icon" }, this.renderDefaultIcon()))), index.h("p", { key: '046dad63d8a6b12c5c4fe766edef811d945b427f', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (index.h("button", { key: '3c8d3d824413b32ff596f63b579c8b7ce683af81', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (index.h("button", { key: '3d5dbe65b4ba7e04202fc260b0ca665a4eb3b516', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, index.h(CloseIcon, { key: '86efc37f964fd1440ac10cc47077605dbc0664ce' })))));
+        return (index.h("div", { key: '9a18ded6392d5374cdf4357650498f1eff8bc896', role: this.roleForType(), "aria-busy": this.loading ? 'true' : undefined, class: `bs-composer-status-banner bs-composer-status-banner--${this.type}` }, index.h("div", { key: '8acfc215792a889e80d01a08e86a0aa96bfe8967', class: "bs-composer-status-banner__message-group" }, this.showIcon && (index.h("span", { key: '2a4e0a5fe6b4f2fef30d534eae0c15009f813d33', part: "icon", class: "bs-composer-status-banner__icon" }, index.h("slot", { key: '5378cfaf8b1fed689eedac4f6a2bf892dda043f8', name: "icon" }, this.renderDefaultIcon()))), index.h("p", { key: '9fe869051bbf300c12f0ec8006d409abf4bebf56', part: "message", class: "bs-composer-status-banner__message" }, this.message)), this.showButton && (index.h("button", { key: '6fe2f55c57523ee917ae6d96e2a070f1006f0a44', type: "button", part: "action", class: "bs-composer-status-banner__action", onClick: this.onActionClick }, this.actionLabel)), this.allowClose && (index.h("button", { key: '18d5ec846134a57c11c46810bb0b35acac0a20b6', type: "button", part: "close", class: "bs-composer-status-banner__close", "aria-label": this.closeLabel, onClick: this.onCloseClick }, index.h(CloseIcon, { key: 'cbf7993e299eacc8a05efc55cf0dc4539ba9d424' })))));
     }
 };
 const SpinnerIcon = () => (index.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" }, index.h("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", "stroke-opacity": "0.25", "stroke-width": "1.5" }), index.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/cjs/bs-composer.cjs.entry.js

@@ -199,7 +199,7 @@ const BsComposer = class {
         const placeholder = this.placeholder ?? DEFAULT_PLACEHOLDERS[this.variant];
         const disabled = this.state === 'disabled';
         const recording = this.state === 'recording';
-        return (index.h("div", { key: '2ce76ec3bd4b265f11bb99dee3a3c90d9172597c', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, index.h("div", { key: '413304d4f29b85642bf75beb879a9551d5be8263', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, index.h("slot", { key: 'e548c8e0f26f25748f4873c22ad97431f9de3ce8', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), index.h("div", { key: '1df76f515366b9ef952714b8454b6aa36fd905c8', class: "bs-composer__text-row" }, index.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 })), index.h("div", { key: 'b27a014146d993fc41d80c233365964de65cf34c', class: "bs-composer__controls-row" }, !this.hideAttach && (index.h("button", { key: 'b1fe110b360b29a371a68626a1507213e11facf1', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, index.h(PlusIcon, { key: 'b925e8b4e010f17594edf604401423b00ff72cba' }))), recording ? (index.h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (index.h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (index.h("span", { class: "bs-composer__spacer" })), !this.hideMic && (index.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 ? index.h(StopIcon, null) : index.h(MicIcon, null))), index.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()), index.h("slot", { key: 'de551ed30be4f5008c58c4ec441daf8842209edd', name: "actions-end" }))));
+        return (index.h("div", { key: 'f1ccd8ab2299efcf83dc8f858845e87ba87f9c41', class: `bs-composer bs-composer--${this.state} bs-composer--${this.variant}` }, index.h("div", { key: '2edd5ab5b6a67d108d2f8067a639e74b6ab4f39f', part: "attachments", class: `bs-composer__attachments-row ${this.hasAttachments ? 'bs-composer__attachments-row--visible' : ''}` }, index.h("slot", { key: 'a7b2acfea4b2498792749e24aaf9329e521a93df', name: "attachments", onSlotchange: this.onAttachmentsSlotchange })), index.h("div", { key: '0de284b100f38a60b472eadfd89f06690023a1a1', class: "bs-composer__text-row" }, index.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 })), index.h("div", { key: 'a3ca22299095e398b6dd7a62c9b6ce93a4d49dab', class: "bs-composer__controls-row" }, !this.hideAttach && (index.h("button", { key: 'c06cad301027ce2fdef180189945bebd2f876081', type: "button", part: "attach", class: "bs-composer__attach", "aria-label": this.attachLabel, onClick: this.onAttachClick }, index.h(PlusIcon, { key: 'd863cc1734ca9b67447b2cbbe19a2ba75266d169' }))), recording ? (index.h("span", { class: "bs-composer__waveform", "aria-hidden": "true" }, WAVEFORM_BAR_HEIGHTS.map(height => (index.h("span", { class: "bs-composer__waveform-bar", style: { '--bs-composer-bar-height': `${height}px` } }))))) : (index.h("span", { class: "bs-composer__spacer" })), !this.hideMic && (index.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 ? index.h(StopIcon, null) : index.h(MicIcon, null))), index.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()), index.h("slot", { key: '0965e567d4cb590d7cd072ecf72c10c2c97e1f69', name: "actions-end" }))));
     }
     static get delegatesFocus() { return true; }
 };

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

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

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

@@ -76,11 +76,11 @@ const BsDataTable = class {
         }
     }
     render() {
-        return (index.h("table", { key: '5b61e4f581c2ab0da069cabf9a612285f98b0865', part: "table", class: "bs-data-table" }, index.h("thead", { key: 'c3bed54d42e2e2c3d54cfa9754251ab0d34c55fd', part: "head" }, index.h("tr", { key: '8f0aaa90b06650719423de98e05f39ffce407a67' }, this.selectable && (index.h("th", { key: 'ed065c125b50493c621c8922cdd3d7ca26222b8e', class: "bs-data-table__select-col" }, this.rows.length > 0 && (index.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 (index.h("table", { key: '72d4058323ac137aa589476e5b89ed47bd8b996e', part: "table", class: "bs-data-table" }, index.h("thead", { key: '65e27a1aba0b9eb6892df5b0581672c9fb18ce13', part: "head" }, index.h("tr", { key: '690d1fab0effa5b0e9e44160ac91d77ab1290079' }, this.selectable && (index.h("th", { key: 'cf96e314093743b5e6341cf2fce3e0ac6b5e99ef', class: "bs-data-table__select-col" }, this.rows.length > 0 && (index.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 => {
             const isSorted = this.sortColumn === column.key;
             const ariaSort = column.sortable ? (isSorted ? (this.sortDirection === 'asc' ? 'ascending' : 'descending') : 'none') : undefined;
             return (index.h("th", { part: "header-cell", class: "bs-data-table__header-cell", "aria-sort": ariaSort }, column.sortable ? (index.h("button", { type: "button", class: "bs-data-table__sort-button", onClick: () => this.onHeaderClick(column) }, column.label, isSorted && index.h("span", { class: "bs-data-table__sort-indicator" }, this.sortDirection === 'asc' ? ' ▲' : ' ▼'))) : (column.label)));
-        }))), index.h("tbody", { key: 'b993a2e1c22d094936c49ad33486b2ecc02861c8', part: "body" }, this.rows.map(row => (index.h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (index.h("td", { class: "bs-data-table__select-col" }, index.h("input", { type: "checkbox", checked: this.selectedIds.has(row.id), onChange: ev => this.onRowCheckboxChange(row, ev) }))), this.columns.map(column => this.cellRenderer ? (
+        }))), index.h("tbody", { key: '34e3bb93c663862d1d8b29956c22392b3c2400ac', part: "body" }, this.rows.map(row => (index.h("tr", { part: "row", class: "bs-data-table__row" }, this.selectable && (index.h("td", { class: "bs-data-table__select-col" }, index.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/cjs/bs-datepicker.cjs.entry.js

@@ -314,7 +314,7 @@ const BsDatepicker = class {
             : this.defaultTabbable(days);
         const isInRange = (iso) => !!selectedStart && !!previewEnd && iso > selectedStart && iso < previewEnd;
         const weekdays = this.weekdays();
-        return (index.h("bs-card", { key: 'd2794a112b72b3dc871360b1e57273c9ef097fc4', part: "container", class: "bs-datepicker", surface: "raised" }, index.h("div", { key: 'bee55a1cd06aa44171f40babae77b1f2f742d160', class: "bs-datepicker__body" }, this.renderHeader(), index.h("div", { key: 'd4ab1cfd76fcea8b64daeb951da7b36300c036f0', part: "nav", class: "bs-datepicker__nav" }, index.h("button", { key: '5fcbb3f928db51049fd034beb3519400afe4f128', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, index.h("svg", { key: '18889f8f9dd9364bd73595635b72515b91d35ade', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '3d648cd4be611ef4de37cc08f9017809388d36e3', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { key: 'c0647871f1c140472807ae51e04604c6d87ccaa4', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), index.h("button", { key: 'ec3d33aeea146534d6640ac336905a002d0e7dc2', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, index.h("svg", { key: '5cbac8630a30064d940e5f03ce767b525c09dd7c', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '2c47ca0911b8b42cd3590ff053905df327363e9f', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: '91a6942792287f3044962fd278e36ed04ec03878', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, index.h("div", { key: '445e0548f0913426fe2eb730f291423d9165f839', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (index.h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
+        return (index.h("bs-card", { key: '280abccf2d86d04f392f4daeb9811bf34d71dc6b', part: "container", class: "bs-datepicker", surface: "raised" }, index.h("div", { key: '624706b13929083f05bab4210a5c8444240f8a53', class: "bs-datepicker__body" }, this.renderHeader(), index.h("div", { key: '69d8f66f154e0e194b77b091bede097407c43902', part: "nav", class: "bs-datepicker__nav" }, index.h("button", { key: '089809f514e4513624749748d639ef6da997618b', part: "prev", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.previousLabel, onClick: () => this.moveView(-1) }, index.h("svg", { key: 'd78f4940665d866752772f69de2e8058390bf6e5', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'f34d431a9f77b036fe4417c033f197c72780c1bf', d: "M15 18L9 12L15 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), index.h("div", { key: '36a37548a0bc04db3416f5e206c0990f0d1189eb', part: "title", class: "bs-datepicker__title", "aria-live": "polite" }, this.titleText()), index.h("button", { key: '3bf5616d93ea0d5f8968691692b2b64ce6334d0b', part: "next", type: "button", class: "bs-datepicker__nav-button", "aria-label": this.nextLabel, onClick: () => this.moveView(1) }, index.h("svg", { key: '5f9aac5a4e1658051908f5bad88b6c196f6dfea7', viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '0515eaeb3cd01b48633675668292cb01634c134a', d: "M9 18L15 12L9 6", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: '2decbaa1fc82ee83c58ae19cd19bd53c51aabe0d', part: "grid", class: "bs-datepicker__grid", role: "grid", "aria-label": this.titleText() }, index.h("div", { key: '4720f7dbda3ca990885a56d00860eaf4ab7689e8', class: "bs-datepicker__row", role: "row" }, weekdays.map(w => (index.h("div", { part: "weekday", class: "bs-datepicker__weekday", role: "columnheader" }, w)))), Array.from({ length: 6 }, (_, r) => {
             const row = days.slice(r * 7, r * 7 + 7);
             return (index.h("div", { class: "bs-datepicker__row", role: "row" }, row.map((d, c) => {
                 const iso = toIso(d);

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

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

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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 (index.h("div", { key: '0f841411b4b0f38d29487f3f52f79cb7a281f32a', part: "container", class: "bs-empty-state" }, index.h("bs-icon-tile", { key: '69c1e66424d966aed5e29582c2947bbfe0725cde', part: "icon", size: "lg", intent: this.intent }, this.hasIcon && index.h("slot", { key: '3243c54d7760d27cee1463ffe1acd1d886929a77', name: "icon" })), this.heading && (index.h(Heading, { key: '06075e06b4917ba28276c8b4c77e7dcc000c6f23', part: "heading", class: "bs-empty-state__heading" }, this.heading)), (this.description || this.hasDescriptionSlot) && (index.h("p", { key: '00dab545646803b8ed2f9723e6aa80f620f085a1', part: "description", class: "bs-empty-state__description" }, this.hasDescriptionSlot ? index.h("slot", null) : this.description)), this.hasAction && (index.h("div", { key: '1a984f1efd3bfbe6e5fd981e2f367ddd25e6f3c7', part: "action", class: "bs-empty-state__action" }, index.h("slot", { key: 'ea9b962f5652238d74625a11627992f0f4fb34bf', name: "action" })))));
+    }
+};
+BsEmptyState.style = bsEmptyStateCss();
+
+exports.bs_empty_state = BsEmptyState;

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

@@ -46,7 +46,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 (index.h("bs-card", { key: '68774f7ab0252b92905900f06f564d1c2a8ce163', part: "container", class: "bs-error-page", surface: "base" }, index.h("div", { key: 'f263ce4991e2aa4553e430e60e646df5fc257120', class: "bs-error-page__body" }, index.h("div", { key: '3aa6b36e1aa05ea63e52e8c79684b166853e5950', class: "bs-error-page__art-group" }, index.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" }, index.h("slot", { key: 'e33db2aa8c275de0e32effc759e177ef1ee46c6d', name: "icon" }, d.glyph())), code && (index.h("span", { key: '9f576963f7399e4ca6e86cfd0331f0c7c7119886', part: "code", class: "bs-error-page__code" }, code))), index.h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (index.h("p", { key: 'ea4861b666f95c7416a4d54152f8ffd1b900eb61', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (index.h("div", { key: 'e0ec38c28b957390486fce52497f91661abc7ef1', part: "actions", class: "bs-error-page__actions" }, primary && (index.h("bs-button", { key: 'a2b190366240c9fbe3e7a78a16b9881a3ad4468a', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (index.h("bs-button", { key: 'bef26b3dcc61c4e968c054d35ed67430884c9f99', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (index.h("p", { key: 'b8de6e83c2c68ca8880afc781e8ffceb03f23164', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
+        return (index.h("bs-card", { key: '376ab30f0eeaf89fb522373b375d0c68eebe8e99', part: "container", class: "bs-error-page", surface: "base" }, index.h("div", { key: '380013c4a4ac5208823856bb565f841e4b9aace3', class: "bs-error-page__body" }, index.h("div", { key: 'ce3ed8170977a0e2c4b1247140734fa3ba4c4896', class: "bs-error-page__art-group" }, index.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" }, index.h("slot", { key: 'e4415c41729cc3e9b52f1c61dfb8906a1d8dcc6a', name: "icon" }, d.glyph())), code && (index.h("span", { key: 'a6d8d24456746f9da3387c2acae20410382d7b62', part: "code", class: "bs-error-page__code" }, code))), index.h(`h${level}`, { part: 'heading', class: { 'bs-error-page__heading': true } }, heading), description && (index.h("p", { key: '4cace21798cbd9f40f2eb493938b5c12db43be97', part: "description", class: "bs-error-page__description" }, description)), (primary || secondary) && (index.h("div", { key: 'aca6cc9c414530bbb657e02c0910bbc4cae35ae6', part: "actions", class: "bs-error-page__actions" }, primary && (index.h("bs-button", { key: 'e5ec7c649b3b49e42e2f8132372e5b1b25f850bf', part: "primary", variant: "primary", onClick: () => this.bsPrimary.emit() }, primary)), secondary && (index.h("bs-button", { key: '7414d2d76186402404cf36ad662340f30e4b65aa', part: "secondary", variant: "outlined", onClick: () => this.bsSecondary.emit() }, secondary)))), this.reference && (index.h("p", { key: 'cf2fff2d7d2a77dd9f5a1fca1464ae0f687e4b5a', part: "reference", class: "bs-error-page__reference" }, this.reference)))));
     }
 };
 const icon = (children) => () => (index.h("svg", { class: "bs-error-page__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, children));

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

@@ -71,7 +71,7 @@ const BsFileUploadItem = class {
     }
     render() {
         const removing = this.state === 'success';
-        return (index.h("div", { key: 'e109650dda74a0a0db7af7f621da5e70079a7830', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, index.h("div", { key: '800f1bd6a8cabd97c0aa43fe9a521876d4e6feb8', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, index.h("slot", { key: 'e5696a2cf9d69579ff8fd79688f83879c4093c74', name: "thumbnail" }, this.thumbnailSrc ? (index.h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (index.h(ImageIcon, null)))), index.h("div", { key: 'bc52ee589c5cf4040dcb1aa86cce0150136d71ae', class: "bs-file-upload-item__content" }, index.h("div", { key: 'a70dc514e89ebfb1de3e772652e6ab8b2987007a', class: "bs-file-upload-item__meta" }, index.h("span", { key: '1c0a8e151f284a8344650fb00912582c17d2d5ee', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (index.h("span", { key: 'f608a1ee6e44e34e9e67600622a180e676fb960a', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), index.h("bs-icon-button", { key: '5781f2aa401d12d3a4f4b0172d64cb0b9ceacf00', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? index.h(TrashIcon, null) : index.h(CloseIcon, null))));
+        return (index.h("div", { key: '02ddff16491c33fa61626bca72275ea0a1037c14', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, index.h("div", { key: 'c465a9216d363ee858933d24abb468d73d66190e', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, index.h("slot", { key: '5aeaec4d3e9120163dab89c9bb3ca71e8976cae3', name: "thumbnail" }, this.thumbnailSrc ? (index.h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (index.h(ImageIcon, null)))), index.h("div", { key: '3fdf5cb05270ae986e59404758f487932da10fbe', class: "bs-file-upload-item__content" }, index.h("div", { key: 'eb783412a8f97eaf6d566c06283c0ca0cc735570', class: "bs-file-upload-item__meta" }, index.h("span", { key: 'a456cfbcbaa19329715d55d80845a6b824bb2d64', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (index.h("span", { key: '7810e2855de50d3fa42d7ee29af81e2c58ea1a42', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), index.h("bs-icon-button", { key: '7be3bf3d73ec51a2ce3bc23b4e401306c2d6bcc9', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? index.h(TrashIcon, null) : index.h(CloseIcon, null))));
     }
 };
 // Figma exports, recolored via currentColor so the CSS tokens drive the color.

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

@@ -100,7 +100,7 @@ const BsFileUpload = class {
             this.handleFiles(files);
     };
     render() {
-        return (index.h("div", { key: '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 }, index.h("div", { key: '5aa0c733860505646bde5cad571a4d850d38f979', part: "icon", class: "bs-file-upload__icon" }, index.h("slot", { key: '292d3074620f2a228dbe544363f7ef8cce4f194c', name: "icon" }, index.h(UploadIcon, { key: '65c343be45634d10d561ba0f7a3cdd201a7664e6' }))), index.h("div", { key: '69d1ddde89b8c26d7a40a963cf16d1519b5b1fd4', class: "bs-file-upload__content" }, index.h("div", { key: '7730fdb7efb8eeffb374fff22fdd9d60497eebce', class: "bs-file-upload__text" }, this.heading && (index.h("span", { key: '0ca349bd1fedd84d869b363da150e13c07623f3b', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (index.h("span", { key: '522d99de1b5caf70cd7e44bf8e821fe49951c788', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), index.h("bs-button", { key: 'f7af51522dfb762102f0c17bcbfd0e737b52d783', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), index.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 (index.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 }, index.h("div", { key: '9339e7a61fd8d2d337c442518b0feca4eac56f4e', part: "icon", class: "bs-file-upload__icon" }, index.h("slot", { key: 'b361ea7dda65426da604485f8d00022520e96643', name: "icon" }, index.h(UploadIcon, { key: 'fb08c4f2ec4250293ca66ab7a84c0b77599b15b9' }))), index.h("div", { key: '1ee60fe58d4196a8aaf95d38e7ba1d6aaaf269fb', class: "bs-file-upload__content" }, index.h("div", { key: '57e91a29e74a9e02831b32e3ab674607a256e68c', class: "bs-file-upload__text" }, this.heading && (index.h("span", { key: '389ea949446b63bb976071fec70d3e5398d3ebef', part: "heading", class: "bs-file-upload__heading" }, this.heading)), this.description && (index.h("span", { key: 'f6709820df651e915ee7b0073672820478e3c483', part: "description", id: "description", class: "bs-file-upload__description" }, this.description))), index.h("bs-button", { key: '29abda9026efccb881b26794ca5441888ef4c02c', part: "browse", variant: "neutral", size: "sm", disabled: this.disabled, onClick: this.onBrowse }, this.buttonLabel)), index.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 })));
     }
 };
 // Figma's "UploadSimple" icon (3272:50330), exported SVG, recolored via currentColor.