@brandsync/wc 1.15.0 → 1.17.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: 'dd4477e08b51d52d5309150c4e95f0e560411a05', class: "bs-global-search" }, index.h("div", { key: 'a37363a1076c4fab1676d4801a0f9751528b42d0', part: "field", class: "bs-global-search__field", role: "combobox", "aria-label": this.label || this.placeholder, "aria-expanded": String(this.open && showList), "aria-haspopup": "listbox", "aria-controls": this.open && showList ? listId : undefined, "aria-activedescendant": this.open && this.activeId ? this.activeId : undefined, onKeyDown: this.onKeyDown, onFocusin: () => this.setOpen(true), onClick: () => this.setOpen(true) }, index.h("bs-input", { key: 'c0a4d130a36937c90c95659b439eef20655a6c99', ref: el => (this.inputEl = el), type: "search", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onBsInput: this.onInput })), this.open && (index.h("div", { key: 'f85e3f63bf82a5de2648e8fa60f4fd4df288ec3b', part: "panel", class: "bs-global-search__panel", onMouseDown: (ev) => ev.preventDefault(), onMouseOver: this.onPanelMouseOver }, isList && showList && (index.h("div", { key: 'cc926315b2b1d2ad62026531a4174cb84df713a8', 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: '4bf9f7fc2a00853aee7b48328819ef0a9181d668', 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: '0799adbc2484f270db8ca5c2cadc1a0ec55ecbc0', 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: '90d4940c5b1870df9eaae616f8fbe3738f025a3b' })));
     }
 };
 BsGrid.style = bsGridCss();

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

@@ -49,7 +49,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: '75325bed02f38716052a4341a971ed429355d615', 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: 'a427c213e0bbf3ee96698917ffc127d1d4d15de8', part: "icon", class: "bs-icon-button__icon" }, index.h("slot", { key: 'b46bf34d3fb24e9b899ba52fbd2ca39a49c634d3' }))));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }

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

@@ -22,8 +22,8 @@ const BsIconTile = class {
     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: '3fc3a9874dbadcf9ac6fa3df92f7c5cb48c4cc7b', 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: 'e27206a1f0ef5a05183863c952c631614e44b591', part: "icon", class: "bs-icon-tile__icon" }, index.h("slot", { key: '31c4cd875c08f01b04d1fbc8b27dbb471c383129', onSlotchange: (ev) => (this.hasCustomIcon = hasContent(ev.target)) }), !this.hasCustomIcon && (GLYPHS[this.intent] ?? GLYPHS.default))),
+            index.h("span", { key: 'fcc4dbeff34fa2de817619963ec0ec2597d04db3', part: "text", class: { 'bs-icon-tile__text': true, 'bs-icon-tile__text--visible': this.hasText } }, index.h("slot", { key: '24509194d7cb291ee7930039f42dcea780f0bcf3', 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: '4b8df7a5f37f0aad60679cbdd3bd03cb20482ba7', 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: '037cdaae4331e050b5c02083d1776bb5509ff92b', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: '3b67b01e65434c35545fc9f06dab7bb871362001', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: 'd41611429e951d13df23521f938217716f2afacd', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: '8ea82e8ecc120c9961b8288a1162ec03ac0223bf', onSlotchange: this.onLabelSlotchange }))));
+        return (index.h("button", { key: 'ec19773b2ad2363cb5f6dc1f3f845db3755c3d13', 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: '561fa96dd2f01fe03b1bdb30675be98aec9e33ef', part: "icon", class: `bs-inline-tab__icon ${this.hasIcon ? 'bs-inline-tab__icon--has-content' : ''}` }, index.h("slot", { key: 'c1f0d97a04e41fccd22fb412b3019fd0d63b0cc6', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: '07f4873273ef9e91c472344bbdf97b6915d4b14f', part: "label", class: `bs-inline-tab__label ${this.hasLabel ? 'bs-inline-tab__label--has-content' : ''}` }, index.h("slot", { key: '3bc180fa828034358155abd397aa68661f09fcf3', 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: '99df53d78ddc715d336738a27efeb3d64140a9c7', 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: '27f894fedaf23ded0432d9f26e80a9dd4d2bbb8e', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (index.h("span", { key: '4260924b6128864a17ae809e5e54bc3f5aff5b64', 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: 'e886c7df63af6d741175aa81bc6390be600e371b', part: "list", class: "bs-menu", role: "menu" }, index.h("slot", { key: '365eae17c25fd6a3cc69c9ff01a28ce81eca11f8' })));
+        return (index.h("div", { key: '8acfe07941922ce4ad0bbb5eef11bb6eecba2c08', part: "list", class: "bs-menu", role: "menu" }, index.h("slot", { key: 'a3482ba2653512937d3c1f2b4fa798f1bd81859c' })));
     }
 };
 BsMenu.style = bsMenuCss();
@@ -451,7 +451,7 @@ const BsMenuItem = class {
         this.bsSelect.emit();
     };
     render() {
-        return (index.h("button", { key: '2d4a54df61b047dab4531362aee81f5d9728818b', 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: '5ddaa17999d79962d279b927d659f592a2dccc81', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, index.h("slot", { key: '41033aa1950751d8565eec3d04af3570120cda58', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: 'eb077b5082815adee640c53fa4396cccf1d81cad', part: "label", class: "bs-menu-item__label" }, index.h("slot", { key: 'cfb15ca71fd157aebfb0380e2eaac791bd50b051' }))));
+        return (index.h("button", { key: '09c4e8582ce6a31ff4aa293e20c3d7f1caa6e845', 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: 'ecfc57bc3eab836edd5f0ef0d009da8ccbbce563', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, index.h("slot", { key: '8eb2a0b480c7fbe7aa17ec5cd193764353a394e9', name: "icon", onSlotchange: this.onIconSlotchange })), index.h("span", { key: 'e67b7512fd58b0e0847b5d3d14658cfc1bd4a00c', part: "label", class: "bs-menu-item__label" }, index.h("slot", { key: '466a45cb85e7cdadde2fb994243689873482d65c' }))));
     }
 };
 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: 'd2396eec919fbad20d6152faf4786d1bcfac9042', 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: '9f4facb9f8d6ce6079facc16d260a41f48e54470' })));
