@limetech/lime-elements 40.22.0 → 40.24.0

package/dist/collection/components/form/form.test-schemas.js

@@ -289,6 +289,17 @@ export const dateSchema = {
         birthday: { type: 'string', title: 'Birthday', format: 'date' },
     },
 };
+// Its component renders a `limel-date-picker` in its shadow root.
+export const wrappedDateSchema = {
+    type: 'object',
+    properties: {
+        birthday: {
+            type: 'string',
+            title: 'Birthday',
+            lime: { component: { name: 'test-wrapped-date-picker' } },
+        },
+    },
+};
 export const integerSchema = {
     type: 'object',
     properties: {
@@ -896,3 +907,53 @@ export const untitledRowSchema = {
         },
     },
 };
+export const dependencyWithDefaultsSchema = {
+    type: 'object',
+    properties: {
+        columns: { type: 'integer', title: 'Columns', default: 5 },
+        limetype: { type: 'string', title: 'Limetype' },
+    },
+    dependencies: {
+        limetype: {
+            properties: {
+                propertyName: {
+                    type: 'string',
+                    title: 'Name property',
+                    default: 'name',
+                },
+            },
+        },
+    },
+};
+export const dependencyWithChangingDefaultSchema = {
+    type: 'object',
+    properties: {
+        limetype: { type: 'string', title: 'Limetype' },
+    },
+    dependencies: {
+        limetype: {
+            oneOf: [
+                {
+                    properties: {
+                        limetype: { const: 'person' },
+                        propertyName: {
+                            type: 'string',
+                            title: 'Name property',
+                            default: 'name',
+                        },
+                    },
+                },
+                {
+                    properties: {
+                        limetype: { const: 'company' },
+                        propertyName: {
+                            type: 'string',
+                            title: 'Name property',
+                            default: 'companyName',
+                        },
+                    },
+                },
+            ],
+        },
+    },
+};

package/dist/collection/components/form/invalid-input.js

@@ -0,0 +1,14 @@
+/**
+ * Listens for `invalidInput` from the element or from inside it, such as
+ * a `limel-date-picker` in a custom component's shadow root.
+ * @param element - the field's element
+ * @param report - called with each message
+ * @returns a function that stops listening
+ */
+export function listenForInvalidInput(element, report) {
+    const listener = (event) => {
+        report(event.detail);
+    };
+    element.addEventListener('invalidInput', listener);
+    return () => element.removeEventListener('invalidInput', listener);
+}

package/dist/collection/components/form/widgets/date-picker.js

@@ -13,6 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import moment from "moment/moment";
 import React from "react";
 import { LimeElementsWidgetAdapter } from "../adapters";
