@limetech/lime-elements 39.9.4 → 39.10.0

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

@@ -1,8 +1,9 @@
 import { h, } from "@stencil/core";
 import { createRandomString } from "../../util/random-string";
 import { zipObject, isFunction } from "lodash-es";
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, TAB, } from "../../util/keycodes";
+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 {
@@ -75,6 +77,35 @@ export class Menu {
          * Clicking it navigates back from a sub-menu to the root 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;
@@ -164,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,10 +364,14 @@ export class Menu {
             }
         };
         this.onClose = () => {
+            const restoreFocus = this.shouldRestoreFocusOnClose;
+            this.shouldRestoreFocusOnClose = false;
             this.cancel.emit();
             this.open = false;
             this.currentSubMenu = null;
-            setTimeout(this.focusTrigger, 0);
+            if (restoreFocus) {
+                setTimeout(this.focusTrigger, 0);
+            }
         };
         this.onTriggerClick = (event) => {
             event.stopPropagation();
@@ -519,23 +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: '7769d71e01b3e7835fdec458a56858c10eb0c71a', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '800c993b63e1ae0fd94d1c984ffbfaef96eec627', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cc4da9d70f09030f4c41567611b42dda8ad4403e', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '5bb2a262f66d2f9b7bcbe46009574daf5eddf589', 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.handleDocumentKeyDown, true);
             this.setFocus();
         }
         else {
+            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;
@@ -598,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

@@ -117,17 +117,17 @@ export class Popover {
             document.addEventListener('click', this.globalClickListener, {
                 capture: true,
             });
-            document.addEventListener('keyup', this.handleGlobalKeyPress);
+            document.addEventListener('keydown', this.handleGlobalKeyPress);
         }
         else {
             document.removeEventListener('click', this.globalClickListener);
-            document.removeEventListener('keyup', this.handleGlobalKeyPress);
+            document.removeEventListener('keydown', this.handleGlobalKeyPress);
         }
     }
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: '862c9700bce5d7a3f55b20cb4ef8eb8346e62a25', class: "trigger-anchor" }, h("slot", { key: '08dd9ac01930db903dba46c15e25d00727f251ff', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'bc03a58425d52d5d7447a5ed1308ee51c51480b5', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'a9b117aee79359fa1f2800b914aed8ed8ab2a203', 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;
@@ -135,7 +135,7 @@ export class Popover {
         if (this.open && !clickedInside) {
             event.stopPropagation();
             event.preventDefault();
-            this.requestCloseAndRestoreFocus();
+            this.close.emit();
         }
     }
     getCssProperties() {

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

@@ -7,7 +7,7 @@ import { isMultiple } from "../../util/multiple";
 import { createRandomString } from "../../util/random-string";
 import { SelectTemplate, triggerIconColorWarning } from "./select.template";
 /**
- * @exampleComponent limel-example-select
+ * @exampleComponent limel-example-select-basic
  * @exampleComponent limel-example-select-with-icons
  * @exampleComponent limel-example-select-with-separators
  * @exampleComponent limel-example-select-with-secondary-text
@@ -104,7 +104,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '910cf9ba501b894f75553d65b4c41467743203af', 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

@@ -10,7 +10,7 @@ import { getMouseEventHandlers } from "../../util/3d-tilt-hover-effect";
  * However, it is possible to override that behavior, by specifying a `target`
  * for the `link` property
  *
- * @exampleComponent limel-example-shortcut
+ * @exampleComponent limel-example-shortcut-basic
  * @exampleComponent limel-example-shortcut-notification
  * @exampleComponent limel-example-shortcut-styling
  * @exampleComponent limel-example-shortcut-with-click-handler
@@ -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: '4c999ffbf57f45f652d4bfa881b54e421a58df8f', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '5b7f3a5e43237b9a302bc63735b63a92c019eb2f', "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: '421faadecac1f5444ecab389574ad24cab6d7012', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '0d932adbb6b7c343b3120d01e866b29d4c165543' })), 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();

package/dist/collection/components/snackbar/snackbar.js

@@ -26,7 +26,7 @@ const hideAnimationDuration = 300;
  * [Dialog](#/component/limel-dialog/) is a better choice.
  * :::
  *
- * @exampleComponent limel-example-snackbar
+ * @exampleComponent limel-example-snackbar-basic
  * @exampleComponent limel-example-snackbar-with-action
  * @exampleComponent limel-example-snackbar-with-changing-messages
  * @exampleComponent limel-example-snackbar-dismissible
@@ -121,14 +121,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: 'e07fbddded6a243a118dd9122db77e8286d5733e', popover: "manual", style: {
+        return (h("aside", { key: 'ea6276745563c7dd62d3061da0b1c6a41b3d1243', popover: "manual", style: {
                 '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
                 '--snackbar-distance-to-top-edge': `${this.offset}px`,
             }, class: {
                 open: this.open,
                 'is-closing': this.closing,
                 'limel-portal--parent': true,
-            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'd672fadb9f690c99c60b0582cf371313278a9642', class: "surface" }, h("div", { key: '7502281b26c83fbac612d7896b25563255fd46e3', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
+            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'd5c42448d07093b5df96a44a9bdf2842b4bf9a9f', class: "surface" }, h("div", { key: '93a9ea81726b0e309ae54ab23270562702b59104', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

package/dist/collection/components/spinner/spinner.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 /**
- * @exampleComponent limel-example-spinner
+ * @exampleComponent limel-example-spinner-basic
  * @exampleComponent limel-example-spinner-color
  * @exampleComponent limel-example-spinner-size
  */
@@ -16,7 +16,7 @@ export class Spinner {
         this.limeBranded = false;
     }
     render() {
-        return (h(Host, { key: '2ea3c8e615b6f95452c1ce2f8d5eb9ee989b8612' }, h("svg", { key: 'd0ff66dbbf8f7fefa0c6a52cd51a7fca2abe0c4a', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: '5d7275ec64f2e3b07c7e25065d8d115de772324e' }, h("svg", { key: '41e5110dc29d6112261bea4afbd8cffde213cde0', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

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

@@ -55,9 +55,9 @@ export class SplitButton {
         };
     }
     render() {
-        return (h(Host, { key: '7ec8239476acbb6a539f5c510c315834c3cc7d13', class: {
+        return (h(Host, { key: 'c36360c226a10f303158e13033451541d4e232fd', class: {
                 'has-menu': this.items.length > 0,
-            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: 'cc1b19340e231dd0851c91eed4633bdc72b83124', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
+            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: 'bc63b91941bfb71d090a04ff7dc46cf97d0c18e7', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
     }
     static get is() { return "limel-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js

@@ -15,7 +15,7 @@ import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter
  * But there is an important difference between the two! Please read our guidelines about
  * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
  *
- * @exampleComponent limel-example-switch
+ * @exampleComponent limel-example-switch-basic
  * @exampleComponent limel-example-switch-helper-text
  * @exampleComponent limel-example-switch-readonly
  */
@@ -78,7 +78,7 @@ export class Switch {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: '3acdf2f3d34ab4cc8411638be9c8fe66a98b173d' }, this.readonly
+        return (h(Host, { key: '4b90d19763474c8a9f54364091797a3eb537fbc9' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -25,7 +25,7 @@ const OVERLAP_PERCENTAGE = 20;
  * A tab will never be removed or get disabled, even if there is no content under it.
  * :::
  *
- * @exampleComponent limel-example-tab-bar
+ * @exampleComponent limel-example-tab-bar-basic
  * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
  * @exampleComponent limel-example-tab-bar-with-equal-tab-width
  */
@@ -62,11 +62,11 @@ export class TabBar {
         this.tearDown();
     }
     render() {
-        return (h("div", { key: '5c2300a224442e40e2dc2f6b49538f0688bc7a53', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: 'bd4d9d8f3f302cf1592fab3cfd15d3316f132470', class: {
+        return (h("div", { key: '764d28d7417c3c2801491c54d6c5db36b022adda', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: 'ee7a869e13069c2baac39b6abb8ac9f7353f8655', class: {
                 'mdc-tab-scroller': true,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, h("div", { key: 'f48abfa3b0169e952befc47e8adf9574aee616af', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: '7322a7ab34b24822a1043ad3172f1b2f3efc6244', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '668ebaaf096d5926b17e1e1a50b0569c4e6d11c1', class: "scroll-fade left" }), h("div", { key: '02c3b8484f4467ece6e1a0617578b0967641a536', class: "scroll-button left" }, h("button", { key: '22bd6170b849aadb7a78b3f0fe2ae0213d7a6cb5', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '62f4b1fff0ab4fac4b8b379c2ab5bda44579e589', name: "angle_left" }))), h("div", { key: 'fe3e1014ffde25bea6f16731e0edc3ce280f321d', class: "scroll-fade right" }), h("div", { key: 'd79950639da735d25053272ae0a53f28d3ce233c', class: "scroll-button right" }, h("button", { key: '24b05b9fdae0479c15159253d7c785853db21b1d', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '5388965c9a27d888583ddc2d892ea5c3810500e4', name: "angle_right" }))))));
+            } }, h("div", { key: '55a955d4686181d2ded9ae24b525e863a9c9514c', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: '005a0150e3f03b9f8ca4facd767e7e05b17b5689', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '68956d9c7c9d17e9b572014e4e865e20680fbc98', class: "scroll-fade left" }), h("div", { key: '268c2616ff24edf6959931a324f9b242eec28a87', class: "scroll-button left" }, h("button", { key: '4a7f75826b7344ba6f88de784a2c9928c0779cd0', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '7d2e61ed0001a17a51aa71064f58f5c40692c4b7', name: "angle_left" }))), h("div", { key: 'dce1d143623bcdf84607428e205dc88d7b9a16d7', class: "scroll-fade right" }), h("div", { key: 'bc6f06e98950256a67748095999d676173871b2f', class: "scroll-button right" }, h("button", { key: '1b5aac1ebd4dea1d2eff4d88b154c62d87a353c1', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '022f900f20506369ffa79a045e144fcb213f4006', name: "angle_right" }))))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

package/dist/collection/components/tab-panel/tab-panel.js

@@ -17,7 +17,7 @@ import { dispatchResizeEvent } from "../../util/dispatch-resize-event";
  *
  * @slot - Content to put inside the `limel-tab-panel`. Each slotted element
  * must have the `id` attribute equal to the id of the tab it belongs to.
- * @exampleComponent limel-example-tab-panel
+ * @exampleComponent limel-example-tab-panel-basic
  */
 export class TabPanel {
     constructor() {
@@ -56,7 +56,7 @@ export class TabPanel {
         this.tabs.forEach(this.setTabStatus);
     }
     render() {
-        return (h(Host, { key: 'dbd02a89b1b4c383652157b6466c8c0f94ef1ede', onChangeTab: this.handleChangeTabs }, h("div", { key: 'ccee27da7513a7e1bc35f74f35d9139ed3c640d2', class: "tab-panel" }, h("limel-tab-bar", { key: '770e20bcd0567d1538709b2172ee16cc2f80db5f', tabs: this.tabs }), h("div", { key: '6a320ec4081da33674a9174bc90edaec223f52e8', class: "tab-content" }, h("slot", { key: 'e31d4491e2237283be6497fe64542d93003b6c63' })))));
+        return (h(Host, { key: '831b5534fb89f2892ede144fdbdd9747e4e8ef83', onChangeTab: this.handleChangeTabs }, h("div", { key: '7215d031f6558985ce6d7b3b5ee0d0d57b546e4b', class: "tab-panel" }, h("limel-tab-bar", { key: '4891c70a6aa19357a19c8a08c207ffae1ee1ce73', tabs: this.tabs }), h("div", { key: 'e682144fba03c72a220e57de4668f83690b54572', class: "tab-content" }, h("slot", { key: '192b28283d6aa49d27fbe31395728441e34cb252' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();