@brandsync/wc 1.16.0 → 1.18.0

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.js

@@ -0,0 +1,485 @@
+import { h } from "@stencil/core";
+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;
+};
+/**
+ * A searchable reference panel of keyboard shortcuts: heading and close button, a search field, an
+ * optional single-key on/off switch, shortcut groups in two columns and a footer hint. It is a
+ * surface, not a modal -- place it inside `bs-dialog` or a popover.
+ *
+ * Built from `bs-card`, `bs-icon-button`, `bs-input`, `bs-switch`, `bs-shortcut-row` (and so
+ * `bs-key-caps` / `bs-key`).
+ *
+ * ## When to use
+ * - A "press ? to see shortcuts" help overlay for an app with many shortcuts.
+ *
+ * ## When not to use
+ * - A long-form help page or documentation -- link to it instead.
+ * - A list of commands the user can run from it -- use `bs-menu`.
+ *
+ * @slot heading - Replaces the heading text.
+ * @slot footer - Replaces the footer hint.
+ * @part container - The panel surface (a `bs-card`).
+ * @part head - The heading row.
+ * @part heading - The heading element.
+ * @part close - The close button.
+ * @part search - The search field.
+ * @part switch - The single-key switch row.
+ * @part groups - The columns wrapper.
+ * @part group - One group.
+ * @part group-title - A group title.
+ * @part row - A shortcut row (`bs-shortcut-row`).
+ * @part empty - The "no results" line.
+ * @part footer - The footer hint.
+ * @prop --bs-keyboard-shortcuts-width - Panel width and min-width. Defaults to `720px` (Figma).
+ * @prop --bs-keyboard-shortcuts-bg - Panel background. Aliased to `--bs-surface-base`.
+ * @prop --bs-keyboard-shortcuts-radius - Aliased to `--bs-border-radius-150`.
+ * @prop --bs-keyboard-shortcuts-padding - Aliased to `--bs-spacing-200`.
+ * @prop --bs-keyboard-shortcuts-gap - Gap between sections. Aliased to `--bs-spacing-200`.
+ * @prop --bs-keyboard-shortcuts-shadow - Figma elevation level 4 (`0 8px 8px` in `--bs-elevation-higher`, 12% black in light mode and 25% in dark mode).
+ * @prop --bs-keyboard-shortcuts-column-gap - Gap between the two columns. Aliased to `--bs-spacing-600`.
+ * @prop --bs-keyboard-shortcuts-color - Main text colour. Aliased to `--bs-text-default`.
+ * @prop --bs-keyboard-shortcuts-color-secondary - Titles, captions, footer. Aliased to `--bs-text-secondary`.
+ */
+export class BsKeyboardShortcuts {
+    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 (h("bs-card", { key: '7e825a3d2c214a2228c8b302bc6530ca23427b2f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: '8595c3352463214acefb820a23a9adbdd66e6b76', class: "bs-keyboard-shortcuts__body" }, h("div", { key: 'bbdb0c462e6958d6fbeca96bd5ffb5dc99bdaf19', part: "head", class: "bs-keyboard-shortcuts__head" }, h("svg", { key: '95641e98b3795b85caa6e70ebd9bd2deeecdc2aa', 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" }, h("rect", { key: 'b1160b8146645716ea1b675c480f42675a4d6f29', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '18f2516e9113b2c335587bd3d17c49099496f1ec', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: '299d3fa12acc958389b7cd6b7ec9c2cefe12ed43', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '80365f19a624d950cfa678b1d2cb7a2eb7dbeb33', name: "heading" }, this.heading)), h("bs-icon-button", { key: '2e43986aac1914ab56527ac09e08889fbe6ca0ef', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: 'cd655a49a3142304b168c8a8f25c89b63c0fbc79', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '7a39bf4eb97bde3d6d81d3db53fea3589af6e8c9', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: 'b86dc235443e567aede36a767ddc015481ef08fa', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: '4fe525465a7dbae779af2aa9596669d06a8c7f71', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '2821019a258b02c2d37679360001cd6ba390d304', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: '58f8f4dca914d41ad2b9b8883a117d4b865b4faa', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '41cfb03e58e546ed639a38452524b775065f1027', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'a974154d5c9388fc5fa6b4b077f148fbe37340c4', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: '636f5d35847c6bd0dcfc2d0f00b4d126bb764fbc', class: "bs-keyboard-shortcuts__live", "aria-live": "polite" }, `${count} shortcut${count === 1 ? '' : 's'}`), noResults ? (h("p", { part: "empty", class: "bs-keyboard-shortcuts__empty", role: "status" }, this.noResultsText)) : (h("div", { part: "groups", class: "bs-keyboard-shortcuts__groups" }, cols.map(col => (h("div", { class: "bs-keyboard-shortcuts__column" }, col.map(g => {
+            const tid = `${this.id}-g${gi++}`;
+            return (h("div", { part: "group", class: "bs-keyboard-shortcuts__group", role: "group", "aria-labelledby": tid }, h("div", { part: "group-title", id: tid, class: "bs-keyboard-shortcuts__group-title" }, g.title), h("div", { class: "bs-keyboard-shortcuts__rows", role: "list" }, g.shortcuts.map(s => (h("bs-shortcut-row", { part: "row", action: s.action, keys: s.keys, selectionRole: "listitem", disabled: !!s.disabled || (!this.singleKeyEnabled && isSingleKey(s)) }))))));
+        })))))), this.showFooterHint && (h("div", { key: '05833326cdbea5dbb994fd584bc54866c14cf615', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: 'eeb752068052c3f27cbfa0893f03a22f04328489', name: "footer" }, h("span", { key: '55c95afd62dae51c2b82362210e558fad904f7b7' }, this.footerPrefix), h("bs-key", { key: 'b9f8ef5cd3b3e5e2fce7a99bd2b29d751a764901', label: this.footerKey }), h("span", { key: '13b4719f50cd4d3fadc2802cb22d31f04e775798' }, this.footerText)))))));
+    }
+    static get is() { return "bs-keyboard-shortcuts"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-keyboard-shortcuts.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-keyboard-shortcuts.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "groups": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsShortcutGroup[]",
+                    "resolved": "BsShortcutGroup[]",
+                    "references": {
+                        "BsShortcutGroup": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.tsx",
+                            "id": "src/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.tsx::BsShortcutGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property only: the shortcut groups."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text. The `heading` slot overrides it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "'Keyboard shortcuts'"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the close button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "searchPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search field placeholder (also its accessible name: `bs-input` has no aria-label prop)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-placeholder",
+                "defaultValue": "'Search for an action'"
+            },
+            "query": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current search text. Filters by action or keys text, case-insensitively."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "query",
+                "defaultValue": "''"
+            },
+            "showSingleKeySwitch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the single-key switch row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-single-key-switch",
+                "defaultValue": "true"
+            },
+            "singleKeyEnabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether single-key shortcuts are on. When off they are shown dimmed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "single-key-enabled",
+                "defaultValue": "true"
+            },
+            "singleKeyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Switch title."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "single-key-label",
+                "defaultValue": "'Single-key shortcuts'"
+            },
+            "singleKeyDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Switch caption."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "single-key-description",
+                "defaultValue": "'Turn off if they clash with a screen reader or other tools.'"
+            },
+            "showFooterHint": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows the footer hint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-footer-hint",
+                "defaultValue": "true"
+            },
+            "footerKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The key shown in the footer hint."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "footer-key",
+                "defaultValue": "'?'"
+            },
+            "footerText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Footer text after the key."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "footer-text",
+                "defaultValue": "'anywhere to open this list. On Mac: Cmd instead of Ctrl.'"
+            },
+            "footerPrefix": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text before the footer key."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "footer-prefix",
+                "defaultValue": "'Press'"
+            },
+            "noResultsText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Line shown when the query matches nothing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-results-text",
+                "defaultValue": "'No shortcuts match'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsClose",
+                "name": "bsClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted by the close button and by Escape."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsQueryChange",
+                "name": "bsQueryChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the search text changes, with the new text."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "bsSingleKeyChange",
+                "name": "bsSingleKeyChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the single-key switch changes, with the new value."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/bs-keyboard-shortcuts/bs-keyboard-shortcuts.stories.js

