@limetech/lime-elements 39.9.4 → 39.9.5

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/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: '7c8d656a077f6c80cc7d4d64bf1aa9ef7d5bd781', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'f73467be963a8aa901c890958eda32212ff2f3a0', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                 '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: '2e4972465f34d57ce81a0c55782e9fcbc4c91c90', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '119b244389b740a05b266c80a78bffd2287f6dab', class: "value-group" }, this.renderPrefix(), h("div", { key: '9a9fc38d8c997b3ce6db3715a1aed622ec0af586', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '1809611bebee438d5b840907f09adda725c7849c' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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: 'e08edeaabf6b51f940e305539aecec91517a51ca', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

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

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import { createRandomString } from "../../util/random-string";
 import { zipObject, isFunction } from "lodash-es";
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, TAB, } from "../../util/keycodes";
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ESCAPE, TAB, } from "../../util/keycodes";
 import { focusTriggerElement } from "../../util/focus-trigger-element";
 const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
     text: '',
@@ -75,6 +75,7 @@ export class Menu {
          * Clicking it navigates back from a sub-menu to the root menu.
          */
         this.rootItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;
+        this.shouldRestoreFocusOnClose = false;
         this.renderLoader = () => {
             if (!this.loadingSubItems && !this.loading) {
                 return;
@@ -329,11 +330,20 @@ export class Menu {
                 }
             }
         };
+        this.handleEscapeCapture = (event) => {
+            if (event.key === ESCAPE && this.open) {
+                this.shouldRestoreFocusOnClose = true;
+            }
+        };
         this.onClose = () => {
+            const restoreFocus = this.shouldRestoreFocusOnClose;
+            this.shouldRestoreFocusOnClose = false;
             this.cancel.emit();
             this.open = false;
             this.currentSubMenu = null;
-            setTimeout(this.focusTrigger, 0);
+            if (restoreFocus) {
+                setTimeout(this.focusTrigger, 0);
+            }
         };
         this.onTriggerClick = (event) => {
             event.stopPropagation();
@@ -519,7 +529,7 @@ export class Menu {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: '7769d71e01b3e7835fdec458a56858c10eb0c71a', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '800c993b63e1ae0fd94d1c984ffbfaef96eec627', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cc4da9d70f09030f4c41567611b42dda8ad4403e', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '5bb2a262f66d2f9b7bcbe46009574daf5eddf589', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: 'a54987a1be3e3fcc4ceae95c7cc334411a0c474f', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '1bacdb5d1387b8357d1c6f93db47369c8cf64a4f', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'fbc7982b1dcab9fd5172a95e7a7f0328281f3a35', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '48b96e2e6fe815f4cc976553dfea7b26f36ea6d4', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }
@@ -530,9 +540,11 @@ export class Menu {
     openWatcher(newValue) {
         const opened = newValue;
         if (opened) {
+            document.addEventListener('keydown', this.handleEscapeCapture, true);
             this.setFocus();
         }
         else {
+            document.removeEventListener('keydown', this.handleEscapeCapture, true);
             this.clearSearch();
         }
     }

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

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

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

@@ -7,7 +7,7 @@ import { isMultiple } from "../../util/multiple";
 import { createRandomString } from "../../util/random-string";
 import { SelectTemplate, triggerIconColorWarning } from "./select.template";
 /**
- * @exampleComponent limel-example-select
+ * @exampleComponent limel-example-select-basic
  * @exampleComponent limel-example-select-with-icons
  * @exampleComponent limel-example-select-with-separators
  * @exampleComponent limel-example-select-with-secondary-text
@@ -104,7 +104,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '910cf9ba501b894f75553d65b4c41467743203af', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '12c687df2b999aa6d8a06c7fab59bda425678791', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {

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

@@ -10,7 +10,7 @@ import { getMouseEventHandlers } from "../../util/3d-tilt-hover-effect";
  * However, it is possible to override that behavior, by specifying a `target`
  * for the `link` property
  *
- * @exampleComponent limel-example-shortcut
+ * @exampleComponent limel-example-shortcut-basic
  * @exampleComponent limel-example-shortcut-notification
  * @exampleComponent limel-example-shortcut-styling
  * @exampleComponent limel-example-shortcut-with-click-handler
@@ -56,7 +56,7 @@ export class Shortcut {
     render() {
         var _a, _b, _c, _d, _e;
         const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
-        return (h(Host, { key: '4c999ffbf57f45f652d4bfa881b54e421a58df8f', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '5b7f3a5e43237b9a302bc63735b63a92c019eb2f', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '421faadecac1f5444ecab389574ad24cab6d7012', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '0d932adbb6b7c343b3120d01e866b29d4c165543' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: '6d8f34f6545714c032ca8a106bd19b8c25b49c9e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'ea703109895bf2baedeb85a573a7b9b95b6c77a5', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '065f25188bb6a712e3933d89067f6151362eee72', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '7c0ac50c83d7047d2745427c210e278150951b02' })), this.renderLabel(), this.renderNotification()));
     }
     static get is() { return "limel-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

@@ -25,7 +25,7 @@ const OVERLAP_PERCENTAGE = 20;
  * A tab will never be removed or get disabled, even if there is no content under it.
  * :::
  *
- * @exampleComponent limel-example-tab-bar
+ * @exampleComponent limel-example-tab-bar-basic
  * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
  * @exampleComponent limel-example-tab-bar-with-equal-tab-width
  */
@@ -62,11 +62,11 @@ export class TabBar {
         this.tearDown();
     }
     render() {
-        return (h("div", { key: '5c2300a224442e40e2dc2f6b49538f0688bc7a53', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: 'bd4d9d8f3f302cf1592fab3cfd15d3316f132470', class: {
+        return (h("div", { key: 'bdc335fde021cff31e6a47b8d0ab14de6e1f7c9b', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: 'e4c25d25283507ce29d06260b5dd5fd9cbc41a49', class: {
                 'mdc-tab-scroller': true,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, h("div", { key: 'f48abfa3b0169e952befc47e8adf9574aee616af', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: '7322a7ab34b24822a1043ad3172f1b2f3efc6244', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '668ebaaf096d5926b17e1e1a50b0569c4e6d11c1', class: "scroll-fade left" }), h("div", { key: '02c3b8484f4467ece6e1a0617578b0967641a536', class: "scroll-button left" }, h("button", { key: '22bd6170b849aadb7a78b3f0fe2ae0213d7a6cb5', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '62f4b1fff0ab4fac4b8b379c2ab5bda44579e589', name: "angle_left" }))), h("div", { key: 'fe3e1014ffde25bea6f16731e0edc3ce280f321d', class: "scroll-fade right" }), h("div", { key: 'd79950639da735d25053272ae0a53f28d3ce233c', class: "scroll-button right" }, h("button", { key: '24b05b9fdae0479c15159253d7c785853db21b1d', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '5388965c9a27d888583ddc2d892ea5c3810500e4', name: "angle_right" }))))));
+            } }, h("div", { key: '0fd262305222f95f4dfab1e792a0686b9ffb3117', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: 'ff4dd675de9c6cde5c4a0dddd90211a73ea34962', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '3c201211c344ce09ef12166acfab2af0b3a4f64c', class: "scroll-fade left" }), h("div", { key: 'e124c7d58974629de53319948d0a961a293989a8', class: "scroll-button left" }, h("button", { key: 'df876f20c9177923218d773a5fd0880ac7eefb2a', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '65dbb20efcd7f233cd8637641e764f1be7b7e2a0', name: "angle_left" }))), h("div", { key: '5e8c69252a54be76393de70822ec2f6817e7a6d1', class: "scroll-fade right" }), h("div", { key: '341d0c50fe1513c8ad254ff8cebaf9be8607d5f0', class: "scroll-button right" }, h("button", { key: '8ea21fad4dace603ffdc8c51ac597806979a9dd4', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: 'e28a22555f3ce6e434afa64faac037ae63787141', name: "angle_right" }))))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

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

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

package/dist/collection/components/table/table.js

@@ -9,7 +9,7 @@ import { areRowsEqual } from "./utils";
 import translate from "../../global/translations";
 const FIRST_PAGE = 1;
 /**
- * @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
@@ -575,16 +575,16 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: 'c6ccce572339f3e0ccb344672ca2b82d632ff8d9', class: {
+        return (h(Host, { key: 'ffcd07f62babe29a526ae77d2c36afa4bc066cc9', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
-            } }, h("div", { key: 'd4e10ab0ae22f480fd939a78e882e183db00a22b', id: "tabulator-container", class: {
+            } }, h("div", { key: '5fe17a812c0e2f0afb730222930f1b8878669511', id: "tabulator-container", class: {
                 'has-pagination': totalRows > this.pageSize,
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-movable-columns': this.movableColumns,
                 'has-rowselector': this.selectable,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: '12ecdd76202a8332330b28cd46c78dacda381980', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '239e6d70bdbda4d6df7d526b0278e3ab683c3927', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '837fda38d2c98f3334b43f5206e78e5a1aa818e1', id: "tabulator-table" }))));
+            } }, h("div", { key: '7f2f41c8faff5b81e49bd0731f0cf7f268bbf1da', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '95ab49709be868ea55a9b92b262c93fb93f41f4b', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '0c3e2605fefc6ddfdd72a68a13182d0517448f74', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

package/dist/esm/limel-badge.entry.js

@@ -9,9 +9,9 @@ const Badge = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '7baae3b39c121c8cb873bcae7a7e4820155fda40', title: this.labelIsLarge() ? this.label : '', class: {
+        return (h(Host, { key: '995d46502d8ea017877e6308ea9dde691706cf9a', title: this.labelIsLarge() ? this.label : '', class: {
                 'has-large-label': this.labelIsLarge(),
-            } }, h("span", { key: 'fc9a31d38d71bfde094582bfd8c24eb0a7d19cc1' }, this.renderLabel())));
+            } }, h("span", { key: 'dc6f429f03e8768b2af2fb254bef0715e9fce839' }, this.renderLabel())));
     }
     renderLabel() {
         if (typeof this.label === 'number') {

package/dist/esm/limel-banner.entry.js

@@ -20,7 +20,7 @@ const Banner = class {
         this.isOpen = false;
     }
     render() {
-        return (h("div", { key: '3b45f4fd3cb1d3334a3b4161e2393b387a698115', class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { key: 'a80b578b911600ba92a2a2be77b520cecced449c', class: "lime-banner__surface" }, h("div", { key: '518f4bad3877cc35c0fdb486c0f62d2795676e93', class: "lime-banner__content" }, h("div", { key: '1b8bc8d8474891f2f500f49da26e6c6b14a4f960', class: "icon-message" }, this.renderIcon(), h("div", { key: 'dc9bca9d54be61fba5724b63eec2290b257e6857' }, this.message)), h("div", { key: 'e44ac4f418d71e863edb078823ee0a82c4deecca', class: "lime-banner__actions" }, h("slot", { key: '6fdea4e8efeca5b36028b22ea9fcac3e95ed80e8', name: "buttons" }))))));
+        return (h("div", { key: '4c52de06b1d1710e79d2fbe729c76b49c7a4dae9', class: `lime-banner ${this.isOpen ? 'lime-banner--open' : ''}` }, h("div", { key: '2085a6a5d07c036642646f6cb9cab56e7f86f48a', class: "lime-banner__surface" }, h("div", { key: '0b021548bdee32661d458a88e0472a6a1ef0f195', class: "lime-banner__content" }, h("div", { key: '65db98d6d60fdf856871e68c6c3bdaa55fb87526', class: "icon-message" }, this.renderIcon(), h("div", { key: '94eb50955800bc6a18c49bed8d6fd949909cf5bd' }, this.message)), h("div", { key: '8331420f88b294bb1a21682ca1446704e9dc0ffb', class: "lime-banner__actions" }, h("slot", { key: 'b784df0968fa19c093c3c0db6de980d6472154d4', name: "buttons" }))))));
     }
     renderIcon() {
         if (!this.icon) {

package/dist/esm/limel-breadcrumbs_7.entry.js

@@ -2525,7 +2525,7 @@ const List = class {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'cc025328924cab9298919a2873ec1744aeed3dab', style: {
+        return (h(Host, { key: 'e08edeaabf6b51f940e305539aecec91517a51ca', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }
@@ -2633,6 +2633,7 @@ const Menu = class {
          * Clicking it navigates back from a sub-menu to the root menu.
          */
         this.rootItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;
+        this.shouldRestoreFocusOnClose = false;
         this.renderLoader = () => {
             if (!this.loadingSubItems && !this.loading) {
                 return;
@@ -2887,11 +2888,20 @@ const Menu = class {
                 }
             }
         };
+        this.handleEscapeCapture = (event) => {
+            if (event.key === ESCAPE && this.open) {
+                this.shouldRestoreFocusOnClose = true;
+            }
+        };
         this.onClose = () => {
+            const restoreFocus = this.shouldRestoreFocusOnClose;
+            this.shouldRestoreFocusOnClose = false;
             this.cancel.emit();
             this.open = false;
             this.currentSubMenu = null;
-            setTimeout(this.focusTrigger, 0);
+            if (restoreFocus) {
+                setTimeout(this.focusTrigger, 0);
+            }
         };
         this.onTriggerClick = (event) => {
             event.stopPropagation();
@@ -3077,7 +3087,7 @@ const Menu = class {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: '7769d71e01b3e7835fdec458a56858c10eb0c71a', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '800c993b63e1ae0fd94d1c984ffbfaef96eec627', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cc4da9d70f09030f4c41567611b42dda8ad4403e', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '5bb2a262f66d2f9b7bcbe46009574daf5eddf589', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: 'a54987a1be3e3fcc4ceae95c7cc334411a0c474f', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '1bacdb5d1387b8357d1c6f93db47369c8cf64a4f', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'fbc7982b1dcab9fd5172a95e7a7f0328281f3a35', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '48b96e2e6fe815f4cc976553dfea7b26f36ea6d4', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }
@@ -3088,9 +3098,11 @@ const Menu = class {
     openWatcher(newValue) {
         const opened = newValue;
         if (opened) {
+            document.addEventListener('keydown', this.handleEscapeCapture, true);
             this.setFocus();
         }
         else {
+            document.removeEventListener('keydown', this.handleEscapeCapture, true);
             this.clearSearch();
         }
     }
@@ -4931,7 +4943,7 @@ const Spinner = class {
         this.limeBranded = false;
     }
     render() {
-        return (h(Host, { key: '2ea3c8e615b6f95452c1ce2f8d5eb9ee989b8612' }, h("svg", { key: 'd0ff66dbbf8f7fefa0c6a52cd51a7fca2abe0c4a', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: '15c39e3df6a446d4f809e23d2316e535bf77dc99' }, h("svg", { key: 'e88d11c66514783aa11bb01c4e902a15d0cb6dd4', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

package/dist/esm/limel-button-group.entry.js

@@ -30,7 +30,7 @@ const ButtonGroup = class {
         this.setSelectedButton();
     }
     render() {
-        return (h(Host, { key: 'c8aa4d58a21bd6ef454b65c4858107c539716013', role: "radiogroup" }, this.value.map(this.renderButton)));
+        return (h(Host, { key: '2295d3bf146ae9d3aa44c4a4c3281ce1b72d8a63', role: "radiogroup" }, this.value.map(this.renderButton)));
     }
     renderButton(button) {
         // Prefix with 'b' because html IDs cannot start with a digit,

package/dist/esm/limel-checkbox.entry.js

@@ -111,7 +111,7 @@ const Checkbox = class {
         this.destroyMDCInstances();
     }
     render() {
-        return (h(CheckboxTemplate, { key: '42d3d0c8905e8d0426482ac079fa1da76d713698', disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
+        return (h(CheckboxTemplate, { key: '2a6a0bbfb8b740dccf629adda516b83fbfcfc23c', disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.id }));
     }
     get limelCheckbox() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/limel-chip_2.entry.js

@@ -556,7 +556,7 @@ const ChipSet = class {
             });
         }
         const value = this.getValue();
-        return (h(Host, { key: 'aeacdecfe56e5ae0643bcee75891f62e461ee7bb' }, h("limel-notched-outline", { key: '1e88dc18ccdb62255def3bf02e0a6ead527d1dda', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: '5e2ecb42a2997dc4f0e944364d195e79b7ab2bc2', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (h(Host, { key: 'cc38b12787a887fa3cf6d54412d460fffdc10d37' }, h("limel-notched-outline", { key: '363ee1953a0880a987acbaeb75ad7682c03c26ec', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: 'c05be9685e36d5283791bf30aceb937f8da0c0a0', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {

package/dist/esm/limel-circular-progress.entry.js

@@ -41,7 +41,7 @@ const CircularProgress = class {
         };
         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))));
     }
 };
 CircularProgress.style = circularProgressCss();

package/dist/esm/limel-code-editor.entry.js

@@ -14876,7 +14876,7 @@ const CodeEditor = class {
             '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