@limetech/lime-elements 39.9.4 → 39.9.5

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [39.9.5](https://github.com/Lundalogik/lime-elements/compare/v39.9.4...v39.9.5) (2026-03-30)
+
+### Bug Fixes
+
+
+* **popover:** don't restore focus to trigger on click-outside dismiss ([4452a1d](https://github.com/Lundalogik/lime-elements/commit/4452a1d13667bbef0a9e2330a656087fe027dd0b))
+* **popover:** don't restore focus to trigger on click-outside dismiss ([21820e4](https://github.com/Lundalogik/lime-elements/commit/21820e441c198452f55f9bb2c5582b51126812a5))
+* **popover:** handle Esc on `keydown` instead of `keyup` ([99bac40](https://github.com/Lundalogik/lime-elements/commit/99bac401789ed5b8e0333e9ccca1a01f968835d6))
+
 ## [39.9.4](https://github.com/Lundalogik/lime-elements/compare/v39.9.3...v39.9.4) (2026-03-25)
 
 ### Bug Fixes

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

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

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

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

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

@@ -2527,7 +2527,7 @@ const List = class {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (index.h(index.Host, { key: 'cc025328924cab9298919a2873ec1744aeed3dab', style: {
+        return (index.h(index.Host, { key: 'e08edeaabf6b51f940e305539aecec91517a51ca', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }
@@ -2635,6 +2635,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;
@@ -2889,11 +2890,20 @@ const Menu = class {
                 }
             }
         };
+        this.handleEscapeCapture = (event) => {
+            if (event.key === keycodes.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();
@@ -3079,7 +3089,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 (index.h("div", { key: '7769d71e01b3e7835fdec458a56858c10eb0c71a', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, index.h("slot", { key: '800c993b63e1ae0fd94d1c984ffbfaef96eec627', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), index.h("limel-portal", { key: 'cc4da9d70f09030f4c41567611b42dda8ad4403e', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, index.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 (index.h("div", { key: 'a54987a1be3e3fcc4ceae95c7cc334411a0c474f', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, index.h("slot", { key: '1bacdb5d1387b8357d1c6f93db47369c8cf64a4f', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), index.h("limel-portal", { key: 'fbc7982b1dcab9fd5172a95e7a7f0328281f3a35', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, index.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()))));
     }
@@ -3090,9 +3100,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();
         }
     }
@@ -4933,7 +4945,7 @@ const Spinner = class {
         this.limeBranded = false;
     }
     render() {
-        return (index.h(index.Host, { key: '2ea3c8e615b6f95452c1ce2f8d5eb9ee989b8612' }, index.h("svg", { key: 'd0ff66dbbf8f7fefa0c6a52cd51a7fca2abe0c4a', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (index.h(index.Host, { key: '15c39e3df6a446d4f809e23d2316e535bf77dc99' }, index.h("svg", { key: 'e88d11c66514783aa11bb01c4e902a15d0cb6dd4', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

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

@@ -32,7 +32,7 @@ const ButtonGroup = class {
         this.setSelectedButton();
     }
     render() {
-        return (index.h(index.Host, { key: 'c8aa4d58a21bd6ef454b65c4858107c539716013', role: "radiogroup" }, this.value.map(this.renderButton)));
+        return (index.h(index.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/cjs/limel-checkbox.cjs.entry.js

@@ -113,7 +113,7 @@ const Checkbox = class {
         this.destroyMDCInstances();
     }
     render() {
-        return (index.h(checkbox_template.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 (index.h(checkbox_template.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 index.getElement(this); }
     static get watchers() { return {

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

@@ -558,7 +558,7 @@ const ChipSet = class {
             });
         }
         const value = this.getValue();
-        return (index.h(index.Host, { key: 'aeacdecfe56e5ae0643bcee75891f62e461ee7bb' }, index.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() }, index.h("div", Object.assign({ key: '5e2ecb42a2997dc4f0e944364d195e79b7ab2bc2', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (index.h(index.Host, { key: 'cc38b12787a887fa3cf6d54412d460fffdc10d37' }, index.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() }, index.h("div", Object.assign({ key: 'c05be9685e36d5283791bf30aceb937f8da0c0a0', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {

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

@@ -43,7 +43,7 @@ const CircularProgress = class {
         };
         const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
         const value = Math.round(this.value * 10) / 10;
-        return (index.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(), index.h("span", { key: 'a8946c7ec9afc29dcc7824b9718016bd0364adca', class: "value" }, format.abbreviate(value), index.h("span", { key: '14942a3ca72723ab9fe3ccfa419fbfae926c31e7', class: "suffix" }, this.suffix))));
+        return (index.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(), index.h("span", { key: 'e3fdb555dd58a1a18227659761e9ee9171050b79', class: "value" }, format.abbreviate(value), index.h("span", { key: 'a0d25b4e71beaf4993bb78e96eb2094020b5de52', class: "suffix" }, this.suffix))));
     }
 };
 CircularProgress.style = circularProgressCss();

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

@@ -14878,7 +14878,7 @@ const CodeEditor = class {
             'is-dark-mode': this.isDarkMode(),
             'is-light-mode': !this.isDarkMode(),
         };
-        return (index.h(index.Host, { key: 'fd59cdeb74135398c33210af68d6129820c586bd' }, this.renderCopyButton(), index.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 }, index.h("div", { key: '4d5caf3e80e342af2b8ea54411b11348949babd1', slot: "content", class: classList })), this.renderHelperLine()));
+        return (index.h(index.Host, { key: '648df79d8ea88a3f87028743197214b45f3708af' }, this.renderCopyButton(), index.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 }, index.h("div", { key: '3fd86155267f590d9578ed673d56e1e2fe6ee7ce', slot: "content", class: classList })), this.renderHelperLine()));
     }
     forceRedraw() {
         // eslint-disable-next-line sonarjs/pseudo-random

package/dist/cjs/limel-dialog.cjs.entry.js

@@ -930,10 +930,10 @@ const Dialog = class {
         this.mdcDialog.destroy();
     }
     render() {
-        return (index.h("div", { key: '590a7ad1dc1deeab0481f36b9aaeea0aca24d34f', class: {
+        return (index.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 }, index.h("input", { key: 'f7a96d6e0f7086ac47791cb895bb78a296e23ec7', hidden: true, id: "initialFocusEl" }), index.h("div", { key: 'c0755b202346c3b6bcf257d94872c1fb81f49db5', class: "mdc-dialog__container" }, index.h("div", { key: '6ccc11dae44838539b2e1fa6a074c74a0b76364c', class: "mdc-dialog__surface" }, index.h("input", { key: 'ae6bdad52ac6e44f25fa0396797f0ec013d27ab9', type: "button", id: "initialFocusElement" }), this.renderHeading(), index.h("div", { key: '45e3b2e05bed5dc4c8039502b81ca2384821fe6f', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, index.h("slot", { key: '64979e861d307be41993ace61a7b0c5a616a6e2c' })), this.renderFooter())), index.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 }, index.h("input", { key: '15d2c40108a2348f54066eab22d507c6a9b3eda9', hidden: true, id: "initialFocusEl" }), index.h("div", { key: 'f46ee440d02b257bde93273936ce1dfe8dc324ea', class: "mdc-dialog__container" }, index.h("div", { key: '9ba9919b2b880039ede217c0608d9f780d6ca770', class: "mdc-dialog__surface" }, index.h("input", { key: '07bb68ae4c7b8d91cb7f0fd02105738160bd9e8f', type: "button", id: "initialFocusElement" }), this.renderHeading(), index.h("div", { key: '1729cb0f7f442b3ee56272387de42b462926275c', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, index.h("slot", { key: 'a5554b316a4e57700a2902ae4499f594045f267d' })), this.renderFooter())), index.h("div", { key: '85ecb0922ece938a5de20b804b6a2590f98032df', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue) {

package/dist/cjs/limel-file-dropzone_2.cjs.entry.js

@@ -229,7 +229,7 @@ const FileDropzone = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '70e5213cc5470868f2442b908d9ffd39466edbac', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, index.h("slot", { key: '4d886da6bfad382dc9c579ad17ea73d62ccdf1d3' }), this.renderOnDragLayout()));
+        return (index.h(index.Host, { key: 'a66ef9c3d9a005567749b61967a63caa4496135a', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, index.h("slot", { key: '7a770aa9f98365da4b83038662f04c0e9e5c20c6' }), this.renderOnDragLayout()));
     }
 };
 FileDropzone.style = fileDropzoneCss();
@@ -289,7 +289,7 @@ const FileInput = class {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (index.h(index.Host, { key: '4ec87952fba90e1fff07a60b977edd1980e33738', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, index.h("input", { key: '2fdc5fbb81294f85ad02a175b0720f53ad13c4f0', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), index.h("slot", { key: 'd72890dd7c622c71e6b46217891d88f770607bda' })));
+        return (index.h(index.Host, { key: '62d72f49b1a71bef9c5b91c36f34f763a04d78e2', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, index.h("input", { key: '72272f710f8ffb09eec2ace7409ab516ec4f80bd', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), index.h("slot", { key: '7ecff23ba41d76a23a2b8a542f56044615cb8b24' })));
     }
     handleKeyDown(event) {
         if (event.code === 'Tab' ||

package/dist/cjs/limel-file.cjs.entry.js

@@ -63,7 +63,7 @@ const File = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '09d8f61392d489c41a083edb516b680f481d7b55' }, index.h("limel-file-dropzone", { key: '36812196ad3a91ce98ec13df0e26927fbe67b4a4', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
+        return (index.h(index.Host, { key: '4b91f02cff596bca5da1a635ce24d2bb8a5154e1' }, index.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/cjs/limel-header.cjs.entry.js

@@ -15,7 +15,7 @@ const Header = class {
         this.subheadingDivider = '·';
     }
     render() {
-        return (index.h(index.Host, { key: 'a15f9daaa43d8c03c79f30c2a9d543b97185ed6b' }, index.h("div", { key: 'f9142be782bd6c20605387073db02ede3acd1a2e', class: "information" }, this.renderIcon(), index.h("div", { key: 'a1919b8bd21f92aeae4be0c26822517780d0bfc1', class: "headings" }, index.h("h1", { key: '2c6b225fc76359fa6573b25f232a3530bec7508b', class: "heading", title: this.heading }, this.heading), index.h("h2", { key: '14be7addf9b4a3082dab7373381a8daa30530fa8', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), index.h("slot", { key: '27d8265622b327f77e893d5dc3e736a25d7b4da3', name: "actions" }, index.h("slot", { key: '03837c68e6f1ae38941702aef2ea6c74fa1b479d' }))));
+        return (index.h(index.Host, { key: '4a94e7808e3b295669faa4711d37f8d9ed50b006' }, index.h("div", { key: '7c02e31819ddac504b5c58b6200c00a621079990', class: "information" }, this.renderIcon(), index.h("div", { key: 'b38172e5332ee39476bd19f7ad4f0ce127cc30d6', class: "headings" }, index.h("h1", { key: '9ee1f899ba0f403a588e0dbca52d82c1c12e355e', class: "heading", title: this.heading }, this.heading), index.h("h2", { key: '49b81ef3a96a9c2f7fa27ec2d13a15907131624e', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), index.h("slot", { key: '29984270ca745ce430deef27704b9c63065c2964', name: "actions" }, index.h("slot", { key: '1c3b766dc1444a0255ea605359b25d148d25ba57' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

package/dist/cjs/limel-help.cjs.entry.js

@@ -26,9 +26,9 @@ const HelpComponent = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'df993a4485c405a756eb69ccbee5ab8ec616a6d3' }, index.h("limel-popover", { key: 'f4aab0006a23c83a1609f1c8e1b97f5d6f69b4b4', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("button", { key: 'a88ae28570d62668a4b34d3e334816bc665dc33e', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (index.h(index.Host, { key: 'a52d9b4c220e21005011449735b97599cffb542e' }, index.h("limel-popover", { key: '8b6690894351ec32f5b982ca5d3aeac7300f5576', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("button", { key: '98e5dc4abcff54df74b02c737e4889e17639ddc6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), index.h("limel-help-content", { key: '32f146b00380d0de6529a7b6a4ab0bcb82b067d4', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), index.h("limel-help-content", { key: '10b2d483aa459403b3d922add805bf6f64ae66e3', value: this.value, readMoreLink: this.readMoreLink }))));
     }
 };
 HelpComponent.style = helpCss();

package/dist/cjs/limel-helper-line_2.cjs.entry.js

@@ -32,9 +32,9 @@ const HelperLine = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'ca260d9f14bb76025f382964f3f24eafc25daeeb', tabIndex: -1, class: {
+        return (index.h(index.Host, { key: '8ef6eb3b3e372e5dc61af1424a88c1c342023d13', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, index.h("div", { key: '3d24d9b80729945c7ebd3f1ecd4348afec77185b' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, index.h("div", { key: '3b4e31c23f5964aabb67556e68bd1785c871d934' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
 };
 HelperLine.style = helperLineCss();

package/dist/cjs/limel-info-tile.cjs.entry.js

@@ -106,9 +106,9 @@ const InfoTile = class {
             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 = linkHelper.getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (index.h(index.Host, { key: '57b632bbe5ba4171c118171cbb1d5c7c87550a53', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, index.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 (index.h(index.Host, { key: '7c8d656a077f6c80cc7d4d64bf1aa9ef7d5bd781', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, index.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(), index.h("slot", { key: '2f9643af8bfe88ff99eba045983081e9388ba688', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), index.h("div", { key: '9cf8b84d5f2376d36ba7dbae8e86cbb8e11fa390', class: "value-group" }, this.renderPrefix(), index.h("div", { key: 'c073080821cd0b4bd4340d6566688a10cd0acd5e', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), index.h("limel-3d-hover-effect-glow", { key: '5ac6fee4d62020b9dfe1232309de0a414d35d6e4' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), index.h("slot", { key: '2e4972465f34d57ce81a0c55782e9fcbc4c91c90', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), index.h("div", { key: '119b244389b740a05b266c80a78bffd2287f6dab', class: "value-group" }, this.renderPrefix(), index.h("div", { key: '9a9fc38d8c997b3ce6db3715a1aed622ec0af586', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), index.h("limel-3d-hover-effect-glow", { key: '1809611bebee438d5b840907f09adda725c7849c' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

package/dist/cjs/limel-popover_2.cjs.entry.js

@@ -114,17 +114,17 @@ const Popover = class {
             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 (index.h("div", { key: '862c9700bce5d7a3f55b20cb4ef8eb8346e62a25', class: "trigger-anchor" }, index.h("slot", { key: '08dd9ac01930db903dba46c15e25d00727f251ff', name: "trigger", ref: this.setTriggerRef }), index.h("limel-portal", { key: 'bc03a58425d52d5d7447a5ed1308ee51c51480b5', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, index.h("limel-popover-surface", { key: 'a9b117aee79359fa1f2800b914aed8ed8ab2a203', contentCollection: this.host.children, style: cssProperties }))));
+        return (index.h("div", { key: 'ac6e4c9358d68223f43ea60a29302d725438cf05', class: "trigger-anchor" }, index.h("slot", { key: '5e5ae7d194f7cc005573e909cd10343283603a7f', name: "trigger", ref: this.setTriggerRef }), index.h("limel-portal", { key: '5d4bda03c1ea9b07c17b7222fb2f30e29af9b3d3', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, index.h("limel-popover-surface", { key: '0f9804103a70f924375429ba7e96ad62858cb2ea', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;
@@ -132,7 +132,7 @@ const Popover = class {
         if (this.open && !clickedInside) {
             event.stopPropagation();
             event.preventDefault();
-            this.requestCloseAndRestoreFocus();
+            this.close.emit();
         }
     }
     getCssProperties() {

package/dist/cjs/limel-select.cjs.entry.js

@@ -553,7 +553,7 @@ const Select = class {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (index.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 (index.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/cjs/limel-shortcut.cjs.entry.js

@@ -48,7 +48,7 @@ const Shortcut = class {
     render() {
         var _a, _b, _c, _d, _e;
         const rel = linkHelper.getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
-        return (index.h(index.Host, { key: '4c999ffbf57f45f652d4bfa881b54e421a58df8f', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.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 }, index.h("limel-icon", { key: '421faadecac1f5444ecab389574ad24cab6d7012', name: this.icon }), index.h("limel-3d-hover-effect-glow", { key: '0d932adbb6b7c343b3120d01e866b29d4c165543' })), this.renderLabel(), this.renderNotification()));
+        return (index.h(index.Host, { key: '6d8f34f6545714c032ca8a106bd19b8c25b49c9e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.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 }, index.h("limel-icon", { key: '065f25188bb6a712e3933d89067f6151362eee72', name: this.icon }), index.h("limel-3d-hover-effect-glow", { key: '7c0ac50c83d7047d2745427c210e278150951b02' })), this.renderLabel(), this.renderNotification()));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/limel-snackbar.cjs.entry.js

@@ -147,14 +147,14 @@ const Snackbar = class {
         }
     }
     render() {
-        return (index.h("aside", { key: 'e07fbddded6a243a118dd9122db77e8286d5733e', popover: "manual", style: {
+        return (index.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 }, index.h("div", { key: 'd672fadb9f690c99c60b0582cf371313278a9642', class: "surface" }, index.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 }, index.h("div", { key: 'e256db2465275aee96cdd0b523382bfe26f4fed3', class: "surface" }, index.h("div", { key: '02cbd256b396c3aab857aebe0ba05db1a5d00d04', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

package/dist/cjs/limel-switch.cjs.entry.js

@@ -67,7 +67,7 @@ const Switch = class {
         makeEnterClickable.removeEnterClickable(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '3acdf2f3d34ab4cc8411638be9c8fe66a98b173d' }, this.readonly
+        return (index.h(index.Host, { key: '06ea93968a9f60b3fe115e1f54a9354cd4b8e891' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }

package/dist/cjs/limel-tab-bar.cjs.entry.js

@@ -2084,11 +2084,11 @@ const TabBar = class {
         this.tearDown();
     }
     render() {
-        return (index.h("div", { key: '5c2300a224442e40e2dc2f6b49538f0688bc7a53', class: "mdc-tab-bar", role: "tablist" }, index.h("div", { key: 'bd4d9d8f3f302cf1592fab3cfd15d3316f132470', class: {
+        return (index.h("div", { key: 'bdc335fde021cff31e6a47b8d0ab14de6e1f7c9b', class: "mdc-tab-bar", role: "tablist" }, index.h("div", { key: 'e4c25d25283507ce29d06260b5dd5fd9cbc41a49', class: {
                 'mdc-tab-scroller': true,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, index.h("div", { key: 'f48abfa3b0169e952befc47e8adf9574aee616af', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, index.h("div", { key: '7322a7ab34b24822a1043ad3172f1b2f3efc6244', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), index.h("div", { key: '668ebaaf096d5926b17e1e1a50b0569c4e6d11c1', class: "scroll-fade left" }), index.h("div", { key: '02c3b8484f4467ece6e1a0617578b0967641a536', class: "scroll-button left" }, index.h("button", { key: '22bd6170b849aadb7a78b3f0fe2ae0213d7a6cb5', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, index.h("limel-icon", { key: '62f4b1fff0ab4fac4b8b379c2ab5bda44579e589', name: "angle_left" }))), index.h("div", { key: 'fe3e1014ffde25bea6f16731e0edc3ce280f321d', class: "scroll-fade right" }), index.h("div", { key: 'd79950639da735d25053272ae0a53f28d3ce233c', class: "scroll-button right" }, index.h("button", { key: '24b05b9fdae0479c15159253d7c785853db21b1d', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, index.h("limel-icon", { key: '5388965c9a27d888583ddc2d892ea5c3810500e4', name: "angle_right" }))))));
+            } }, index.h("div", { key: '0fd262305222f95f4dfab1e792a0686b9ffb3117', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, index.h("div", { key: 'ff4dd675de9c6cde5c4a0dddd90211a73ea34962', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), index.h("div", { key: '3c201211c344ce09ef12166acfab2af0b3a4f64c', class: "scroll-fade left" }), index.h("div", { key: 'e124c7d58974629de53319948d0a961a293989a8', class: "scroll-button left" }, index.h("button", { key: 'df876f20c9177923218d773a5fd0880ac7eefb2a', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, index.h("limel-icon", { key: '65dbb20efcd7f233cd8637641e764f1be7b7e2a0', name: "angle_left" }))), index.h("div", { key: '5e8c69252a54be76393de70822ec2f6817e7a6d1', class: "scroll-fade right" }), index.h("div", { key: '341d0c50fe1513c8ad254ff8cebaf9be8607d5f0', class: "scroll-button right" }, index.h("button", { key: '8ea21fad4dace603ffdc8c51ac597806979a9dd4', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, index.h("limel-icon", { key: 'e28a22555f3ce6e434afa64faac037ae63787141', name: "angle_right" }))))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

package/dist/cjs/limel-tab-panel.cjs.entry.js

@@ -44,7 +44,7 @@ const TabPanel = class {
         this.tabs.forEach(this.setTabStatus);
     }
     render() {
-        return (index.h(index.Host, { key: 'dbd02a89b1b4c383652157b6466c8c0f94ef1ede', onChangeTab: this.handleChangeTabs }, index.h("div", { key: 'ccee27da7513a7e1bc35f74f35d9139ed3c640d2', class: "tab-panel" }, index.h("limel-tab-bar", { key: '770e20bcd0567d1538709b2172ee16cc2f80db5f', tabs: this.tabs }), index.h("div", { key: '6a320ec4081da33674a9174bc90edaec223f52e8', class: "tab-content" }, index.h("slot", { key: 'e31d4491e2237283be6497fe64542d93003b6c63' })))));
+        return (index.h(index.Host, { key: 'd1eb596b4d03fa6ac2ada4f05e67f243835cf341', onChangeTab: this.handleChangeTabs }, index.h("div", { key: 'f3970a0afb5c17ea357dcd9fcb5c031a71d4d7da', class: "tab-panel" }, index.h("limel-tab-bar", { key: 'ff232710bd7284cf7f96739c3aeaf1a9d7233101', tabs: this.tabs }), index.h("div", { key: 'b6d3c3a176466efd859eacd90a610c8c8895bc8a', class: "tab-content" }, index.h("slot", { key: '7a442c6f4347e506b3037dd2ec19f7edc7b2b066' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();

package/dist/cjs/limel-table.cjs.entry.js

@@ -31030,16 +31030,16 @@ const Table = class {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (index.h(index.Host, { key: 'c6ccce572339f3e0ccb344672ca2b82d632ff8d9', class: {
+        return (index.h(index.Host, { key: 'ffcd07f62babe29a526ae77d2c36afa4bc066cc9', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
-            } }, index.h("div", { key: 'd4e10ab0ae22f480fd939a78e882e183db00a22b', id: "tabulator-container", class: {
+            } }, index.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,
-            } }, index.h("div", { key: '12ecdd76202a8332330b28cd46c78dacda381980', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, index.h("limel-spinner", { key: '239e6d70bdbda4d6df7d526b0278e3ab683c3927', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), index.h("div", { key: '837fda38d2c98f3334b43f5206e78e5a1aa818e1', id: "tabulator-table" }))));
+            } }, index.h("div", { key: '7f2f41c8faff5b81e49bd0731f0cf7f268bbf1da', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, index.h("limel-spinner", { key: '95ab49709be868ea55a9b92b262c93fb93f41f4b', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), index.h("div", { key: '0c3e2605fefc6ddfdd72a68a13182d0517448f74', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

package/dist/collection/components/badge/badge.js

@@ -4,15 +4,15 @@ import { abbreviate } from "./format";
  * 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
  */
 export class Badge {
     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/collection/components/banner/banner.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 /**
- * @exampleComponent limel-example-banner
+ * @exampleComponent limel-example-banner-basic
  * @slot buttons - Buttons to show in the banner
  */
 export class Banner {
@@ -20,7 +20,7 @@ export class Banner {
         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/collection/components/button-group/button-group.js

@@ -31,7 +31,7 @@ import { createRandomString } from "../../util/random-string";
  * 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
@@ -61,7 +61,7 @@ export class ButtonGroup {
         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/collection/components/checkbox/checkbox.js

@@ -22,7 +22,7 @@ import { CheckboxTemplate } from "./checkbox.template";
  * 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
  */
@@ -131,7 +131,7 @@ export class Checkbox {
         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 }));
     }
     static get is() { return "limel-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip-set/chip-set.js

@@ -36,7 +36,7 @@ import { createRandomString } from "../../util/random-string";
  * ```
  * :::
  *
- * @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
@@ -269,7 +269,7 @@ export class ChipSet {
             });
         }
         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/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 {