@limetech/lime-elements 39.9.4 → 39.10.0

package/dist/collection/components/circular-progress/circular-progress.js

@@ -19,7 +19,7 @@ const PERCENT = 100;
  * 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
@@ -60,7 +60,7 @@ export class CircularProgress {
         };
         const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
         const value = Math.round(this.value * 10) / 10;
-        return (h("div", { key: 'c7e8550434fbc3eb51d1d151308c340329829585', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'a8946c7ec9afc29dcc7824b9718016bd0364adca', class: "value" }, abbreviate(value), h("span", { key: '14942a3ca72723ab9fe3ccfa419fbfae926c31e7', class: "suffix" }, this.suffix))));
+        return (h("div", { key: 'b2de8450baa7722c2a362a41ea97de6b694bf6ba', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'e3fdb555dd58a1a18227659761e9ee9171050b79', class: "value" }, abbreviate(value), h("span", { key: 'a0d25b4e71beaf4993bb78e96eb2094020b5de52', class: "suffix" }, this.suffix))));
     }
     static get is() { return "limel-circular-progress"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/code-editor/code-editor.js

@@ -16,7 +16,7 @@ import "codemirror/addon/fold/xml-fold";
 import jslint from "jsonlint-mod";
 import translate from "../../global/translations";
 /**
- * @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
@@ -250,7 +250,7 @@ export class CodeEditor {
             'is-dark-mode': this.isDarkMode(),
             'is-light-mode': !this.isDarkMode(),
         };
-        return (h(Host, { key: 'fd59cdeb74135398c33210af68d6129820c586bd' }, this.renderCopyButton(), h("limel-notched-outline", { key: '41214ae1f04b85a9462f3b71cd03871a7fd0401d', 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: '4d5caf3e80e342af2b8ea54411b11348949babd1', slot: "content", class: classList })), this.renderHelperLine()));
+        return (h(Host, { key: '648df79d8ea88a3f87028743197214b45f3708af' }, this.renderCopyButton(), h("limel-notched-outline", { key: '8ec590da7d7cfb0c313ae61ecf517f36e978a756', 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: '3fd86155267f590d9578ed673d56e1e2fe6ee7ce', slot: "content", class: classList })), this.renderHelperLine()));
     }
     forceRedraw() {
         // eslint-disable-next-line sonarjs/pseudo-random

package/dist/collection/components/dialog/dialog.js

@@ -20,7 +20,7 @@ import { createRandomString } from "../../util/random-string";
  * 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
@@ -84,10 +84,10 @@ export class Dialog {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: '590a7ad1dc1deeab0481f36b9aaeea0aca24d34f', class: {
+        return (h("div", { key: '748566bd65db98ee75a743a7deedc7d0c9f80a90', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: 'f7a96d6e0f7086ac47791cb895bb78a296e23ec7', hidden: true, id: "initialFocusEl" }), h("div", { key: 'c0755b202346c3b6bcf257d94872c1fb81f49db5', class: "mdc-dialog__container" }, h("div", { key: '6ccc11dae44838539b2e1fa6a074c74a0b76364c', class: "mdc-dialog__surface" }, h("input", { key: 'ae6bdad52ac6e44f25fa0396797f0ec013d27ab9', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '45e3b2e05bed5dc4c8039502b81ca2384821fe6f', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '64979e861d307be41993ace61a7b0c5a616a6e2c' })), this.renderFooter())), h("div", { key: '0b7c0e8c2d8f0cac26e926a685ba5c985db976f8', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '15d2c40108a2348f54066eab22d507c6a9b3eda9', hidden: true, id: "initialFocusEl" }), h("div", { key: 'f46ee440d02b257bde93273936ce1dfe8dc324ea', class: "mdc-dialog__container" }, h("div", { key: '9ba9919b2b880039ede217c0608d9f780d6ca770', class: "mdc-dialog__surface" }, h("input", { key: '07bb68ae4c7b8d91cb7f0fd02105738160bd9e8f', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '1729cb0f7f442b3ee56272387de42b462926275c', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: 'a5554b316a4e57700a2902ae4499f594045f267d' })), this.renderFooter())), h("div", { key: '85ecb0922ece938a5de20b804b6a2590f98032df', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue) {

package/dist/collection/components/dynamic-label/dynamic-label.js

@@ -13,7 +13,7 @@ import { h } from "@stencil/core";
  * 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
  */
 export class DynamicLabel {

package/dist/collection/components/file/file.js

@@ -35,7 +35,7 @@ const DEFAULT_FILE_CHIP = {
  * 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
@@ -89,7 +89,7 @@ export class File {
         };
     }
     render() {
-        return (h(Host, { key: '09d8f61392d489c41a083edb516b680f481d7b55' }, h("limel-file-dropzone", { key: '36812196ad3a91ce98ec13df0e26927fbe67b4a4', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
+        return (h(Host, { key: '4b91f02cff596bca5da1a635ce24d2bb8a5154e1' }, h("limel-file-dropzone", { key: 'c3636964ee41bd5396fe667cc983a74256845af5', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
     }
     renderDragAndDropTip() {
         if (this.value || this.disabled || this.readonly) {

package/dist/collection/components/file-dropzone/file-dropzone.js

@@ -14,7 +14,7 @@ import { partition } from "lodash-es";
  * 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
  */
@@ -90,7 +90,7 @@ export class FileDropzone {
         };
     }
     render() {
-        return (h(Host, { key: '70e5213cc5470868f2442b908d9ffd39466edbac', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '4d886da6bfad382dc9c579ad17ea73d62ccdf1d3' }), this.renderOnDragLayout()));
+        return (h(Host, { key: 'a66ef9c3d9a005567749b61967a63caa4496135a', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '7a770aa9f98365da4b83038662f04c0e9e5c20c6' }), this.renderOnDragLayout()));
     }
     static get is() { return "limel-file-dropzone"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ import { createFileInfo } from "../../util/files";
  * 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
  */
@@ -71,7 +71,7 @@ export class FileInput {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (h(Host, { key: '4ec87952fba90e1fff07a60b977edd1980e33738', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '2fdc5fbb81294f85ad02a175b0720f53ad13c4f0', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: 'd72890dd7c622c71e6b46217891d88f770607bda' })));
+        return (h(Host, { key: '62d72f49b1a71bef9c5b91c36f34f763a04d78e2', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '72272f710f8ffb09eec2ace7409ab516ec4f80bd', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '7ecff23ba41d76a23a2b8a542f56044615cb8b24' })));
     }
     handleKeyDown(event) {
         if (event.code === 'Tab' ||

package/dist/collection/components/header/header.js

@@ -40,7 +40,7 @@ import { getIconName } from "../icon/get-icon-props";
  * 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
@@ -61,7 +61,7 @@ export class Header {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: 'a15f9daaa43d8c03c79f30c2a9d543b97185ed6b' }, h("div", { key: 'f9142be782bd6c20605387073db02ede3acd1a2e', class: "information" }, this.renderIcon(), h("div", { key: 'a1919b8bd21f92aeae4be0c26822517780d0bfc1', class: "headings" }, h("h1", { key: '2c6b225fc76359fa6573b25f232a3530bec7508b', class: "heading", title: this.heading }, this.heading), h("h2", { key: '14be7addf9b4a3082dab7373381a8daa30530fa8', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '27d8265622b327f77e893d5dc3e736a25d7b4da3', name: "actions" }, h("slot", { key: '03837c68e6f1ae38941702aef2ea6c74fa1b479d' }))));
+        return (h(Host, { key: '4a94e7808e3b295669faa4711d37f8d9ed50b006' }, h("div", { key: '7c02e31819ddac504b5c58b6200c00a621079990', class: "information" }, this.renderIcon(), h("div", { key: 'b38172e5332ee39476bd19f7ad4f0ce127cc30d6', class: "headings" }, h("h1", { key: '9ee1f899ba0f403a588e0dbca52d82c1c12e355e', class: "heading", title: this.heading }, this.heading), h("h2", { key: '49b81ef3a96a9c2f7fa27ec2d13a15907131624e', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '29984270ca745ce430deef27704b9c63065c2964', name: "actions" }, h("slot", { key: '1c3b766dc1444a0255ea605359b25d148d25ba57' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

package/dist/collection/components/help/help.js

@@ -15,7 +15,7 @@ import { h, Host } from "@stencil/core";
  * 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
@@ -41,9 +41,9 @@ export class HelpComponent {
         };
     }
     render() {
-        return (h(Host, { key: 'df993a4485c405a756eb69ccbee5ab8ec616a6d3' }, h("limel-popover", { key: 'f4aab0006a23c83a1609f1c8e1b97f5d6f69b4b4', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: 'a88ae28570d62668a4b34d3e334816bc665dc33e', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: 'a52d9b4c220e21005011449735b97599cffb542e' }, h("limel-popover", { key: '8b6690894351ec32f5b982ca5d3aeac7300f5576', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '98e5dc4abcff54df74b02c737e4889e17639ddc6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '32f146b00380d0de6529a7b6a4ab0bcb82b067d4', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '10b2d483aa459403b3d922add805bf6f64ae66e3', value: this.value, readMoreLink: this.readMoreLink }))));
     }
     static get is() { return "limel-help"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/helper-line/helper-line.js

@@ -10,7 +10,7 @@ import { Host, h } from "@stencil/core";
  * 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
@@ -46,9 +46,9 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: 'ca260d9f14bb76025f382964f3f24eafc25daeeb', tabIndex: -1, class: {
+        return (h(Host, { key: '8ef6eb3b3e372e5dc61af1424a88c1c342023d13', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3d24d9b80729945c7ebd3f1ecd4348afec77185b' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3b4e31c23f5964aabb67556e68bd1785c871d934' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hotkey/format-display-token.js

@@ -0,0 +1,95 @@
+// Note: this function handles the same key aliases as `KEY_ALIASES` in
+// `../../util/hotkeys.ts`, but maps them to display strings rather than
+// canonical names. Keep both in sync when adding new aliases.
+/**
+ * Maps a single hotkey token to its display representation.
+ *
+ * @param token - A single token from `tokenizeHotkeyString` (e.g. `"meta"`, `"k"`, `"+"`).
+ * @param isApple - Whether the current device is an Apple device.
+ * @returns The display string, whether it is a glyph (for styling),
+ *          and a human-readable name for screen readers.
+ */
+export function formatDisplayToken(token, isApple) {
+    const trimmed = (token !== null && token !== void 0 ? token : '').trim();
+    if (!trimmed) {
+        return { display: '', isGlyph: false, ariaName: '' };
+    }
+    if (trimmed === '+') {
+        return { display: '+', isGlyph: false, ariaName: 'plus' };
+    }
+    const lower = trimmed.toLowerCase();
+    switch (lower) {
+        case 'meta':
+        case 'win':
+        case 'windows': {
+            return isApple
+                ? { display: '⌘', isGlyph: true, ariaName: 'Command' }
+                : { display: '⊞ Win', isGlyph: false, ariaName: 'Windows' };
+        }
+        case 'cmd':
+        case 'command': {
+            return { display: '⌘', isGlyph: true, ariaName: 'Command' };
+        }
+        case 'alt':
+        case 'option': {
+            return isApple
+                ? { display: '⌥', isGlyph: true, ariaName: 'Option' }
+                : { display: 'Alt', isGlyph: false, ariaName: 'Alt' };
+        }
+        case 'shift': {
+            return { display: '⇧', isGlyph: true, ariaName: 'Shift' };
+        }
+        case 'enter':
+        case 'return': {
+            return { display: '↩', isGlyph: true, ariaName: 'Enter' };
+        }
+        case 'tab': {
+            return { display: '⇥', isGlyph: true, ariaName: 'Tab' };
+        }
+        case 'delete':
+        case 'del':
+        case 'backspace': {
+            if (isApple) {
+                return { display: '⌫', isGlyph: true, ariaName: 'Delete' };
+            }
+            return lower === 'backspace'
+                ? {
+                    display: 'Backspace',
+                    isGlyph: false,
+                    ariaName: 'Backspace',
+                }
+                : { display: 'Del', isGlyph: false, ariaName: 'Delete' };
+        }
+        case 'ctrl':
+        case 'control': {
+            return isApple
+                ? { display: '⌃', isGlyph: true, ariaName: 'Control' }
+                : { display: 'Ctrl', isGlyph: false, ariaName: 'Control' };
+        }
+        case 'escape':
+        case 'esc': {
+            return { display: 'Esc', isGlyph: false, ariaName: 'Escape' };
+        }
+        case 'space':
+        case 'spacebar': {
+            return { display: '␣', isGlyph: true, ariaName: 'Space' };
+        }
+        case 'arrowup':
+        case 'up': {
+            return { display: '↑', isGlyph: true, ariaName: 'Up' };
+        }
+        case 'arrowdown':
+        case 'down': {
+            return { display: '↓', isGlyph: true, ariaName: 'Down' };
+        }
+        case 'arrowleft':
+        case 'left': {
+            return { display: '←', isGlyph: true, ariaName: 'Left' };
+        }
+        case 'arrowright':
+        case 'right': {
+            return { display: '→', isGlyph: true, ariaName: 'Right' };
+        }
+    }
+    return { display: trimmed, isGlyph: false, ariaName: trimmed };
+}

package/dist/collection/components/hotkey/hotkey.css

@@ -0,0 +1,136 @@
+@charset "UTF-8";
+/**
+* Note! This file is forwarded via `src/style/exports.scss`
+* and exposed to consumers through the root `index.scss`.
+*
+* Consumers import it using:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* Legacy import paths (`dist/scss/mixins`) are maintained
+* for backward compatibility via copy rules in the Stencil config.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+kbd {
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  font-weight: 600;
+  color: rgb(var(--contrast-1100));
+  background-color: rgb(var(--contrast-200));
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: normal;
+  padding: 0.125rem 0.5rem;
+  margin: 0 0.25rem;
+  box-shadow: var(--button-shadow-normal), 0 0.03125rem 0.21875rem 0 rgba(var(--contrast-100), 0.5) inset;
+  border-radius: 0.125rem;
+  border-style: solid;
+  border-color: rgba(var(--contrast-600), 0.8);
+  border-width: 0 1px 0.125rem 1px;
+}
+
+:host(limel-hotkey) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+:host(limel-hotkey[disabled]:not([disabled=false])) {
+  opacity: 0.5;
+}
+
+kbd {
+  margin: 0;
+  font-size: 0.75rem;
+  box-shadow: var(--button-shadow-pressed), 0 0.625rem 0.375px -0.5rem rgb(var(--color-black), 0.02), 0 0.025rem 0.5rem 0 rgb(var(--contrast-100)) inset;
+}
+
+span {
+  display: inline-block;
+}
+span::first-letter {
+  text-transform: uppercase;
+}
+
+kbd.is-glyph span {
+  transform: scale(1.2);
+}

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

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

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

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

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

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

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

@@ -10,7 +10,7 @@ import { getRel } from "../../util/link-helper";
  * 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
@@ -116,9 +116,9 @@ export class InfoTile {
             this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
         const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
         const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (h(Host, { key: '57b632bbe5ba4171c118171cbb1d5c7c87550a53', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'aa3e1db51f262a204a4d0bf7fc025e067f608629', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        return (h(Host, { key: '3754cadd6c7cf0ee99e0f5dc2234732126dcdc1e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'c812a64253f3687f230c9a306727addae91ac685', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                 'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
-            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '2f9643af8bfe88ff99eba045983081e9388ba688', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '9cf8b84d5f2376d36ba7dbae8e86cbb8e11fa390', class: "value-group" }, this.renderPrefix(), h("div", { key: 'c073080821cd0b4bd4340d6566688a10cd0acd5e', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '5ac6fee4d62020b9dfe1232309de0a414d35d6e4' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '62e330f8b945d562b5ee4677a62ab21ec1b6defe', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: 'de41a8bc66d7f706153188f84b96481dfa25f8f9', class: "value-group" }, this.renderPrefix(), h("div", { key: '8ae36080dadd6b4a7135c7280e51a88015f30fbc', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '0221c5e66f2a30b60e619bc7d6fe35e66d1db653' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

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

package/dist/collection/components/linear-progress/linear-progress.js

@@ -5,7 +5,7 @@ const PERCENT = 100;
  * 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

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

@@ -4,7 +4,7 @@ import { h, Host, } from "@stencil/core";
 import { ListRenderer } from "./list-renderer";
 const { ACTION_EVENT } = listStrings;
 /**
- * @exampleComponent limel-example-list
+ * @exampleComponent limel-example-list-basic
  * @exampleComponent limel-example-list-secondary
  * @exampleComponent limel-example-list-separator
  * @exampleComponent limel-example-list-icons
@@ -143,7 +143,7 @@ export class List {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'cc025328924cab9298919a2873ec1744aeed3dab', style: {
+        return (h(Host, { key: 'cbe0fda77189118ad3515dc3c4ab02c6cd9bc58a', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

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

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