+import { listenForInvalidInput } from "../invalid-input";
 export class DatePicker extends React.Component {
     constructor(props) {
         super(props);
@@ -20,6 +21,7 @@ export class DatePicker extends React.Component {
         this.state = {
             modified: false,
         };
+        this.watchInvalidInput = (element) => listenForInvalidInput(element, (message) => { var _a, _b; return (_b = (_a = this.props.options) === null || _a === void 0 ? void 0 : _a.onInvalidInput) === null || _b === void 0 ? void 0 : _b.call(_a, message); });
         this.handleChange = this.handleChange.bind(this);
     }
     render() {
@@ -32,7 +34,7 @@ export class DatePicker extends React.Component {
                 change: this.handleChange,
             },
             widgetProps: props,
-            extraProps: Object.assign({ type: type }, (_b = (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props),
+            extraProps: Object.assign(Object.assign({ type: type }, (_b = (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props), { ref: this.watchInvalidInput }),
         });
     }
     getValue() {

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

@@ -29,7 +29,7 @@ export class FormHeader {
         this.headingLevel = 1;
     }
     render() {
-        return (h(Host, { key: '832fda595a6e861d113ad64890b5ba0f4958e830' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+        return (h(Host, { key: '64e0934e418bf6fff83f140b02faf7f6cb8f4f0f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
     }
     renderHeading() {
         if (!this.heading) {

package/dist/collection/components/grid/grid.js

@@ -12,7 +12,7 @@ export class Grid {
         console.warn('limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout');
     }
     render() {
-        return h("slot", { key: 'c1e2b8ee2a681748256f6a0d7cd6db7aec27872e' });
+        return h("slot", { key: 'c4db2bee4485745f79636e4a3a2f04fa603af9b8' });
     }
     static get is() { return "limel-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class Header {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: '25d008daf81297376579028f9116d4f78580e029' }, h("div", { key: '9bb06b9d428bcc709ef6a2cbfc5e7811b35d2c5e', class: "information" }, this.renderIcon(), h("div", { key: '417dcd90bbe18770eb25f69d3c614752571868b1', class: "headings" }, h("h1", { key: '591449da7543a5f708729bdda5ea231dfa9d4e17', class: "heading", title: this.heading }, this.heading), h("h2", { key: '8696119afe92d304fc03fa5d6b092419029bc052', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '4903a0c675afa7371943f2b007d7367649eb473a', name: "actions" }, h("slot", { key: '009934d3d4ae2ff2932754e452bfb714506f9e66' }))));
+        return (h(Host, { key: '35935910757d74259ce3a286922ee0d35aad1ec9' }, h("div", { key: 'bd95cc50ec22e4881d3254aebec9143e6bb2a634', class: "information" }, this.renderIcon(), h("div", { key: '54a84e428595f989548855559cf71172264301ba', class: "headings" }, h("h1", { key: '99ccc155b7fa5a00a63f9c2a9caa0918ef33dc13', class: "heading", title: this.heading }, this.heading), h("h2", { key: 'cc06e5bac3f36daad46d8335bb8ee80ef7bb27e0', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '2e94d276dcbe7404d4f618125763b5b1e5ff47ef', name: "actions" }, h("slot", { key: '6a5f81a642323a7c6bc8839f5ee8e3c6f11f905b' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

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

@@ -19,7 +19,7 @@ export class HelpContent {
         };
     }
     render() {
-        return (h(Host, { key: 'd0f448293f17fbd80e5c8b0b26aa32d58af1d5ac' }, h("limel-markdown", { key: 'b69b41f86e1c362c3d12c50d24c579bf9d5a434d', value: this.value }), this.renderReadMoreLink()));
+        return (h(Host, { key: '213707af11bc0757a2b50652aeaf4f8869a8dd7c' }, h("limel-markdown", { key: 'f0f0ee7a087a8705ebb7fa463bf7f0d5f1abb207', value: this.value }), this.renderReadMoreLink()));
     }
     static get is() { return "limel-help-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,9 +41,9 @@ export class HelpComponent {
         };
     }
     render() {
-        return (h(Host, { key: '9f166e16ef9ddfd552bcf9bde262ca84e4b31399' }, h("limel-popover", { key: 'f0bf20043acb1ac323fcc01e6f9d64d8481b9382', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: 'c3a62e9d9f82cc16dfb4aa39a711397b0f91def1', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: '0456a88ddfbe21f501bb58fd0792eaeb39ad3962' }, h("limel-popover", { key: 'db4fd15af11578c40ae6ed4e39f9931bea14d457', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '0e530613dcf6c02e879a4a1ae52e1e24403ef30d', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '75edc59e9c5a2557c9766165e52f6aa1b5baee49', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '64d119e480cb64cbdeab156787dddc6f36e1368e', 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

@@ -50,9 +50,9 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: 'e42ca019869a7b4b47d93c4f402bdbf3b99b37cf', tabIndex: -1, class: {
+        return (h(Host, { key: '5bc750e2c8c7bce88fd9fc6f2ec4f27133ad5ed7', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3db5b20efaa64d9a20b6da5c711d2fb64393143a' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '7bc84f9c6ae3ac8de904c56a97497f8f427583f4' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
     static get originalStyleUrls() {

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

@@ -30,7 +30,7 @@ export class Hotkey {
         const parts = tokenizeHotkeyString(this.value);
         const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
         const ariaLabel = getHotkeyAriaLabel(this.value, this.isApple);
-        return (h(Host, { key: '0cf81f7754511dce0358be8ba428e047e6bf6ab5', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
+        return (h(Host, { key: 'bf8ed107c45987511194dc5b44e9c414f690f66d', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
     }
     static get is() { return "limel-hotkey"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class Icon {
         this.loadIcon(this.name);
     }
     render() {
-        return h("div", { key: '154a32782255d3b6870d1ea67bdf8e8906655c9a', class: "container" });
+        return h("div", { key: '4ba343ef7bc8cfb1c035c3c947388954d9218b3f', class: "container" });
     }
     updateAccessibility() {
         if (!this.internals) {

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

@@ -52,7 +52,7 @@ export class IconButton {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: '24e71b62ab7e2d038ecc9c8982ffad932ecf89c0', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '435485320ca03a49d4ecce7e45d641e53ccbd107', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: 'a75232fbdba624fceddf7d7846cb6a5a8b33532a', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'd74d4073e4e7147adfa478f699e1269fb72e1718', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
     }
     renderIcon() {
         var _a, _b;

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

@@ -127,9 +127,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: '2d5b3fb9509298316af814acac20bbb1f6c22f85', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '2ce2856cca107671b539b5b462af04c3a9536a39', 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: '071f39e5edf3e116952c3a6c9b639298c90c6f4f', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '4e13663d26cefa33182920351c08a3006bf41b75', 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: '8cf1cdd2c841a3c30512b390748ec7af9ccaaa06', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '4b999b693dd6e882370006edfede8a54488a2873', class: "value-group" }, this.renderPrefix(), h("div", { key: '5b06443fe1171e158f78cadb11291501507e16bc', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '18c6b6dd3bdaacce430ddd4e2f7dbc65e400b3d0' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '8f05aca2443b71bd1fce49ace715afbaaa440282', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '1f8b0f1e1199a9908a3613ab18a7cbfc421c58c6', class: "value-group" }, this.renderPrefix(), h("div", { key: 'b98294d9c40828fd6d5a177f5532022168b09b9b', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: 'e26ed5c63e3aa37b8c3d427487c2836e5d66b346' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

@@ -703,7 +703,7 @@ export class InputField {
             properties['aria-haspopup'] = 'listbox';
             properties['aria-expanded'] = String(this.suggestionsEngaged && this.isSuggestionListOpen());
         }
-        return (h(Host, { key: 'c14cb199267a0efbf6dc974e31d479be51653c91' }, h("limel-notched-outline", { key: 'd1783d42e0da20cd4224065b6cffba95be9850eb', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '67cb792d8718c2aae28ce509e931fd578d4df139', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList(), this.renderSuggestionsMessage()));
+        return (h(Host, { key: '35c8c2ce777eb327994089a5c6c9aa0dc3e32528' }, h("limel-notched-outline", { key: 'be4d77167a4ad7437c5e18dc7b9fce2c5965a6a5', labelId: this.inputId, labelElementId: this.labelElementId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: 'fa3a652d313d4561d3cf0a172e70fcc0346be764', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList(), this.renderSuggestionsMessage()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {

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

@@ -186,7 +186,7 @@ export class List {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'e6619c70eab882e1a9ed482098a7f1ed673c74a1', style: {
+        return (h(Host, { key: '2ff544c93286e06ac298eb1cc8fa2567c360fc7a', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

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

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

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

@@ -22,7 +22,7 @@ export class MenuItemMeta {
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: '966057ee998af91916099c59398ea93742175fb5' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: 'faedb5e17e19f8a9a2b8252f1af115099ae53312' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
         if (this.hotkey) {

package/dist/collection/components/markdown/markdown.js

@@ -170,7 +170,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: '847bffc9b7fa4fbec42b705d3019c635d88fb6c6' }, h("div", { key: 'cd84ef0919fc4b2b80090de836366b317e60e51a', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'f51d4ce2bc5997174b764ceedafdb8bd41351945' }, h("div", { key: 'a16ca446fd14455d86417fd6d5eec9a6aa8d365b', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/masonry-layout/masonry-layout.js

@@ -59,7 +59,7 @@ export class MasonryLayout {
         const style = {
             height: `${this.containerHeight}rem`,
         };
-        return (h(Host, { key: '08a40d19c6457ff0d8a1da75de5b3e9379b05999', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '736ef2dd358e6fb03daf87fe9b23d4625c5c3d64' })));
+        return (h(Host, { key: '3b80e77df259cd79e939c920cf71141237263dee', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: 'b0139c075f47c7dbea879807fecca84927c56b52' })));
     }
     setupObservers() {
         this.resizeObserver = new ResizeObserver(() => {

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

@@ -593,7 +593,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: '26574aeebd102eaf96a2893508537ab34d7ce6d4', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'fa7fa2b583684b4d83467be5004b98146e8ea71e', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '6443fc725c1054cee3aa6bc136d3c90891c897a5', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'd9e4719f9c97ec82b15674305a66c6ddd6aac512', 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: 'f6ac70782b0ff263af1bd6a53c9747e3ce5753cf', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'f56b5854098853a5917fae62441f44e28155feb4', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '123e00157c611599cd98019603f7a8e5b0084622', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '69e6e046881dacee20233fc36bde8370fd162d44', 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()))));
     }

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

@@ -88,7 +88,7 @@ export class MenuList {
             iconSize: this.iconSize,
         };
         const html = this.MenuListRenderer.render(this.items, this.config);
-        return h("div", { key: '8cb1b8b5fc263086d4dbc83d7da2ae0b45c58d1d', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: '3e3164ce24bddffb3369b133e7ceb0b00bcec67a', class: "mdc-menu mdc-menu-surface" }, html);
     }
     itemsChanged() {
         setTimeout(() => {

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

@@ -103,7 +103,7 @@ export class MenuSurface {
             'mdc-elevation-transition': true,
             'mdc-elevation--z4': true,
         };
-        return (h("div", { key: '9a024d806ff045158b49fb9b5d92617852ceb4af', class: classList, tabindex: "-1" }, h("slot", { key: 'da767dcce51d5a8b667d195e747e0756117be1ff' })));
+        return (h("div", { key: 'd36ccae7abd41e37ff54574e728e1ab87eb3a144', class: classList, tabindex: "-1" }, h("slot", { key: '74c670a4bcda11891b461726bec517a122ca1d7e' })));
     }
     static get is() { return "limel-menu-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notched-outline/notched-outline.js

@@ -59,7 +59,7 @@ export class NotchedOutline {
         this.hasFloatingLabel = false;
     }
     render() {
-        return (h("div", { key: 'ade07e3a9e2a63f0037f46fdbd01f866936c55ed', class: "limel-notched-outline" }, h("slot", { key: '1d7619696aa3c80b17390df8b5bc96591cb0fe36', name: "content" }), h("span", { key: 'a791e6757ff14e7bb2c2a3f833f9877922eebd51', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '623d2d85813b66a3b0a2e33bbbf3cdd51b3505e0', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'd5b0c6c6e7a7d5a15fc8795e3126fe3b115019ee', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: '8ca3a2622aa918101d5d78f94c9d279276dbba10', class: "limel-notched-outline" }, h("slot", { key: '508f8fb8cc48ba667ad250acae46ff2f4c25ef42', name: "content" }), h("span", { key: 'a071aa9212705b001e52e055d61f1be42a10ae69', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'ee1602e3637cbbba489b8b5be5bf65f6352738c5', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '1517c575f1c4299a5a2d636e0e456b24f939d418', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {

package/dist/collection/components/pagination/pagination.js

@@ -304,7 +304,7 @@ export class Pagination {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: '7c47cdc658859b4cd8199ef92ebd9bc48275a8ae' }, h("nav", { key: '3bba45547a7183a4b1df58294a56788f9b2e078f', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '60fff33d8e135b1605d0a0f68b6c1ede1b571281', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: 'de190cbc350b1e52b8f712970aedeb5ec1f564f7' }, h("nav", { key: 'bbf20a3b89c04ad763022f6a2e3e06dc8ccb8441', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: 'ddeeb72b442ccc083db46a37303041a088c8f201', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,

package/dist/collection/components/picker/picker.js

@@ -212,7 +212,7 @@ export class Picker {
         if (!this.multiple) {
             props.maxItems = 1;
         }
-        return (h(Host, { key: '1670bff5822f930a3eca69ad2a016cea978b3822' }, h("limel-chip-set", Object.assign({ key: '173a7facd5271992e792ce6a56a34a8890c9135f', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.isEditing, suggestionListId: this.canOpenList() ? this.portalId : undefined, suggestionListOpen: this.suggestionsEngaged && dropdownContent.length > 0 }, props)), this.renderPortal(dropdownContent), h("span", { key: 'c151104c5059aadc3cfa526267184b663e87bebd', class: "suggestions-message", "aria-live": "polite", ref: this.suggestionsMessage.setElement })));
+        return (h(Host, { key: '1f17ce38101bf4385e0fe9f1edd0bff33a9717b3' }, h("limel-chip-set", Object.assign({ key: '4cfddf2993deaf5e41c74012d3408278b8c3d776', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.isEditing, suggestionListId: this.canOpenList() ? this.portalId : undefined, suggestionListOpen: this.suggestionsEngaged && dropdownContent.length > 0 }, props)), this.renderPortal(dropdownContent), h("span", { key: '9ea52a32bc1c0394b1da4d08928f8b1ea498caa4', class: "suggestions-message", "aria-live": "polite", ref: this.suggestionsMessage.setElement })));
     }
     onChangeValue() {
         this.chips = this.createChips(this.value);

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

@@ -143,7 +143,7 @@ export class Popover {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: '25f9721cd8faad3f7f8d2d6f6f5152bfa507783c', class: "trigger-anchor" }, h("slot", { key: 'b3a48d53f82b3caaf6ba3123b8df0c6b2880a6d7', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '3707b6a5157e89bc57f0687ef2ca74a592226e70', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'bb5eb9c961732fe8582cc3e95787803efec6e6a4', contentCollection: this.host.children, popupRole: this.getNamedPopupRole(), accessibleLabel: this.accessibleLabel, style: cssProperties }))));
+        return (h("div", { key: '5b5c991fb187c701eba21b4b88a524496f10aef3', class: "trigger-anchor" }, h("slot", { key: '2df2d65cdcf0ada6b9325fd1ce4f8fa9200e0619', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '09eedb8d05621f0e0270fdfa694a3b9c85704aa9', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'd73deaf861615e020c8921b1d42e80bc05fb079e', contentCollection: this.host.children, popupRole: this.getNamedPopupRole(), accessibleLabel: this.accessibleLabel, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;

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

@@ -8,7 +8,7 @@ export class PopoverSurface {
         this.appendElement();
     }
     render() {
-        return (h("div", { key: 'b3b766fa5d9b26b48136c0856bbfb40745498b7c', class: "limel-popover-surface", tabindex: "0", role: this.popupRole, "aria-label": this.accessibleLabel }));
+        return (h("div", { key: '79b0aceef00e2effabb93322a29608cf65bd7cda', class: "limel-popover-surface", tabindex: "0", role: this.popupRole, "aria-label": this.accessibleLabel }));
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');

package/dist/collection/components/portal/portal.js

@@ -115,7 +115,7 @@ export class Portal {
         this.showContainer();
     }
     render() {
-        return h("slot", { key: '37784f868a6be293c052c90eaa87b40f97717694' });
+        return h("slot", { key: '3a994ee9948057d3f461ef78d0b2487673044b98' });
     }
     onVisible() {
         if (!this.container && this.visible) {

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -37,7 +37,7 @@ export class RadioButtonGroup {
         };
     }
     render() {
-        return (h("limel-list", { key: 'b9c2e1312803c82e8729e0f55b2e2c06e24c00a0', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: 'a1b1609c6de0e6920fd9abdd99365b731bf7645a', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
     }
     createItems() {
         return this.items.map((option) => {

package/dist/collection/components/radio-button-group/radio-button.js

@@ -31,12 +31,12 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonComponent {
     render() {
-        return (h(Host, { key: '9fd754e0cad07b0dafc27ff12966f1ecc43ac94c', class: {
+        return (h(Host, { key: 'ee418b0852df50c2f447cf8cc8fa484fbc94fbda', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: 'e6dfb4a56fd955db9718400bdf9f1315d768883c', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '371b6ff8362f34dc1dcedb254c99246c36bbd8db', class: "box" }), h("label", { key: '2a65aee91c5f82a13b9e469f6bd5eb9126d798cf', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: '64e48d5da0d60e676d58ee2bf4b518979763eee1', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'ec961f4a86f9322b457e28707f0b6eae38bef772', class: "box" }), h("label", { key: '1d64f2c8fe2f3d06c5257e78af47d5799d1d7d71', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
     static get is() { return "limel-radio-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/resize-handle/resize-handle.js

@@ -84,7 +84,7 @@ export class ResizeHandle {
     }
     render() {
         const name = this.getName();
-        return (h(Host, { key: 'ae82ff62dfeb954f5dec181a8d3e0a0e564e0219', onKeyDown: this.handleKeyDown, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("div", { key: '68826930c86850047893b5f8edcb8203000b0126', role: "separator", id: SEPARATOR_ID, tabindex: "0", "aria-orientation": getOrientation(this.location), "aria-label": name, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '15be73014f20e7788cdb3a9ff0d332a0c036a1fe', role: "presentation" }, h("span", { key: '69e9b4c0496d659db9b82d91339ab60e455b8bcc' }), h("span", { key: '9549feb07707e9ba8751ab4d06e6c2b5f9d1bbd7' }), h("span", { key: '4ce59a99ca80989774915fa499a5251ef041db83' }))), h("limel-tooltip", { key: 'cbadd628e570b83c4bd3944e7e87d5834dbcd418', elementId: SEPARATOR_ID, label: name, helperLabel: this.getHint(), openDirection: this.location })));
+        return (h(Host, { key: '5f3d4376779f16cfc1294f0ed311069988f8544e', onKeyDown: this.handleKeyDown, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("div", { key: 'b4f788298d7482d67d42d7ee7ba22057bc48b7bf', role: "separator", id: SEPARATOR_ID, tabindex: "0", "aria-orientation": getOrientation(this.location), "aria-label": name, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: 'a0eb39fb74015f5a58ec01c840547dc88accca80', role: "presentation" }, h("span", { key: '4c744d8812610d426c9c8d21e90c56e7ac35a5c1' }), h("span", { key: 'ee9a4c7812fc28aead356675825d3ba609e323d4' }), h("span", { key: '6bdca471d4ee4fa91a0a14fd0450509be15eef38' }))), h("limel-tooltip", { key: '094de9ac5e3e2242853b2965868b82b7dae00b84', elementId: SEPARATOR_ID, label: name, helperLabel: this.getHint(), openDirection: this.location })));
     }
     getName() {
         if (!this.resizableRegionLabel) {

package/dist/collection/components/scroller/scroller.js

@@ -87,12 +87,12 @@ export class Scroller {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '78f61e7088a1810df15e343a8efe7e5b9600ed40' }, h("div", { key: 'fab873acfcd0635b23321c97724f5d43dffdac57', class: {
+        return (h(Host, { key: '1545394989338cff0a3d338364cd8379af2f7ce7' }, h("div", { key: '1ed02c23e9d17850828306f203a6cabbd8b0796d', class: {
                 scroller: true,
                 [this.orientation]: true,
                 'can-scroll-to-start': this.canScrollToStart,
                 'can-scroll-to-end': this.canScrollToEnd,
-            } }, h("div", { key: '660a1d2df42aa6087065b1ace5d538ec64e59d6a', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '9ec447c273092f67a645676f0c5f34e6d08c128f', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: '67385c7bd003d7062b045250afedc0ca21f5e5f8', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
+            } }, h("div", { key: '4297b483a05b4636f4e1a8e571145c6489117ce0', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '61e55181e43394d7a9aef2ddee0269295d845244', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: 'da3b7bc2ece87c0d6b6c1007b90bf6a55b123ad2', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
     }
     renderEdge(edge) {
         return [

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

@@ -183,7 +183,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '4e7a0b4acfc0a76fa2e10089d974796a08b81f22', id: this.portalId, disabled: this.disabled, 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, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: 'b17aca15fe709233371eeed80fda763f86bfefad', id: this.portalId, disabled: this.disabled, 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, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {

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

@@ -61,7 +61,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: '85fa2d40b55cf7760d741790a1c46aed214b9138', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'd0947264d9e635538b680c49f6d63d9b1fe5c276', "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: '49f8738c4f675badac5c048a74b15070f883e425', name: this.icon }), h("limel-3d-hover-effect-glow", { key: 'd079dc72de9f71b9694ce6dad18f37082ebf4c8b' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: '742b3bdc12fb7bf217d5a8eabda1d2e6cbf60864', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'bf80c43f236773090edd602411b08ede802b451a', "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: '557feab8cba4629e06b9dfc9ef92c328282b728b', name: this.icon }), h("limel-3d-hover-effect-glow", { key: 'a494f87d4d0397e97f899484b3c0d0403ef8c324' })), this.renderLabel(), this.renderNotification()));
     }
     static get is() { return "limel-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

@@ -233,7 +233,7 @@ export class SidePanel {
             .querySelector('button.close')) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '9b897330f9b462ea664d78d5886c1a192b95b037' }, h("section", { key: 'dd60b5b91233d1dedde3fbdabf6145a2f008e99a', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: 'd6e145ccba5ca797168eeb39da030844a03d1dc1', class: "content" }, h("div", { key: 'f1b5b41bcd39b5b1192ed080ddb770a7b5f694ac', class: "toolbar" }, this.renderCloseButton(), this.renderActions()), this.renderHeader(), this.renderBody())), this.renderStack(), h("span", { key: 'b84046762f4f9c81a8a93eb388037b7565f6457a', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '2a3c7a1084875e6d57fe401716e550a365d8adc8', "data-limit": "max", ref: this.setMaxLimit })));
+        return (h(Host, { key: '4648c2d638032c471fa4ae9b16395492b9f276c8' }, h("section", { key: 'b871b813a52f15c03c29e93bfe98bb8e5b3ae014', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: 'dca652ed98193ca76974dc9523565ecdc1ac82d7', class: "content" }, h("div", { key: 'd8b3025cd7905179ab42853d32212858377d8833', class: "toolbar" }, this.renderCloseButton(), this.renderActions()), this.renderHeader(), this.renderBody())), this.renderStack(), h("span", { key: '03ae183b71a95be39c680efed2b5f27aa1c2957c', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '8e033e864f7ce5072841ec6cd01b78b4237ce442', "data-limit": "max", ref: this.setMaxLimit })));
     }
     // A native button and not `limel-icon-button`, because the hover animation
     // styles the icon, which is inside the shadow root of `limel-icon-button`.

package/dist/collection/components/slider/slider.js

@@ -271,15 +271,15 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: 'f36c727962bfff9e4b4d1f59659edf19e3d7966f', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '0e87be789bc4f5462b45d9ac9e7f2318ca59000f', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: '2d46c8256b2497a041ad0ef70a17a8a9c3a68646', slot: "content" }, h("div", { key: '55f05f623a70dd946189a70b399372c1409757e2', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: 'f56b592cdab90fd824081529800ad995b0129dc4', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
+        return (h(Host, { key: '34d7989004a63ab39c63015a2ecc36f7e76f0e22', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '339baab8fc3003086286b604a2fa14fc210b68a1', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'ed5ff315c6815c731f402ce637645d163d3759fe', slot: "content" }, h("div", { key: 'ddb204d3772ef67ae18599f9345ad71eecf2d34d', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '30700c63e8ded9fef8837a7c7b15817c3e4ec579', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
                 ? this.helperTextId
                 : undefined, "aria-invalid": this.invalid ? 'true' : undefined, "aria-valuetext": this.isUnset
                 ? translate.get('value-not-set', this.language)
                 : undefined, ref: (el) => {
                 this.inputElement = el;
-            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: 'bc8caf7e40128a09bd09c5dfaa1932702a3181ec', class: "track" }, h("div", { key: 'b76f3d65f499dfc0b0c689bc1f18af79842847e1', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '197a21d948777705839baf6c9e37606675d92952', class: "thumb" }, h("div", { key: 'e9f5ec56849f8165071d6c0b79f0366b4dbe664d', class: "knob" }), h("div", { key: '932a98222a1bd85cfcec64f318aaf7acb9b03e97', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '485c55a7330b5b5cd31b0dda4c5beb433e54676f', class: "track" }, h("div", { key: 'c25657e6c417d4c751411d6702673c9bef5c3471', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '996eadc493d5cd47f0cfc84a03d7129665a79538', class: "thumb" }, h("div", { key: 'ee9874986729ff0fda9f27016373a030f1efecb7', class: "knob" }), h("div", { key: 'db1bb4a02b5d3c35ac7f12ebd4a4ef39c9949713', class: "indicator", "aria-hidden": "true" }, this.isUnset
             ? '\u{2194}\u{FE0E}'
-            : this.displayValue))), h("div", { key: '19f3779a56a21d317bf350f99a5f93068b1be09d', class: "range-labels" }, h("span", { key: '4e4ad708a44753912606aa177dfe6a7c742138fe', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: 'b9e990eabfbe6284c732189be3609cc476caf169', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            : this.displayValue))), h("div", { key: '15e96fc9b1ca06efe92f2be0d792279006d1eaaa', class: "range-labels" }, h("span", { key: '54c38dcbfd01ca0df172a7d5be11f13873f1c5e1', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '3bb948aea0d53aa7e4c9a28025f56d616612f2b0', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

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

@@ -122,14 +122,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: '86271cf61d1b060d3f12b753be16190d111ea3d1', popover: "manual", style: {
+        return (h("aside", { key: '8d9bd4b385a28dc14628137ee0cc426237369972', 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: 'cf0e868a834c0ec189cb42a6f22bbc7435d9f566', class: "surface" }, h("limel-markdown", { key: '4d55bc3eac78572795aaa1eef0d3d43721150123', class: "label", value: 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: '9ceef904ab2ada2bc5556f6a2713d1c62bf2d285', class: "surface" }, h("limel-markdown", { key: '5d71b856757625a28cc519b54ed3383699f51628', class: "label", value: this.message }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

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

@@ -16,7 +16,7 @@ export class Spinner {
         this.limeBranded = false;
     }
     render() {
-        return (h(Host, { key: '298ed5130e128e780cef1017670d9252928678cd' }, h("svg", { key: 'ae79c4ffb443afdd9a905e2e277c3ca445ef5e2f', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: '64abe2a254a82c8b7d8089f9594b1d67d7d67fec' }, h("svg", { key: '59f1f3288aa3ea800c39047176606fbf238c937f', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

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

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

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

@@ -79,7 +79,7 @@ export class Switch {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: 'dd5e5f289e3d62bfe697d93b178ffc0ecd84e498' }, this.readonly
+        return (h(Host, { key: 'c7a126aec46e6420cdcedf8050939ae12c7dd1d3' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }

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

@@ -101,7 +101,7 @@ export class TabBar {
     }
     render() {
         const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), this.getNavigationOptions());
-        return (h("div", { key: '520c0e3987f3de626ca2c01809b42b504146eb76', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: '60512f257f8ef89cc0b6142ac80d515060bbbba0', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTabOrMovableTab(tab, index, index === tabStop)))));
+        return (h("div", { key: '0ccb8e9ab24ae7e53107f085a773d563486a4480', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: '262a7c0d46426ffc2d9ce97ef2f817074e91442e', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTabOrMovableTab(tab, index, index === tabStop)))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);