@brandsync/wc 1.15.0 → 1.17.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: '602e1b2fbeb09dc848435562c3188f784a96a26f', part: "container", class: "bs-keyboard-shortcuts", surface: "base", role: "region", "aria-labelledby": headId, onKeyDown: this.onKeyDown }, h("div", { key: '1ad1ad5d14769b755362b1c965390d929d190a81', class: "bs-keyboard-shortcuts__body" }, h("div", { key: '86e635b3e14a47fa5df69983f9fab132ab8b334c', part: "head", class: "bs-keyboard-shortcuts__head" }, 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" }, h("rect", { key: 'e70a9a55b1fa027dbaa50870dd79d2c2b4805efd', x: "2", y: "5", width: "20", height: "14", rx: "2" }), h("path", { key: '17c1bf9e1f044b802f1538a70da58334e1b328c4', d: "M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 15.5h6" })), h("h4", { key: '06466a27347a74bb61ab23f0a57ec19b8fd3feb7', part: "heading", id: headId, class: "bs-keyboard-shortcuts__heading" }, h("slot", { key: '307d0611ceffa704345f1a138796e76df9101162', name: "heading" }, this.heading)), h("bs-icon-button", { key: 'a9126801a045b8e95301a2fd6cfcbae20e9ef29b', part: "close", variant: "subtle", size: "md", "aria-label": this.closeLabel, onClick: () => this.bsClose.emit() }, h("svg", { key: '472f6467736f6baadd13ed4f723107be92dc9147', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: 'b20530074ac46a1764f613f02c9aca7be9771c40', d: "M6 6l12 12M18 6 6 18" })))), h("bs-input", { key: '94eb5e7ac066359e150681a0b9016da7e98d45b0', part: "search", type: "search", placeholder: this.searchPlaceholder, value: this.query, onBsInput: this.onInput }), this.showSingleKeySwitch && (h("div", { key: 'b51f32af80233153e3f2e957e364e82e8458b0d5', part: "switch", class: "bs-keyboard-shortcuts__switch" }, h("div", { key: '5c043a1b80b20fc9b636b293a3e0782807d3fa0c', class: "bs-keyboard-shortcuts__switch-text" }, h("span", { key: 'bcc7015e1084d3479ff257fdc50e12b813d90bbd', class: "bs-keyboard-shortcuts__switch-title" }, this.singleKeyLabel), h("span", { key: '43b88ef5e2368da7f1304c6c6c05c125a87132f8', class: "bs-keyboard-shortcuts__switch-caption" }, this.singleKeyDescription)), h("bs-switch", { key: 'b7d95ac144d87947f64199ea9cf83eb108a2f00c', ariaLabel: this.singleKeyLabel, checked: this.singleKeyEnabled, onBsChange: this.onSwitch }))), h("span", { key: 'd6d155b36ca413bca0978addbe1a82370d71c645', 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: 'b61974f27c2909fe207e3e604b06ed408516a810', part: "footer", class: "bs-keyboard-shortcuts__footer" }, h("slot", { key: '44c2ddc9cd9e99418ee4edaf030e51f663bee47b', name: "footer" }, h("span", { key: '9679714a84380363982b4d7111bdc424547e4aa8' }, this.footerPrefix), h("bs-key", { key: '2945e09a15994b15753bad68530700020e666968', label: this.footerKey }), h("span", { key: '90fe405d4aeebb0dbd31d291e85dee48c12f6258' }, 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;
+    },
+};