+    }
+};
+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: 'ebd13e9ce82e11cb2868adaf1d9dfc38a261bf26', part: "container", class: "bs-key" }, !this.hasIcon && (index.h("span", { key: 'abb27af837ff8a82bc976841a04a2ef3d0386cdd', part: "label", class: "bs-key__label" }, index.h("slot", { key: 'e28affc720c80cf40edba55229e7df67e79a579b' }, this.label))), index.h("span", { key: 'c88fb0200102cfcd6e3b3b84218de6fcfddf06b8', part: "icon", class: { 'bs-key__icon': true, 'bs-key__icon--hidden': !this.hasIcon } }, index.h("slot", { key: '4043e70a46538183913b6275ba569fb75c078c27', name: "icon", onSlotchange: this.onIconSlotChange }))));
+    }
+};
+BsKey.style = bsKeyCss();
+
+exports.bs_key = BsKey;

package/dist/cjs/bs-keyboard-shortcuts.cjs.entry.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var index = require('./index-BYfMRtlW.js');
+
+const bsKeyboardShortcutsCss = () => `:host{display:block;width:var(--bs-keyboard-shortcuts-width);min-width:var(--bs-keyboard-shortcuts-width);box-sizing:border-box;--bs-keyboard-shortcuts-width:720px;--bs-keyboard-shortcuts-bg:var(--bs-surface-base);--bs-keyboard-shortcuts-radius:var(--bs-border-radius-150);--bs-keyboard-shortcuts-padding:var(--bs-spacing-200);--bs-keyboard-shortcuts-gap:var(--bs-spacing-200);--bs-keyboard-shortcuts-shadow:0 var(--bs-shadow-position-100) var(--bs-shadow-blur-100) 0 var(--bs-elevation-higher);--bs-keyboard-shortcuts-column-gap:var(--bs-spacing-600);--bs-keyboard-shortcuts-color:var(--bs-text-default);--bs-keyboard-shortcuts-color-secondary:var(--bs-text-secondary)}.bs-keyboard-shortcuts{display:block;--bs-card-bg:var(--bs-keyboard-shortcuts-bg);--bs-card-radius:var(--bs-keyboard-shortcuts-radius);--bs-card-padding:var(--bs-keyboard-shortcuts-padding);--bs-card-shadow:var(--bs-keyboard-shortcuts-shadow);--bs-card-overflow:visible;color:var(--bs-keyboard-shortcuts-color)}.bs-keyboard-shortcuts__body{display:flex;flex-direction:column;gap:var(--bs-keyboard-shortcuts-gap)}.bs-keyboard-shortcuts__head{display:flex;align-items:center;gap:var(--bs-spacing-100)}.bs-keyboard-shortcuts__icon{flex-shrink:0;color:var(--bs-keyboard-shortcuts-color)}.bs-keyboard-shortcuts__heading{flex:1;margin:0;color:var(--bs-keyboard-shortcuts-color);font-size:var(--bs-font-size-2xl);font-weight:var(--bs-font-weight-bold);line-height:calc(var(--bs-line-height-heading-h4) * 1px)}.bs-keyboard-shortcuts__switch{display:flex;align-items:center;gap:var(--bs-spacing-200)}.bs-keyboard-shortcuts__switch-text{flex:1;display:flex;flex-direction:column;gap:var(--bs-spacing-25)}.bs-keyboard-shortcuts__switch-title{color:var(--bs-keyboard-shortcuts-color);font-size:var(--bs-font-size-sm);font-weight:var(--bs-font-weight-medium);line-height:calc(var(--bs-line-height-body-sm) * 1px)}.bs-keyboard-shortcuts__switch-caption{color:var(--bs-keyboard-shortcuts-color-secondary);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-keyboard-shortcuts__live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bs-keyboard-shortcuts__groups{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--bs-keyboard-shortcuts-column-gap);align-items:start}.bs-keyboard-shortcuts__column{display:flex;flex-direction:column;gap:var(--bs-spacing-200);min-width:0}.bs-keyboard-shortcuts__group{display:flex;flex-direction:column;gap:var(--bs-spacing-25)}.bs-keyboard-shortcuts__group-title{color:var(--bs-keyboard-shortcuts-color-secondary);font-size:var(--bs-font-size-xs);font-weight:var(--bs-font-weight-semibold);line-height:calc(var(--bs-line-height-caption-sm) * 1px)}.bs-keyboard-shortcuts__rows{display:flex;flex-direction:column;gap:var(--bs-spacing-25)}.bs-keyboard-shortcuts__empty{margin:0;color:var(--bs-keyboard-shortcuts-color-secondary);font-size:var(--bs-font-size-sm);line-height:calc(var(--bs-line-height-body-sm) * 1px)}.bs-keyboard-shortcuts__footer{display:flex;align-items:center;gap:var(--bs-spacing-75);color:var(--bs-keyboard-shortcuts-color-secondary);font-size:var(--bs-font-size-xs);line-height:calc(var(--bs-line-height-caption-sm) * 1px);white-space:nowrap}`;
+
+let uid = 0;
+const keyList = (keys) => Array.isArray(keys)
+    ? keys.filter(k => k !== '')
+    : String(keys ?? '')
+        .split('+')
+        .map(k => k.trim())
+        .filter(Boolean);
+const isSingleKey = (s) => {
+    if (s.singleKey !== undefined)
+        return s.singleKey;
+    const k = keyList(s.keys);
+    return k.length === 1 && k[0].length === 1;
+};
+const BsKeyboardShortcuts = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bsClose = index.createEvent(this, "bsClose");
+        this.bsQueryChange = index.createEvent(this, "bsQueryChange");
+        this.bsSingleKeyChange = index.createEvent(this, "bsSingleKeyChange");
+    }
+    id = `bs-ks-${++uid}`;
+    /** Property only: the shortcut groups. */
+    groups = [];
+    /** Heading text. The `heading` slot overrides it. */
+    heading = 'Keyboard shortcuts';
+    /** Accessible name of the close button. */
+    closeLabel = 'Close';
+    /** Search field placeholder (also its accessible name: `bs-input` has no aria-label prop). */
+    searchPlaceholder = 'Search for an action';
+    /** Current search text. Filters by action or keys text, case-insensitively. */
+    query = '';
+    /** Shows the single-key switch row. */
+    showSingleKeySwitch = true;
+    /** Whether single-key shortcuts are on. When off they are shown dimmed. */
+    singleKeyEnabled = true;
+    /** Switch title. */
+    singleKeyLabel = 'Single-key shortcuts';
+    /** Switch caption. */
+    singleKeyDescription = 'Turn off if they clash with a screen reader or other tools.';
+    /** Shows the footer hint. */
+    showFooterHint = true;
+    /** The key shown in the footer hint. */
+    footerKey = '?';
+    /** Footer text after the key. */
+    footerText = 'anywhere to open this list. On Mac: Cmd instead of Ctrl.';
+    /** Text before the footer key. */
+    footerPrefix = 'Press';
+    /** Line shown when the query matches nothing. */
+    noResultsText = 'No shortcuts match';
+    /** Emitted by the close button and by Escape. */
+    bsClose;
+    /** Emitted when the search text changes, with the new text. */
+    bsQueryChange;
+    /** Emitted when the single-key switch changes, with the new value. */
+    bsSingleKeyChange;
+    visibleGroups() {
+        const q = (this.query ?? '').trim().toLowerCase();
+        const groups = this.groups ?? [];
+        if (!q)
+            return groups.filter(g => g.shortcuts?.length);
+        return groups
+            .map(g => ({
+            ...g,
+            shortcuts: (g.shortcuts ?? []).filter(s => s.action.toLowerCase().includes(q) || keyList(s.keys).join('+').toLowerCase().includes(q)),
+        }))
+            .filter(g => g.shortcuts.length);
+    }
+    /** Greedy column split: a group stays in column 1 while countBefore + size/2 <= total/2. */
+    columns(groups) {
+        const total = groups.reduce((n, g) => n + g.shortcuts.length, 0);
+        const cols = [[], []];
+        let before = 0;
+        for (const g of groups) {
+            cols[before + g.shortcuts.length / 2 <= total / 2 ? 0 : 1].push(g);
+            before += g.shortcuts.length;
+        }
+        return cols[1].length ? cols : [cols[0]];
+    }
+    onKeyDown = (ev) => {
+        if (ev.key === 'Escape')
+            this.bsClose.emit();
+    };
+    onInput = (ev) => {
+        this.query = ev.detail;
+        this.bsQueryChange.emit(ev.detail);
+    };
+    onSwitch = (ev) => {
+        this.singleKeyEnabled = ev.detail;
+        this.bsSingleKeyChange.emit(ev.detail);
+    };
+    render() {
+        const groups = this.visibleGroups();
+        const count = groups.reduce((n, g) => n + g.shortcuts.length, 0);
+        const cols = this.columns(groups);
+        const headId = `${this.id}-heading`;
+        const noResults = count === 0 && (this.query ?? '').trim() !== '';
+        let gi = 0;
+        return (index.h("bs-card", { key: '602e1b2fbeb09dc848435562c3188f784a96a26f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, index.h("div", { key: '1ad1ad5d14769b755362b1c965390d929d190a81', class: "bs-keyboard-shortcuts__body" }, index.h("div", { key: '86e635b3e14a47fa5df69983f9fab132ab8b334c', part: "head", class: "bs-keyboard-shortcuts__head" }, index.h("svg", { key: '1b7c59483a38971e214126b309e2f62c7f69457c', class: "bs-keyboard-shortcuts__icon", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("rect", { key: 'e70a9a55b1fa027dbaa50870dd79d2c2b4805efd', x: "2", y: "5", width: "20", height: "14", rx: "2" }), index.h("path", { key: '17c1bf9e1f044b802f1538a70da58334e1b328c4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), index.h("h4", { key: '06466a27347a74bb61ab23f0a57ec19b8fd3feb7', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, index.h("slot", { key: '307d0611ceffa704345f1a138796e76df9101162', name: "heading" }, this.heading)), index.h("bs-icon-button", { key: 'a9126801a045b8e95301a2fd6cfcbae20e9ef29b', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, index.h("svg", { key: '472f6467736f6baadd13ed4f723107be92dc9147', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, index.h("path", { key: 'b20530074ac46a1764f613f02c9aca7be9771c40', d: "M6 6l12 12M18 6 6 18" })))), index.h("bs-input", { key: '94eb5e7ac066359e150681a0b9016da7e98d45b0', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (index.h("div", { key: 'b51f32af80233153e3f2e957e364e82e8458b0d5', part: "switch", class: "bs-keyboard-shortcuts__switch" }, index.h("div", { key: '5c043a1b80b20fc9b636b293a3e0782807d3fa0c', class: "bs-keyboard-shortcuts__switch-text" }, index.h("span", { key: 'bcc7015e1084d3479ff257fdc50e12b813d90bbd', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), index.h("span", { key: '43b88ef5e2368da7f1304c6c6c05c125a87132f8', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), index.h("bs-switch", { key: 'b7d95ac144d87947f64199ea9cf83eb108a2f00c', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), index.h("span", { key: 'd6d155b36ca413bca0978addbe1a82370d71c645', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (index.h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (index.h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (index.h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+            const tid = `${this.id}-g${gi++}`;
+            return (index.h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, index.h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), index.h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (index.h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
+        })))))), this.showFooterHint && (index.h("div", { key: 'b61974f27c2909fe207e3e604b06ed408516a810', part: "footer", class: "bs-keyboard-shortcuts__footer" }, index.h("slot", { key: '44c2ddc9cd9e99418ee4edaf030e51f663bee47b', name: "footer" }, index.h("span", { key: '9679714a84380363982b4d7111bdc424547e4aa8' }, this.footerPrefix), index.h("bs-key", { key: '2945e09a15994b15753bad68530700020e666968', label: this.footerKey }), index.h("span", { key: '90fe405d4aeebb0dbd31d291e85dee48c12f6258' }, this.footerText)))))));
+    }
+};
+BsKeyboardShortcuts.style = bsKeyboardShortcutsCss();
+
+exports.bs_keyboard_shortcuts = BsKeyboardShortcuts;