@limetech/lime-elements 39.0.4 → 39.1.0

package/dist/collection/components/email-viewer/split-email-address-list.js

@@ -0,0 +1,106 @@
+/**
+ * Splits a comma-separated email address list (e.g. `To:` / `Cc:`) into individual
+ * recipient strings.
+ *
+ * In RFC 5322, address lists are comma-separated. However, commas can also appear
+ * inside quoted display names (quoted-string) and must then be ignored as separators.
+ * This splitter only treats a comma as a separator when it is outside quoted strings
+ * and outside angle-bracketed address parts (`<...>`).
+ *
+ * Notes:
+ * - If a display name contains a comma, it should be quoted or encoded to be
+ *   unambiguous, e.g. `"Doe, Jane" <jane.doe@example.com>` or
+ *   `=?UTF-8?Q?Doe,_Jane?= <jane.doe@example.com>`.
+ * - Real-world `.eml` files are usually RFC-ish but not always perfectly compliant.
+ *   Malformed input with unquoted commas in display names may be split incorrectly.
+ *
+ * @param value - A comma-separated list of recipients.
+ * @returns An array of trimmed recipient strings.
+ *
+ * @example
+ * splitEmailAddressList('"Doe, Jane" <jane@example.com>, Team <team@example.com>');
+ * // => ['"Doe, Jane" <jane@example.com>', 'Team <team@example.com>']
+ */
+export function splitEmailAddressList(value) {
+    const parts = [];
+    let current = '';
+    const state = {
+        inQuotes: false,
+        escapeNext: false,
+        angleDepth: 0,
+    };
+    const append = (character) => {
+        current += character;
+    };
+    const flush = () => {
+        const trimmed = current.trim();
+        if (trimmed) {
+            parts.push(trimmed);
+        }
+        current = '';
+    };
+    for (const character of value) {
+        if (consumeEscaped(character, state, append)) {
+            continue;
+        }
+        if (beginEscape(character, state, append)) {
+            continue;
+        }
+        if (toggleQuote(character, state, append)) {
+            continue;
+        }
+        if (adjustAngleDepth(character, state, append)) {
+            continue;
+        }
+        if (isAddressSeparator(character, state)) {
+            flush();
+            continue;
+        }
+        append(character);
+    }
+    flush();
+    return parts;
+}
+function consumeEscaped(character, state, append) {
+    if (!state.escapeNext) {
+        return false;
+    }
+    append(character);
+    state.escapeNext = false;
+    return true;
+}
+function beginEscape(character, state, append) {
+    if (!state.inQuotes || character !== '\\') {
+        return false;
+    }
+    append(character);
+    state.escapeNext = true;
+    return true;
+}
+function toggleQuote(character, state, append) {
+    if (character !== '"' || state.angleDepth !== 0) {
+        return false;
+    }
+    append(character);
+    state.inQuotes = !state.inQuotes;
+    return true;
+}
+function adjustAngleDepth(character, state, append) {
+    if (state.inQuotes) {
+        return false;
+    }
+    if (character === '<') {
+        append(character);
+        state.angleDepth += 1;
+        return true;
+    }
+    if (character !== '>' || state.angleDepth === 0) {
+        return false;
+    }
+    append(character);
+    state.angleDepth -= 1;
+    return true;
+}
+function isAddressSeparator(character, state) {
+    return character === ',' && !state.inQuotes && state.angleDepth === 0;
+}

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

