@limetech/lime-elements 40.18.3 → 40.20.0

package/dist/collection/components/chart/scale.js

@@ -0,0 +1,193 @@
+const PERCENT = 100;
+const STEP_COUNT = 10;
+/**
+ * The most steps that an `axisIncrement` may divide a value axis into.
+ */
+export const MAX_AXIS_STEPS = 100;
+/**
+ * Types whose items are parts of one whole. They draw no axis, and an item's
+ * value or range extent is its share of `maxValue`, or of the combined items.
+ */
+const WHOLE_TYPES = new Set([
+    'stacked-bar',
+    'pie',
+    'doughnut',
+    'ring',
+]);
+const AXIS_INCREMENT_TYPES = new Set([
+    'bar',
+    'dot',
+    'area',
+    'line',
+]);
+/**
+ * Whether the items of a chart of this type are parts of one whole.
+ * @param type - the chart type
+ */
+export function isPartOfWhole(type) {
+    return WHOLE_TYPES.has(type);
+}
+/**
+ * Whether a chart of this type draws its value axis in steps of
+ * `axisIncrement`.
+ * @param type - the chart type
+ */
+export function usesAxisIncrement(type) {
+    return AXIS_INCREMENT_TYPES.has(type);
+}
+/**
+ * Whether the item has a `[start, end]` range, or an `[x, y]` point in a
+ * `scatter` chart, as its value.
+ * @param item - the item
+ */
+export function isRangeItem(item) {
+    return Array.isArray(item.value);
+}
+/**
+ * The lower end of the item's range, or its value.
+ * @param item - the item
+ */
+export function getMinimumValue(item) {
+    const value = item.value;
+    return Array.isArray(value) ? Math.min(...value) : value;
+}
+/**
+ * The upper end of the item's range, or its value.
+ * @param item - the item
+ */
+export function getMaximumValue(item) {
+    const value = item.value;
+    return Array.isArray(value) ? Math.max(...value) : value;
+}
+/**
+ * The extent of the item's range, or its value measured from zero.
+ * @param item - the item
+ */
+export function getValueSpan(item) {
+    const startValue = isRangeItem(item) ? getMinimumValue(item) : 0;
+    return getMaximumValue(item) - startValue;
+}
+/**
+ * The first value of a `scatter` point.
+ * @param item - the point
+ */
+export function getXValue(item) {
+    return Array.isArray(item.value) ? item.value[0] : item.value;
+}
+/**
+ * The second value of a `scatter` point.
+ * @param item - the point
+ */
+export function getYValue(item) {
+    return Array.isArray(item.value) ? item.value[1] : item.value;
+}
+/**
+ * The value axis of a `bar`, `dot`, `area` or `line` chart. It reaches from
+ * zero, or from the smallest value when that is below zero, up to `maxValue`
+ * or the largest value. Both ends are rounded outwards to a whole step.
+ * Without an `axisIncrement` above zero, or with one that would divide the
+ * axis into more than `MAX_AXIS_STEPS` steps, the step divides the axis into
+ * about ten.
+ * @param items - the items in the chart
+ * @param maxValue - the requested upper bound, if any
+ * @param axisIncrement - the requested step, if any
+ */
+export function getAxisRange(items, maxValue, axisIncrement) {
+    const maximumValues = items.map((item) => getMaximumValue(item));
+    const minRange = Math.min(0, ...items.map((item) => getMinimumValue(item)));
+    const finalMaxRange = maxValue !== null && maxValue !== void 0 ? maxValue : Math.max(minRange, ...maximumValues);
+    const span = finalMaxRange - minRange;
+    const increment = isUsableStep(axisIncrement, span)
+        ? axisIncrement
+        : getNiceStep(span);
+    return roundOutwards(minRange, finalMaxRange, increment);
+}
+/**
+ * The range of a chart whose items are parts of one whole: `maxValue`
+ * when set, otherwise the combined item values or range extents. The value
+ * is a scale, not a cap, so the combined size can exceed it. The whole is
+ * not rounded to an axis step, since these types draw no axis and an item's
+ * size has to be its exact share.
+ * @param items - the items in the chart
+ * @param maxValue - the whole, if set
+ */
+export function getWholeRange(items, maxValue) {
+    const sum = items.reduce((total, item) => total + getValueSpan(item), 0);
+    const inferredWhole = sum > 0 ? sum : 1;
+    // An explicit zero also falls back to 1, so normalization stays finite.
+    const whole = (maxValue !== null && maxValue !== void 0 ? maxValue : inferredWhole) || 1;
+    return {
+        minValue: 0,
+        maxValue: whole,
+        totalRange: whole,
+        increment: whole,
+    };
+}
+/**
+ * The two value axes of a `scatter` chart: `x` for each point's first value
+ * and `y` for its second. Each axis derives its own range and step from its
+ * own zero-anchored span, so positive, negative, and zero-crossing data all
+ * grid sensibly.
+ * @param items - the points in the chart
+ */
+export function getScatterRanges(items) {
+    return {
+        x: getZeroAnchoredRange(items.map((item) => getXValue(item))),
+        y: getZeroAnchoredRange(items.map((item) => getYValue(item))),
+    };
+}
+/**
+ * An item's share of the whole, in percent.
+ * @param item - the item
+ * @param whole - the range from `getWholeRange`
+ */
+export function getShare(item, whole) {
+    return (getValueSpan(item) / whole.totalRange) * PERCENT;
+}
+/**
+ * The item's value as text: its `formattedValue` when set, otherwise its
+ * value, range, or scatter point.
+ * @param item - the item
+ * @param type - the chart type
+ */
+export function formatValue(item, type) {
+    const { value, formattedValue } = item;
+    if (formattedValue) {
+        return formattedValue;
+    }
+    if (Array.isArray(value)) {
+        if (type === 'scatter') {
+            return `(${value[0]}, ${value[1]})`;
+        }
+        return `${value[0]} — ${value[1]}`;
+    }
+    return `${value}`;
+}
+function isUsableStep(step, span) {
+    return step > 0 && span / step <= MAX_AXIS_STEPS;
+}
+function getNiceStep(span) {
+    if (span <= 0) {
+        return 1;
+    }
+    const roughStep = span / STEP_COUNT;
+    const magnitude = 10 ** Math.floor(Math.log10(roughStep));
+    return Math.ceil(roughStep / magnitude) * magnitude;
+}
+// Both bounds include zero, so a fully-negative axis still shows its origin
+// (and zero line).
+function getZeroAnchoredRange(values) {
+    const minValue = Math.min(0, ...values);
+    const maxValue = Math.max(0, ...values);
+    return roundOutwards(minValue, maxValue, getNiceStep(maxValue - minValue));
+}
+function roundOutwards(minValue, maxValue, increment) {
+    const lowerEnd = Math.floor(minValue / increment) * increment;
+    const upperEnd = Math.ceil(maxValue / increment) * increment;
+    return {
+        minValue: lowerEnd,
+        maxValue: upperEnd,
+        totalRange: upperEnd - lowerEnd,
+        increment: increment,
+    };
+}