@@ -0,0 +1,111 @@
+import { html } from "lit";
+import { componentDescription } from "../../stories-utils";
+/** Figma "Keyboard shortcuts" data, shared by the stories. */
+export const SHORTCUT_GROUPS = [
+    {
+        title: 'General',
+        shortcuts: [
+            { action: 'Search everything', keys: 'Ctrl+K' },
+            { action: 'Show shortcuts', keys: '?' },
+            { action: 'Close dialog', keys: 'Esc' },
+        ],
+    },
+    {
+        title: 'Navigation',
+        shortcuts: [
+            { action: 'Go to Overview', keys: 'G+O' },
+            { action: 'Go to Orders', keys: 'G+R' },
+            { action: 'Go to Customers', keys: 'G+K' },
+        ],
+    },
+    {
+        title: 'Table',
+        shortcuts: [
+            { action: 'Next row', keys: 'J' },
+            { action: 'Previous row', keys: 'K' },
+            { action: 'Select row', keys: 'Space' },
+            { action: 'Open row', keys: 'Enter' },
+        ],
+    },
+    {
+        title: 'Editing',
+        shortcuts: [
+            { action: 'New order', keys: 'N' },
+            { action: 'Save', keys: 'Ctrl+S' },
+            { action: 'Undo', keys: 'Ctrl+Z' },
+        ],
+    },
+];
+/** Same data for the single-key-off frame: Figma also dims Esc, so it is marked single-key explicitly. */
+export const SHORTCUT_GROUPS_SINGLE_KEY_OFF = SHORTCUT_GROUPS.map(g => ({
+    ...g,
+    shortcuts: g.shortcuts.map(s => (s.action === 'Close dialog' ? { ...s, singleKey: true } : s)),
+}));
+export const FILTERED_GROUPS = [
+    {
+        title: 'Editing',
+        shortcuts: [
+            { action: 'Save', keys: 'Ctrl+S' },
+            { action: 'Save as view', keys: 'Ctrl+Shift+S' },
+            { action: 'Save in cloud', keys: 'S' },
+        ],
+    },
+];
+const meta = {
+    // The shared SHORTCUT_GROUPS data constants are exported for the other stories; keep them out of the sidebar.
+    excludeStories: /^[A-Z0-9_]+$/,
+    title: 'Components/bs-keyboard-shortcuts',
+    parameters: { docs: { description: { component: componentDescription('bs-keyboard-shortcuts') } } },
+    argTypes: {
+        query: { control: 'text' },
+        singleKeyEnabled: { control: 'boolean' },
+        showSingleKeySwitch: { control: 'boolean' },
+        showFooterHint: { control: 'boolean' },
+    },
+    args: { query: '', singleKeyEnabled: true, showSingleKeySwitch: true, showFooterHint: true },
+    render: args => html `
+    <bs-keyboard-shortcuts
+      .groups=${SHORTCUT_GROUPS}
+      .query=${args.query}
+      .singleKeyEnabled=${args.singleKeyEnabled}
+      .showSingleKeySwitch=${args.showSingleKeySwitch}
+      .showFooterHint=${args.showFooterHint}
+    ></bs-keyboard-shortcuts>
+  `,
+};
+export default meta;
+export const AllShortcuts = {};
+export const SingleKeyOff = {
+    render: () => html `<bs-keyboard-shortcuts .groups=${SHORTCUT_GROUPS_SINGLE_KEY_OFF} .singleKeyEnabled=${false}></bs-keyboard-shortcuts>`,
+};
+export const FilteredResults = {
+    render: () => html `<bs-keyboard-shortcuts .groups=${FILTERED_GROUPS} query="save"></bs-keyboard-shortcuts>`,
+};
+export const FilteredSingleKeyOff = {
+    render: () => html `<bs-keyboard-shortcuts .groups=${FILTERED_GROUPS} query="save" .singleKeyEnabled=${false}></bs-keyboard-shortcuts>`,
+};
+export const NoResults = {
+    render: () => html `<bs-keyboard-shortcuts .groups=${SHORTCUT_GROUPS} query="zzz"></bs-keyboard-shortcuts>`,
+};
+export const InDialog = {
+    name: 'In a dialog',
+    parameters: { docs: { story: { inline: false, height: '720px' } } },
+    render: () => {
+        const container = document.createElement('div');
+        const trigger = document.createElement('bs-button');
+        trigger.textContent = 'Show shortcuts';
+        const dialog = document.createElement('bs-dialog');
+        dialog.setAttribute('heading', 'Keyboard shortcuts');
+        dialog.setAttribute('size', 'lg');
+        // Both the dialog and the panel emit bsClose; either closes the dialog.
+        const panel = document.createElement('bs-keyboard-shortcuts');
+        panel.groups = SHORTCUT_GROUPS;
+        panel.style.setProperty('--bs-keyboard-shortcuts-shadow', 'none');
+        dialog.appendChild(panel);
+        trigger.addEventListener('click', () => (dialog.open = true));
+        dialog.addEventListener('bsClose', () => (dialog.open = false));
+        panel.addEventListener('bsClose', () => (dialog.open = false));
+        container.append(trigger, dialog);
+        return container;
+    },
+};

