@limetech/lime-elements 39.9.4 → 39.10.0

package/dist/types/components.d.ts

@@ -226,7 +226,7 @@ export namespace Components {
     /**
      * The Badge component can be used to display a notification badge,
      * optionally with a number or a text label.
-     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-basic
      * @exampleComponent limel-example-badge-number
      * @exampleComponent limel-example-badge-string
      */
@@ -237,7 +237,7 @@ export namespace Components {
         "label"?: number | string;
     }
     /**
-     * @exampleComponent limel-example-banner
+     * @exampleComponent limel-example-banner-basic
      */
     interface LimelBanner {
         /**
@@ -362,7 +362,7 @@ export namespace Components {
      * Within the group, icon buttons will all have the same width, while each text button
      * inherits its width from its content.
      * @exampleComponent limel-example-button-group-icons
-     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-basic
      * @exampleComponent limel-example-button-group-mix
      * @exampleComponent limel-example-button-group-badges
      * @exampleComponent limel-example-button-group-composite
@@ -598,7 +598,7 @@ export namespace Components {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * 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-checkbox
+     * @exampleComponent limel-example-checkbox-basic
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
      */
@@ -794,7 +794,7 @@ export namespace Components {
      * }
      * ```
      * :::
-     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-basic
      * @exampleComponent limel-example-chip-set-choice
      * @exampleComponent limel-example-chip-set-filter
      * @exampleComponent limel-example-chip-set-filter-badge
@@ -918,7 +918,7 @@ export namespace Components {
      * Of course such numbers, if bigger than `maxValue` will be visualized as a
      * full progress.
      * :::
-     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-basic
      * @exampleComponent limel-example-circular-progress-sizes
      * @exampleComponent limel-example-circular-progress-props
      * @exampleComponent limel-example-circular-progress-css-variables
@@ -1019,7 +1019,7 @@ export namespace Components {
         "translationLanguage": Languages;
     }
     /**
-     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-basic
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
      * @exampleComponent limel-example-code-editor-copy
@@ -1356,7 +1356,7 @@ export namespace Components {
      * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
      * from Lime Web Components to open dialogs in Lime CRM.
      * :::
-     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-basic
      * @exampleComponent limel-example-dialog-nested-close-events
      * @exampleComponent limel-example-dialog-heading
      * @exampleComponent limel-example-dialog-heading-actions
@@ -1491,7 +1491,7 @@ export namespace Components {
      * of the Checkbox or Toggle switch in the `readonly` state may not always
      * provide the best way of _visualizing information_, potentially leading to
      * confusion and negatively affecting the end-users' experience.
-     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-basic
      * @exampleComponent limel-example-dynamic-label-readonly-boolean
      */
     interface LimelDynamicLabel {
@@ -1563,7 +1563,7 @@ export namespace Components {
      * - Choose a file
      * and similar phrases...
      * :::
-     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-basic
      * @exampleComponent limel-example-file-custom-icon
      * @exampleComponent limel-example-file-menu-items
      * @exampleComponent limel-example-file-accepted-types
@@ -1618,7 +1618,7 @@ export namespace Components {
      * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-dropzone
+     * @exampleComponent limel-example-file-dropzone-basic
      * @exampleComponent limel-example-file-dropzone-type-filtering
      * @private 
      */
@@ -1653,7 +1653,7 @@ export namespace Components {
      * After receiving the files, the component emits a `filesSelected` event.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-input
+     * @exampleComponent limel-example-file-input-basic
      * @exampleComponent limel-example-file-input-type-filtering
      * @private 
      */
@@ -1893,7 +1893,7 @@ export namespace Components {
      * Background colors behind icons make them look like "call to action" buttons
      * and take a lot of attention from users.
      * :::
-     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-basic
      * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
@@ -1935,7 +1935,7 @@ export namespace Components {
      * Using this component designers empower users to grasp the functionality
      * of an app more effortlessly, minimizes the learning curve,
      * transforming complex features into accessible opportunities for exploration.
-     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-help-basic
      * @exampleComponent limel-example-read-more
      * @exampleComponent limel-example-open-direction
      * @exampleComponent limel-example-placement
@@ -1980,7 +1980,7 @@ export namespace Components {
      * and to avoid importing styles separately.
      * Also this enables us to open the helper line in limel-portal,
      * more easily without having to send the styles to the portal.
-     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
      * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -2012,6 +2012,28 @@ export namespace Components {
          */
         "maxLength"?: number;
     }
+    /**
+     * 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 
+     */
+    interface LimelHotkey {
+        /**
+          * When `true`, the hotkey is rendered in a visually disabled state.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * The hotkey string to visualize, e.g. `"meta+c"` or `"shift+enter"`.
+         */
+        "value": string;
+    }
     /**
      * :::important
      * To install your icon set correctly, please read the [documentation here](#/).
@@ -2076,7 +2098,7 @@ export namespace Components {
      * If clicking on the component should navigate the user to
      * a new screen or web page, you need to provide a URL,
      * using the `link` property.
-     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-basic
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
@@ -2266,7 +2288,7 @@ export namespace Components {
     /**
      * The linear progress component can be used to visualize the current state of a progress in a scale;
      * for example percentage of completion of a task.
-     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-basic
      * @exampleComponent limel-example-linear-progress-indeterminate
      * @exampleComponent limel-example-linear-progress-accessible-label
      * @exampleComponent limel-example-linear-progress-color
@@ -2293,7 +2315,7 @@ export namespace Components {
         "value": number;
     }
     /**
-     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-basic
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -2485,13 +2507,14 @@ export namespace Components {
      * @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
      */
     interface LimelMenu {
@@ -2574,6 +2597,15 @@ export namespace Components {
           * Use to display optional keyboard shortcut or command hint, e.g. `⌘ + K`
          */
         "commandText"?: string;
+        /**
+          * Will be set to `true` when the menu item is disabled.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Hotkey to display. When provided, `commandText` is ignored.
+         */
+        "hotkey"?: string;
         /**
           * Shows a submenu chevron to indicate nested items
           * @default false
@@ -3154,7 +3186,7 @@ export namespace Components {
         "selectedItem"?: ListItem<string | number>;
     }
     /**
-     * @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
@@ -3215,7 +3247,7 @@ export namespace Components {
      * By default, this navigation will happen within the same browser tab.
      * 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
@@ -3331,7 +3363,7 @@ export namespace Components {
      * For more complex interactions and for delivering more detailed information,
      * [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
@@ -3379,7 +3411,7 @@ export namespace Components {
         "timeout"?: number;
     }
     /**
-     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-basic
      * @exampleComponent limel-example-spinner-color
      * @exampleComponent limel-example-spinner-size
      */
@@ -3455,7 +3487,7 @@ export namespace Components {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * 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
      */
@@ -3508,7 +3540,7 @@ export namespace Components {
      * Avoid having long labels for tabs.
      * 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
      */
@@ -3531,7 +3563,7 @@ export namespace Components {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
-     * @exampleComponent limel-example-tab-panel
+     * @exampleComponent limel-example-tab-panel-basic
      */
     interface LimelTabPanel {
         /**
@@ -3541,7 +3573,7 @@ export namespace Components {
         "tabs": Tab[];
     }
     /**
-     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-basic
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
@@ -4149,7 +4181,7 @@ declare global {
     /**
      * The Badge component can be used to display a notification badge,
      * optionally with a number or a text label.
-     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-basic
      * @exampleComponent limel-example-badge-number
      * @exampleComponent limel-example-badge-string
      */
@@ -4160,7 +4192,7 @@ declare global {
         new (): HTMLLimelBadgeElement;
     };
     /**
-     * @exampleComponent limel-example-banner
+     * @exampleComponent limel-example-banner-basic
      */
     interface HTMLLimelBannerElement extends Components.LimelBanner, HTMLStencilElement {
     }
@@ -4253,7 +4285,7 @@ declare global {
      * Within the group, icon buttons will all have the same width, while each text button
      * inherits its width from its content.
      * @exampleComponent limel-example-button-group-icons
-     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-basic
      * @exampleComponent limel-example-button-group-mix
      * @exampleComponent limel-example-button-group-badges
      * @exampleComponent limel-example-button-group-composite
@@ -4398,7 +4430,7 @@ declare global {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * 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-checkbox
+     * @exampleComponent limel-example-checkbox-basic
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
      */
@@ -4508,7 +4540,7 @@ declare global {
      * }
      * ```
      * :::
-     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-basic
      * @exampleComponent limel-example-chip-set-choice
      * @exampleComponent limel-example-chip-set-filter
      * @exampleComponent limel-example-chip-set-filter-badge
@@ -4548,7 +4580,7 @@ declare global {
      * Of course such numbers, if bigger than `maxValue` will be visualized as a
      * full progress.
      * :::
-     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-basic
      * @exampleComponent limel-example-circular-progress-sizes
      * @exampleComponent limel-example-circular-progress-props
      * @exampleComponent limel-example-circular-progress-css-variables
@@ -4584,7 +4616,7 @@ declare global {
         "change": string;
     }
     /**
-     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-basic
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
      * @exampleComponent limel-example-code-editor-copy
@@ -4756,7 +4788,7 @@ declare global {
      * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
      * from Lime Web Components to open dialogs in Lime CRM.
      * :::
-     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-basic
      * @exampleComponent limel-example-dialog-nested-close-events
      * @exampleComponent limel-example-dialog-heading
      * @exampleComponent limel-example-dialog-heading-actions
@@ -4865,7 +4897,7 @@ declare global {
      * of the Checkbox or Toggle switch in the `readonly` state may not always
      * provide the best way of _visualizing information_, potentially leading to
      * confusion and negatively affecting the end-users' experience.
-     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-basic
      * @exampleComponent limel-example-dynamic-label-readonly-boolean
      */
     interface HTMLLimelDynamicLabelElement extends Components.LimelDynamicLabel, HTMLStencilElement {
@@ -4929,7 +4961,7 @@ declare global {
      * - Choose a file
      * and similar phrases...
      * :::
-     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-basic
      * @exampleComponent limel-example-file-custom-icon
      * @exampleComponent limel-example-file-menu-items
      * @exampleComponent limel-example-file-accepted-types
@@ -4962,7 +4994,7 @@ declare global {
      * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-dropzone
+     * @exampleComponent limel-example-file-dropzone-basic
      * @exampleComponent limel-example-file-dropzone-type-filtering
      * @private 
      */
@@ -4992,7 +5024,7 @@ declare global {
      * After receiving the files, the component emits a `filesSelected` event.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-input
+     * @exampleComponent limel-example-file-input-basic
      * @exampleComponent limel-example-file-input-type-filtering
      * @private 
      */
@@ -5168,7 +5200,7 @@ declare global {
      * Background colors behind icons make them look like "call to action" buttons
      * and take a lot of attention from users.
      * :::
-     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-basic
      * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
@@ -5193,7 +5225,7 @@ declare global {
      * Using this component designers empower users to grasp the functionality
      * of an app more effortlessly, minimizes the learning curve,
      * transforming complex features into accessible opportunities for exploration.
-     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-help-basic
      * @exampleComponent limel-example-read-more
      * @exampleComponent limel-example-open-direction
      * @exampleComponent limel-example-placement
@@ -5226,7 +5258,7 @@ declare global {
      * and to avoid importing styles separately.
      * Also this enables us to open the helper line in limel-portal,
      * more easily without having to send the styles to the portal.
-     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
      * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -5241,6 +5273,23 @@ declare global {
         prototype: HTMLLimelHelperLineElement;
         new (): HTMLLimelHelperLineElement;
     };
+    /**
+     * 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 
+     */
+    interface HTMLLimelHotkeyElement extends Components.LimelHotkey, HTMLStencilElement {
+    }
+    var HTMLLimelHotkeyElement: {
+        prototype: HTMLLimelHotkeyElement;
+        new (): HTMLLimelHotkeyElement;
+    };
     /**
      * :::important
      * To install your icon set correctly, please read the [documentation here](#/).
@@ -5279,7 +5328,7 @@ declare global {
      * If clicking on the component should navigate the user to
      * a new screen or web page, you need to provide a URL,
      * using the `link` property.
-     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-basic
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
@@ -5332,7 +5381,7 @@ declare global {
     /**
      * The linear progress component can be used to visualize the current state of a progress in a scale;
      * for example percentage of completion of a task.
-     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-basic
      * @exampleComponent limel-example-linear-progress-indeterminate
      * @exampleComponent limel-example-linear-progress-accessible-label
      * @exampleComponent limel-example-linear-progress-color
@@ -5349,7 +5398,7 @@ declare global {
         "interact": ListItem;
     }
     /**
-     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-basic
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -5465,13 +5514,14 @@ declare global {
      * @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
      */
     interface HTMLLimelMenuElement extends Components.LimelMenu, HTMLStencilElement {
@@ -5867,7 +5917,7 @@ declare global {
         "change": Option | Option[];
     }
     /**
-     * @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
@@ -5899,7 +5949,7 @@ declare global {
      * By default, this navigation will happen within the same browser tab.
      * 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
@@ -5955,7 +6005,7 @@ declare global {
      * For more complex interactions and for delivering more detailed information,
      * [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
@@ -5977,7 +6027,7 @@ declare global {
         new (): HTMLLimelSnackbarElement;
     };
     /**
-     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-basic
      * @exampleComponent limel-example-spinner-color
      * @exampleComponent limel-example-spinner-size
      */
@@ -6032,7 +6082,7 @@ declare global {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * 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
      */
@@ -6068,7 +6118,7 @@ declare global {
      * Avoid having long labels for tabs.
      * 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
      */
@@ -6101,7 +6151,7 @@ declare global {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
-     * @exampleComponent limel-example-tab-panel
+     * @exampleComponent limel-example-tab-panel-basic
      */
     interface HTMLLimelTabPanelElement extends Components.LimelTabPanel, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelTabPanelElementEventMap>(type: K, listener: (this: HTMLLimelTabPanelElement, ev: LimelTabPanelCustomEvent<HTMLLimelTabPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6127,7 +6177,7 @@ declare global {
         "selectAll": boolean;
     }
     /**
-     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-basic
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
@@ -6326,6 +6376,7 @@ declare global {
         "limel-help": HTMLLimelHelpElement;
         "limel-help-content": HTMLLimelHelpContentElement;
         "limel-helper-line": HTMLLimelHelperLineElement;
+        "limel-hotkey": HTMLLimelHotkeyElement;
         "limel-icon": HTMLLimelIconElement;
         "limel-icon-button": HTMLLimelIconButtonElement;
         "limel-info-tile": HTMLLimelInfoTileElement;
@@ -6515,7 +6566,7 @@ declare namespace LocalJSX {
     /**
      * The Badge component can be used to display a notification badge,
      * optionally with a number or a text label.
-     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-basic
      * @exampleComponent limel-example-badge-number
      * @exampleComponent limel-example-badge-string
      */
@@ -6526,7 +6577,7 @@ declare namespace LocalJSX {
         "label"?: number | string;
     }
     /**
-     * @exampleComponent limel-example-banner
+     * @exampleComponent limel-example-banner-basic
      */
     interface LimelBanner {
         /**
@@ -6647,7 +6698,7 @@ declare namespace LocalJSX {
      * Within the group, icon buttons will all have the same width, while each text button
      * inherits its width from its content.
      * @exampleComponent limel-example-button-group-icons
-     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-basic
      * @exampleComponent limel-example-button-group-mix
      * @exampleComponent limel-example-button-group-badges
      * @exampleComponent limel-example-button-group-composite
@@ -6895,7 +6946,7 @@ declare namespace LocalJSX {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * 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-checkbox
+     * @exampleComponent limel-example-checkbox-basic
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
      */
@@ -7103,7 +7154,7 @@ declare namespace LocalJSX {
      * }
      * ```
      * :::
-     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-basic
      * @exampleComponent limel-example-chip-set-choice
      * @exampleComponent limel-example-chip-set-filter
      * @exampleComponent limel-example-chip-set-filter-badge
@@ -7231,7 +7282,7 @@ declare namespace LocalJSX {
      * Of course such numbers, if bigger than `maxValue` will be visualized as a
      * full progress.
      * :::
-     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-basic
      * @exampleComponent limel-example-circular-progress-sizes
      * @exampleComponent limel-example-circular-progress-props
      * @exampleComponent limel-example-circular-progress-css-variables
@@ -7332,7 +7383,7 @@ declare namespace LocalJSX {
         "translationLanguage"?: Languages;
     }
     /**
-     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-basic
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
      * @exampleComponent limel-example-code-editor-copy
@@ -7697,7 +7748,7 @@ declare namespace LocalJSX {
      * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
      * from Lime Web Components to open dialogs in Lime CRM.
      * :::
-     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-basic
      * @exampleComponent limel-example-dialog-nested-close-events
      * @exampleComponent limel-example-dialog-heading
      * @exampleComponent limel-example-dialog-heading-actions
@@ -7868,7 +7919,7 @@ declare namespace LocalJSX {
      * of the Checkbox or Toggle switch in the `readonly` state may not always
      * provide the best way of _visualizing information_, potentially leading to
      * confusion and negatively affecting the end-users' experience.
-     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-basic
      * @exampleComponent limel-example-dynamic-label-readonly-boolean
      */
     interface LimelDynamicLabel {
@@ -7940,7 +7991,7 @@ declare namespace LocalJSX {
      * - Choose a file
      * and similar phrases...
      * :::
-     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-basic
      * @exampleComponent limel-example-file-custom-icon
      * @exampleComponent limel-example-file-menu-items
      * @exampleComponent limel-example-file-accepted-types
@@ -8003,7 +8054,7 @@ declare namespace LocalJSX {
      * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-dropzone
+     * @exampleComponent limel-example-file-dropzone-basic
      * @exampleComponent limel-example-file-dropzone-type-filtering
      * @private 
      */
@@ -8047,7 +8098,7 @@ declare namespace LocalJSX {
      * After receiving the files, the component emits a `filesSelected` event.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-input
+     * @exampleComponent limel-example-file-input-basic
      * @exampleComponent limel-example-file-input-type-filtering
      * @private 
      */
@@ -8307,7 +8358,7 @@ declare namespace LocalJSX {
      * Background colors behind icons make them look like "call to action" buttons
      * and take a lot of attention from users.
      * :::
-     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-basic
      * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
@@ -8349,7 +8400,7 @@ declare namespace LocalJSX {
      * Using this component designers empower users to grasp the functionality
      * of an app more effortlessly, minimizes the learning curve,
      * transforming complex features into accessible opportunities for exploration.
-     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-help-basic
      * @exampleComponent limel-example-read-more
      * @exampleComponent limel-example-open-direction
      * @exampleComponent limel-example-placement
@@ -8394,7 +8445,7 @@ declare namespace LocalJSX {
      * and to avoid importing styles separately.
      * Also this enables us to open the helper line in limel-portal,
      * more easily without having to send the styles to the portal.
-     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
      * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -8426,6 +8477,28 @@ declare namespace LocalJSX {
          */
         "maxLength"?: number;
     }
+    /**
+     * 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 
+     */
+    interface LimelHotkey {
+        /**
+          * When `true`, the hotkey is rendered in a visually disabled state.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * The hotkey string to visualize, e.g. `"meta+c"` or `"shift+enter"`.
+         */
+        "value"?: string;
+    }
     /**
      * :::important
      * To install your icon set correctly, please read the [documentation here](#/).
@@ -8490,7 +8563,7 @@ declare namespace LocalJSX {
      * If clicking on the component should navigate the user to
      * a new screen or web page, you need to provide a URL,
      * using the `link` property.
-     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-basic
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
@@ -8676,7 +8749,7 @@ declare namespace LocalJSX {
     /**
      * The linear progress component can be used to visualize the current state of a progress in a scale;
      * for example percentage of completion of a task.
-     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-basic
      * @exampleComponent limel-example-linear-progress-indeterminate
      * @exampleComponent limel-example-linear-progress-accessible-label
      * @exampleComponent limel-example-linear-progress-color
@@ -8703,7 +8776,7 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     /**
-     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-basic
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -8907,13 +8980,14 @@ declare namespace LocalJSX {
      * @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
      */
     interface LimelMenu {
@@ -8999,6 +9073,15 @@ declare namespace LocalJSX {
           * Use to display optional keyboard shortcut or command hint, e.g. `⌘ + K`
          */
         "commandText"?: string;
+        /**
+          * Will be set to `true` when the menu item is disabled.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Hotkey to display. When provided, `commandText` is ignored.
+         */
+        "hotkey"?: string;
         /**
           * Shows a submenu chevron to indicate nested items
           * @default false
@@ -9649,7 +9732,7 @@ declare namespace LocalJSX {
         "selectedItem"?: ListItem<string | number>;
     }
     /**
-     * @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
@@ -9714,7 +9797,7 @@ declare namespace LocalJSX {
      * By default, this navigation will happen within the same browser tab.
      * 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
@@ -9834,7 +9917,7 @@ declare namespace LocalJSX {
      * For more complex interactions and for delivering more detailed information,
      * [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
@@ -9885,7 +9968,7 @@ declare namespace LocalJSX {
         "timeout"?: number;
     }
     /**
-     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-basic
      * @exampleComponent limel-example-spinner-color
      * @exampleComponent limel-example-spinner-size
      */
@@ -9965,7 +10048,7 @@ declare namespace LocalJSX {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * 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
      */
@@ -10022,7 +10105,7 @@ declare namespace LocalJSX {
      * Avoid having long labels for tabs.
      * 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
      */
@@ -10049,7 +10132,7 @@ declare namespace LocalJSX {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
-     * @exampleComponent limel-example-tab-panel
+     * @exampleComponent limel-example-tab-panel-basic
      */
     interface LimelTabPanel {
         /**
@@ -10063,7 +10146,7 @@ declare namespace LocalJSX {
         "tabs"?: Tab[];
     }
     /**
-     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-basic
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
@@ -10738,6 +10821,10 @@ declare namespace LocalJSX {
         "invalid": boolean;
         "helperTextId": string;
     }
+    interface LimelHotkeyAttributes {
+        "value": string;
+        "disabled": boolean;
+    }
     interface LimelIconAttributes {
         "size": IconSize;
         "name": string;
@@ -10825,6 +10912,8 @@ declare namespace LocalJSX {
     }
     interface LimelMenuItemMetaAttributes {
         "commandText": string;
+        "hotkey": string;
+        "disabled": boolean;
         "badge": string;
         "showChevron": boolean;
     }
@@ -11061,6 +11150,7 @@ declare namespace LocalJSX {
         "limel-help": Omit<LimelHelp, keyof LimelHelpAttributes> & { [K in keyof LimelHelp & keyof LimelHelpAttributes]?: LimelHelp[K] } & { [K in keyof LimelHelp & keyof LimelHelpAttributes as `attr:${K}`]?: LimelHelpAttributes[K] } & { [K in keyof LimelHelp & keyof LimelHelpAttributes as `prop:${K}`]?: LimelHelp[K] };
         "limel-help-content": Omit<LimelHelpContent, keyof LimelHelpContentAttributes> & { [K in keyof LimelHelpContent & keyof LimelHelpContentAttributes]?: LimelHelpContent[K] } & { [K in keyof LimelHelpContent & keyof LimelHelpContentAttributes as `attr:${K}`]?: LimelHelpContentAttributes[K] } & { [K in keyof LimelHelpContent & keyof LimelHelpContentAttributes as `prop:${K}`]?: LimelHelpContent[K] };
         "limel-helper-line": Omit<LimelHelperLine, keyof LimelHelperLineAttributes> & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes]?: LimelHelperLine[K] } & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes as `attr:${K}`]?: LimelHelperLineAttributes[K] } & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes as `prop:${K}`]?: LimelHelperLine[K] };
+        "limel-hotkey": Omit<LimelHotkey, keyof LimelHotkeyAttributes> & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes]?: LimelHotkey[K] } & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes as `attr:${K}`]?: LimelHotkeyAttributes[K] } & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes as `prop:${K}`]?: LimelHotkey[K] };
         "limel-icon": Omit<LimelIcon, keyof LimelIconAttributes> & { [K in keyof LimelIcon & keyof LimelIconAttributes]?: LimelIcon[K] } & { [K in keyof LimelIcon & keyof LimelIconAttributes as `attr:${K}`]?: LimelIconAttributes[K] } & { [K in keyof LimelIcon & keyof LimelIconAttributes as `prop:${K}`]?: LimelIcon[K] };
         "limel-icon-button": Omit<LimelIconButton, keyof LimelIconButtonAttributes> & { [K in keyof LimelIconButton & keyof LimelIconButtonAttributes]?: LimelIconButton[K] } & { [K in keyof LimelIconButton & keyof LimelIconButtonAttributes as `attr:${K}`]?: LimelIconButtonAttributes[K] } & { [K in keyof LimelIconButton & keyof LimelIconButtonAttributes as `prop:${K}`]?: LimelIconButton[K] };
         "limel-info-tile": Omit<LimelInfoTile, keyof LimelInfoTileAttributes> & { [K in keyof LimelInfoTile & keyof LimelInfoTileAttributes]?: LimelInfoTile[K] } & { [K in keyof LimelInfoTile & keyof LimelInfoTileAttributes as `attr:${K}`]?: LimelInfoTileAttributes[K] } & { [K in keyof LimelInfoTile & keyof LimelInfoTileAttributes as `prop:${K}`]?: LimelInfoTile[K] };
@@ -11167,13 +11257,13 @@ declare module "@stencil/core" {
             /**
              * The Badge component can be used to display a notification badge,
              * optionally with a number or a text label.
-             * @exampleComponent limel-example-badge
+             * @exampleComponent limel-example-badge-basic
              * @exampleComponent limel-example-badge-number
              * @exampleComponent limel-example-badge-string
              */
             "limel-badge": LocalJSX.IntrinsicElements["limel-badge"] & JSXBase.HTMLAttributes<HTMLLimelBadgeElement>;
             /**
-             * @exampleComponent limel-example-banner
+             * @exampleComponent limel-example-banner-basic
              */
             "limel-banner": LocalJSX.IntrinsicElements["limel-banner"] & JSXBase.HTMLAttributes<HTMLLimelBannerElement>;
             /**
@@ -11237,7 +11327,7 @@ declare module "@stencil/core" {
              * Within the group, icon buttons will all have the same width, while each text button
              * inherits its width from its content.
              * @exampleComponent limel-example-button-group-icons
-             * @exampleComponent limel-example-button-group
+             * @exampleComponent limel-example-button-group-basic
              * @exampleComponent limel-example-button-group-mix
              * @exampleComponent limel-example-button-group-badges
              * @exampleComponent limel-example-button-group-composite
@@ -11329,7 +11419,7 @@ declare module "@stencil/core" {
              * Checkboxes are sometimes used interchangeably with switches in user interfaces.
              * 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-checkbox
+             * @exampleComponent limel-example-checkbox-basic
              * @exampleComponent limel-example-checkbox-helper-text
              * @exampleComponent limel-example-checkbox-readonly
              */
@@ -11402,7 +11492,7 @@ declare module "@stencil/core" {
              * }
              * ```
              * :::
-             * @exampleComponent limel-example-chip-set
+             * @exampleComponent limel-example-chip-set-basic
              * @exampleComponent limel-example-chip-set-choice
              * @exampleComponent limel-example-chip-set-filter
              * @exampleComponent limel-example-chip-set-filter-badge
@@ -11429,7 +11519,7 @@ declare module "@stencil/core" {
              * Of course such numbers, if bigger than `maxValue` will be visualized as a
              * full progress.
              * :::
-             * @exampleComponent limel-example-circular-progress
+             * @exampleComponent limel-example-circular-progress-basic
              * @exampleComponent limel-example-circular-progress-sizes
              * @exampleComponent limel-example-circular-progress-props
              * @exampleComponent limel-example-circular-progress-css-variables
@@ -11452,7 +11542,7 @@ declare module "@stencil/core" {
              */
             "limel-code-diff": LocalJSX.IntrinsicElements["limel-code-diff"] & JSXBase.HTMLAttributes<HTMLLimelCodeDiffElement>;
             /**
-             * @exampleComponent limel-example-code-editor
+             * @exampleComponent limel-example-code-editor-basic
              * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
              * @exampleComponent limel-example-code-editor-fold-lint-wrap
              * @exampleComponent limel-example-code-editor-copy
@@ -11536,7 +11626,7 @@ declare module "@stencil/core" {
              * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
              * from Lime Web Components to open dialogs in Lime CRM.
              * :::
-             * @exampleComponent limel-example-dialog
+             * @exampleComponent limel-example-dialog-basic
              * @exampleComponent limel-example-dialog-nested-close-events
              * @exampleComponent limel-example-dialog-heading
              * @exampleComponent limel-example-dialog-heading-actions
@@ -11590,7 +11680,7 @@ declare module "@stencil/core" {
              * of the Checkbox or Toggle switch in the `readonly` state may not always
              * provide the best way of _visualizing information_, potentially leading to
              * confusion and negatively affecting the end-users' experience.
-             * @exampleComponent limel-example-dynamic-label
+             * @exampleComponent limel-example-dynamic-label-basic
              * @exampleComponent limel-example-dynamic-label-readonly-boolean
              */
             "limel-dynamic-label": LocalJSX.IntrinsicElements["limel-dynamic-label"] & JSXBase.HTMLAttributes<HTMLLimelDynamicLabelElement>;
@@ -11629,7 +11719,7 @@ declare module "@stencil/core" {
              * - Choose a file
              * and similar phrases...
              * :::
-             * @exampleComponent limel-example-file
+             * @exampleComponent limel-example-file-basic
              * @exampleComponent limel-example-file-custom-icon
              * @exampleComponent limel-example-file-menu-items
              * @exampleComponent limel-example-file-accepted-types
@@ -11645,7 +11735,7 @@ declare module "@stencil/core" {
              * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
              * The event detail would be an array of `FileInfo` objects,
              * each representing a file dropped into the dropzone.
-             * @exampleComponent limel-example-file-dropzone
+             * @exampleComponent limel-example-file-dropzone-basic
              * @exampleComponent limel-example-file-dropzone-type-filtering
              * @private 
              */
@@ -11659,7 +11749,7 @@ declare module "@stencil/core" {
              * After receiving the files, the component emits a `filesSelected` event.
              * The event detail would be an array of `FileInfo` objects,
              * each representing a file dropped into the dropzone.
-             * @exampleComponent limel-example-file-input
+             * @exampleComponent limel-example-file-input-basic
              * @exampleComponent limel-example-file-input-type-filtering
              * @private 
              */
@@ -11763,7 +11853,7 @@ declare module "@stencil/core" {
              * Background colors behind icons make them look like "call to action" buttons
              * and take a lot of attention from users.
              * :::
-             * @exampleComponent limel-example-header
+             * @exampleComponent limel-example-header-basic
              * @exampleComponent limel-example-header-slot-actions
              * @exampleComponent limel-example-header-colors
              * @exampleComponent limel-example-header-responsive
@@ -11783,7 +11873,7 @@ declare module "@stencil/core" {
              * Using this component designers empower users to grasp the functionality
              * of an app more effortlessly, minimizes the learning curve,
              * transforming complex features into accessible opportunities for exploration.
-             * @exampleComponent limel-example-help
+             * @exampleComponent limel-example-help-basic
              * @exampleComponent limel-example-read-more
              * @exampleComponent limel-example-open-direction
              * @exampleComponent limel-example-placement
@@ -11806,7 +11896,7 @@ declare module "@stencil/core" {
              * and to avoid importing styles separately.
              * Also this enables us to open the helper line in limel-portal,
              * more easily without having to send the styles to the portal.
-             * @exampleComponent limel-example-helper-line
+             * @exampleComponent limel-example-helper-line-basic
              * @exampleComponent limel-example-helper-line-invalid
              * @exampleComponent limel-example-helper-line-long-text
              * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -11816,6 +11906,18 @@ declare module "@stencil/core" {
              * @private 
              */
             "limel-helper-line": LocalJSX.IntrinsicElements["limel-helper-line"] & JSXBase.HTMLAttributes<HTMLLimelHelperLineElement>;
+            /**
+             * 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 
+             */
+            "limel-hotkey": LocalJSX.IntrinsicElements["limel-hotkey"] & JSXBase.HTMLAttributes<HTMLLimelHotkeyElement>;
             /**
              * :::important
              * To install your icon set correctly, please read the [documentation here](#/).
@@ -11844,7 +11946,7 @@ declare module "@stencil/core" {
              * If clicking on the component should navigate the user to
              * a new screen or web page, you need to provide a URL,
              * using the `link` property.
-             * @exampleComponent limel-example-info-tile
+             * @exampleComponent limel-example-info-tile-basic
              * @exampleComponent limel-example-info-tile-badge
              * @exampleComponent limel-example-info-tile-progress
              * @exampleComponent limel-example-info-tile-loading
@@ -11875,14 +11977,14 @@ declare module "@stencil/core" {
             /**
              * The linear progress component can be used to visualize the current state of a progress in a scale;
              * for example percentage of completion of a task.
-             * @exampleComponent limel-example-linear-progress
+             * @exampleComponent limel-example-linear-progress-basic
              * @exampleComponent limel-example-linear-progress-indeterminate
              * @exampleComponent limel-example-linear-progress-accessible-label
              * @exampleComponent limel-example-linear-progress-color
              */
             "limel-linear-progress": LocalJSX.IntrinsicElements["limel-linear-progress"] & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
             /**
-             * @exampleComponent limel-example-list
+             * @exampleComponent limel-example-list-basic
              * @exampleComponent limel-example-list-secondary
              * @exampleComponent limel-example-list-separator
              * @exampleComponent limel-example-list-icons
@@ -11970,13 +12072,14 @@ declare module "@stencil/core" {
              * @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
              */
             "limel-menu": LocalJSX.IntrinsicElements["limel-menu"] & JSXBase.HTMLAttributes<HTMLLimelMenuElement>;
@@ -12180,7 +12283,7 @@ declare module "@stencil/core" {
              */
             "limel-radio-button-group": LocalJSX.IntrinsicElements["limel-radio-button-group"] & JSXBase.HTMLAttributes<HTMLLimelRadioButtonGroupElement>;
             /**
-             * @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
@@ -12199,7 +12302,7 @@ declare module "@stencil/core" {
              * By default, this navigation will happen within the same browser tab.
              * 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
@@ -12230,7 +12333,7 @@ declare module "@stencil/core" {
              * For more complex interactions and for delivering more detailed information,
              * [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
@@ -12239,7 +12342,7 @@ declare module "@stencil/core" {
              */
             "limel-snackbar": LocalJSX.IntrinsicElements["limel-snackbar"] & JSXBase.HTMLAttributes<HTMLLimelSnackbarElement>;
             /**
-             * @exampleComponent limel-example-spinner
+             * @exampleComponent limel-example-spinner-basic
              * @exampleComponent limel-example-spinner-color
              * @exampleComponent limel-example-spinner-size
              */
@@ -12270,7 +12373,7 @@ declare module "@stencil/core" {
              * Checkboxes are sometimes used interchangeably with switches in user interfaces.
              * 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
              */
@@ -12290,7 +12393,7 @@ declare module "@stencil/core" {
              * Avoid having long labels for tabs.
              * 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
              */
@@ -12307,11 +12410,11 @@ declare module "@stencil/core" {
              * load data or render anything until the tab is active.
              * The slotted components can also emit the `changeTab` event to update anything
              * inside the actual tab, e.g. to change the icon, color or badge.
-             * @exampleComponent limel-example-tab-panel
+             * @exampleComponent limel-example-tab-panel-basic
              */
             "limel-tab-panel": LocalJSX.IntrinsicElements["limel-tab-panel"] & JSXBase.HTMLAttributes<HTMLLimelTabPanelElement>;
             /**
-             * @exampleComponent limel-example-table
+             * @exampleComponent limel-example-table-basic
              * @exampleComponent limel-example-table-custom-components
              * @exampleComponent limel-example-table-header-menu
              * @exampleComponent limel-example-table-movable-columns