@limetech/lime-elements 40.18.2 → 40.19.0

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

@@ -5,6 +5,7 @@ import translate from "../../global/translations";
 import { getHref, getTarget } from "../../util/link-helper";
 import { isEqual } from "lodash-es";
 import { createRandomString } from "../../util/random-string";
+import { setControlledElement } from "../../util/controlled-element";
 function isChipAnnotatedEvent(event) {
     var _a;
     return !!((_a = event === null || event === void 0 ? void 0 : event.Lime) === null || _a === void 0 ? void 0 : _a.chip);
@@ -260,6 +261,13 @@ export class ChipSet {
             this.mdcTextField = new MDCTextField(this.host.shadowRoot.querySelector('.mdc-text-field'));
         }
     }
+    componentDidRender() {
+        var _a;
+        const input = this.host.shadowRoot.querySelector('input');
+        if (input) {
+            setControlledElement(input, (_a = this.suggestionListId) !== null && _a !== void 0 ? _a : null);
+        }
+    }
     componentDidUpdate() {
         const input = this.host.shadowRoot.querySelector('input');
         if (input && this.editMode) {
@@ -293,7 +301,7 @@ export class ChipSet {
             });
         }
         const value = this.getValue();
-        return (h(Host, { key: 'fc79f4d18b788f69454c5251a2abe6b37e782a9e' }, h("limel-notched-outline", { key: 'a7e6f2629c0b383413024e86add1620975ae6b29', labelId: this.labelId, label: this.label, required: this.required, invalid: this.isOutlineInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: '4f433e43c825f295840eabf95f411894c3a1a199', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (h(Host, { key: '34ac6e27675003fc50fe4e3c345ade8b67fc6e39' }, h("limel-notched-outline", { key: 'b6eb6cb1e46042b39c21c7628158433dbef7d171', labelId: this.labelId, label: this.label, required: this.required, invalid: this.isOutlineInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: 'f05b4c9435771e1e0a750b84f4a0f79aada51338', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {
@@ -343,17 +351,28 @@ export class ChipSet {
     renderInputChips() {
         return [
             this.value.map(this.renderInputChip),
-            h("input", { tabIndex: this.disabled ? -1 : 0, type: this.inputType, id: this.labelId, "aria-describedby": this.getDescribedBy(), "aria-invalid": this.isOutlineInvalid() ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, disabled: this.disabled, class: {
+            h("input", Object.assign({ tabIndex: this.disabled ? -1 : 0, type: this.inputType, id: this.labelId, "aria-describedby": this.getDescribedBy(), "aria-invalid": this.isOutlineInvalid() ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, disabled: this.disabled, class: {
                     'mdc-text-field__input': true,
                     hidden: this.inputHidden(),
                 }, value: this.textValue, onBlur: this.handleInputBlur, onFocus: this.handleTextFieldFocus, onKeyDown: this.handleKeyDown, onInput: this.handleTextInput,
                 // Some browsers emit a change event on input elements, we need to stop
                 // that event from propagating since we are emitting our own change event
-                onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.readonly || this.isFull(), autocomplete: this.autocomplete }),
+                onChange: this.inputFieldOnChange, placeholder: this.isFull() ? '' : this.searchLabel, readonly: this.readonly || this.isFull(), autocomplete: this.autocomplete }, this.getSuggestionListProps())),
             this.renderLeadingIcon(),
             this.renderClearAllChipsButton(),
         ];
     }
+    getSuggestionListProps() {
+        if (!this.suggestionListId) {
+            return {};
+        }
+        return {
+            role: 'combobox',
+            'aria-autocomplete': 'list',
+            'aria-haspopup': 'listbox',
+            'aria-expanded': String(!!this.suggestionListOpen),
+        };
+    }
     isFull() {
         return !!this.maxItems && this.value.length >= this.maxItems;
     }
@@ -754,6 +773,50 @@ export class ChipSet {
                 "attribute": "required",
                 "defaultValue": "false"
             },
+            "suggestionListId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }],
+                    "text": "The id of the list of suggestions that the input of a chip set of the\ntype `input` opens. Used by `limel-picker`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suggestion-list-id"
+            },
+            "suggestionListOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "private",
+                            "text": undefined
+                        }],
+                    "text": "Whether the list of suggestions is open. Used by `limel-picker`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "suggestion-list-open"
+            },
             "searchLabel": {
                 "type": "string",
                 "mutable": false,

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

@@ -60,7 +60,7 @@ export class CircularProgress {
         };
         const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
         const value = Math.round(this.value * 10) / 10;
-        return (h("div", { key: '47a6624518e8cd5938a0d3ab1538ea9e7ebbe6a6', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'bdb7887d49ecf6175c7b99c3eb96e754277acfd8', class: "value" }, abbreviate(value), h("span", { key: '4405e3306807b5f21e92286db01a1e8ca578c3f9', class: "suffix" }, this.suffix))));
+        return (h("div", { key: '8b5525fc84249eaa9dc5084b4169e23a6caa25ca', role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { key: 'caaadc428a96ee41f55cb5b031a825b4f6623817', class: "value" }, abbreviate(value), h("span", { key: '11a94212df59d3f4baaacf94f0f8ce8c7376ac8c', class: "suffix" }, this.suffix))));
     }
     static get is() { return "limel-circular-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -117,7 +117,7 @@ export class CodeDiff {
         // Capture total matches after rendering completes
         this.totalSearchMatches = this.searchMatchCounter;
         const lineNumberWidth = this.computeLineNumberWidth();
-        return (h(Host, { key: 'c43133dfb5da6d4d98aa648a106fc44592d0e1f7', style: { '--limel-line-number-min-width': lineNumberWidth } }, this.renderHeader(), this.renderScreenReaderSummary(), this.searchVisible && this.renderSearchBar(), h("div", { key: 'ecc7f2b338f6d646d464e521d143c7940519b86c', class: "diff-body", role: "table", "aria-label": this.getTranslation('code-diff.table-label'), tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event) }, diffContent), h("div", { key: '216112168a51928d05d10da7612143bcd7807b0c', class: "screen-reader-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.liveAnnouncement)));
+        return (h(Host, { key: 'd23d4b7aaf34c9925413c3751b45933c638f65fc', style: { '--limel-line-number-min-width': lineNumberWidth } }, this.renderHeader(), this.renderScreenReaderSummary(), this.searchVisible && this.renderSearchBar(), h("div", { key: '4eabc8cbcec33d3728043aa400667a2378079948', class: "diff-body", role: "table", "aria-label": this.getTranslation('code-diff.table-label'), tabindex: "0", onKeyDown: (event) => this.handleKeyDown(event) }, diffContent), h("div", { key: 'a9616e55cf6bc1c5265df1839d59d27a5579f68e', class: "screen-reader-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.liveAnnouncement)));
     }
     watchInputs() {
         this.recomputeDiff();

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

@@ -251,7 +251,7 @@ export class CodeEditor {
             'is-dark-mode': this.isDarkMode(),
             'is-light-mode': !this.isDarkMode(),
         };
-        return (h(Host, { key: 'a3657a5cf54b3e8a935159f27aaebd4d47838a0c' }, this.renderCopyButton(), h("limel-notched-outline", { key: 'cb0b931c64166f8d4a09acbe0f9699bcccbe7b1d', 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: 'a9f5da0408972d22009c6fcded671b1a3f88064b', slot: "content", class: classList })), this.renderHelperLine()));
+        return (h(Host, { key: '70c2712c99e03787e1abd70bc19395078b574180' }, this.renderCopyButton(), h("limel-notched-outline", { key: 'b43ac02d0207760ad80bfce633bcad7596ecd14e', 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: 'f7c473508160199b4e9e4ff2919a3586a54187e0', slot: "content", class: classList })), this.renderHelperLine()));
     }
     forceRedraw() {
         // eslint-disable-next-line sonarjs/pseudo-random

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -130,7 +130,7 @@ export class CollapsibleSection {
         removeEnterClickable(button);
     }
     render() {
-        return (h("section", { key: 'ff18dacc5e74d3bd8d16da55be3e5340922acf86', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: 'f4dba35493c7ce7344ff34d2fbaeeb769f8c87eb' }, h("button", { key: 'd3a632b4002d01774c9bb88f250be4e196340ef3', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '8d8489917d5e1bfa8de3cca8294651f448c8129c', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'fd7e13cf3bd26815d62c3fbac0ef04ed4db364b5', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '90ed08286c1091f5c5c5feec827729cfa65588fc' }))));
+        return (h("section", { key: '6c1080ba17f1b4e24cc363472386c91b97691a65', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: '63cbf4c42109445ac509fb605dba938cbb0a1c27' }, h("button", { key: 'b9b29b6ff5e4fbc3c2d4148fbae05eb86786fa09', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: 'f49b83a271b497d67371056aacfa793374ef3816', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: '9e80a5dd70153a9e7d4970df1eb040de31e5948e', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '03d2923d9019abdefd887a07b7005141c917c434' }))));
     }
     getHeadingLevel() {
         return isHeadingLevel(this.headingLevel)

package/dist/collection/components/color-picker/color-picker-palette.js

@@ -39,10 +39,10 @@ export class Palette {
     render() {
         const background = this.value ? { '--background': this.value } : {};
         return [
-            h("div", { key: 'b2a7d3a6fdb975039b27fa6c1991e2b13dfdfb7c', class: "color-picker-palette", style: {
+            h("div", { key: 'c3cf7aef60a6c9ddd995fcd6f1a44e7633af41c6', class: "color-picker-palette", style: {
                     '--color-picker-column-count': `${this.getColumnCount()}`,
                 } }, this.renderSwatches()),
-            h("div", { key: '8388ecf46579ee13770a599fb4d73c355e01462e', class: "chosen-color-name" }, h("limel-input-field", { key: 'f98cd03a9a5beb2897961a063a1d78ae0e5dd71e', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: 'c9502329a95fdf25a7f787183f811679bde62882', class: "chosen-color-preview", style: background })),
+            h("div", { key: '821217eb21c42c54128d8b8b8ba7381dd74ced6d', class: "chosen-color-name" }, h("limel-input-field", { key: '11b030b4670b47c65d416daa7f2bbfc601d2e549', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: '1c500725280dde72af4ce3c0b44a278a8b324ba7', class: "chosen-color-preview", style: background })),
         ];
     }
     getPalette() {

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

@@ -87,7 +87,7 @@ export class ColorPicker {
         (_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '04973de288b9d3f4773a03c351d37f288e9e07bf' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: '93c5ea34c6eef290b1b4cf744b911a4e5de80c1c', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
+        return (h(Host, { key: '2103fcb98a566b3263111a16ab303663a185074e' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: 'd86a999538d8e8d4656f6a1afd50d1c3b6fbb303', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
     }
     static get is() { return "limel-color-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.js

@@ -96,7 +96,7 @@ export class DatePickerCalendar {
         });
     }
     render() {
-        return (h("div", { key: 'c9e65b096f57f96afaffcdca7889cf3addb3227f', class: "container", ref: (el) => (this.container = el), style: {
+        return (h("div", { key: '86cbefbe9481503480ec3a2d63e333aaa206aecc', class: "container", ref: (el) => (this.container = el), style: {
                 '--today-label': `"${translate.get('date-picker.today', this.language)}"`,
             } }));
     }

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

@@ -84,10 +84,10 @@ export class Dialog {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: 'c25d2992895829671727b0d3a52c89d5cd6d3586', class: {
+        return (h("div", { key: 'a9a3f26e3da86f1659487affe5a8758dca4cefb9', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: 'bee5a5e54bc971b2ebf33fbcd4d84feba6ca9353', hidden: true, id: "initialFocusEl" }), h("div", { key: '3e5beb7bb0d881de3449cfe26ba5776f3ece4c42', class: "mdc-dialog__container" }, h("div", { key: '928c11c5eca38e7e4065c55d8ec6872c6c0dbd71', class: "mdc-dialog__surface" }, h("input", { key: 'c81d5586e8bf3c3f57d7ea6b33585a5e16c016e3', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: 'd7f278245136ea690182f82ad717ff57e4e4855b', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '40c910630b7df325a5e15829f96d6ce0f8e52ff0' })), this.renderFooter())), h("div", { key: '8aa1010d47e375d2ef607f87d4e724c674493cf9', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '792d35f0b5c497bac447327c2aafdd74e3b8c0ee', hidden: true, id: "initialFocusEl" }), h("div", { key: 'a4331ee65f7ff242ee2af707281a1051f307a218', class: "mdc-dialog__container" }, h("div", { key: 'c4e1ef542e1078fe65bb6c299a890da6242c154e', class: "mdc-dialog__surface" }, h("input", { key: '626470072fbed50ef98ab29e32ad0d219018cb51', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '8399fa33d6b6d342848f7051fc92b4bde9b02f8e', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '94f1d56d78fd5e5f0cc483c622b1138ed7148a2e' })), this.renderFooter())), h("div", { key: '22a1c2516049f8a8d444fbb60c0009cb96dffe9f', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue || !this.mdcDialog) {

package/dist/collection/components/dock/dock.js

@@ -94,11 +94,11 @@ export class Dock {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: '89d1c5d33de71c5b78b572ec3f72b36424c5b12a', class: {
+        return (h(Host, { key: '5f27f5d6ed669bdee199afc2dfe151495a67b05b', class: {
                 dock: true,
                 expanded: this.expanded,
                 'has-mobile-layout': this.useMobileLayout,
-            } }, h("nav", { key: 'bd58281fb439dbc3eb2b8fb159fb2a5fd95fc553', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
+            } }, h("nav", { key: '9f7befc311318c7ff2486714adc0a6ec0e6b4cea', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
     }
     renderExpandShrinkToggle() {
         if (this.useMobileLayout || !this.allowResize) {

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

@@ -51,7 +51,7 @@ export class DragHandleComponent {
     render() {
         const tooltipLabel = translate.get('drag-handle.drag-to-reorder', this.language);
         const ariaLabel = translate.get('drag-handle.drag-handle', this.language);
-        return (h(Host, { key: '49a2335a2c2603c7fcdd3c329f71a27f52024f96' }, h("button", { key: '8a8caa87f2e6b43936753f11991e84e81f0385c6', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: '841ce098bb464c79773cdac0ea40e89a941d439f', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: '650342114d7c64c5e621e1b65751b242c0a7c5a7', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
+        return (h(Host, { key: '2656fb1a09ca8bd8db8fe5849b4d5aa231d13e6e' }, h("button", { key: 'f2239eca3b4a11dd09f551d53c08aec30e780904', "data-drag-handle": true, type: "button", class: "limel-drag-handle", tabindex: -1, "aria-label": ariaLabel, id: this.dragHandleId, onClick: this.handleClick }, h("div", { key: '3c47f3612efa43a3e020f432e88b71524b15190b', class: "drag-icon", role: "presentation", "aria-hidden": "true" }, h("div", { key: "1" }), h("div", { key: "2" }), h("div", { key: "3" }), h("div", { key: "4" }), h("div", { key: "5" }), h("div", { key: "6" })), h("limel-tooltip", { key: 'e2706e1f4757b75ac8bce97d549e6e81ee53ecca', openDirection: this.tooltipOpenDirection, elementId: this.dragHandleId, label: tooltipLabel }))));
     }
     static get is() { return "limel-drag-handle"; }
     static get originalStyleUrls() {

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

@@ -75,7 +75,7 @@ export class EmailViewer {
         }
     }
     render() {
-        return (h(Host, { key: '81c11ddad6377f11be8c2f82915708c16fd2ac77' }, h("div", { key: '4be342e3c746106d45eb4cd357f771a252a90ab8', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: 'd6b9661596131110ac40e7fa90dba17e8a5c99fd' }, this.renderAttachments(), this.renderBody()))));
+        return (h(Host, { key: '85990dff64a6fc62c1c3d4ca58c188ceee3aa639' }, h("div", { key: '6e1ab5f5210789e68256cd8bc2c50df7de3fe9e1', class: "email", part: "email" }, this.renderHeaders(), this.renderRemoteImageBanner(), h("section", { key: '523d7d19938312506bdfd735fde3251dfc408c75' }, this.renderAttachments(), this.renderBody()))));
     }
     renderHeaders() {
         const headerFields = [

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

@@ -154,7 +154,7 @@ export class File {
         this.resizingFile = undefined;
     }
     render() {
-        return (h(Host, { key: '31fa16f6246cd4a6e7a7ce9ec6d32aadf245d84f', "aria-busy": this.isBusy ? 'true' : 'false' }, h("limel-file-dropzone", { key: 'f294201908569c70656ef52fff2fcca3e9b72bf0', disabled: this.disabled || this.readonly || !!this.displayedFile, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip(), this.renderSpinner()));
+        return (h(Host, { key: 'fde08c4a882443f122caf923cd5d4eae1603342d', "aria-busy": this.isBusy ? 'true' : 'false' }, h("limel-file-dropzone", { key: 'bbafe0b47742c71cca1dd78a380072ceb6646c37', disabled: this.disabled || this.readonly || !!this.displayedFile, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip(), this.renderSpinner()));
     }
     get statusText() {
         var _a, _b, _c;

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

@@ -90,7 +90,7 @@ export class FileDropzone {
         };
     }
     render() {
-        return (h(Host, { key: 'd04afa2b6b4b0cb45ac908891f8b0b5da8d9867b', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '1b125711e06ccd2357375127b6cf2dd12779e584' }), this.renderOnDragLayout()));
+        return (h(Host, { key: '0a8c13ab0d5f60152669965bb43981cc1f6c430f', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '740de02e64e7cebca2cd67d10c148d9761ac85bb' }), this.renderOnDragLayout()));
     }
     static get is() { return "limel-file-dropzone"; }
     static get encapsulation() { return "shadow"; }

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

@@ -72,7 +72,7 @@ export class FileInput {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (h(Host, { key: '2ec5c6a56f846b4c606633fd418c4867f50f470d', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: 'c6a782ec3d71be85ca6e4fe13f5616b7c3809989', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '86efec1ed582204301530ecd549367be1c952b1d' })));
+        return (h(Host, { key: '1bedc75973c5a12ff099607e35991153811f3166', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '583506fe7cbc9319bece58aefe5d793fc563dbc2', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: 'fef95ae5ffdc6a4cc00be7f6e021ea39ed253412' })));
     }
     handleKeyDown(event) {
         if (['Tab', 'Backspace', 'Enter'].includes(event.code)) {

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: '15e4e05dceb2966750d9fce29f401585c1e7332d' });
+        return h("slot", { key: 'f5baf3c618a69e1beaaf8574af3388e88306f5bf' });
     }
     static get is() { return "limel-flex-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -125,7 +125,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '74e2b0c57dd6acb08ebb364220cb4f2e6fbe1733', class: "root" });
+        return h("div", { key: '549ba8cd825aadedc4ec9e696f6d03bee028cb89', class: "root" });
     }
     reactRender() {
         if (!this.root) {

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

@@ -29,7 +29,7 @@ export class FormHeader {
         this.headingLevel = 1;
     }
     render() {
-        return (h(Host, { key: '0d8282124405665c18b93aa753dd40cf616a6e6b' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+        return (h(Host, { key: '832fda595a6e861d113ad64890b5ba0f4958e830' }, 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: '4ebe5815a717a9991c2e2951125f839e8e1708d4' });
+        return h("slot", { key: 'c1e2b8ee2a681748256f6a0d7cd6db7aec27872e' });
     }
     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: 'ee7ff339654246fbe74a971c13555ac58eb193d6' }, h("div", { key: '24a8ea8b2b02a18096fdad46aeaa7716986f39f3', class: "information" }, this.renderIcon(), h("div", { key: '4e6badb9212a41286043a158238edb889e95c20a', class: "headings" }, h("h1", { key: 'cb1e64f29d720de62e7e99d15daa77b3c3a344cb', class: "heading", title: this.heading }, this.heading), h("h2", { key: 'fbdd1399802934b780fb24f35dbaf8d2df98b09c', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '53774b488cc505aca85e776d9c8280c85ef7acfd', name: "actions" }, h("slot", { key: 'd9093bf6ca786faa5481e62c5bff604b20f0283e' }))));
+        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' }))));
     }
     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: 'c05fa685d65b0b884c0697d259ba1b4811f038d7' }, h("limel-markdown", { key: '6260af655452683b21b704fb9962e010abfe2a1b', value: this.value }), this.renderReadMoreLink()));
+        return (h(Host, { key: 'd0f448293f17fbd80e5c8b0b26aa32d58af1d5ac' }, h("limel-markdown", { key: 'b69b41f86e1c362c3d12c50d24c579bf9d5a434d', 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: 'ff14013e9f366372a5ac61fdb9852e73377e7c7f' }, h("limel-popover", { key: 'b63ff7f51c29dc61ffdfe647329020639f1a8511', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '09f65e0a7f2bdca258f848f459eadc49f863b9f2', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        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: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '92223e842dd3dbf07365a1f45003b61033109b25', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '75edc59e9c5a2557c9766165e52f6aa1b5baee49', 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: '3dba31860682ccb6230de96f458e19252a150dd0', tabIndex: -1, class: {
+        return (h(Host, { key: 'e42ca019869a7b4b47d93c4f402bdbf3b99b37cf', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '28dd4294f7a2d6db746388109ef9fb7d1f640b4d' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3db5b20efaa64d9a20b6da5c711d2fb64393143a' }, 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: '6c2857b3a8827d78ea18379d7338f0e31c3f44a9', "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: '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))))));
     }
     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: '68180e22c8eda7efb4a5ca9085ff0dc127052b3f', class: "container" });
+        return h("div", { key: '154a32782255d3b6870d1ea67bdf8e8906655c9a', 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: 'ecf9bef958b6d3f2666d61c8eb10b6790311706d', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: 'fcadafff6a3e2a36082f4baad0c342a448c4126f', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        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))));
     }
     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: '4ae5614ddf0ecc7cb112788bd1c42ca4747cf431', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '5cb4cd396a5472c050e5911f54aa0272cf1d324d', 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: '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: {
                 'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
-            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: 'd111590fd120c7f4a784430d9f13423e6813d88f', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '717a54afb2ffe8c434fdbbe403bbc816ba231fbd', class: "value-group" }, this.renderPrefix(), h("div", { key: '569a6cbb516d6c455757c7685d48a2af9692eca2', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '2afedffb05ddd550677d943a58564565965194dc' })), this.renderNotification()));
+            } }, 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()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

@@ -1962,4 +1962,17 @@ input.mdc-text-field__input::-webkit-search-cancel-button:active {
 }
 .mdc-text-field--outlined.mdc-text-field--with-leading-icon .mdc-floating-label {
   left: 1.5rem;
+}
+
+.suggestions-message {
+  position: absolute;
+  width: 0;
+  height: 0;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
 }