package/dist/collection/components/bs-list/bs-list.js

@@ -97,7 +97,7 @@ export class BsList {
         enabled[next].focus();
     }
     render() {
-        return (h("div", { key: '0f3e4a90f79c77ab2a67e88c4480f0c5785e49eb', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: '7b5618d45ad58385f3d27565bdfee3e4bb5eac2e', onSlotchange: () => this.sync() })));
+        return (h("div", { key: '3483a207be9fb42c6d6c4e2385b3d03e3351b05c', part: "list", class: "bs-list", role: this.selectable ? 'listbox' : 'list', "aria-label": this.ariaLabel ?? undefined }, h("slot", { key: 'cc497c226b4fc18f04121a3aff3fe5e10891bf82', onSlotchange: () => this.sync() })));
     }
     static get is() { return "bs-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-list-item/bs-list-item.js

@@ -101,7 +101,7 @@ export class BsListItem {
         const role = this.selectionRole === 'option' ? 'option' : this.selectionRole === 'listitem' ? 'listitem' : this.interactive ? 'button' : undefined;
         const standaloneFocusable = this.interactive && !this.selectionRole && !this.disabled;
         const showTrailing = this.showArrow || this.hasTrailing;
-        return (h(Host, { key: 'b7e1ad2635a02bace4a6f53a397ac9a70f887b43', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: 'b197e2ef9b36a003fef75d2c47588483b33a63d5', part: "container", class: "bs-list-item" }, h("div", { key: '3cdd3bb2bdf76bf4388299e1097b59a8c0902363', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: 'e4d3e156c25fb8f3063ae6c9de843e1ed60458a1', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '3a8c79aa044f103d2618333929bfed0cdce870e7', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: 'a0123e4b7663553140f3dd17c95a450edc379bd8', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: '8275c24aed7bda59f7472d8d0ded4e830527009b', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: '06e6ba4b185af790ed46ae362b6aa2cc0376123b', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '00302f710e6433920cf7bd91730214ebcfccad4d', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '8c9506c0b3513a2fca1ad62702c7aa9bc118141b', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '3a3ec60f0483ba864addd4669ea6d1e6f261bb78', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'cab7a817530222313bec049106a68e622a6b14e2', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'ad794e820e1e36c1f4a22d9aac789a42c25e9056', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: 'eac7aeec4fedc05af55c5ca7a78efb693199de3a', role: role, tabindex: standaloneFocusable ? '0' : undefined, "aria-selected": this.selectionRole === 'option' ? String(this.selected) : undefined, "aria-disabled": this.disabled ? 'true' : undefined, class: { 'bs-list-item--interactive': interactive && !this.disabled } }, h("div", { key: '3ba832febb95adfc10481b0b1d70cc4448f0a9dd', part: "container", class: "bs-list-item" }, h("div", { key: 'd528d17243f6185d164c5f6964abe4b1d8143d5b', part: "leading", class: { 'bs-list-item__leading': true, 'bs-list-item__leading--has-content': this.hasLeading } }, h("slot", { key: '60efa1761cc46a7790986689acbada2f99d94add', name: "leading", onSlotchange: (e) => (this.hasLeading = this.slotHas(e)) })), h("div", { key: '4af6ee3b0969aeecdc2ead6b63be52b90927b713', part: "content", class: "bs-list-item__content" }, !this.hasDefault && this.label && (h("div", { key: '57481516f3d3ed73854a58fa870d40d760252b99', part: "label", class: "bs-list-item__label" }, this.label)), !this.hasDefault && this.description && (h("div", { key: 'acb37f4ec42b1c4c49d82cd21a89353a48ff3fcc', part: "description", class: "bs-list-item__description" }, this.description)), !this.hasDefault && this.supportText && (h("div", { key: 'b9e310fd74f06b1114b2ecf64b6c7de8b63a4c61', part: "support-text", class: "bs-list-item__support" }, this.supportText)), h("slot", { key: '7bb751ff77d29cd6f1852c90f5e71f855b222345', onSlotchange: (e) => (this.hasDefault = this.slotHas(e)) })), h("div", { key: '2bf6cb3dedfe1dcf868aba049f3718083ec63830', part: "trailing", class: { 'bs-list-item__trailing': true, 'bs-list-item__trailing--shown': showTrailing } }, h("slot", { key: '5cf7ede0e83b1040210346bdf7e7e6a5c7d06cfd', name: "trailing", onSlotchange: (e) => (this.hasTrailing = this.slotHas(e)) }, this.showArrow && (h("svg", { key: 'fb103f9892eebfd9a481c8d4b60e7504cb19311e', viewBox: "0 0 32 32", width: "32", height: "32", fill: "none", "aria-hidden": "true" }, h("path", { key: 'c33fa8a2aaa5a446adde56c7c8d4bfece8ef1dc9', d: "M12 7L21 16L12 25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "bs-list-item"; }
     static get encapsulation() { return "shadow"; }