@limetech/lime-elements 39.26.0 → 39.28.0

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

@@ -1,3 +1,4 @@
+import translate from "../../global/translations";
 import { h, } from "@stencil/core";
 import { isDescendant } from "../../util/dom";
 import { ARROW_DOWN, ARROW_UP, ENTER, ESCAPE, TAB } from "../../util/keycodes";
@@ -16,6 +17,7 @@ const DEFAULT_SEARCHER_MAX_RESULTS = 20;
  * @exampleComponent limel-example-picker-value-as-object
  * @exampleComponent limel-example-picker-value-as-object-with-actions
  * @exampleComponent limel-example-picker-empty-suggestions
+ * @exampleComponent limel-example-picker-empty-result-message
  * @exampleComponent limel-example-picker-leading-icon
  * @exampleComponent limel-example-picker-static-actions
  * @exampleComponent limel-example-picker-sections
@@ -32,6 +34,12 @@ export class Picker {
          * but allow interaction with existing items.
          */
         this.readonly = false;
+        /**
+         * Defines the language for translations. Affects the labels
+         * rendered by the picker itself, such as the "Results matching"
+         * header shown above the suggestion list while the user is typing.
+         */
+        this.language = 'en';
         /**
          * True if the control requires a value
          */
@@ -124,7 +132,7 @@ export class Picker {
                 this.loading = true;
             });
             const searcher = this.searcher || this.defaultSearcher;
-            const result = (await searcher(this.textValue));
+            const result = await searcher(this.textValue);
             // If the search function resolves immediately,
             // the loading spinner will not be shown.
             clearTimeout(timeoutId);
@@ -146,7 +154,6 @@ export class Picker {
         };
         this.handleTextInput = this.handleTextInput.bind(this);
         this.handleInputKeyDown = this.handleInputKeyDown.bind(this);
-        this.handleDropdownKeyDown = this.handleDropdownKeyDown.bind(this);
         this.handleInputFieldFocus = this.handleInputFieldFocus.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.handleInteract = this.handleInteract.bind(this);
@@ -190,7 +197,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: 'd3490b3bcba25c3603a13881b9ce4708f459dc09', 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: '36c7521c2ee4232d08fdb86ed2e3d295fda69e01', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }
@@ -259,7 +266,14 @@ export class Picker {
             return this.renderSpinner();
         }
         if (!((_a = this.items) === null || _a === void 0 ? void 0 : _a.length)) {
-            return this.renderEmptyMessage();
+            // Only show "no matching results" when the user actually has
+            // a query in flight. Without this guard, the message would
+            // also render right after Esc clears the input, leaving the
+            // dropdown stuck in an "empty result" state.
+            if (this.textValue !== '') {
+                return this.renderEmptyMessage();
+            }
+            return;
         }
         return this.renderListResult();
     }