@@ -89,7 +89,7 @@ export class File {
         };
     }
     render() {
-        return (h(Host, { key: 'b3e30b28542f9de7748ba9bdeefab94571872540' }, h("limel-file-dropzone", { key: '98b0f4b4f8c9788f421b4640e2819fbcc2fd2b1e', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
+        return (h(Host, { key: '2de03c65bb1c1aba3d2bb09717cc45f3ef618ebc' }, h("limel-file-dropzone", { key: '8cb9d8dcbbe0ca9b667bfea72992a11a25f73fdb', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
     }
     renderDragAndDropTip() {
         if (this.value || this.disabled || this.readonly) {

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

@@ -90,7 +90,7 @@ export class FileDropzone {
         };
     }
     render() {
-        return (h(Host, { key: 'e9f7393f8a211bf3c9bacee06fb76fcfdb206c9b', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '204a271ef2db4b53f9b2292688d7c9449f0fd6b1' }), this.renderOnDragLayout()));
+        return (h(Host, { key: '4a002d8108fcb9d87b3f063171e0a531de31c1b1', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: 'ed0aa907729aab6bee39bad7c6f9f74fc718e286' }), this.renderOnDragLayout()));
     }
     static get is() { return "limel-file-dropzone"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class FileInput {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (h(Host, { key: '96dadd0f667baa8f7d0a043e453a86318843c872', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: 'a79da5cfe7a9594eeb76310a42c8c5043b9fe990', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '8d3e40d93bb3787d190bde77d7037c7cee965b5f' })));
+        return (h(Host, { key: '64b0de513357ed03fa7ae508ec6382acd600f392', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '0685cf5051c06e7e246631a38b349c2492dbb5b8', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: 'da931d302eef5ed81663cce0b2d191166539a51d' })));
     }
     handleKeyDown(event) {
         if (event.code === 'Tab' ||

package/dist/collection/components/file-viewer/extension-mapping.js

@@ -36,6 +36,7 @@ export function detectExtension(fileName, url) {
         json: 'text',
         html: 'text',
         xml: 'text',
+        eml: 'email',
         // Word
         doc: 'office',
         docx: 'office',

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

@@ -2,6 +2,7 @@ import { h, } from "@stencil/core";
 import translate from "../../global/translations";
 import { detectExtension } from "./extension-mapping";
 import { Fullscreen } from "./fullscreen";
+import { loadEmail } from "../email-viewer/email-loader";
 /**
  * This is a smart component that automatically detects
  * the most common file types such as image, audio, video, and text,
@@ -25,6 +26,7 @@ import { Fullscreen } from "./fullscreen";
  *
  * @exampleComponent limel-example-file-viewer-basic
  * @exampleComponent limel-example-file-viewer-office
+ * @exampleComponent limel-example-file-viewer-eml
  * @exampleComponent limel-example-file-viewer-filename
  * @exampleComponent limel-example-file-viewer-inbuilt-actions
  * @exampleComponent limel-example-file-viewer-custom-actions
@@ -95,6 +97,12 @@ export class FileViewer {
                 h("object", { data: this.sanitizeUrl(this.fileUrl), type: "text/plain" }, fallbackContent),
             ];
         };
+        this.renderEmail = () => {
+            return [
+                this.renderButtons(),
+                h("limel-email-viewer", { email: this.email, fallbackUrl: this.sanitizeUrl(this.fileUrl), language: this.language }, h("div", { slot: "fallback" }, this.renderNoFileSupportMessage())),
+            ];
+        };
         this.renderOffice = () => {
             return [
                 h("div", { class: "action-menu-for-office-files" }, this.renderActionMenu()),
@@ -153,15 +161,40 @@ export class FileViewer {
             return (h("limel-menu", { class: "action-menu", items: this.actions, onSelect: this.emitOnAction, "open-direction": "left" }, h("button", { class: "button--action", id: "tooltip-more", role: "button", slot: "trigger" }, h("limel-icon", { name: "menu_2" }), h("limel-tooltip", { label: this.getTranslation('file-viewer.more-actions'), elementId: "tooltip-more", openDirection: "left" }))));
         };
         this.createURL = async (fileType) => {
-            if (['pdf'].includes(fileType)) {
-                const response = await fetch(this.url);
-                const blob = await response.blob();
-                this.fileUrl = URL.createObjectURL(blob);
+            const loaders = {
+                pdf: this.loadPdf,
+                email: this.loadEmail,
+            };
+            const loader = loaders[fileType] || this.loadDefault;
+            try {
+                await loader();
+            }
+            finally {
+                this.loading = false;
+            }
+        };
+        this.loadPdf = async () => {
+            this.revokePdfBlobUrl();
+            const response = await fetch(this.url);
+            if (!response.ok) {
+                throw new Error(`Failed to load PDF (${response.status} ${response.statusText})`);
             }
-            else {
+            const blob = await response.blob();
+            this.fileUrl = URL.createObjectURL(blob);
+            this.pdfBlobUrl = this.fileUrl;
+        };
+        this.loadEmail = async () => {
+            try {
+                this.email = await loadEmail(this.url);
                 this.fileUrl = this.url;
             }
-            this.loading = false;
+            catch (_a) {
+                this.email = undefined;
+                this.fileUrl = '';
+            }
+        };
+        this.loadDefault = async () => {
+            this.fileUrl = this.url;
         };
         this.handleToggleFullscreen = () => {
             if (this.fullscreen.isSupported()) {
@@ -175,6 +208,9 @@ export class FileViewer {
         };
         this.fullscreen = new Fullscreen(this.HostElement);
     }
+    disconnectedCallback() {
+        this.revokePdfBlobUrl();
+    }
     async componentWillLoad() {
         this.fileType = detectExtension(this.filename, this.url);
         await this.createURL(this.fileType);
@@ -203,13 +239,23 @@ export class FileViewer {
             video: this.renderVideo,
             audio: this.renderAudio,
             text: this.renderText,
+            email: this.renderEmail,
             office: this.renderOffice,
         };
         const fileViewerFunction = fileViewerFunctions[this.fileType] ||
             this.renderNoFileSupportMessage;
         return fileViewerFunction();
     }
+    revokePdfBlobUrl() {
+        if (this.pdfBlobUrl) {
+            URL.revokeObjectURL(this.pdfBlobUrl);
+            this.pdfBlobUrl = undefined;
+        }
+    }
     sanitizeUrl(url) {
+        if (!(url === null || url === void 0 ? void 0 : url.trim())) {
+            return '';
+        }
         try {
             const u = new URL(url, window.location.href);
             const allowed = ['http:', 'https:', 'blob:'];
@@ -438,7 +484,8 @@ export class FileViewer {
             "isFullscreen": {},
             "fileType": {},
             "loading": {},
-            "fileUrl": {}
+            "fileUrl": {},
+            "email": {}
         };
     }
     static get events() {

package/dist/collection/components/flex-container/flex-container.js

@@ -31,7 +31,7 @@ export class FlexContainer {
         console.warn('limel-flex-container is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox');
     }
     render() {
-        return h("slot", { key: 'b666e351d9e816042d7634d9bc677d01720db56d' });
+        return h("slot", { key: '7e8db5fb4b796ae12f76ae2684599226f1229928' });
     }
     static get is() { return "limel-flex-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -71,7 +71,7 @@ export class Form {
         }
     }
     render() {
-        return h("div", { key: '23df692514d9173a9fc258ba73419a0054c17df9', class: "root" });
+        return h("div", { key: '515f0603403b9f432e97d9916e6d6c07f3edd9e7', class: "root" });
     }
     reactRender() {
         if (!this.root) {

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: '4f30051d64c13d2ecba2fcfbb29cb1a2932c7afc' });
+        return h("slot", { key: 'b080a36f1771ee8da78a25bdd3baab5437faa917' });
     }
     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: 'f493bf5977e16d5448188e0e253cc3fec94155f4' }, h("div", { key: '70bffde84284b7ff264359985b8f9f6854e7fbc4', class: "information" }, this.renderIcon(), h("div", { key: '231f2332eb2f223cf9fa98f8948f6736e862ee0d', class: "headings" }, h("h1", { key: '38d800a036e086082493a3da1670d508acecbd1b', class: "heading", title: this.heading }, this.heading), h("h2", { key: '60c6ef48d9b83143cd4f019ed477e22c1987e1a8', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: 'a55fa8987e3ff2057743ca3473d5864048344230', name: "actions" }, h("slot", { key: '34f4a33596e507a27905c98e28c976d1d6ac0975' }))));
+        return (h(Host, { key: 'af88692a3c1dcaf463519b33909f8338810437fc' }, h("div", { key: 'e5f38998bcae91adf802ec5f6bcf2bf8df25b93b', class: "information" }, this.renderIcon(), h("div", { key: '23e44ba0626bf7f0a936c3a2285353efa5fa950d', class: "headings" }, h("h1", { key: '66483d8c6ef67101b401c5609a3c7dc606da6f03', class: "heading", title: this.heading }, this.heading), h("h2", { key: 'e9748ebc2213157544835ff540400e14fab433dd', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '8bcdf617951b5da61e75c0c1d8ff6722d6903e4f', name: "actions" }, h("slot", { key: '6adf11869362405ad30c0a6a7a7a463844b4022a' }))));
     }
     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: '92e043321d5b4af52a48aeb26b0a6d9d7f5870de' }, h("limel-markdown", { key: '3079419e7b2cc022e206b9eae6843e19f3d7aa20', value: this.value }), this.renderReadMoreLink()));
+        return (h(Host, { key: '72c02356b943cf997908589e7a6b9c10a16fc38b' }, h("limel-markdown", { key: '300ce7a4ea70e956f15ac2499935f73181340133', 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: '3fb096c713e8674dabdf14ead8349498a25177f9' }, h("limel-popover", { key: 'c574bc8b6ae172dd5f3af81c4f599547c1eb62e1', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '19962fdc656b775005a7d8fff119596a8318caff', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: '3e7272ecc3c94a3fc8e62836f75aec832be5b242' }, h("limel-popover", { key: '55e5a79476d983f4602946ab7ab1a6e79843240a', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '92ddb2a98e452e82a12c5862ba8c1b2450558a74', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: 'bf5c112190a06c24cf248c2c587346e6433d7d96', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '9b14d405df2eccfdbe8d16c5700dc934b245fb17', 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

@@ -46,9 +46,9 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: '211e5e94f82a75c423e70587dce9ada5da187139', tabIndex: -1, class: {
+        return (h(Host, { key: '141eab695d67c1561ac6175c30596833b96ad384', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '0b18e5476ee83ead6890d5655477ef43ee470fd8' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: 'd82f31bec7730301ba43b380e034de632c391bda' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -51,7 +51,7 @@ export class IconButton {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: '5d2a35f357a47dec81ca63ad56f225fe8a351897', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'b46c1808344979b991b443b9bbc78396594b7eea', disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: '9405f3e395bf097253da6a24e0a6ab06dd85dc4b', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'd0c646ad1b57fd65a12ebb56bdfaa72b267632aa', 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

@@ -116,9 +116,9 @@ export class InfoTile {
             this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
         const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
         const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (h(Host, { key: '9b2d0ce229a7f7bd6ea01ec2e16b26b934e38d67', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'cc8c76c42ed05d530d105fd4638920accec8f238', 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: '3acd30e03e1eca5ffee1ca2e1ad92acef99eac1d', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '755afc858a330aadd152cc4c7efe348660f8a8b9', 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: '238a01ea1bf27ad9e7cebb882d8a1277f53a6850', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '7cf7dd8cbe658ca672d4cce498f0f609660489c5', class: "value-group" }, this.renderPrefix(), h("div", { key: 'cc9aad3b2f74488a5945770a62e90679f5a8a7d0', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: 'bc48303f2fbd6c49fc8871c88e572d113f7ed5c3' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '26069e0fb0b3179882d095176e555cdef5a63c1f', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: 'd8147e61d31a53e25468a562f5286476ffb515ba', class: "value-group" }, this.renderPrefix(), h("div", { key: '11abbbbb0b4774cb78597a0658a990079fb1823e', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '626259aa388561cf05d3dcb65e82b57ac27fb15a' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

@@ -588,7 +588,7 @@ export class InputField {
         if (ariaControls) {
             properties['aria-controls'] = ariaControls;
         }
-        return (h(Host, { key: '27d4eae2584c5c267b1fe4c0f709273ff8fbd070' }, h("limel-notched-outline", { key: '48a619c1679bd5df37198fa6c6e2be98cdaffff4', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '2b998ce425f699f03d8c9c4a0408c5f048eeaaf7', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (h(Host, { key: '5026e41e99b24333c72b6372f85ba5915a5ba0a1' }, h("limel-notched-outline", { key: '5d50900e3b92709a8f4e581d6c08cb21a3aa53f1', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '24de43f8c2e05781db453a7d71b3f84b8f5ac0e9', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField) {

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

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

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

@@ -162,9 +162,9 @@ export class ListItemComponent {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (h(Host, Object.assign({ key: '208b9b54451138beec286cc218785bb6c0ec4181', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: '04d1f12fca6598e4d28ca447e6b3cf3d7a42e09b', 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: 'e56cb40dc7a707942b2e4595a874db509915c060', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: '6f6bcd5a83e866144aa2061f045d8136827a8a63', 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

@@ -17,7 +17,7 @@ export class MenuItemMeta {
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: 'f18805a895882530bd5f92274117927e7bb7bf2a' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: '60731fc2a51315556731654a08616092dc6e44a8' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
         if (!this.commandText) {

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

@@ -79,7 +79,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: '6c4b6df0495cfeb14f211b9ea5470b4c242a779e' }, h("div", { key: '2d6751e31f198c712c952d7b717fad63066b9688', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'b1939b572c0a9ac59178497f56ebc469bc707d98' }, h("div", { key: 'f9dd27e5263281fad9e6d1da9d25d3ccd3a9990e', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

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

@@ -519,7 +519,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: '38a7ce89c470a5a62ff49884711de2eb6a6f91c8', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '61b42540d5ae7ac7db72846ff43e4ebeaa9f15da', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '98475c9042acb7c88c7ffc47674c017e4b59b32c', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'edf185c484a0697b2e9da756f3d0b65a362a10b6', 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: 'adec7fedfe610207eed79b9587438d17111ffe82', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '5dbc488a563ea2dcc315c35b7751fe829298e46d', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '98b47d2d25f40b5294f6bbfca40371917ce438b2', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '1a616b513b25383c6534d76c66a088c1e264f4b1', 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: '1779450be58dc77fc81af61bf4daed4fed7294ef', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: 'f2a299d2e47ed6344fd817e748b8cc22f0e0e3a7', class: "mdc-menu mdc-menu-surface" }, html);
     }
     itemsChanged() {
         setTimeout(() => {

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

@@ -105,7 +105,7 @@ export class MenuSurface {
             'mdc-elevation-transition': true,
             'mdc-elevation--z4': true,
         };
-        return (h("div", { key: '0d39b6714b348cbec90f9abee9ccc02056a06952', class: classList, tabindex: "-1" }, h("slot", { key: 'a0515ae3147cfdc8ea90fa6bc1e1bafb1c5840e7' })));
+        return (h("div", { key: 'd00fdc8b36fb54a29a2a310ddbc2f589ce34bce3', class: classList, tabindex: "-1" }, h("slot", { key: 'd134575dc508794b42fed852e952a7d12c399b2a' })));
     }
     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: '45e6ad0d1b03f3cfa56881a20754d53549c70781', class: "limel-notched-outline" }, h("slot", { key: '0398e696f495b77e467c0869f218e2b8eb7cbb33', name: "content" }), h("span", { key: 'ae277a32b78521b40c1206ba704caa337c4ff9ac', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'bf8a6911d25bdb03660eb34cfeb21f3219e2790f', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '01c6308c6d0bdb272c4f1c93806d722d19c78838', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: '3071dff00262f73ae8555fac09dedccad474b7fb', class: "limel-notched-outline" }, h("slot", { key: '15f3ecd4b18c36c310b62d4670aa81bdff90c99e', name: "content" }), h("span", { key: 'c7b02545a82d0f995bb86d489392d38c36f770e2', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'f03ae4002a01844989af7d2ad19252f3113d2155', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '6e15221fe2d1c6fafb0d8109c6031d8302447762', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {

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

@@ -188,7 +188,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: 'dc0bfb071f31f65279bfede4b8b2689b880e52df', 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, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: '21f4444eee99a33af5565df2c20aec5f7248f216', 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, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }

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

@@ -127,7 +127,7 @@ export class Popover {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: 'bd0d22bfaf2d1f3235d60f69319ad9a736808a68', class: "trigger-anchor" }, h("slot", { key: 'be1569c7b6f05a4e236ec06185a930e70062d274', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'bfae2ade435b7cf217761958e07d30bdf5015224', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '4d8b9c759b9e67f916b4f9899fd475c5f0ca23d7', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: 'fdd43de39ed86b15e3eb72b519e13c21556fbc0e', class: "trigger-anchor" }, h("slot", { key: 'ed797a95c6cc7bccec411795c7f4c3c30c43d3d4', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'b665286d6ef9077a61b224190619df18afe7bd07', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '9ccea4d6828e1cd33b79d850c4e9cf2f2e31ff44', contentCollection: this.host.children, 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: 'adcfcc9f278cdf8d7e6e14cb1214d706a3613eb6', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '26fa5134de057639d52e71eb9a0bce69ff38a894', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');

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

@@ -120,7 +120,7 @@ export class Portal {
         }
     }
     render() {
-        return h("slot", { key: '274915b5b396f435fa41dc570505af16689de2bc' });
+        return h("slot", { key: 'bd5589945e34f7da397083ea53ab92ce38d3c56c' });
     }
     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: '7a167163ece077cc0cb68dc8bbc1d23c8b4a71cc', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: '591ebaf4100003058cf2c38202b9f7befa32d398', 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: '292ebe01bef121b7c04ac1d1513b7e31345b0950', class: {
+        return (h(Host, { key: 'eb692bd85b7ae08effca48b0061ce070fa2d726c', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: 'ad8a9be6915cb79e0cefd7682985f404fab0c617', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '68fa112a599b43133a000719bdd1ee32202ce9ea', class: "box" }), h("label", { key: '2998b97927521241b8f1b3c82fc8e15a3963b17b', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: 'd91531ef558efb24cfabef237a36f494ea1b8127', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'dd3a2a4b54c7b395fb8f28fad4921f31c644bd1e', class: "box" }), h("label", { key: 'ec47a41a86ab3e743168c5f8a8b792d14aeb3262', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
     static get is() { return "limel-radio-button"; }
     static get originalStyleUrls() {

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

@@ -100,7 +100,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: 'e9294e395aa0b1a4a73692f373fbb00b5547e611', 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, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '9afb17956fe91725acb0e0df040a273bc62958af', 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, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {

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

@@ -56,7 +56,7 @@ export class Shortcut {
     render() {
         var _a, _b, _c, _d, _e;
         const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
-        return (h(Host, { key: '4b4ebe3d685e9adec4962eeaf8fb36d511fe2abd', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '5f52ff85536fe006f2ab44ae26cc30556d35d85d', "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: '1d1db5fa10065ca1434970c5cc4abcf8d70c4651', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '99353a367a7d34f9224408e926d80270a0d34642' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: '3a8b1065324570ae46d22a1974c34432692632dc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'a29c1d1e4c3bd0222762fb0675f01e9d12000ab7', "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: '1f1c964a055f6625ff0d67e6e1c7da182834d101', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '45b45dd5a3c945c6662dbba504f2d2d43a87f1c4' })), this.renderLabel(), this.renderNotification()));
     }
     static get is() { return "limel-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

@@ -237,7 +237,7 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: 'f350494cfd27ae244753cbf3c857b9f3d638adfc', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '6579b8d286424da82ec83245c912fef447a540d5', 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: '83f09b80172bae0af77835afa022c22660cfc9ca', slot: "content" }, this.renderRangeContainer(), this.renderSliderContainer(inputProps))), this.renderHelperLine()));
+        return (h(Host, { key: 'cf07e4288eae4c909632d74fe77e6a827b122abb', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '23ed21c06dea5c581ec9d8cdf2dcfea767417e2f', 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: 'afdaaa1f8b4d0ceeebb3eca73649849f871dff69', slot: "content" }, this.renderRangeContainer(), this.renderSliderContainer(inputProps))), this.renderHelperLine()));
     }
     watchDisabled() {
         this.updateDisabledState();

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

@@ -121,14 +121,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: '6dfc4a10bd5626b1bfaaf392816f7e62b91beab4', popover: "manual", style: {
+        return (h("aside", { key: 'dcbc142070197202eac9cca2c6ff4408cf59afcb', 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-relevant": this.open ? 'additions' : undefined }, h("div", { key: '835ec813570558344be0ed4d6df08ce454e6fe12', class: "surface", "aria-atomic": "false" }, h("div", { key: '02d05226a7754ed66e2d1641bf803198260d761a', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
+            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'a145e38f6b8c583d4b15609c65bc614388906d17', class: "surface", "aria-atomic": "false" }, h("div", { key: '07403a473c269f7397e4073a58454c925259eb46', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {