@limetech/lime-elements 39.9.5 → 39.10.0

package/dist/collection/components/hotkey/hotkey.js

@@ -0,0 +1,92 @@
+import { Host, h } from "@stencil/core";
+import { tokenizeHotkeyString } from "../../util/hotkeys";
+import { isAppleDevice } from "../../util/device";
+import { formatDisplayToken } from "./format-display-token";
+/**
+ * This is a display-only component used to visualize keyboard shortcuts.
+ * It renders hotkey strings as styled `<kbd>` elements with
+ * platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
+ *
+ * It does **not** listen for or handle any keyboard events.
+ * Keyboard event handling is the responsibility of the parent component
+ * (e.g. `limel-menu` or `limel-select`).
+ *
+ * @exampleComponent limel-example-hotkey-basic
+ * @exampleComponent limel-example-hotkey-disabled
+ * @private
+ */
+export class Hotkey {
+    constructor() {
+        /**
+         * When `true`, the hotkey is rendered in a visually disabled state.
+         */
+        this.disabled = false;
+    }
+    componentWillLoad() {
+        this.isApple = isAppleDevice();
+    }
+    render() {
+        const parts = tokenizeHotkeyString(this.value);
+        const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
+        const ariaLabel = displayParts
+            .map((p) => p.ariaName)
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: 'ab1b9d31080740d19a4633c8c5bc92b02625c111', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
+    }
+    static get is() { return "limel-hotkey"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["hotkey.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["hotkey.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The hotkey string to visualize, e.g. `\"meta+c\"` or `\"shift+enter\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When `true`, the hotkey is rendered in a visually disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/icon/icon.js

@@ -18,7 +18,7 @@ export class Icon {
         this.loadIcon(this.name);
     }
     render() {
-        return h("div", { key: '80c6844e64217d24e957368feafddc831b497b2f', class: "container" });
+        return h("div", { key: '23b5f2c90c98461f65c0bcdb291f9958e00ac353', class: "container" });
     }
     async loadIcon(name) {
         if (name === undefined || name === '') {

package/dist/collection/components/icon-button/icon-button.js

@@ -52,7 +52,7 @@ export class IconButton {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: '75991185b5994f4fffb56a03031cfc0b570a3de4', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '608c0abc14322e8b8755c4af5137880bb419824d', disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: '0df3febef19dcdb72c7c7f3740090414b313be51', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'fd0d61e30789619c52cd6a71269602efc7065f8e', disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
     }
     renderIcon() {
         var _a, _b;

package/dist/collection/components/info-tile/info-tile.js

@@ -116,9 +116,9 @@ export class InfoTile {
             this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
         const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
         const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (h(Host, { key: '7c8d656a077f6c80cc7d4d64bf1aa9ef7d5bd781', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'f73467be963a8aa901c890958eda32212ff2f3a0', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        return (h(Host, { key: '3754cadd6c7cf0ee99e0f5dc2234732126dcdc1e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'c812a64253f3687f230c9a306727addae91ac685', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                 'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
-            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '2e4972465f34d57ce81a0c55782e9fcbc4c91c90', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '119b244389b740a05b266c80a78bffd2287f6dab', class: "value-group" }, this.renderPrefix(), h("div", { key: '9a9fc38d8c997b3ce6db3715a1aed622ec0af586', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '1809611bebee438d5b840907f09adda725c7849c' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '62e330f8b945d562b5ee4677a62ab21ec1b6defe', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: 'de41a8bc66d7f706153188f84b96481dfa25f8f9', class: "value-group" }, this.renderPrefix(), h("div", { key: '8ae36080dadd6b4a7135c7280e51a88015f30fbc', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '0221c5e66f2a30b60e619bc7d6fe35e66d1db653' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

package/dist/collection/components/input-field/input-field.js

@@ -588,7 +588,7 @@ export class InputField {
         if (ariaControls) {
             properties['aria-controls'] = ariaControls;
         }
-        return (h(Host, { key: '6427ea1655ab4fa9d07a2e5e4f8f1b4bad169065' }, h("limel-notched-outline", { key: '5dbf37b876ed2673acdd439a875b6b82ef34ee22', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '47ec8a216b5b5799769af87ce603e04f6a3abbaa', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (h(Host, { key: 'be352ea1f105d4c3f77b567de32626488ea4a60b' }, h("limel-notched-outline", { key: '0bae1383ad7421ffdc3468bbfc79af59d7c2e3cb', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '3667d9fbf90227232d8089a421455c7ab72e4202', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField) {

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

@@ -143,7 +143,7 @@ export class List {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'e08edeaabf6b51f940e305539aecec91517a51ca', style: {
+        return (h(Host, { key: 'cbe0fda77189118ad3515dc3c4ab02c6cd9bc58a', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

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

@@ -162,9 +162,9 @@ export class ListItemComponent {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (h(Host, Object.assign({ key: 'cc58d641c46fc21c81d9fbc6fbcd3a483aa7d803', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: '4f769d4dc9bcf065f0891ae394efb8f2cb4e3cbe', role: this.getHostRole(), class: {
                 'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: '2d8f6496d714faf9f3bd59cc829459191d650dc7', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'f3ae79f70d048a6541af55782a8a1956fd7338c5', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
     }
     /**
      * Returns a stable reference for the provided actions array to avoid

package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.js

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { normalizeHotkeyString } from "../../../util/hotkeys";
 /**
  * Meta content for menu list items
  *
@@ -11,15 +12,25 @@ import { Host, h } from "@stencil/core";
  */
 export class MenuItemMeta {
     constructor() {
+        /**
+         * Will be set to `true` when the menu item is disabled.
+         */
+        this.disabled = false;
         /**
          * Shows a submenu chevron to indicate nested items
          */
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: '9e84c6ecc29e50b5a4e871d646fb11539e5fe86f' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: '4341b1cd34952fdd2dc40bc3c4b7eb909646d880' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
+        if (this.hotkey) {
+            const hotkey = normalizeHotkeyString(this.hotkey);
+            if (hotkey) {
+                return h("limel-hotkey", { value: hotkey, disabled: this.disabled });
+            }
+        }
         if (!this.commandText) {
             return;
         }
@@ -67,9 +78,48 @@ export class MenuItemMeta {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "command-text"
             },
+            "hotkey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hotkey to display. When provided, `commandText` is ignored."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hotkey"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Will be set to `true` when the menu item is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
             "badge": {
                 "type": "any",
                 "mutable": false,

package/dist/collection/components/markdown/markdown.js

@@ -119,7 +119,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: '89f9536407969e0bb9dd206ca540dabee9c3eecf' }, h("div", { key: '373f17c2933a715a97f2854343c1d26d32a26a27', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'd3c5e71466ad7fa2723a0a44bc6ba6742e597ca1' }, h("div", { key: 'ff45056e1a3ad465bdea9026b0c9674d911607a2', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/menu/menu.js

@@ -3,6 +3,7 @@ import { createRandomString } from "../../util/random-string";
 import { zipObject, isFunction } from "lodash-es";
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ESCAPE, TAB, } from "../../util/keycodes";
 import { focusTriggerElement } from "../../util/focus-trigger-element";
+import { hotkeyFromKeyboardEvent, normalizeHotkeyString, tokenizeHotkeyString, } from "../../util/hotkeys";
 const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
     text: '',
     icon: {
@@ -20,13 +21,14 @@ const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
  * @exampleComponent limel-example-menu-icons
  * @exampleComponent limel-example-menu-badge-icons
  * @exampleComponent limel-example-menu-grid
- * @exampleComponent limel-example-menu-hotkeys
  * @exampleComponent limel-example-menu-secondary-text
  * @exampleComponent limel-example-menu-notification
  * @exampleComponent limel-example-menu-sub-menus
  * @exampleComponent limel-example-menu-sub-menu-lazy-loading
  * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
  * @exampleComponent limel-example-menu-searchable
+ * @exampleComponent limel-example-menu-hotkeys
+ * @exampleComponent limel-example-menu-searchable-hotkeys
  * @exampleComponent limel-example-menu-composite
  */
 export class Menu {
@@ -76,6 +78,34 @@ export class Menu {
          */
         this.rootItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;
         this.shouldRestoreFocusOnClose = false;
+        this.normalizedHotkeyCache = new Map();
+        this.cachedSubMenuSource = null;
+        this.cachedSubMenuItems = null;
+        this.handleDocumentKeyDown = (event) => {
+            if (event.key === ESCAPE && this.open) {
+                this.shouldRestoreFocusOnClose = true;
+            }
+            if (!this.open || event.defaultPrevented || event.repeat) {
+                return;
+            }
+            if (this.isFromTextInput(event) && !this.hasModifier(event)) {
+                return;
+            }
+            const pressedHotkey = hotkeyFromKeyboardEvent(event);
+            if (!pressedHotkey) {
+                return;
+            }
+            if (this.isReservedMenuHotkey(pressedHotkey)) {
+                return;
+            }
+            const matchedItem = this.findMenuItemByHotkey(pressedHotkey);
+            if (!matchedItem) {
+                return;
+            }
+            event.stopPropagation();
+            event.preventDefault();
+            this.handleSelect(matchedItem);
+        };
         this.renderLoader = () => {
             if (!this.loadingSubItems && !this.loading) {
                 return;
@@ -165,6 +195,9 @@ export class Menu {
         // Will change focus to breadcrumbs (if present) or the first/last item
         // in the dropdown list to enable selection with the keyboard
         this.handleInputKeyDown = (event) => {
+            if (event.defaultPrevented) {
+                return;
+            }
             const isForwardTab = event.key === TAB &&
                 !event.altKey &&
                 !event.metaKey &&
@@ -330,11 +363,6 @@ export class Menu {
                 }
             }
         };
-        this.handleEscapeCapture = (event) => {
-            if (event.key === ESCAPE && this.open) {
-                this.shouldRestoreFocusOnClose = true;
-            }
-        };
         this.onClose = () => {
             const restoreFocus = this.shouldRestoreFocusOnClose;
             this.shouldRestoreFocusOnClose = false;
@@ -529,25 +557,113 @@ export class Menu {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: 'a54987a1be3e3fcc4ceae95c7cc334411a0c474f', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '1bacdb5d1387b8357d1c6f93db47369c8cf64a4f', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'fbc7982b1dcab9fd5172a95e7a7f0328281f3a35', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '48b96e2e6fe815f4cc976553dfea7b26f36ea6d4', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: '720330cf7d07c491a5a9e58a2567896f5526c45a', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'd3db72fa9e12bafbb039e6a94a1052edf64e060e', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '591f97a745488fbff7eb8fc06b14d2f6e0d21fa6', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '829a9578894165b28100c4cab519ced0cb7689a0', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }
     itemsWatcher() {
         this.clearSearch();
+        this.normalizedHotkeyCache.clear();
         this.setFocus();
     }
+    connectedCallback() {
+        if (this.open) {
+            document.addEventListener('keydown', this.handleDocumentKeyDown, true);
+        }
+    }
+    disconnectedCallback() {
+        document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
+    }
     openWatcher(newValue) {
         const opened = newValue;
         if (opened) {
-            document.addEventListener('keydown', this.handleEscapeCapture, true);
+            document.addEventListener('keydown', this.handleDocumentKeyDown, true);
             this.setFocus();
         }
         else {
-            document.removeEventListener('keydown', this.handleEscapeCapture, true);
+            document.removeEventListener('keydown', this.handleDocumentKeyDown, true);
             this.clearSearch();
         }
     }
+    isFromTextInput(event) {
+        const path = typeof event.composedPath === 'function'
+            ? event.composedPath()
+            : [];
+        for (const node of path) {
+            if (!(node instanceof HTMLElement)) {
+                continue;
+            }
+            if (node.isContentEditable) {
+                return true;
+            }
+            const tagName = node.tagName;
+            if (tagName === 'INPUT' ||
+                tagName === 'TEXTAREA' ||
+                tagName === 'SELECT') {
+                return true;
+            }
+        }
+        return false;
+    }
+    // Only Ctrl and Meta count as "real" modifiers for the text-input bypass.
+    // Alt/Option is intentionally excluded because it is used for typing
+    // special characters on international keyboards and macOS (e.g. Option+e
+    // for é, AltGr+e for € on Windows). This means alt-only hotkeys like
+    // "alt+x" will NOT fire while a text input (e.g. the search field) is
+    // focused — only Ctrl/Meta combos will. AltGraph is also explicitly
+    // rejected because Windows synthesizes ctrlKey=true for AltGr keypresses.
+    hasModifier(event) {
+        var _a;
+        if ((_a = event.getModifierState) === null || _a === void 0 ? void 0 : _a.call(event, 'AltGraph')) {
+            return false;
+        }
+        return event.ctrlKey || event.metaKey;
+    }
+    isReservedMenuHotkey(hotkey) {
+        const tokens = tokenizeHotkeyString(hotkey);
+        const key = tokens.at(-1);
+        if (!key) {
+            return false;
+        }
+        const hasModifiers = tokens.length > 1;
+        if (hasModifiers) {
+            return false;
+        }
+        return (key === 'arrowup' ||
+            key === 'arrowdown' ||
+            key === 'arrowleft' ||
+            key === 'arrowright' ||
+            key === 'tab' ||
+            key === 'enter' ||
+            key === 'space' ||
+            key === 'escape');
+    }
+    findMenuItemByHotkey(pressedHotkey) {
+        for (const item of this.visibleItems) {
+            if (!this.isMenuItem(item) || item.disabled) {
+                continue;
+            }
+            const rawHotkey = item.hotkey;
+            if (!rawHotkey) {
+                continue;
+            }
+            const normalized = this.getNormalizedHotkey(rawHotkey);
+            if (normalized && normalized === pressedHotkey) {
+                return item;
+            }
+        }
+        return null;
+    }
+    getNormalizedHotkey(raw) {
+        var _a;
+        const cacheKey = raw.trim();
+        if (this.normalizedHotkeyCache.has(cacheKey)) {
+            return (_a = this.normalizedHotkeyCache.get(cacheKey)) !== null && _a !== void 0 ? _a : null;
+        }
+        const normalized = normalizeHotkeyString(cacheKey);
+        this.normalizedHotkeyCache.set(cacheKey, normalized);
+        return normalized;
+    }
     getBreadcrumbsItems() {
         const breadCrumbItems = [];
         let currentItem = this.currentSubMenu;
@@ -610,7 +726,11 @@ export class Menu {
             return this.searchResults;
         }
         else if (Array.isArray((_a = this.currentSubMenu) === null || _a === void 0 ? void 0 : _a.items)) {
-            return this.currentSubMenu.items.map((item) => (Object.assign(Object.assign({}, item), { parentItem: this.currentSubMenu })));
+            if (this.cachedSubMenuSource !== this.currentSubMenu) {
+                this.cachedSubMenuSource = this.currentSubMenu;
+                this.cachedSubMenuItems = this.currentSubMenu.items.map((item) => (Object.assign(Object.assign({}, item), { parentItem: this.currentSubMenu })));
+            }
+            return this.cachedSubMenuItems;
         }
         return this.items;
     }

package/dist/collection/components/menu-list/menu-list-renderer.js

@@ -59,12 +59,15 @@ export class MenuListRenderer {
             const hasSubMenu = this.hasSubItems(item);
             const hasMeta = hasSubMenu ||
                 item.badge !== undefined ||
-                (!!('commandText' in item) && !!item.commandText);
+                !!item.hotkey ||
+                !!item.commandText;
             const primaryComponent = hasMeta
                 ? {
                     name: 'limel-menu-item-meta',
                     props: {
                         commandText: item.commandText,
+                        hotkey: item.hotkey,
+                        disabled: !!item.disabled,
                         badge: item.badge,
                         showChevron: hasSubMenu,
                     },

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

@@ -88,7 +88,7 @@ export class MenuList {
             iconSize: this.iconSize,
         };
         const html = this.MenuListRenderer.render(this.items, this.config);
-        return h("div", { key: 'a0d43ee28ff19b78b99ed0ec7fc0d1ff79f235e0', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: '1c044c711555d155c5559f8b787a3bbad09b7526', class: "mdc-menu mdc-menu-surface" }, html);
     }
     itemsChanged() {
         setTimeout(() => {

package/dist/collection/components/menu-surface/menu-surface.js

@@ -105,7 +105,7 @@ export class MenuSurface {
             'mdc-elevation-transition': true,
             'mdc-elevation--z4': true,
         };
-        return (h("div", { key: '0d834530b1abaa97c0443447ae573ff4eb000ea7', class: classList, tabindex: "-1" }, h("slot", { key: 'caea2ed90273cdacfd7e79ae2f2b5aff476dc7ed' })));
+        return (h("div", { key: '254247a3cd25908f96e55028df567663dd4d736a', class: classList, tabindex: "-1" }, h("slot", { key: 'eb7d1042a28585242d212cf40a34018240cb0502' })));
     }
     static get is() { return "limel-menu-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notched-outline/notched-outline.js

@@ -59,7 +59,7 @@ export class NotchedOutline {
         this.hasFloatingLabel = false;
     }
     render() {
-        return (h("div", { key: 'b50040fa4388423e4a918aead75dc425c8b1b2f4', class: "limel-notched-outline" }, h("slot", { key: 'd8c2b975c3f82ec33dffd773b7461e28427f1dbe', name: "content" }), h("span", { key: '981dc0b50cf8de443fd70e25272819af2e91e4ac', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'b0f18a32926f2a1e308675911ac2cdcc8b8adb69', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'ac7812bc4b30d93b8cf73b49db14f51db8845d82', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: '5dd66f7356821043d750963f18ef8f39889e65cc', class: "limel-notched-outline" }, h("slot", { key: '1b2072f7acd112137188b570229470677458ace7', name: "content" }), h("span", { key: '3d1d04a75ff0459b53294a2b2bbb4f15192409cd', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '9677d3b3bc1f37e954c3ab2907e98db8b9122466', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '62a494be847b2181cdd00f20e50cffbbc121bfd2', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {

package/dist/collection/components/picker/picker.js

@@ -188,7 +188,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '996808bffc8715bab47a4b225d02d57247b3287d', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: 'e20f22b6907ad1d28f8b8c0847e5080faca09b3b', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }

package/dist/collection/components/popover/popover.js

@@ -127,7 +127,7 @@ export class Popover {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: 'ac6e4c9358d68223f43ea60a29302d725438cf05', class: "trigger-anchor" }, h("slot", { key: '5e5ae7d194f7cc005573e909cd10343283603a7f', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '5d4bda03c1ea9b07c17b7222fb2f30e29af9b3d3', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '0f9804103a70f924375429ba7e96ad62858cb2ea', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: '53e64435fa661015fbbf2e449890864c8008c329', class: "trigger-anchor" }, h("slot", { key: '85336e8f76377921850ffc7704c7588707c45066', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'a40bfde87375a494ac5404911b4b1f058a55becf', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '396e369ae3e61a79bfd2f520e05187a6ff85f834', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;

package/dist/collection/components/popover-surface/popover-surface.js

@@ -8,7 +8,7 @@ export class PopoverSurface {
         this.appendElement();
     }
     render() {
-        return h("div", { key: '553798a32efa190cbceb65aec00b56bfb5eb25f7', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '72e73b254be6cebbd27332329b10a58210ae0352', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');

package/dist/collection/components/portal/portal.js

@@ -120,7 +120,7 @@ export class Portal {
         }
     }
     render() {
-        return h("slot", { key: 'e41cbd7a44b0e55525f9e99d056cc9ab627082d0' });
+        return h("slot", { key: 'd6ed0d276afec19ba5ffd4d6a6fcf96937127d6a' });
     }
     onVisible() {
         if (!this.container && this.visible) {

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -37,7 +37,7 @@ export class RadioButtonGroup {
         };
     }
     render() {
-        return (h("limel-list", { key: 'f6aca37c9b00f4f92b1a048f8d7d0dd86e6f8c1f', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: 'd42e6342d4fd79d34cb2c6a9d25d3dfe577e9a99', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
     }
     createItems() {
         return this.items.map((option) => {

package/dist/collection/components/radio-button-group/radio-button.js

@@ -31,12 +31,12 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonComponent {
     render() {
-        return (h(Host, { key: '09013c710b49de8c6aa1b3b0342add87ee69230b', class: {
+        return (h(Host, { key: '64623e09534c5b4e457029cbed4865d97d3cc19e', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: '0199ebfe42f8d46ccc848c00725739617863a1b3', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '80fc53f911d4524267a5c9e915e2c3ba7d3b58e8', class: "box" }), h("label", { key: '6e260d713cd802b12bdd88251a79eaaaf97ea9e8', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: '4eb816e8031d20bbfa5beb32798e50e5d3747895', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '9e7d7db22981a16b4655d7cbcd7c3eb2462a7953', class: "box" }), h("label", { key: '4b2061d351b2d4d03d6e5763bc132be46d146e48', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
     static get is() { return "limel-radio-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/select/select.js

@@ -104,7 +104,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '12c687df2b999aa6d8a06c7fab59bda425678791', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '0bc73012998fd97b022c0bdbab31e6806a3ddfd3', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {

package/dist/collection/components/shortcut/shortcut.js

@@ -56,7 +56,7 @@ export class Shortcut {
     render() {
         var _a, _b, _c, _d, _e;
         const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
-        return (h(Host, { key: '6d8f34f6545714c032ca8a106bd19b8c25b49c9e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'ea703109895bf2baedeb85a573a7b9b95b6c77a5', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '065f25188bb6a712e3933d89067f6151362eee72', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '7c0ac50c83d7047d2745427c210e278150951b02' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: '68fa485e1c6552337de3e8304dcb14bd2056f3cc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'e83e54fcd7776e92938795a2f623e23df14985b0', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: 'b1aa7fec058ef958c71b0a01fc3c1340e66a0422', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '59132d5f6b5d99f38bba8143a2ff39166dce8648' })), this.renderLabel(), this.renderNotification()));
     }
     static get is() { return "limel-shortcut"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/slider/slider.js

@@ -243,7 +243,7 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: '770ec2fd58abc5cc34bae66a4b8ec4928c233327', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'a3cd421f2bdb9e10ebab358ffc18d7aac06068da', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: 'a76ef62e54db1061e69078bf26b95554f9c59186', slot: "content" }, this.renderRangeContainer(), this.renderSliderContainer(inputProps))), this.renderHelperLine()));
+        return (h(Host, { key: '4d8742b0c40d836b9cab61988cafc42e90843e31', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'a775070fe819f15542ad3ba4a2a3839bcf392051', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: 'f01ca4b8c2f71ef4ea7466aff58d821c484e20bc', slot: "content" }, this.renderRangeContainer(), this.renderSliderContainer(inputProps))), this.renderHelperLine()));
     }
     watchDisabled() {
         this.updateDisabledState();