@@ -282,22 +296,32 @@ export class Picker {
             } }, h("limel-spinner", { limeBranded: false })));
     }
     renderEmptyMessage() {
-        if (!this.emptyResultMessage) {
-            return;
-        }
+        const text = this.emptyResultMessage ||
+            translate.get('picker.no-matching-results', this.language, {
+                query: this.textValue,
+            });
         const style = {
             color: 'rgb(var(--contrast-1100))',
-            'text-align': 'center',
+            textAlign: 'center',
+            fontSize: 'var(--limel-theme-default-font-size)',
             margin: '0.5rem 1rem',
         };
-        return h("p", { style: style }, this.emptyResultMessage);
+        return h("p", { style: style }, text);
     }
     renderListResult() {
         return (h("limel-list", { badgeIcons: this.badgeIcons, onChange: this.handleListChange, onKeyDown: this.onListKeyDown, type: "selectable", items: this.items }));
     }
     onListKeyDown(event) {
-        const keyFound = [TAB, ESCAPE, ENTER].includes(event.key);
-        if (keyFound) {
+        if (event.key === ESCAPE) {
+            // Stop bubble; otherwise menu-surface also emits `dismiss`
+            // and triggers a duplicate clear via handleCloseMenu.
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleEscape();
+            this.chipSet.setFocus();
+            return;
+        }
+        if ([TAB, ENTER].includes(event.key)) {
             this.chipSet.setFocus();
         }
     }
@@ -344,7 +368,7 @@ export class Picker {
      * @param event - event
      */
     handleListChange(event) {
-        var _a, _b;
+        var _a, _b, _c;
         event.stopPropagation();
         if (!this.value || this.value !== event.detail) {
             let newValue = event.detail;
@@ -353,11 +377,21 @@ export class Picker {
                 newValue = [...currentValue, event.detail];
             }
             this.change.emit(newValue);
-            this.items = [];
+            if (this.multiple) {
+                const remaining = this.items.filter((item) => item !== event.detail);
+                this.items = this.hasPickableItems(remaining) ? remaining : [];
+            }
+            else {
+                // Single-pick: the search session ends with the pick, so
+                // wipe the input. (In multi-pick we deliberately keep the
+                // typed query so the user can keep adding matches.)
+                this.items = [];
+                this.textValue = '';
+                (_b = this.chipSet) === null || _b === void 0 ? void 0 : _b.emptyInput();
+            }
         }
         if (this.multiple) {
-            this.textValue = '';
-            (_b = this.chipSet) === null || _b === void 0 ? void 0 : _b.setFocus(true);
+            (_c = this.chipSet) === null || _c === void 0 ? void 0 : _c.setFocus();
         }
     }
     /**
@@ -413,6 +447,13 @@ export class Picker {
             !event.shiftKey;
         const isUp = event.key === ARROW_UP;
         const isDown = event.key === ARROW_DOWN;
+        const isEscape = event.key === ESCAPE;
+        if (isEscape) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleEscape();
+            return;
+        }
         if (!isForwardTab && !isUp && !isDown) {
             return;
         }
@@ -441,44 +482,76 @@ export class Picker {
             listElement.focus();
         }
     }
-    /**
-     * Key handler for the dropdown
-     *
-     * @param event - event
-     */
-    handleDropdownKeyDown(event) {
-        const isEscape = event.key === ESCAPE;
-        if (isEscape) {
-            event.preventDefault();
-            this.textValue = '';
-            this.chipSet.setFocus(true);
-        }
-    }
     handleSearchResult(query, result) {
         var _a;
         if (query === this.textValue) {
-            this.items = result;
+            let nextItems = result;
             if (this.multiple) {
                 const values = (_a = this.value) !== null && _a !== void 0 ? _a : [];
-                this.items = result.filter((item) => {
+                nextItems = result.filter((item) => {
+                    if ('separator' in item) {
+                        return true;
+                    }
                     return !values.includes(item);
                 });
             }
+            this.items = this.prependSearchHeader(query, nextItems);
             this.loading = false;
         }
     }
-    handleCloseMenu() {
-        if (this.items.length > 0) {
-            return;
+    hasPickableItems(items) {
+        return items.some((item) => !('separator' in item));
+    }
+    prependSearchHeader(query, items) {
+        if (query === '') {
+            return items;
         }
+        if (!this.hasPickableItems(items)) {
+            return items;
+        }
+        const text = translate.get('picker.results-matching', this.language, {
+            query: query,
+        });
+        return [{ separator: true, text: text }, ...items];
+    }
+    handleCloseMenu() {
         this.clearInputField();
     }
-    clearInputField() {
+    /**
+     * Shared prelude for any flow that ends the current search session:
+     * wipe the chip-set's visible text, reset the picker's `textValue`,
+     * and cancel any in-flight debounced search.
+     *
+     * Used by `clearInputField` (which then drops the dropdown
+     * entirely) and `resetSearchToDefault` (which re-runs the searcher
+     * with an empty query to repopulate the dropdown with defaults).
+     */
+    clearTextValue() {
         this.chipSet.emptyInput();
         this.textValue = '';
-        this.handleSearchResult('', []);
         this.debouncedSearch.cancel();
     }
+    clearInputField() {
+        this.clearTextValue();
+        this.handleSearchResult('', []);
+    }
+    resetSearchToDefault() {
+        this.clearTextValue();
+        this.search('');
+    }
+    /**
+     * Two-stage Esc: first press clears the typed query but keeps the
+     * dropdown open showing the default suggestions; a second press
+     * (with the query already empty) closes the dropdown.
+     */
+    handleEscape() {
+        if (this.textValue === '') {
+            this.clearInputField();
+        }
+        else {
+            this.resetSearchToDefault();
+        }
+    }
     static get is() { return "limel-picker"; }
     static get encapsulation() { return "shadow"; }
     static get delegatesFocus() { return true; }
@@ -629,13 +702,40 @@ export class Picker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A message to display when the search returned an empty result"
+                    "text": "A message to display when the search returned an empty result.\n\nIf unset (or set to an empty string), the picker shows a\ndefault translated message (`No results matching \"X\"` in\nEnglish, where `X` is the current query) chosen by the\n`language` prop. Set this to override the default with custom\ntext \u2014 for example, when the picker's domain calls for more\nspecific wording like \"No matching participants found\"."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "empty-result-message"
             },
+            "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. Affects the labels\nrendered by the picker itself, such as the \"Results matching\"\nheader shown above the suggestion list while the user is typing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,

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: '7bc94b0e636ab16a04e76947731eb815f9a33e38', class: "trigger-anchor" }, h("slot", { key: 'e35b20eb6e38755cd50f71ada0413efcc79ce9e0', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '397107a1f1fa9f796f0801da60df81084a0862ea', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'f63f011a8d529a68b535fcbed4685a5bb508dded', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: '53e64435fa661015fbbf2e449890864c8008c329', class: "trigger-anchor" }, h("slot", { key: '85336e8f76377921850ffc7704c7588707c45066', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'a40bfde87375a494ac5404911b4b1f058a55becf', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '396e369ae3e61a79bfd2f520e05187a6ff85f834', 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: '2ade664e817c3559b6721f0567736c8942afd2f1', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '72e73b254be6cebbd27332329b10a58210ae0352', 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: 'c8e7ba60cdab45dd239eae6c9123f673a48e8e22' });
+        return h("slot", { key: 'd6ed0d276afec19ba5ffd4d6a6fcf96937127d6a' });
     }
     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: '0a68f90122f1e246d966e3b747f0e13bed2c901b', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: 'd42e6342d4fd79d34cb2c6a9d25d3dfe577e9a99', 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: 'd198242b1e1a066b38b1d6ddc55fcd8dd7817c36', class: {
+        return (h(Host, { key: '64623e09534c5b4e457029cbed4865d97d3cc19e', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: '7b2a009c5753d4ad9bad3c1ee9d8aa2b1fc30db8', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '8eef5a56df7502ec7b6cb1ed84c8b8f0a72cd21c', class: "box" }), h("label", { key: 'bcd0883bf0dbdd307508a47e98402e590167fa00', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: '4eb816e8031d20bbfa5beb32798e50e5d3747895', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '9e7d7db22981a16b4655d7cbcd7c3eb2462a7953', class: "box" }), h("label", { key: '4b2061d351b2d4d03d6e5763bc132be46d146e48', 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

@@ -110,7 +110,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '4a03a36bc3b80995c825ef3e87d8b30f7e8618a9', 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.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '8c14a523262356e12ac5322a917b0f888d794f21', 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.shouldRenderNative(), 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: 'edf3774fe6e6d8e91866e4517e3614907dd499a0', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '1ed137455023ec2caa34cc2a2c1e893f8178cad4', "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: 'c36a0d1d339675309d85e02a342e30d4fd002b58', name: this.icon }), h("limel-3d-hover-effect-glow", { key: 'ab9be4306bb4af9b5cb958acbb82a75eb3cfc4d4' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: '531a8b5cc870974dc01a7e20eef553fa53e77509', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '997342917a0d28103ff340ad0e8cee766e48f85c', "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: '30f694eb6cc1ee927e41e6b39aedaa46e6b5715f', name: this.icon }), h("limel-3d-hover-effect-glow", { key: 'f083e6f0d5bc0eb205cee0d7018c9f76b0c39d89' })), this.renderLabel(), this.renderNotification()));
     }
     static get is() { return "limel-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

@@ -150,9 +150,9 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: '00987f40cc3a4a7d47a5efec7257acbfcde2df06', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '90d73bb40733a3bd85b0c7d6fb0420f4b48de9e9', 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: 'd35d56c074af9c68663a7f2c475794f82cc2f924', slot: "content" }, h("div", { key: '28367643903a7c888eb4c381e498d179afb2374a', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '9e2f5519e946f39444b21c893fa7c45db769b1d6', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
+        return (h(Host, { key: 'fa9695563f078bdab1707422cad3aaef2610e592', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '8b71ef15e9544a6b346248217c2c2fa8acbba6e7', 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: '0327cf7d5295bb1d56e2e34b8dca15cfc3e15c0d', slot: "content" }, h("div", { key: '83fade77119ba9fa1d24ae8fdcd54317648918b3', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '5181430787abe75b4556923e31ebe8520df977e9', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
                 ? this.helperTextId
-                : undefined, onInput: this.handleInput, onChange: this.handleChange }, inputProps)), h("div", { key: '58525aba7ff932188e1395a71f43a5b3a448cfcc', class: "track" }, h("div", { key: '4e4c6f0eb6fea869a9e204c79adb8ca2c481f566', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '326cefe13667b61450ed270fee96ec6bca479fa6', class: "thumb" }, h("div", { key: '716621ccf495c5f9ec27758b62d5f15b9995cf06', class: "knob" }), h("div", { key: '110c06b6803a4120ee1c613880b2ea8243702c89', class: "indicator", "aria-hidden": "true" }, this.displayValue))), h("div", { key: '0c82e7f841b39be2380a450898c231c37282e502', class: "range-labels" }, h("span", { key: '40088f1c268470bc585f5dbcf92f479641a6c2e0', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '8375f191def455fb3967209d18d839ada677c477', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
+                : undefined, onInput: this.handleInput, onChange: this.handleChange }, inputProps)), h("div", { key: '6ee95d718f1d01e92adcf9592882ed1d32e4ba67', class: "track" }, h("div", { key: 'bba420e41501990bdeb1326e59e6eff57000848d', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '46e5a45adbda4e1a650d01408c3d228f1c6be68d', class: "thumb" }, h("div", { key: 'eeba995f52ff3291e2e7818528b05c7c1dec1b32', class: "knob" }), h("div", { key: 'd0321459ed22c6870d939da54df43fe2bfef6333', class: "indicator", "aria-hidden": "true" }, this.displayValue))), h("div", { key: 'bcc4449d7605343fd64f4b89b50c8e5d665f6937', class: "range-labels" }, h("span", { key: '301c78b1640551fe814ad3b2768bb40f9b682b39', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '7f8d741f63030b6f8e88231e5215448b815bf3ca', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
     }
     watchValue() {
         this.displayValue = this.multiplyByFactor(this.getValue());

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

@@ -122,14 +122,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: '99446faf1f17a1fe421f316d53225e0ed6d78ee6', popover: "manual", style: {
+        return (h("aside", { key: '41ced0ac7a40f8317766dabd45a107f304ec46bd', popover: "manual", style: {
                 '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
                 '--snackbar-distance-to-top-edge': `${this.offset}px`,
             }, class: {
                 open: this.open,
                 'is-closing': this.closing,
                 'limel-portal--parent': true,
-            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'e846035a835f06912efe2e6452f0face9ecb001f', class: "surface" }, h("limel-markdown", { key: '339f067e2e290359674a406b0fa4ad7a49fd5da4', class: "label", value: this.message }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
+            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'a493f7cfafaf63696f8e1ac532103fdfa03b9312', class: "surface" }, h("limel-markdown", { key: '0cda776d6680eff1e8d0f1aff9d3657ef8287d80', class: "label", value: this.message }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

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

@@ -16,7 +16,7 @@ export class Spinner {
         this.limeBranded = false;
     }
     render() {
-        return (h(Host, { key: 'b5577d30805f87fcb6f670886ff22af94554d18a' }, h("svg", { key: '895db390ea2b9393d315622ffb9e23b40f036c39', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: 'bb72728921dd48ab02cad031e3b35641c92b4dce' }, h("svg", { key: 'fccd59e394e3e4a0101d2e7f903b1b4f9dffc630', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

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

@@ -55,9 +55,9 @@ export class SplitButton {
         };
     }
     render() {
-        return (h(Host, { key: 'd76de1269634f7f6c997d60f279d6305eb098469', class: {
+        return (h(Host, { key: 'e400e10d06c24703585f5e02477175fbfd2a3d95', class: {
                 'has-menu': this.items.length > 0,
-            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '93b69e21144ab3ee5be1c434032bce972d7d3d54', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
+            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '29f29a0d44c9b7b66a2f13815f59df6642dad6d2', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
     }
     static get is() { return "limel-split-button"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -62,11 +62,11 @@ export class TabBar {
         this.tearDown();
     }
     render() {
-        return (h("div", { key: '5fcbc5f69907b3437a7c17d18d5356ac45f84ea4', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: '0ec7bac2105ac5a2620379a907fc660344387539', class: {
+        return (h("div", { key: '011bbe3e75ebeb4fefe4942704ef003ad64e92fc', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: '6119888fd94f5ea3d474c1a14016e456ff98923e', class: {
                 'mdc-tab-scroller': true,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, h("div", { key: 'e4bd200335ff91ff6cb6476fef0c30ff90ee1c44', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: 'c3f774e3524131d4d42c34eb1884ac95a173422e', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: 'babdaf65720c52c03cf4bfedee68993ead018e94', class: "scroll-fade left" }), h("div", { key: 'fe06945559ccf14921f523776a15f68f62496804', class: "scroll-button left" }, h("button", { key: '5a6098a7776d635f9aaa9a7f59b4e7024f270ee1', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '89bdf714b634b0ec7d56d3b1b66961a74999e9e6', name: "angle_left" }))), h("div", { key: 'e7c6d0adb6634015c3482a3787451ffcfa37ee90', class: "scroll-fade right" }), h("div", { key: '97d2229df3f45d495ec59f97ae92c53fa63a5cab', class: "scroll-button right" }, h("button", { key: '1d4c1bf329e8739802faa4040d7438aa4c2056f0', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '1bc8b53f7958170c51aac799e05d441e5d6666c7', name: "angle_right" }))))));
+            } }, h("div", { key: 'ac46f8471cbdbaec95bed2d5541d6f927eee0fb7', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: 'a12f6a5112ff94c5c70a6800972e81998fd51517', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '2891ceddace39d210b314c203bdaaf1cf50257da', class: "scroll-fade left" }), h("div", { key: '52d16debe5cba91b876d2c1ebc3fa0b65554193c', class: "scroll-button left" }, h("button", { key: 'a9c6c3bc7027e7dfcfdc999f542911533d2ad97d', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '6d910230e3e7182c0431508603f97a8da195454f', name: "angle_left" }))), h("div", { key: '47ab1002864f2603fcaee518c5cf8604512a5294', class: "scroll-fade right" }), h("div", { key: 'cebdcc16ed78ecbeafcf4bfbc9e1c59277f3c959', class: "scroll-button right" }, h("button", { key: 'd35caa827d3f4218537f91522cfe1b4b85d0de29', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '875ee1bfc8a28a6fbed1d6323974f732f5d3274e', name: "angle_right" }))))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

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

@@ -56,7 +56,7 @@ export class TabPanel {
         this.tabs.forEach(this.setTabStatus);
     }
     render() {
-        return (h(Host, { key: 'cc2be22eb941e72c7333ee435d912e55bc38fd20', onChangeTab: this.handleChangeTabs }, h("div", { key: 'a5ea8894f2bb8121320dabf15757ec6d667c3e9d', class: "tab-panel" }, h("limel-tab-bar", { key: '42be419551f9c3e1310de21bb89bab89bd759dee', tabs: this.tabs }), h("div", { key: '13e156b564873aaa4de691bd3cefc703ba7d2f65', class: "tab-content" }, h("slot", { key: 'b48cff50f857f337af2c60a0d7411a6b8860ae3d' })))));
+        return (h(Host, { key: 'ebab881a0b0efc36b64c866b58b919890c526525', onChangeTab: this.handleChangeTabs }, h("div", { key: '1417a34aea0af009e44cd91ac8fd425412a2b706', class: "tab-panel" }, h("limel-tab-bar", { key: '5b420eeec41fdd353ba0ba36bb0e475c3fd26821', tabs: this.tabs }), h("div", { key: 'aa3d6f711a824a07eed6f2b5120497dd4218ed7b', class: "tab-content" }, h("slot", { key: '7ba511fa07bd96018e4d8d288d7b1dca572cead0' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();

package/dist/collection/components/table/table.js

@@ -666,17 +666,17 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: '3b28cfab0fd734f67db2e7737c1ed0ec495355e3', class: {
+        return (h(Host, { key: 'daea6a9974805de1d9a0c65e3dd5a4f1f477fb6e', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
-            } }, h("div", { key: '0016463abe127fab6898bac733af3e72a2e64a13', id: "tabulator-container", class: {
+            } }, h("div", { key: '86d554c7a311b0944e04a302184ba4e5e7b4fb64', id: "tabulator-container", class: {
                 'has-pagination': totalRows > this.pageSize,
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-movable-columns': this.movableColumns,
                 'has-movable-rows': !!this.rowDragManager,
                 'has-rowselector': this.selectable,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: '3d92df3f663f1e6a4099855685952a0c5f196614', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '5bc630cf2458dcafa35f8ceb0a3a59c4a045afbb', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '5cd2da6a8a704ba0b0257cab8ff58acca5b01067', id: "tabulator-table" }))));
+            } }, h("div", { key: '8b0e85e32cea7f7411bfa16b2edd061925ad6ffa', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '321b0a59a93bbdbeadfa5c40a38d20dc01ad242d', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '61c2f18947b40ff3834b93e7780e552ee8fee415', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

package/dist/collection/components/text-editor/link-menu/editor-link-menu.js

@@ -106,9 +106,9 @@ export class TextEditorLinkMenu {
         var _a, _b;
         const isValid = this.isValid(this.link.href);
         return [
-            h("limel-input-field", { key: '453392d104185e6ad22ee90e204960da0c0f1def', label: this.getTranslation('editor-link-menu.text'), value: ((_a = this.link) === null || _a === void 0 ? void 0 : _a.text) || '', leadingIcon: "text_cursor", onChange: this.handleLinkTitleChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textInput = el) }),
-            h("limel-input-field", { key: '78c1dcc14cde3e8e6a053560e92fa9828b55d266', label: this.getTranslation('editor-link-menu.link'), value: ((_b = this.link) === null || _b === void 0 ? void 0 : _b.href) || '', type: "text", leadingIcon: "-lime-text-link", trailingIcon: "external_link", invalid: !isValid, onChange: this.handleLinkValueChange, onAction: this.handleLinkInputAction, onKeyDown: this.handleKeyDown }),
-            h("div", { key: '2d77225e278410cb4af77b35ba756f0805f30b8c', class: "actions" }, h("limel-button", { key: 'bf2ad2a86c6231517e18f50a65a41785f5d0c38b', label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { key: 'b86cddda73e5027fb88c0cb36ed784341b1081a7', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
+            h("limel-input-field", { key: 'f91dd3a9c03bb52cb91ea0f3251288f5a612cd3a', label: this.getTranslation('editor-link-menu.text'), value: ((_a = this.link) === null || _a === void 0 ? void 0 : _a.text) || '', leadingIcon: "text_cursor", onChange: this.handleLinkTitleChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textInput = el) }),
+            h("limel-input-field", { key: '1034663268cae0a749397331b43ea44387431c78', label: this.getTranslation('editor-link-menu.link'), value: ((_b = this.link) === null || _b === void 0 ? void 0 : _b.href) || '', type: "text", leadingIcon: "-lime-text-link", trailingIcon: "external_link", invalid: !isValid, onChange: this.handleLinkValueChange, onAction: this.handleLinkInputAction, onKeyDown: this.handleKeyDown }),
+            h("div", { key: '5c4b46deb47d9369a0a59e1e5908934093322755', class: "actions" }, h("limel-button", { key: '62c2dcc49a7907d938a27e2887432caa3e1a75ff', label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { key: '5252752da58d02fd81abef41fc9788a07e277738', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
         ];
     }
     static get is() { return "limel-text-editor-link-menu"; }

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.js

@@ -246,7 +246,7 @@ export class ProsemirrorAdapter {
         (_e = this.view) === null || _e === void 0 ? void 0 : _e.destroy();
     }
     render() {
-        return (h(Host, { key: 'b7dbbd5a73e68e2df2b52f36f6d57bc0885f87a3', onFocus: this.handleFocus }, h("div", { key: 'a630b7eacb1b5be9460b85944e2a3a5955661437', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
+        return (h(Host, { key: '125d6d80cfc94a3121cde5d121d3cb2a26cf1635', onFocus: this.handleFocus }, h("div", { key: 'eb076afa683c0dfcb57b6688bc94ce1b81ce5710', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
     }
     renderToolbar() {
         if (this.actionBarItems.length === 0 || this.ui === 'no-toolbar') {

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

@@ -142,7 +142,7 @@ export class TextEditor {
         this.editorId = createRandomString();
     }
     render() {
-        return (h(Host, { key: 'bde3c6cc9cb0ed28fc72a3749a178b40d8694633' }, h("limel-notched-outline", { key: '344abd4bc6c049085605d9ea74cb942f93b331a6', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
+        return (h(Host, { key: '31661aea27e0dea61827560c031587bd208f8bed' }, h("limel-notched-outline", { key: '81571a171ba0b629117d8b153e091e6d34c98c70', labelId: this.editorId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, this.renderEditor(), this.renderPlaceholder()), this.renderHelperLine()));
     }
     renderEditor() {
         if (this.readonly) {

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

@@ -15,7 +15,7 @@ export class TooltipContent {
         const style = this.maxlength
             ? { '--tooltip-max-width-of-text': `${this.maxlength}ch` }
             : undefined;
-        return (h(Host, { key: '3994a2ea4040dfd7dfa969a3347d111994d769e1', class: { 'has-column-layout': isLabelsTextLong }, style: style }, h("div", { key: '8a7cfd75957eea1515a22928f4783f787f1288bc', class: "label" }, this.label), this.renderHelperLabel(), this.renderHotkey()));
+        return (h(Host, { key: '7dae3fae1f48d6aed186d4a40ec2d3ae4c675c34', class: { 'has-column-layout': isLabelsTextLong }, style: style }, h("div", { key: '892d2b80b4e3d333f363579e8be63726366ec772', class: "label" }, this.label), this.renderHelperLabel(), this.renderHotkey()));
     }
     renderHelperLabel() {
         if (!this.helperLabel) {

package/dist/collection/components/tooltip/tooltip.js

@@ -68,10 +68,10 @@ export class Tooltip {
     }
     render() {
         const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-        return (h("div", { key: 'a88bd5dddfd5cd3170365e059681c71714ea44d8', class: "trigger-anchor" }, h("limel-portal", { key: 'f267863a5e88bdceade994b7ed359d8009676fe2', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
+        return (h("div", { key: 'bb784749dd20ef6cda629303058dbb0df848f655', class: "trigger-anchor" }, h("limel-portal", { key: 'baca835ff99112bebd09cce6a22181b7a00fc0a5', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
                 'z-index': tooltipZIndex,
                 'pointer-events': 'none',
-            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: '8a58395071b2017fa1dd100899002eec67156750', label: this.label, helperLabel: this.helperLabel, hotkey: this.hotkey, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: 'b830c5052040a8f10345844584b296a1b0c1b00f', label: this.label, helperLabel: this.helperLabel, hotkey: this.hotkey, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
     }
     setOwnerAriaDescribedby() {
         var _a;

package/dist/collection/translations/da.js

@@ -72,6 +72,11 @@ Du kan fortsætte med at blokere billeder (e-mailen kan se ufuldstændig ud) ell
     'progress-bar': 'Fremskridtsindikator',
     'ai-avatar.label': 'AI-avatar',
     'ai-avatar.thinking': 'tænker',
+    'ai-avatar.mode.active': 'aktiv',
+    'ai-avatar.mode.thinking': 'tænker',
+    'ai-avatar.mode.typing': 'skriver',
+    'ai-avatar.mode.working': 'arbejder',
+    'ai-avatar.mode.waiting': 'venter på input',
     'table.select-all': 'Vælg alle rækker',
     'table.select-row': 'Vælg denne række',
     'code-diff.table-label': 'Kodesammenligning',
@@ -106,4 +111,6 @@ Du kan fortsætte med at blokere billeder (e-mailen kan se ufuldstændig ud) ell
     'profile-picture.remove': 'Fjern valgt billede',
     'profile-picture.unsupported-preview.title': 'Ikke-understøttet billedformat',
     'profile-picture.unsupported-preview.description': 'Vi kan ikke vise det valgte billede i denne browser. Vælg venligst en anden billedfil.',
+    'picker.results-matching': 'Resultater der matcher "{ query }"',
+    'picker.no-matching-results': 'Ingen resultater der matcher "{ query }"',
 };

package/dist/collection/translations/de.js

@@ -72,6 +72,11 @@ Sie können Bilder weiterhin blockieren (die E-Mail kann unvollständig aussehen
     'progress-bar': 'Fortschrittsbalken',
     'ai-avatar.label': 'KI-Avatar',
     'ai-avatar.thinking': 'denkt',
+    'ai-avatar.mode.active': 'aktiv',
+    'ai-avatar.mode.thinking': 'denkt',
+    'ai-avatar.mode.typing': 'tippt',
+    'ai-avatar.mode.working': 'arbeitet',
+    'ai-avatar.mode.waiting': 'wartet auf Eingabe',
     'table.select-all': 'Alle Zeilen auswählen',
     'table.select-row': 'Diese Zeile auswählen',
     'code-diff.table-label': 'Code-Vergleich',
@@ -106,4 +111,6 @@ Sie können Bilder weiterhin blockieren (die E-Mail kann unvollständig aussehen
     'profile-picture.remove': 'Ausgewähltes Bild entfernen',
     'profile-picture.unsupported-preview.title': 'Nicht unterstütztes Bildformat',
     'profile-picture.unsupported-preview.description': 'Wir können das ausgewählte Bild in diesem Browser nicht anzeigen. Bitte wählen Sie eine andere Bilddatei.',
+    'picker.results-matching': 'Ergebnisse passend zu "{ query }"',
+    'picker.no-matching-results': 'Keine Ergebnisse passend zu "{ query }"',
 };