@limetech/lime-elements 40.18.3 → 40.20.0

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;
 }

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

@@ -5,10 +5,21 @@ import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, SPACE, TAB, } from "../../util/key
 import { getHref, getTarget, getRel } from "../../util/link-helper";
 import { createRandomString } from "../../util/random-string";
 import { isTextEditingKey } from "../../util/typeahead";
+import { setControlledElement } from "../../util/controlled-element";
+import { createLiveMessage } from "../../util/live-message";
+import translate from "../../global/translations";
 import { globalConfig } from "../../global/config";
 const CHANGE_EVENT_DEBOUNCE_TIMEOUT = 300;
 const RESIZE_HANDLER_DEBOUNCE_TIMEOUT = 100;
 const MAX_FRAMES_TO_WAIT_FOR_LIST = 20;
+const TEXT_INPUT_TYPES = new Set([
+    'email',
+    'search',
+    'tel',
+    'text',
+    'url',
+    'urlAsText',
+]);
 /**
  * @exampleComponent limel-example-input-field-text
  * @exampleComponent limel-example-input-field-placeholder
@@ -81,6 +92,11 @@ export class InputField {
          * list of suggestions `value` can autocomplete to.
          */
         this.completions = [];
+        /**
+         * Defines the language for translations. Used for the message that a
+         * screen reader speaks about the suggestions.
+         */
+        this.language = 'en';
         /**
          * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to
          * `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,
@@ -95,6 +111,8 @@ export class InputField {
         this.isFocused = false;
         this.wasInvalid = false;
         this.showCompletions = false;
+        this.suggestionsEngaged = false;
+        this.suggestionsMessage = createLiveMessage(() => this.getSuggestionsMessage());
         this.completionsList = [];
         this.changeWaiting = false;
         this.initialize = () => {
@@ -204,6 +222,9 @@ export class InputField {
         };
         this.onFocus = () => {
             this.isFocused = true;
+            if (!this.showCompletions) {
+                this.suggestionsEngaged = false;
+            }
             this.showCompletions = true;
         };
         this.onBlur = () => {
@@ -384,6 +405,7 @@ export class InputField {
             }
             const wasOpen = this.isSuggestionListOpen();
             this.showCompletions = true;
+            this.suggestionsEngaged = true;
             if (event.key === ARROW_DOWN || event.key === ARROW_UP) {
                 this.moveIntoList(event, wasOpen);
             }
@@ -448,11 +470,34 @@ export class InputField {
                 this.type !== 'textarea' &&
                 this.completions.length > 0);
         };
+        this.isCombobox = () => {
+            return this.hasSuggestions() && TEXT_INPUT_TYPES.has(this.type);
+        };
         this.isSuggestionListOpen = () => {
             return (this.hasSuggestions() &&
                 this.showCompletions &&
                 this.filterCompletions(this.getCurrentValue()).length > 0);
         };
+        this.pointAtSuggestionList = () => {
+            if (!this.inputElement) {
+                return;
+            }
+            setControlledElement(this.inputElement, this.isCombobox() ? this.portalId : null);
+        };
+        this.renderSuggestionsMessage = () => {
+            if (!this.isCombobox()) {
+                return;
+            }
+            return (h("span", { class: "suggestions-message", "aria-live": "polite", ref: this.suggestionsMessage.setElement }));
+        };
+        this.getSuggestionsMessage = () => {
+            if (!this.isSuggestionListOpen()) {
+                return '';
+            }
+            return translate.get('suggestions.available', this.language, {
+                count: this.filterCompletions(this.getCurrentValue()).length,
+            });
+        };
         this.renderAutocompleteList = () => {
             if (!this.hasSuggestions()) {
                 return;
@@ -469,7 +514,7 @@ export class InputField {
             if (!filteredCompletions || filteredCompletions.length === 0) {
                 return null;
             }
-            return (h("limel-list", { onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
+            return (h("limel-list", { accessibleLabel: this.label || this.placeholder, onChange: this.handleCompletionChange, onKeyDown: this.handleKeyDownInDropdown, type: "selectable", items: filteredCompletions }));
         };
         this.handleKeyDownInDropdown = (event) => {
             if (event.key === ESCAPE) {
@@ -547,11 +592,16 @@ export class InputField {
     componentDidLoad() {
         this.initialize();
     }
+    componentDidRender() {
+        this.pointAtSuggestionList();
+        this.suggestionsMessage.update();
+    }
     disconnectedCallback() {
         if (this.mdcTextField) {
             this.mdcTextField.destroy();
         }
         this.restyleCompletionsDropDown.cancel();
+        this.suggestionsMessage.update.cancel();
         window.removeEventListener('resize', this.layout);
         this.limelInputField.removeEventListener('focus', this.setFocus);
     }
@@ -637,10 +687,13 @@ export class InputField {
         if (this.isInvalid()) {
             properties['aria-invalid'] = 'true';
         }
-        if (this.hasSuggestions()) {
-            properties['aria-controls'] = this.portalId;
+        if (this.isCombobox()) {
+            properties.role = 'combobox';
+            properties['aria-autocomplete'] = 'list';
+            properties['aria-haspopup'] = 'listbox';
+            properties['aria-expanded'] = String(this.suggestionsEngaged && this.isSuggestionListOpen());
         }
-        return (h(Host, { key: 'e09ee9e3102d6a15d0806602c65361001cd20c63' }, h("limel-notched-outline", { key: 'c2301d9fd1af41e8b4396dc5f2978e51b260fe2f', 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: '69e02e5df31a6ce10743c3c8a9e78c5765794a18', 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: '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()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {
@@ -1109,6 +1162,33 @@ export class InputField {
                 "setter": false,
                 "defaultValue": "[]"
             },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Languages",
+                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+                    "references": {
+                        "Languages": {
+                            "location": "import",
+                            "path": "../date-picker/date.types",
+                            "id": "src/components/date-picker/date.types.ts::Languages",
+                            "referenceLocation": "Languages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the language for translations. Used for the message that a\nscreen reader speaks about the suggestions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
             "showLink": {
                 "type": "boolean",
                 "mutable": false,
@@ -1155,7 +1235,8 @@ export class InputField {
         return {
             "isFocused": {},
             "wasInvalid": {},
-            "showCompletions": {}
+            "showCompletions": {},
+            "suggestionsEngaged": {}
         };
     }
     static get events() {

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

@@ -108,6 +108,6 @@ export class ListRenderer {
         }
         this.applyTabIndexToItemAtIndex =
             this.getIndexForWhichToApplyTabIndex(items);
-        return (h("ul", { class: "mdc-deprecated-list", role: role, "aria-orientation": this.getAriaOrientation(role) }, items.map(this.renderListItem)));
+        return (h("ul", { class: "mdc-deprecated-list", role: role, "aria-label": this.config.accessibleLabel, "aria-orientation": this.getAriaOrientation(role) }, items.map(this.renderListItem)));
     }
 }

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

@@ -5,6 +5,7 @@ import { ListRenderer } from "./list-renderer";
 const { ACTION_EVENT } = listStrings;
 /**
  * @exampleComponent limel-example-list-basic
+ * @exampleComponent limel-example-list-accessible-label
  * @exampleComponent limel-example-list-secondary
  * @exampleComponent limel-example-list-separator
  * @exampleComponent limel-example-list-icons
@@ -178,13 +179,14 @@ export class List {
             badgeIcons: this.badgeIcons,
             type: this.type,
             iconSize: this.iconSize,
+            accessibleLabel: this.accessibleLabel,
         };
         let maxLinesSecondaryText = +((_a = this.maxLinesSecondaryText) === null || _a === void 0 ? void 0 : _a.toFixed(0));
         if (this.maxLinesSecondaryText < 1) {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'c1c087f11542451c1747d510c133e79f94d643ba', style: {
+        return (h(Host, { key: 'e6619c70eab882e1a9ed482098a7f1ed673c74a1', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }
@@ -341,6 +343,25 @@ export class List {
                 "reflect": false,
                 "attribute": "type"
             },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the list, which a screen reader announces when the focus\nmoves into it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accessible-label"
+            },
             "maxLinesSecondaryText": {
                 "type": "number",
                 "mutable": false,

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: '0ff3eea71319a17641cc264d85ba35c1c8db83c8', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: 'fc4d7eab0b57e21d39c7d4fcc5ec7678a4e9662f', 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: 'e38dc3bb9a09cf08892e7485681a4421a5bdd2ba', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, 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)));
     }
     /**
      * 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: 'd4bb2de50d260fdf49eafe2449ca388f0369a682' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: '966057ee998af91916099c59398ea93742175fb5' }, 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: '3121124a57e9522dced4b749bfedfbe8dea2ea70' }, h("div", { key: '6f2b983303c0921a7b979cf0bbbdcc657e7555f8', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: '847bffc9b7fa4fbec42b705d3019c635d88fb6c6' }, h("div", { key: 'cd84ef0919fc4b2b80090de836366b317e60e51a', 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: 'db11d17d15303afcf0d767e085dbe653ab90f9dd', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '7a4f2639e7b02720b08b778d437e536ee5707cfa' })));
+        return (h(Host, { key: '08a40d19c6457ff0d8a1da75de5b3e9379b05999', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '736ef2dd358e6fb03daf87fe9b23d4625c5c3d64' })));
     }
     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: 'b989b659926fd335f77346886528cf3277f39c4d', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '3a8f9cbf65303bcf18358607559a204e944b18bb', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'd56ff6ab5d7504f9d4646ef2dcde736bd4515143', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '983315550638557b27cac1f9d604a36dca16bdd7', 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: '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: {
                 '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: '193deffa6146711b12adc1dd7ddcdeffd3b8c3c7', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: '8cb1b8b5fc263086d4dbc83d7da2ae0b45c58d1d', 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: 'da08fd948f5b38010647be878ab4d9ff4e6a8361', class: classList, tabindex: "-1" }, h("slot", { key: '2e69828eb156273746e946cc34f2c557bad111c4' })));
+        return (h("div", { key: '9a024d806ff045158b49fb9b5d92617852ceb4af', class: classList, tabindex: "-1" }, h("slot", { key: 'da767dcce51d5a8b667d195e747e0756117be1ff' })));
     }
     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: '8d1e3ea6b74700e4f79050dac678c5a1b4d1d0bc', class: "limel-notched-outline" }, h("slot", { key: 'fcb6831f64089a7ac25a0a9998eb331a9a965ae7', name: "content" }), h("span", { key: '870e9ddbefbbba75e61336b7171fcf43137c1379', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '5a12f8d71d2dbf8245b4faacf3ae8ec3f92a3cba', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '73d69b455321439990591b94894f13f8837f2617', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        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())));
     }
     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: '7d7e26956a5df97a75d2e9d4a8d5b2407b2b65a3' }, h("nav", { key: 'e2b6b6a1bb513e3136b6fcc2e34c668be8e64089', "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: '00e74cdbf6ca753b7bac6b4731a5b63c4ac4d338', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: '924becb588f7d773572b61865b9dd79b14171153' }, h("nav", { key: 'f517b62cf0107c912d576f08e9d99594f868be44', "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: '21758520849acfe32f43e86570fe60a040cf2748', 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.css

@@ -1,6 +1,105 @@
+@charset "UTF-8";
 /**
   * @prop --dropdown-z-index: z-index of the dropdown menu.
   */
+/**
+* Note! This file is forwarded via `src/style/exports.scss`
+* and exposed to consumers through the root `index.scss`.
+*
+* Consumers import it using:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* Legacy import paths (`dist/scss/mixins`) are maintained
+* for backward compatibility via copy rules in the Stencil config.
+*/
+/**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
 :host {
   position: relative;
   display: block;
@@ -8,4 +107,17 @@
 
 :host([hidden]) {
   display: none;
+}
+
+.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;
 }