@brandsync/wc 1.16.0 → 1.18.0

package/dist/cjs/bs-global-search.cjs.entry.js

@@ -0,0 +1,326 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsGlobalSearchCss = () => `:host{display:block;position:relative;box-sizing:border-box;width:var(--bs-global-search-width);max-width:100%;--bs-global-search-width:480px;--bs-global-search-panel-radius:var(--bs-border-radius-100);--bs-global-search-panel-padding:var(--bs-spacing-100);--bs-global-search-gap:var(--bs-spacing-100);--bs-global-search-panel-bg:var(--bs-surface-base);--bs-global-search-shadow:0 var(--bs-shadow-position-50) var(--bs-shadow-blur-100) 0 var(--bs-elevation-high);--bs-global-search-z-index:var(--bs-z-index-dropdown);--bs-global-search-divider-color:var(--bs-border-default);--bs-global-search-header-border-color:var(--bs-border-neutral-container);--bs-global-search-header-color:var(--bs-text-muted);--bs-global-search-hint-color:var(--bs-text-secondary)}.bs-global-search{position:relative}.bs-global-search__field bs-input{width:100%}.bs-global-search__panel{position:absolute;top:calc(100% + var(--bs-global-search-gap));left:0;right:0;z-index:var(--bs-global-search-z-index);box-sizing:border-box;display:flex;flex-direction:column;gap:var(--bs-global-search-gap);padding:var(--bs-global-search-panel-padding);overflow:clip;border-radius:var(--bs-global-search-panel-radius);background:var(--bs-global-search-panel-bg);box-shadow:var(--bs-global-search-shadow)}.bs-global-search__list{display:flex;flex-direction:column;gap:var(--bs-global-search-gap)}.bs-global-search__section{display:flex;flex-direction:column}.bs-global-search__section-header{padding:var(--bs-spacing-150) var(--bs-spacing-150) var(--bs-spacing-100);border-bottom:1px solid var(--bs-global-search-header-border-color);color:var(--bs-global-search-header-color);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:20px}.bs-global-search__footer{display:flex;align-items:center;gap:var(--bs-spacing-200);padding:var(--bs-spacing-100) var(--bs-spacing-100) var(--bs-spacing-50);border-top:1px solid var(--bs-global-search-divider-color)}.bs-global-search__hint{display:inline-flex;align-items:center;gap:var(--bs-spacing-50);color:var(--bs-global-search-hint-color);font-size:var(--bs-font-size-sm);line-height:20px;white-space:nowrap}.bs-global-search__spacer{flex:1 1 0}.bs-global-search__action{display:flex;align-items:center;min-height:44px;cursor:pointer}.bs-global-search__text-button{--bs-button-height-sm:32px;--bs-button-padding-x-sm:var(--bs-spacing-150);--bs-button-radius:var(--bs-border-radius-100);--bs-button-subtle-color:var(--bs-text-default)}.bs-global-search__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}`;
+
+/** Sections shown per status, in display (and keyboard) order. */
+const SECTIONS = {
+    default: ['recent', 'jump-to'],
+    results: ['top-matches', 'search-in'],
+    empty: [],
+    error: [],
+};
+const ALL_SECTIONS = ['recent', 'jump-to', 'top-matches', 'search-in'];
+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 BsGlobalSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsInput = index.createEvent(this, "bsInput");
+        this.bsSearch = index.createEvent(this, "bsSearch");
+        this.bsSelect = index.createEvent(this, "bsSelect");
+        this.bsOpenChange = index.createEvent(this, "bsOpenChange");
+        this.bsClearRecent = index.createEvent(this, "bsClearRecent");
+        this.bsClearSearch = index.createEvent(this, "bsClearSearch");
+        this.bsSeeAll = index.createEvent(this, "bsSeeAll");
+        this.bsRetry = index.createEvent(this, "bsRetry");
+    }
+    get el() { return index.getElement(this); }
+    id = `bs-gs-${++uid}`;
+    itemSeq = 0;
+    observer;
+    inputEl;
+    /** The query. Two-way with the field. */
+    value = '';
+    /** Placeholder of the field (also its accessible name unless `label` is set). */
+    placeholder = 'Search customers, orders, products…';
+    /** Accessible name of the search field. Falls back to the placeholder. `bs-input` has no aria-label prop, so this names the combobox wrapper. */
+    label;
+    /** Disables the field; the panel cannot open. */
+    disabled = false;
+    /** Whether the dropdown panel is open. Opens on focus, click and typing; closes on Escape, outside click and selection. */
+    open = false;
+    /** Which view the panel shows. You choose it; nothing is inferred from `value`. */
+    status = 'default';
+    /** Total number of results (status `results`): shown as "See all {n} results" and announced to screen readers. */
+    totalResults;
+    /** Shows the footer (hints and the Clear recent / See all button) for the `default` and `results` views. */
+    showFooter = true;
+    /** Accessible name of the suggestions listbox. */
+    listLabel = 'Search suggestions';
+    /** Header of the `recent` section. */
+    recentLabel = 'Recent searches';
+    /** Header of the `jump-to` section. */
+    jumpToLabel = 'Jump to';
+    /** Header of the `top-matches` section. */
+    topMatchesLabel = 'Top matches';
+    /** Header of the `search-in` section. */
+    searchInLabel = 'Search in';
+    /** Footer hint text after the arrow keys. */
+    navigateLabel = 'Navigate';
+    /** Footer hint text after the Enter key (default view). */
+    searchLabel = 'Search';
+    /** Footer hint text after the Esc key. */
+    closeLabel = 'Close';
+    /** Footer hint text after the Enter key (results view). */
+    fullResultsLabel = 'Full results';
+    /** Text of the footer button that clears recent searches. */
+    clearRecentLabel = 'Clear recent';
+    /** Text of the footer button of the results view, when `totalResults` is not set. */
+    seeAllLabel = 'See all results';
+    /** Heading of the built-in empty state. */
+    emptyHeading = 'No results';
+    /** Description of the built-in empty state. */
+    emptyDescription = 'Try a different search.';
+    /** Text of the empty state's action. */
+    clearSearchLabel = 'Clear search';
+    /** Heading of the built-in error state. */
+    errorHeading = 'Search isn’t available right now';
+    /** Description of the built-in error state. */
+    errorDescription = 'We couldn’t reach the server. Your query is kept — try again in a moment.';
+    /** Text of the error state's action. */
+    retryLabel = 'Try again';
+    /** Which sections currently have content in their slot. */
+    filled = { recent: false, 'jump-to': false, 'top-matches': false, 'search-in': false };
+    /** Id of the highlighted item. */
+    activeId = null;
+    /** Fires on every keystroke with the query. The component filters nothing itself. */
+    bsInput;
+    /** Fires on Enter with no highlighted item, with the query. */
+    bsSearch;
+    /** Fires when an item is chosen (click or Enter), with its `value` and section (slot name). */
+    bsSelect;
+    /** Fires when the panel opens or closes through user interaction, with the new state. */
+    bsOpenChange;
+    /** Fires when "Clear recent" is pressed. */
+    bsClearRecent;
+    /** Fires when the empty state's "Clear search" is pressed; the value is also cleared. */
+    bsClearSearch;
+    /** Fires when "See all results" is pressed. */
+    bsSeeAll;
+    /** Fires when the error state's "Try again" is pressed. */
+    bsRetry;
+    resetActive() {
+        this.activeId = null;
+    }
+    componentWillLoad() {
+        this.readFilled();
+        this.prepareItems();
+    }
+    connectedCallback() {
+        document.addEventListener('pointerdown', this.onDocPointerDown, true);
+        this.observer = new MutationObserver(() => {
+            this.readFilled();
+            this.prepareItems();
+            this.paintActive();
+        });
+        this.observer.observe(this.el, { childList: true });
+    }
+    disconnectedCallback() {
+        document.removeEventListener('pointerdown', this.onDocPointerDown, true);
+        this.observer?.disconnect();
+    }
+    componentDidRender() {
+        this.prepareItems();
+        this.paintActive();
+    }
+    allItems() {
+        return Array.from(this.el.children).filter(c => c.tagName === 'BS-SEARCH-ITEM' && ALL_SECTIONS.includes(c.getAttribute('slot')));
+    }
+    /** Visible items, section by section (display order), then DOM order within a section. */
+    visibleItems() {
+        if (!this.open)
+            return [];
+        const items = this.allItems();
+        return (SECTIONS[this.status] ?? []).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;
+    }
+    /** Gives every item the option role and a stable id, like `bs-list` does for its rows. */
+    prepareItems() {
+        for (const item of this.allItems()) {
+            if (item.selectionRole !== 'option')
+                item.selectionRole = 'option';
+            if (!item.id)
+                item.id = `${this.id}-opt-${++this.itemSeq}`;
+        }
+    }
+    paintActive() {
+        for (const item of this.allItems()) {
+            const on = !!this.activeId && item.id === this.activeId;
+            if (item.active !== on)
+                item.active = on;
+        }
+    }
+    setOpen(next) {
+        if (next && this.disabled)
+            return;
+        if (this.open === next)
+            return;
+        this.open = next;
+        this.bsOpenChange.emit(next);
+    }
+    setActive(item) {
+        this.activeId = item ? item.id : null;
+        this.paintActive();
+        item?.scrollIntoView?.({ block: 'nearest' });
+    }
+    onDocPointerDown = (ev) => {
+        if (!this.open)
+            return;
+        if (!ev.composedPath().includes(this.el))
+            this.setOpen(false);
+    };
+    onInput = (ev) => {
+        // The inner bs-input's own bsInput would bubble out of this host too; ours replaces it.
+        ev.stopPropagation();
+        this.value = ev.detail;
+        this.activeId = null;
+        this.bsInput.emit(ev.detail);
+        this.setOpen(true);
+    };
+    onKeyDown = (ev) => {
+        switch (ev.key) {
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                ev.preventDefault();
+                if (!this.open) {
+                    this.setOpen(true);
+                    return;
+                }
+                const items = this.enabledItems();
+                if (!items.length)
+                    return;
+                const idx = items.findIndex(i => i.id === this.activeId);
+                const down = ev.key === 'ArrowDown';
+                const next = down ? (idx + 1) % items.length : idx <= 0 ? items.length - 1 : idx - 1;
+                this.setActive(items[next]);
+                return;
+            }
+            case 'Enter': {
+                const active = this.open ? this.enabledItems().find(i => i.id === this.activeId) : undefined;
+                if (active) {
+                    ev.preventDefault();
+                    active.click();
+                }
+                else {
+                    this.bsSearch.emit(this.value);
+                    this.setOpen(false);
+                }
+                return;
+            }
+            case 'Escape':
+                if (this.open) {
+                    // Native search fields clear themselves on Escape; the first Escape only closes.
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.setOpen(false);
+                }
+                return;
+        }
+    };
+    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') ?? '' });
+        this.setOpen(false);
+    }
+    onPanelMouseOver = (ev) => {
+        const item = ev.composedPath().find(n => n.tagName === 'BS-SEARCH-ITEM');
+        if (item && !item.disabled && item.id !== this.activeId)
+            this.setActive(item);
+    };
+    clearSearch = () => {
+        this.value = '';
+        this.bsClearSearch.emit();
+        this.inputEl?.focus();
+    };
+    sectionLabel(s) {
+        return { recent: this.recentLabel, 'jump-to': this.jumpToLabel, 'top-matches': this.topMatchesLabel, 'search-in': this.searchInLabel }[s];
+    }
+    renderHint(keys, label) {
+        return (index.h("span", { part: "hint", class: "bs-global-search__hint" }, keys, index.h("span", { class: "bs-global-search__hint-text" }, label)));
+    }
+    renderFooter() {
+        const hasTotal = typeof this.totalResults === 'number';
+        const enter = (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" }))));
+        if (this.status === 'results') {
+            return (index.h("div", { part: "footer", class: "bs-global-search__footer" }, index.h("div", { part: "see-all", class: "bs-global-search__action", onClick: this.onActionWrapperClick(() => this.seeAll()) }, index.h("bs-button", { class: "bs-global-search__text-button", variant: "subtle", size: "sm", onClick: () => this.seeAll() }, hasTotal ? `See all ${this.totalResults} results` : this.seeAllLabel)), index.h("span", { class: "bs-global-search__spacer" }), this.renderHint([enter], this.fullResultsLabel)));
+        }
+        return (index.h("div", { part: "footer", class: "bs-global-search__footer" }, this.renderHint([
+            index.h("bs-key", null, index.h("svg", { slot: "icon", ...svgProps }, index.h("path", { d: "M12 19V5M5 12l7-7 7 7" }))),
+            index.h("bs-key", null, index.h("svg", { slot: "icon", ...svgProps }, index.h("path", { d: "M12 5v14M5 12l7 7 7-7" }))),
+        ], this.navigateLabel), this.renderHint([enter], this.searchLabel), this.renderHint([index.h("bs-key", { label: "Esc" })], this.closeLabel), index.h("span", { class: "bs-global-search__spacer" }), this.filled.recent && (index.h("div", { part: "clear-recent", class: "bs-global-search__action", onClick: this.onActionWrapperClick(() => this.bsClearRecent.emit()) }, index.h("bs-button", { class: "bs-global-search__text-button", variant: "subtle", size: "sm", onClick: () => this.bsClearRecent.emit() }, this.clearRecentLabel)))));
+    }
+    seeAll() {
+        this.bsSeeAll.emit();
+        this.setOpen(false);
+    }
+    /** Makes the whole 44px wrapper clickable while the button itself is 32px high. */
+    onActionWrapperClick = (fn) => (ev) => {
+        if (ev.target === ev.currentTarget)
+            fn();
+    };
+    renderStateBlock(kind) {
+        const isEmpty = kind === 'empty';
+        return (index.h("slot", { name: kind }, index.h("bs-empty-state", { part: "empty", intent: isEmpty ? 'default' : 'error', heading: isEmpty ? this.emptyHeading : this.errorHeading, description: isEmpty ? this.emptyDescription : this.errorDescription }, isEmpty ? (index.h("svg", { slot: "icon", ...svgProps }, index.h("circle", { cx: "11", cy: "11", r: "7" }), index.h("path", { d: "m20 20-3.5-3.5" }))) : (index.h("svg", { slot: "icon", ...svgProps }, index.h("circle", { cx: "12", cy: "12", r: "9" }), index.h("path", { d: "M12 7.5v5M12 16.2v.1" }))), index.h("bs-button", { slot: "action", variant: "outlined", onClick: () => (isEmpty ? this.clearSearch() : this.bsRetry.emit()) }, isEmpty ? this.clearSearchLabel : this.retryLabel))));
+    }
+    announcement() {
+        if (!this.open)
+            return '';
+        if (this.status === 'results')
+            return typeof this.totalResults === 'number' ? `${this.totalResults} results` : '';
+        if (this.status === 'empty')
+            return this.emptyHeading;
+        if (this.status === 'error')
+            return this.errorHeading;
+        return '';
+    }
+    render() {
+        const sections = (SECTIONS[this.status] ?? []).filter(s => this.filled[s]);
+        const showList = sections.length > 0;
+        const listId = `${this.id}-listbox`;
+        const isList = this.status === 'default' || this.status === 'results';
+        const showFooter = this.showFooter && isList;
+        return (index.h("div", { key: '48912c3c2e6fdfefa05d234fa037e4b47e36cbd9', class: "bs-global-search" }, index.h("div", { key: 'aeb8a5d41463b5df24502aecb85290f2535184d6', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, index.h("bs-input", { key: '0aec5505a09ca9fa08e152983b17e3a35619e5ce', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (index.h("div", { key: 'c9b1589c7602b0522a5a33d895e50e2f57ae7e66', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (index.h("div", { key: 'aa49f77c49ea3aa5337a01aa8cf2e760ac8f6125', id: listId, class: "bs-global-search__list", role: "listbox", "aria-label": this.listLabel }, sections.map(s => {
+            const hid = `${this.id}-h-${s}`;
+            return (index.h("div", { part: "section", class: "bs-global-search__section", role: "group", "aria-labelledby": hid }, index.h("div", { part: "section-header", id: hid, class: "bs-global-search__section-header" }, this.sectionLabel(s)), index.h("slot", { name: s })));
+        }))), this.status === 'empty' && this.renderStateBlock('empty'), this.status === 'error' && this.renderStateBlock('error'), showFooter && this.renderFooter())), index.h("span", { key: '591953d910a7986705dde045c325c3043df1387b', class: "bs-global-search__live", "aria-live": "polite" }, this.announcement())));
+    }
+    static get watchers() { return {
+        "status": [{
+                "resetActive": 0
+            }],
+        "open": [{
+                "resetActive": 0
+            }]
+    }; }
+};
+BsGlobalSearch.style = bsGlobalSearchCss();
+
+exports.bs_global_search = BsGlobalSearch;

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

@@ -42,12 +42,12 @@ const BsGrid = class {
         const row = this.rowGap ? this.token(this.rowGap) : gapValue;
         const col = this.columnGap ? this.token(this.columnGap) : gapValue;
         const align = ALIGNS.includes(this.align) ? this.align : 'stretch';
-        return (index.h("div", { key: 'a89d345eac5d88dd24b21606eb35b1f21e1b54dd', class: "bs-grid", part: "container", style: {
+        return (index.h("div", { key: 'd504eaf0d6db8c106094f3efb60600b65774ea4d', class: "bs-grid", part: "container", style: {
                 gridTemplateColumns: this.template(),
                 rowGap: `var(--bs-grid-row-gap, ${row})`,
                 columnGap: `var(--bs-grid-column-gap, ${col})`,
                 alignItems: align,
-            } }, index.h("slot", { key: 'f5676a0cc12cf0fafc04045b4fed50aee50d2995' })));
+            } }, index.h("slot", { key: 'd127b6a767777b1d2cc3fe981e1846e5a8726a60' })));
     }
 };
 BsGrid.style = bsGridCss();

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

@@ -39,6 +39,13 @@ const BsIconButton = class {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel = null;
+    /**
+     * Makes this a toggle button: sets `aria-pressed` on the inner `<button>` to `true`/`false`. Leave it
+     * unset (the default) for a plain action button, which then has no `aria-pressed` at all. The component
+     * does not toggle itself; the owner flips this on click. Put the toggle's state in the icon (e.g. a filled
+     * star), not in the label, which should stay the same.
+     */
+    pressed;
     onClick = () => {
         const form = this.internals?.form;
         if (!form || this.disabled)
@@ -49,7 +56,7 @@ const BsIconButton = class {
             form.reset();
     };
     render() {
-        return (index.h("button", { key: '285e98b32bc33089125e07f14c84b8c72cdc853b', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, onClick: this.onClick }, index.h("span", { key: 'd91ec40e2d3e99ee3894e5c5c58f5b209b2ef545', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: '6718a31a0f5f20bed9a5c682ddf0e6d1b703748b' }))));
+        return (index.h("button", { key: 'e04c7785712f0f9a2bfaa0efd51712d7c6ca805e', class: `bs-icon-button bs-icon-button--${this.variant} bs-icon-button--${this.size}`, type: this.type, disabled: this.disabled, "aria-label": this.ariaLabel, "aria-pressed": this.pressed === undefined ? undefined : String(this.pressed), onClick: this.onClick }, index.h("span", { key: '2b9cfb3af8b3914ee88a3244c3d1f102cbae7082', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: 'b561552aece8e0f8ae83dd6619295e5c9477aa89' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

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

@@ -8,6 +8,7 @@ const BsIconTile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
+    get el() { return index.getElement(this); }
     /** Tile size: `sm` 24px, `md` 32px, `lg` 48px. */
     size = 'sm';
     /** Colour and default glyph. `brand` uses the brand colours; `information` the info palette. */
@@ -19,11 +20,18 @@ const BsIconTile = class {
     hasCustomIcon = false;
     /** True while something is assigned to the `text` slot, so the text wrapper (and its gap) only exists then. */
     hasText = false;
+    /** `slotchange` alone is not enough: when the icon is already a child at first render (or is added in the same
+     * pass that upgrades this element) the event can fire before the handler is attached, leaving the default
+     * glyph drawn next to the slotted icon. Read the light DOM once up front. */
+    componentWillLoad() {
+        this.hasCustomIcon = Array.from(this.el.childNodes).some(n => (n.nodeType === Node.ELEMENT_NODE && !n.hasAttribute('slot')) || (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim()));
+        this.hasText = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'text');
+    }
     render() {
         const labelled = !!this.label;
         return [
-            index.h("div", { key: '47586c94633cb072243559352fff92ffc178b59e', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, index.h("span", { key: 'af1f942a94eed409beaaf6845eee09003ef70fd4', part: "icon", class: "bs-icon-tile__icon" }, index.h("slot", { key: 'be9df10596772e84a65d4de467117ea6c6a13c29', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
-            index.h("span", { key: '0522505b1001e511e5c2446025a05b6e80ef0176', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, index.h("slot", { key: '0fc0bb97e5b23a984bcd64eafc0133eb93782c2f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
+            index.h("div", { key: 'ea92c7e93e3283dccf7feb0afcc87947eb9f3087', part: "container", class: "bs-icon-tile", role: labelled ? 'img' : undefined, "aria-label": labelled ? this.label : undefined, "aria-hidden": labelled ? undefined : 'true' }, index.h("span", { key: '50ba78a85b831869ea60882b89739cc0ef36a6b4', part: "icon", class: "bs-icon-tile__icon" }, index.h("slot", { key: 'ab395f4bfc9a40be9ac74f05ebf227a241cdfca8', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            index.h("span", { key: '07ad1aa22ba646f82b8eb2782ddda0c816dc47a5', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, index.h("slot", { key: 'f4209dee495bf82b95c95fcd754bdf8305d5b02f', name: "text", onSlotchange: (ev) => (this.hasText = ev.target.assignedNodes().length > 0) })),
         ];
     }
 };

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

@@ -69,7 +69,7 @@ const BsInlineTab = class {
     };
     render() {
         const iconOnly = this.hasIcon && !this.hasLabel;
-        return (index.h("button", { key: 'f1e23c86e704fca62991ceaf662a93aae674728f', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, index.h("span", { key: '67bcaa27f2e31e9fe6e96b7c76282c007ae26645', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: '207eb1515e056ed6d84ecf6a88e33e1c0d36b5d6', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: 'bb75375e4cadbcfb27b56ff27df160ad5537b97f', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: 'f0b7ff382a8b2d5427def19194a19a18ca057821', onSlotchange: this.onLabelSlotchange }))));
+        return (index.h("button", { key: '593a07fb914f26cb831c92319993fcd161ee7f0d', type: "button", part: "tab", role: "tab", class: `bs-inline-tab ${this.selected ? 'bs-inline-tab--selected' : ''} ${this.disabled ? 'bs-inline-tab--disabled' : ''} ${iconOnly ? 'bs-inline-tab--icon-only' : ''} ${this.hasIcon ? 'bs-inline-tab--has-icon' : ''}`, disabled: this.disabled, "aria-selected": String(this.selected), "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel, tabIndex: this.tabbable === undefined ? undefined : this.tabbable ? 0 : -1, onClick: this.onClick }, index.h("span", { key: '42a07b0dfd4cd676f25616f8693ddfa75c55e6fe', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: 'da847d9052ac9cbec891de26f4550b706107aff1', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '85e3dfb8f6c266c1b225b9814194c8eed6d97edd', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: 'f99da4b89292a8399f1d615bd01a1dec7913abdb', onSlotchange: this.onLabelSlotchange }))));
     }
 };
 BsInlineTab.style = bsInlineTabCss();

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

@@ -368,10 +368,10 @@ const BsInput = class {
         return (index.h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (index.h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (index.h("div", { key: 'ec191e3590785654e3701c7c49b1643f671dcc16', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (index.h("div", { key: '3c0ea65d5b8852b14e1295d6a6a33aef95d02d01', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        index.h("label", { key: '264558031d7bdf104254724ad1891c893668da60', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: '225d41e84484f1f160765a9f01e49a0bd850650c', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, index.h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), index.h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (index.h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        index.h("label", { key: '13e99193d9906c7c7534df1c9bd6395f1a758524', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: 'ac14aa6322a8ce40624cdc392dde96b7bad298a8', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (index.h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, index.h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), index.h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), index.h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (index.h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
@@ -422,7 +422,7 @@ const BsMenu = class {
         items[next].shadowRoot?.querySelector('button')?.focus();
     }
     render() {
-        return (index.h("div", { key: '0477b2c9c46e8f5e325cac9a4dbaab8bc750643b', part: "list", class: "bs-menu", role: "menu" }, index.h("slot", { key: 'e1c588bc649544c797b657dd0d5262415e5a60a4' })));
+        return (index.h("div", { key: '850122bbadc472043159746a66002281d53ddd7b', part: "list", class: "bs-menu", role: "menu" }, index.h("slot", { key: '5a64d51431e7cad88d5a7f4d01aa004098e9b2d2' })));
     }
 };
 BsMenu.style = bsMenuCss();
@@ -451,7 +451,7 @@ const BsMenuItem = class {
         this.bsSelect.emit();
     };
     render() {
-        return (index.h("button", { key: 'dc11eb96712a008d318aa3c4220202ecd7b7ce32', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, index.h("span", { key: 'f38f1192079cd6ddc68035f649f09c6afa2fe3d5', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, index.h("slot", { key: '2d49ecdd471e752267543323b637466af12dbd58', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '947b88175af07b7523d38786224c6e77b76de4ae', part: "label", class: "bs-menu-item__label" }, index.h("slot", { key: 'c564ce8f13882cc33f58fc45d7f8a6ddfc86f31d' }))));
+        return (index.h("button", { key: '6b051d2fd71b1be59a253c9eb10e7a8f1242e110', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, index.h("span", { key: '245b088e3d5243d4b6ca8871b087d53174405590', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, index.h("slot", { key: 'f325951ecf61f5b2e39d54fb9dd7deda9fc313cb', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '2d89029982559af29db78a0ba2fd48ccfbc1c416', part: "label", class: "bs-menu-item__label" }, index.h("slot", { key: '56681e9c1241233fc36e9bcd5a19c58ef3af5b4b' }))));
     }
 };
 BsMenuItem.style = bsMenuItemCss();

package/dist/cjs/bs-key-caps.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsKeyCapsCss = () => `:host{display:inline-block;--bs-key-caps-gap:var(--bs-spacing-100);--bs-key-caps-separator-color:var(--bs-text-muted);--bs-key-caps-disabled-opacity:0.38}.bs-key-caps{display:inline-flex;align-items:center;gap:var(--bs-key-caps-gap)}.bs-key-caps bs-key:not(:first-child)::before,::slotted(bs-key:not(:first-child))::before{content:'+';color:var(--bs-key-caps-separator-color);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}:host([disabled]) .bs-key-caps{opacity:var(--bs-key-caps-disabled-opacity)}`;
+
+const BsKeyCaps = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * The keys as text. A string is split on `+` (`"Ctrl+K"`); use an array to include a literal
+     * plus key. Ignored when `bs-key` elements are slotted instead. Figma defines one to four keys.
+     */
+    keys;
+    /** Dims the whole shortcut and marks it `aria-disabled`. */
+    disabled = false;
+    /** Accessible name of the shortcut, e.g. "Control plus K". Defaults to the keys joined with " plus ". */
+    label;
+    keyList() {
+        if (Array.isArray(this.keys))
+            return this.keys.filter(k => k !== '');
+        if (typeof this.keys === 'string') {
+            return this.keys
+                .split('+')
+                .map(k => k.trim())
+                .filter(Boolean);
+        }
+        return [];
+    }
+    render() {
+        const keys = this.keyList();
+        const name = this.label ?? (keys.length ? keys.join(' plus ') : undefined);
+        return (index.h("span", { key: 'a5a71f50df215bafb5225553a3822048470b0df6', part: "container", class: "bs-key-caps", role: "group", "aria-label": name, "aria-disabled": this.disabled ? 'true' : undefined }, keys.map(k => (index.h("bs-key", { label: k }))), index.h("slot", { key: '3efb98fca94e15103658c10444000b60665ddd31' })));
+    }
+};
+BsKeyCaps.style = bsKeyCapsCss();
+
+exports.bs_key_caps = BsKeyCaps;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsKeyCss = () => `:host{display:inline-flex;align-items:center;gap:var(--bs-spacing-100);--bs-key-bg:var(--bs-surface-base);--bs-key-border-color:var(--bs-border-default);--bs-key-radius:var(--bs-border-radius-50);--bs-key-padding-x:var(--bs-spacing-75);--bs-key-padding-y:var(--bs-spacing-50);--bs-key-min-width:25px;--bs-key-color:var(--bs-text-secondary);--bs-key-font-size:var(--bs-font-size-xs);--bs-key-icon-size:16px}.bs-key{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:var(--bs-key-min-width);padding:var(--bs-key-padding-y) var(--bs-key-padding-x);background:var(--bs-key-bg);border:1px solid var(--bs-key-border-color);border-radius:var(--bs-key-radius);color:var(--bs-key-color);font-family:inherit;font-size:var(--bs-key-font-size);font-weight:var(--bs-font-weight-regular);line-height:calc(var(--bs-line-height-caption-sm) * 1px);text-align:center;white-space:nowrap}.bs-key__label{display:block}.bs-key__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--bs-key-icon-size);height:var(--bs-key-icon-size)}.bs-key__icon--hidden{display:none}.bs-key__icon ::slotted(*){display:block;width:100%;height:100%}`;
+
+const BsKey = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** The key's text, e.g. `Ctrl`. The default slot overrides it. */
+    label;
+    /** Tracks whether the `icon` slot has content, so the label is replaced by the icon. */
+    hasIcon = false;
+    componentWillLoad() {
+        this.hasIcon = Array.from(this.el.children).some(c => c.getAttribute('slot') === 'icon');
+    }
+    onIconSlotChange = (ev) => {
+        this.hasIcon = ev.target.assignedNodes().length > 0;
+    };
+    render() {
+        return (index.h("kbd", { key: '45bd298f9fcf91ac4a6fd1c10c879a9373c53fae', part: "container", class: "bs-key" }, !this.hasIcon && (index.h("span", { key: '019bb8652eef6eafbe3d11ac0a179aa06a853e99', part: "label", class: "bs-key__label" }, index.h("slot", { key: '9b4e0c377ad3a6ab51125894aca36164e3f4546c' }, this.label))), index.h("span", { key: '2d8618a0a71f799d6b4c3c8ecd3364d2a744879d', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, index.h("slot", { key: '9c7bf13a4ddf4ad57fcee6c81653783eb0bde3c4', name: "icon", onSlotchange: this.onIconSlotChange }))));
+    }
+};
+BsKey.style = bsKeyCss();
+
+exports.bs_key = BsKey;