package/dist/collection/components/chart/theme.js

@@ -0,0 +1,133 @@
+const PROBE_PROPERTY = '--limel-chart-probe';
+const PUBLIC_COLORS = {
+    '--limel-chart-item-color': '--chart-item-color',
+    '--limel-chart-axis-line-color': '--chart-axis-line-color',
+    '--limel-chart-background-color': '--chart-background-color',
+    '--limel-chart-item-divider-color': '--chart-item-divider-color',
+};
+/**
+ * Creates a reader that resolves values in the given shadow root, where the
+ * chart's private custom properties are defined.
+ * @param root - the chart's shadow root
+ */
+export function createThemeReader(root) {
+    const probe = document.createElement('span');
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.position = 'absolute';
+    probe.style.visibility = 'hidden';
+    probe.style.pointerEvents = 'none';
+    root.append(probe);
+    let canvasContext;
+    const toRgba = (color) => {
+        if (color.startsWith('rgb')) {
+            return color;
+        }
+        canvasContext !== null && canvasContext !== void 0 ? canvasContext : (canvasContext = document
+            .createElement('canvas')
+            .getContext('2d', { willReadFrequently: true }));
+        return canvasContext ? paintToRgba(canvasContext, color) : color;
+    };
+    const resolveColor = (value) => {
+        probe.style.color = '';
+        probe.style.color = value;
+        if (!probe.style.color) {
+            return undefined;
+        }
+        return toRgba(getComputedStyle(probe).color);
+    };
+    // A value with `var()` is accepted by any property, and only turns out
+    // not to be a color once its variables are filled in, when `color` falls
+    // back to the color of the chart. A custom property keeps the filled-in
+    // value, so it can be checked. See
+    // https://www.w3.org/TR/css-variables-1/#invalid-at-computed-value-time
+    const fillIn = (value) => {
+        probe.style.setProperty(PROBE_PROPERTY, value);
+        const filledIn = getComputedStyle(probe).getPropertyValue(PROBE_PROPERTY);
+        probe.style.removeProperty(PROBE_PROPERTY);
+        return filledIn.trim();
+    };
+    const isColor = (value) => CSS.supports('color', fillIn(value));
+    const warned = new Set();
+    const resolvePublicColor = (property) => {
+        const value = fillIn(`var(${property})`);
+        const warning = `${property}:${value}`;
+        if (value && !CSS.supports('color', value) && !warned.has(warning)) {
+            warned.add(warning);
+            console.warn(`limel-chart: \`${PUBLIC_COLORS[property]}\` must be a CSS color, but was \`${value}\`. Using the color of the text instead.`);
+        }
+        return resolveColor(`var(${property})`);
+    };
+    const resolveLength = (value) => {
+        probe.style.width = value;
+        const pixels = Number.parseFloat(getComputedStyle(probe).width);
+        probe.style.width = '';
+        return Number.isFinite(pixels) ? pixels : 0;
+    };
+    return {
+        color: (value) => (isColor(value) ? resolveColor(value) : undefined),
+        theme: () => ({
+            itemColor: resolvePublicColor('--limel-chart-item-color'),
+            lineColor: resolveColor('var(--limel-chart-line-color)'),
+            axisLineColor: resolvePublicColor('--limel-chart-axis-line-color'),
+            textColor: resolveColor('var(--limel-chart-text-color)'),
+            backgroundColor: resolvePublicColor('--limel-chart-background-color'),
+            dividerColor: resolvePublicColor('--limel-chart-item-divider-color'),
+            surfaceColor: resolveColor('var(--limel-chart-surface-color)'),
+            itemBorderRadius: resolveLength('var(--limel-chart-item-border-radius)'),
+            scatterItemSize: resolveLength('var(--limel-chart-scatter-item-size)'),
+            fontFamily: getComputedStyle(root.host).fontFamily,
+            npsColors: [
+                resolveColor('var(--limel-chart-nps-detractors-color)'),
+                resolveColor('var(--limel-chart-nps-passives-color)'),
+                resolveColor('var(--limel-chart-nps-good-color)'),
+                resolveColor('var(--limel-chart-nps-excellent-color)'),
+            ],
+            animate: !matchMedia('(prefers-reduced-motion: reduce)').matches,
+        }),
+        dispose: () => probe.remove(),
+    };
+}
+/**
+ * Calls back when the theme of the chart may have changed: when the color
+ * scheme or the reduced motion preference of the system changes, the
+ * `data-theme` attribute of the page does, or the `style` or `class`
+ * attribute of the chart does.
+ * @param host - the chart
+ * @param onChange - called on every change
+ * @returns a function that stops watching
+ */
+export function watchTheme(host, onChange) {
+    const queries = [
+        matchMedia('(prefers-color-scheme: dark)'),
+        matchMedia('(prefers-reduced-motion: reduce)'),
+    ];
+    for (const query of queries) {
+        query.addEventListener('change', onChange);
+    }
+    const observer = new MutationObserver(onChange);
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['data-theme'],
+    });
+    observer.observe(host, {
+        attributes: true,
+        attributeFilter: ['style', 'class'],
+    });
+    return () => {
+        for (const query of queries) {
+            query.removeEventListener('change', onChange);
+        }
+        observer.disconnect();
+    };
+}
+// Browsers report colors outside sRGB, and those from `color-mix()`, in
+// notations such as `color(srgb …)` or `oklch(…)` that ECharts cannot parse.
+// Painting a pixel converts any color to sRGB.
+function paintToRgba(context, color) {
+    context.clearRect(0, 0, 1, 1);
+    context.fillStyle = color;
+    context.fillRect(0, 0, 1, 1);
+    const [red, green, blue, alpha] = context.getImageData(0, 0, 1, 1).data;
+    const MAX_CHANNEL = 255;
+    return `rgba(${red}, ${green}, ${blue}, ${alpha / MAX_CHANNEL})`;
+}

package/dist/collection/components/checkbox/checkbox.js

@@ -136,7 +136,7 @@ export class Checkbox {
         this.destroyMDCInstances();
     }
     render() {
-        return (h(CheckboxTemplate, { key: '4b128852f41050176409ab1362cb6ad284c25881', disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.inputId }));
+        return (h(CheckboxTemplate, { key: '6a18d520ee960ac28931ef982e193fbf94fc68c8', disabled: this.disabled || this.readonly, label: this.label, readonlyLabels: this.readonlyLabels, helperText: this.helperText, helperTextId: this.helperTextId, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.isInvalid(), onChange: this.onChange, id: this.inputId }));
     }
     static get is() { return "limel-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -176,7 +176,7 @@ export class Chip {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: 'fb7e275d2fa6c89222c35d8c79a29b5596fec9d4', onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
+        return (h(Host, { key: '6d14f382afece7cff1d5bb9e6f789d6aef5cad4c', onClick: this.filterClickWhenDisabled }, this.link ? this.renderAsLink() : this.renderAsButton()));
     }
     renderPicture() {
         var _a, _b;

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)) {