@limetech/lime-elements 40.9.0 → 40.10.0

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

@@ -0,0 +1,433 @@
+import { h, Host, } from "@stencil/core";
+import { getDeepActiveElement } from "../../util/get-deep-active-element";
+import { ESCAPE } from "../../util/keycodes";
+import { createRandomString } from "../../util/random-string";
+/**
+ * Open panels, in the order they were connected. Only the last one handles
+ * Escape.
+ */
+const openPanels = [];
+function stopEvent(event) {
+    event.stopPropagation();
+}
+/**
+ * A resizable panel that is displayed on top of the right side of the page.
+ * The content is placed in the default slot, below a toolbar with a close button.
+ *
+ * The panel is positioned relative to its nearest positioned ancestor. Set
+ * `position: relative` on that element. Use `--side-panel-top-inset`,
+ * `--side-panel-right-inset` and `--side-panel-bottom-inset` to keep parts of
+ * that element visible, for example a header.
+ *
+ * The CSS custom properties can be set on the panel or on any ancestor.
+ *
+ * The panel is a dialog that does not block the rest of the page. Set `label`
+ * to give it an accessible name, which screen readers announce. When the panel
+ * opens, focus moves into it. When the panel is removed, focus returns to the
+ * element that had it before, unless focus is somewhere else by then.
+ *
+ * The panel emits `close` when the user clicks the close button, or presses
+ * Escape. It does not remove itself. The consumer must remove it from the DOM.
+ * The user can resize the panel by dragging its left edge, or with the arrow
+ * keys. The panel emits `changeWidth` when a resize is finished.
+ *
+ * See the examples for how closing and resizing work in detail.
+ *
+ * @exampleComponent limel-example-side-panel-basic
+ * @exampleComponent limel-example-side-panel-insets
+ * @exampleComponent limel-example-side-panel-escape
+ * @private
+ */
+export class SidePanel {
+    constructor() {
+        /**
+         * Label of the close button. Shown as a tooltip and used as the accessible
+         * name.
+         */
+        this.closeLabel = 'Close';
+        /**
+         * Label of the resize handle. Used as the accessible name.
+         */
+        this.resizeLabel = 'Resize';
+        /**
+         * Whether pressing Escape emits `close`. Set to `false` to let only the
+         * close button emit `close`. The panel then does not prevent the Escape
+         * event either.
+         */
+        this.closeOnEscape = true;
+        this.closeButtonId = createRandomString();
+        this.setBody = (element) => {
+            this.body = element;
+            this.stopContentEventsInBody();
+        };
+        // Moving the panel in the DOM also disconnects it. It is then connected
+        // again before the microtask runs. Focus only returns when it was lost with
+        // the panel, and not when the user has moved it to another element.
+        this.restoreFocus = () => {
+            const hasLostFocus = !document.activeElement || document.activeElement === document.body;
+            if (this.host.isConnected || !hasLostFocus) {
+                return;
+            }
+            const element = this.focusedBefore;
+            this.focusedBefore = undefined;
+            if (element === null || element === void 0 ? void 0 : element.isConnected) {
+                element.focus();
+            }
+        };
+        this.setPanel = (element) => {
+            this.panel = element;
+        };
+        this.setMinLimit = (element) => {
+            this.minLimit = element;
+        };
+        this.setMaxLimit = (element) => {
+            this.maxLimit = element;
+        };
+        this.handleKeyDown = (event) => {
+            if (!this.closeOnEscape ||
+                event.key !== ESCAPE ||
+                event.defaultPrevented ||
+                !this.isLastOpened()) {
+                return;
+            }
+            event.preventDefault();
+            this.close.emit();
+        };
+        this.handleChangeSize = (event) => {
+            this.rememberWidthBeforeResize();
+            this.setWidth(event.detail);
+        };
+        this.handleEndResize = () => {
+            if (!this.isResizing()) {
+                return;
+            }
+            const widthBefore = this.widthBeforeResize;
+            this.widthBeforeResize = undefined;
+            this.keepClampedWidth();
+            this.updateWidthRange();
+            this.emitWidthIfChanged(widthBefore);
+        };
+        // The height of the panel, and a width that `updateWidthRange` has already
+        // measured, for example after an arrow key press, need no new measurement.
+        this.handleSizeChange = (entries) => {
+            if (entries.every(this.isMeasured)) {
+                return;
+            }
+            this.updateWidthRange();
+        };
+        this.isMeasured = (entry) => {
+            var _a;
+            return (entry.target === this.panel &&
+                Math.round(entry.borderBoxSize[0].inlineSize) ===
+                    ((_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now));
+        };
+        // Reading the current width forces a layout of the content, which is slow
+        // when the content is large. The range does not change during a resize, so it
+        // is measured when the resize ends.
+        this.updateWidthRange = () => {
+            if (this.isResizing()) {
+                return;
+            }
+            this.widthRange = this.measureWidthRange();
+        };
+        this.handleClickClose = () => {
+            this.close.emit();
+        };
+    }
+    connectedCallback() {
+        openPanels.push(this);
+        window.addEventListener('keydown', this.handleKeyDown);
+        this.rememberFocusedElement();
+        this.observeWidth();
+    }
+    componentDidLoad() {
+        this.observeWidth();
+        this.moveFocusIntoPanel();
+    }
+    disconnectedCallback() {
+        this.widthBeforeResize = undefined;
+        this.stopObservingWidth();
+        window.removeEventListener('keydown', this.handleKeyDown);
+        this.removeFromOpenPanels();
+        queueMicrotask(this.restoreFocus);
+    }
+    render() {
+        return (h(Host, { key: '1c18f40fb45731bdf157d651d4e649446de5230b' }, h("section", { key: 'e8b41bded39732750ae3db9b1daf14dc742e1cb7', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: '3cba5523e0cbe45fa328daaa40136c063a8c3ac3', class: "content" }, h("div", { key: 'b5cbc1260b4e6f31ac789179ab4b5a0281b9133b', class: "toolbar" }, this.renderCloseButton()), this.renderBody())), h("span", { key: '5fe872f05a6cc49027f84d71a765baa59a53adb9', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '5042e7437e61ae5308e13b1a30f5df24747e2cdf', "data-limit": "max", ref: this.setMaxLimit })));
+    }
+    // A native button and not `limel-icon-button`, because the hover animation
+    // styles the icon, which is inside the shadow root of `limel-icon-button`.
+    renderCloseButton() {
+        return (h("button", { class: "close", id: this.closeButtonId, "aria-label": this.closeLabel, onClick: this.handleClickClose }, h("limel-icon", { name: "multiply", "aria-hidden": "true" }), h("limel-tooltip", { elementId: this.closeButtonId, label: this.closeLabel })));
+    }
+    renderHandle() {
+        var _a, _b, _c;
+        return (h("limel-resize-handle", { class: "handle", label: this.resizeLabel, value: (_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now, min: (_b = this.widthRange) === null || _b === void 0 ? void 0 : _b.min, max: (_c = this.widthRange) === null || _c === void 0 ? void 0 : _c.max, onChangeSize: this.handleChangeSize, onEndResize: this.handleEndResize }));
+    }
+    renderBody() {
+        return (h("div", { class: "body", ref: this.setBody }, h("slot", null)));
+    }
+    /**
+     * Components in the content can emit events with the same names as the
+     * panel's events, for example `close` from `limel-dialog` or
+     * `limel-collapsible-section`. Events from slotted content pass through
+     * `.body` before they reach the host, so they are stopped there. The panel's
+     * own events are dispatched on the host, so they are not affected.
+     *
+     * Keep the event names in sync with {@link SidePanel.stopContentEventAtHost}.
+     */
+    stopContentEventsInBody() {
+        var _a, _b;
+        // Adding the same listener again has no effect, so re-renders are safe.
+        (_a = this.body) === null || _a === void 0 ? void 0 : _a.addEventListener('close', stopEvent);
+        (_b = this.body) === null || _b === void 0 ? void 0 : _b.addEventListener('changeWidth', stopEvent);
+    }
+    /**
+     * Fallback for {@link SidePanel.stopContentEventsInBody}.
+     * Stops `close` and `changeWidth` events that reach the host from any
+     * element other than the host.
+     *
+     * This does not replace the slot listener. A consumer listener that is added
+     * before the panel is connected runs before this one, and would still
+     * receive the event.
+     *
+     * @param event - the event
+     */
+    stopContentEventAtHost(event) {
+        if (event.target === this.host) {
+            return;
+        }
+        event.stopImmediatePropagation();
+    }
+    moveFocusIntoPanel() {
+        this.panel.focus({ preventScroll: true });
+    }
+    rememberFocusedElement() {
+        const element = getDeepActiveElement();
+        if (!element || element === document.body) {
+            return;
+        }
+        this.focusedBefore = element;
+    }
+    removeFromOpenPanels() {
+        const index = openPanels.indexOf(this);
+        if (index === -1) {
+            return;
+        }
+        openPanels.splice(index, 1);
+    }
+    isLastOpened() {
+        return openPanels.at(-1) === this;
+    }
+    // An inline width wins over `--side-panel-width`, and is still limited by
+    // `min-width` and `max-width`. The width is set on the element and not with
+    // a state, because a render and a measurement on each pointer move make
+    // the drag slow when the content is large.
+    setWidth(width) {
+        this.panel.style.width = `${width}px`;
+    }
+    rememberWidthBeforeResize() {
+        if (this.isResizing()) {
+            return;
+        }
+        this.widthBeforeResize = this.currentWidth();
+    }
+    isResizing() {
+        return this.widthBeforeResize !== undefined;
+    }
+    // A drag past a limit sets a width that CSS clamps. Without the clamped
+    // width, the panel grows when its container grows.
+    keepClampedWidth() {
+        this.setWidth(this.currentWidth());
+    }
+    emitWidthIfChanged(widthBefore) {
+        const width = this.currentWidth();
+        if (width === widthBefore) {
+            return;
+        }
+        this.changeWidth.emit(width);
+    }
+    // A focusable separator must always have its values. The width changes when
+    // the consumer sets `--side-panel-width`, and the limits change with the
+    // width of the positioned ancestor, so the range is measured when the panel
+    // or an element for the limits changes size.
+    observeWidth() {
+        this.stopObservingWidth();
+        if (!this.panel) {
+            return;
+        }
+        this.widthObserver = new ResizeObserver(this.handleSizeChange);
+        for (const element of [this.panel, this.minLimit, this.maxLimit]) {
+            if (element) {
+                this.widthObserver.observe(element);
+            }
+        }
+    }
+    stopObservingWidth() {
+        var _a;
+        (_a = this.widthObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.widthObserver = undefined;
+    }
+    measureWidthRange() {
+        const min = this.minLimit.offsetWidth;
+        const max = Math.max(min, this.maxLimit.offsetWidth);
+        return {
+            now: Math.round(this.currentWidth()),
+            min: Math.round(min),
+            max: Math.round(max),
+        };
+    }
+    // `offsetWidth` and not `getBoundingClientRect`, because the opening
+    // animation scales the panel with a transform.
+    currentWidth() {
+        return this.panel.offsetWidth;
+    }
+    static get is() { return "limel-side-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["side-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["side-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the panel. Screen readers announce it. Set it to\nsomething that tells the user what the panel is for."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "closeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the close button. Shown as a tooltip and used as the accessible\nname."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-label",
+                "defaultValue": "'Close'"
+            },
+            "resizeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the resize handle. Used as the accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "resize-label",
+                "defaultValue": "'Resize'"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether pressing Escape emits `close`. Set to `false` to let only the\nclose button emit `close`. The panel then does not prevent the Escape\nevent either."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "widthRange": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the close button is clicked, or when Escape is pressed and\n`closeOnEscape` is `true`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "changeWidth",
+                "name": "changeWidth",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user has finished a resize that changed the width. The\ndetail is the new width in pixels. The panel already uses the new width. Store the value to\nrestore the width with `--side-panel-width` the next time the panel opens."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "close",
+                "method": "stopContentEventAtHost",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "changeWidth",
+                "method": "stopContentEventAtHost",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -270,15 +270,15 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: '47fedc34458f09ec0a67a6fc81efcd0d5aaba74e', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '89c319c35f59d8dbd72a40e894fb01a8b12dc88d', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'f4c7c2475650c2c3be4b33271fc1f23aa8d40ee5', slot: "content" }, h("div", { key: 'c3c085ead113928e85bc9ab3cbadd7e8350b4a12', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: 'c1e255d94086cc3c77cec32d34a52fc06ffe77b4', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
+        return (h(Host, { key: '6d910879894ffc7ff36df228e4252e4758622ab9', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '56e3b4dbc963b6923c63a33acb21895f4e86c947', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'f74ef31e0b7d67dcc8a231a05f9b00b84de50b33', slot: "content" }, h("div", { key: '4a4018ac095977f89cba99a0222603469d11ce30', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '8e45c543c4ba524e5257169f79d0e86b4cf95635', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
                 ? this.helperTextId
                 : undefined, "aria-valuetext": this.isUnset
                 ? translate.get('value-not-set', this.language)
                 : undefined, ref: (el) => {
                 this.inputElement = el;
-            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: 'c287ade5d57268fbf3d0a203f4f94363709dcb74', class: "track" }, h("div", { key: 'd65e20a0bd2da417a797be2501f70860cae04857', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '72e6bf77fddaf64fcde86455bfddd1122a8f174c', class: "thumb" }, h("div", { key: '2066f97938cff1b20ffa0aad2e3c4803a5a2f6f9', class: "knob" }), h("div", { key: 'abd8845bf4d52faeffd1a4f25ca2068a8062bc09', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '83a5600495635b0fd19cb93be94b59a333f574a5', class: "track" }, h("div", { key: '771452b79092adfea7aa82ab87d18910fe6bda8c', class: "active" }), this.renderStepDots(min, max)), h("div", { key: 'f3819b77285addfdd15b378943ca2ef16748f319', class: "thumb" }, h("div", { key: '46802964d1de2d5ee42faa6f02c1a51f6e35d37e', class: "knob" }), h("div", { key: '273328b017f98f7d581331b0ea1817d370b402f0', class: "indicator", "aria-hidden": "true" }, this.isUnset
             ? '\u{2194}\u{FE0E}'
-            : this.displayValue))), h("div", { key: '231a0836f6487fd99fb2aa60d075ad8d21a4ce10', class: "range-labels" }, h("span", { key: '966e8f9241124e9c61da1558ccb04ccb1cf0c402', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '427e6ff5bd7d894da16a6b9b006fd0e1a44f9348', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            : this.displayValue))), h("div", { key: '92b16e21ce4cbf4e78136f5475581dc82c7aaac7', class: "range-labels" }, h("span", { key: 'be3be26585786ed002a4ad8678cc4f759b2ff510', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: 'abe4058f7a055ec348971ebf5a5d26c3a5ccb0f5', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

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

@@ -122,14 +122,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: '5612185e67dfea963fc9df340a288540f63db94e', popover: "manual", style: {
+        return (h("aside", { key: 'afddc11b55b4f3bdf05bc9ff50ed8c05851d53ac', 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: 'a6221f26df374bac45ee3e5cd4a7f6c966340a06', class: "surface" }, h("limel-markdown", { key: '2da6a24cc92319fea7dde9a79a77f9719735a669', 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: 'ea4aff6aba7f089e34e48aeb91a2a2d7382f3ca4', class: "surface" }, h("limel-markdown", { key: '3b2cc771e74d951a2dc2118e179c5a7670e2eab2', 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: '43fdff921a3dd6637a6f452c2acc344e54cb759a' }, h("svg", { key: '7566bc8a39a74543cfbec9030220c84b5509b310', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: 'ce772c5c7083690c8350e05720a5a1ba3a9119dd' }, h("svg", { key: 'd89a035b940a7cdb9e4f994a94301e91d242605e', 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: '2b103843490284b194de5dbf2c6030973889aa64', class: {
+        return (h(Host, { key: 'cb82f37e28c686da8dbdd1d5e0dafc00f5f47f4d', class: {
                 'has-menu': this.items.length > 0,
-            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '3badf574bf892cb26198166405739ef3a45fac49', 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: '227c768350a7e822f766043c31f4d3ccb5d5181c', 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: 'ad0cfa0f9b495ba197ca27f8975d8499cfdace52' }, this.readonly
+        return (h(Host, { key: '5193987be5def9c42517ecbc1affc9cbb08d6ff6' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }

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

@@ -62,7 +62,7 @@ export class TabBar {
     }
     render() {
         const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), this.getNavigationOptions());
-        return (h("div", { key: 'd9f9e2659c8199ddd8202f04ed08535a91da2948', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'fdc0e8389ddc7ac8d0d63e5c777de6b6bf337697', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
+        return (h("div", { key: 'f4a760e69615d4d4d87ad3e176d109dbcdf2ea34', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'f3ff8810cf0a248c13aa2d9840c80c6f6270df68', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

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

@@ -64,7 +64,7 @@ export class TabPanel {
         }
     }
     render() {
-        return (h(Host, { key: '130cd711926c119be1b3084dfb966afe6d280926', onChangeTab: this.handleChangeTabs }, h("div", { key: 'e76da7ba8c93a3d9d4c03a84a01a5358b39b17ed', class: "tab-panel" }, h("limel-tab-bar", { key: '0866cd6c59e5e4ea372678a969bc646db81ed285', tabs: this.tabs, orientation: this.orientation }), h("div", { key: 'c0ee8b9d6bffcb32fc4894bf0ba7409ac194577d', class: "tab-content" }, h("slot", { key: '46b6cd024188a04ba466d831051cf3628996d97e' })))));
+        return (h(Host, { key: '69b4a7ee8bbe366dd3a001e2d63a96c1680660c1', onChangeTab: this.handleChangeTabs }, h("div", { key: '5844651fd25248b2767127f6ca6ab5f02f03c347', class: "tab-panel" }, h("limel-tab-bar", { key: '0ef45e1bead572d950148b0e4f8b53c8d9f567ce', tabs: this.tabs, orientation: this.orientation }), h("div", { key: 'a8b336877c2bc9b1ebda32fd726d76be3957bbf3', class: "tab-content" }, h("slot", { key: '97e10533292738d2b4d0914eb9922cac0b396bb6' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();

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

@@ -757,13 +757,13 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: 'fbc213159bb430688bad03e74964e10edfcd829d', class: {
+        return (h(Host, { key: '8e8d0bcd487ff3a97c2a94b69c4501f941908ee1', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-pagination': totalRows > this.pageSize,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: 'cc988b86f74549d7ad773e748fef7cd92345efa5', id: "tabulator-container" }, h("div", { key: 'fd765d0050979609eaf4b9192f74b0abcf2cc0bd', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '8416fbae6d90b71ee9151f7c28450373a685fc99', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '52aa28d0e575d8da169b8c6bb84d93b6f73f9a12', id: "tabulator-table" }))));
+            } }, h("div", { key: '9e28778ef0d76065191837fb3f86293c3ba4c482', id: "tabulator-container" }, h("div", { key: '4f5ffbe1d9c61a7557fe2f91ce71f599f7443445', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'd758f28e7e2fa0db7e5550e4786b1855f94e2bca', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'f936473386dd1ad3163a7726cb8203f93c7d3528', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

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

@@ -107,9 +107,9 @@ export class TextEditorLinkMenu {
         var _a, _b;
         const isValid = this.isValid(this.link.href);
         return [
-            h("limel-input-field", { key: '49edffd1f2b8dbc6fdb6824251541883f8a96d44', 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 }),
-            h("limel-input-field", { key: '8aafc8d1496b9d27484e4a4e862b247dfc86b4bc', 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, ref: (el) => (this.linkInput = el) }),
-            h("div", { key: '39cc9d707d8d9aa15458b78e23905fba7af2eee6', class: "actions" }, h("limel-button", { key: '220e2ac8c3984b9d49dab3f2a5f94be025de448b', label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { key: '23369649c3ef9fbf5bfeb38b986baa0271f2efe6', primary: true, label: this.getTranslation('save'), disabled: !isValid, onClick: this.handleSave, ref: (el) => (this.saveButton = el), slot: "button" })),
+            h("limel-input-field", { key: 'b56e8cc8a92687def175a89ac65ae50dc8d20117', 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 }),
+            h("limel-input-field", { key: '15e93737de2593e18e834574fc2ea6c1ae674750', 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, ref: (el) => (this.linkInput = el) }),
+            h("div", { key: 'e26f28d12a340a6a6a6812e538ece24e542435b7', class: "actions" }, h("limel-button", { key: 'db02d851b128ef963d505cb27c604105aaa5a55d', label: this.getTranslation('cancel'), onClick: this.handleCancel }), h("limel-button", { key: '3bb20785677384693a20963c493a1cfd9b8fabcb', 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

@@ -308,7 +308,7 @@ export class ProsemirrorAdapter {
         (_e = this.view) === null || _e === void 0 ? void 0 : _e.destroy();
     }
     render() {
-        return (h(Host, { key: '16ef71481dea1fcefa1735e5a6350f47bf1d78ca', onFocus: this.handleFocus }, h("div", { key: '3b6598d8efd561afb6191d3d650f3a32e86f6904', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
+        return (h(Host, { key: '6c92f1576fdd862e592d0ccf6779c6d3da806808', onFocus: this.handleFocus }, h("div", { key: '0b1b90a7c68b62ecffed21f4c49fced5333f0d83', 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

@@ -176,7 +176,7 @@ export class TextEditor {
         await ((_a = this.adapterElement) === null || _a === void 0 ? void 0 : _a.clear());
     }
     render() {
-        return (h(Host, { key: '67cb756a0010effb1b4cbfeeb56e50cd86cbfbe0' }, h("limel-notched-outline", { key: '9b3f5891318c69d557c0cb7af7d19d8f14e0ff9c', 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: '8a5ca6c89305056819747e51cd808f35036c8666' }, h("limel-notched-outline", { key: 'eb4bd944033212a2ec88d664aa1096fc3b07a5cf', 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: 'e8299e2c990753eafd08af063a7828a11ea77cec', class: { 'has-column-layout': isLabelsTextLong }, style: style }, h("div", { key: '634f141ede25c9a3faa7ca7ce4f79b59c3c7ec8d', class: "label" }, this.label), this.renderHelperLabel(), this.renderHotkey()));
+        return (h(Host, { key: '63d36a0e0f1fb0e4eb94c5c216c80299d82f63b2', class: { 'has-column-layout': isLabelsTextLong }, style: style }, h("div", { key: '6d4ecf58b8854edeece92a53065816292a2a39b9', 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: '970ce406a2209065f744d124c28d486dfa169164', class: "trigger-anchor" }, h("limel-portal", { key: 'bfe825d0261a452c207077e8fe37ddce5b10d477', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
+        return (h("div", { key: '11a9db0e1b1e615ddbdeea5eb2c5089e1f9eadeb', class: "trigger-anchor" }, h("limel-portal", { key: '28e7ffeb63ff24978dd2bd1ed0b0b2aa278abbde', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
                 'z-index': tooltipZIndex,
                 'pointer-events': 'none',
-            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: '07003cc2b868b8320b97e4a75f3cb2e71b50efb9', 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: 'abc48a7948a932c081a44fb1d617bc3b351d452c', label: this.label, helperLabel: this.helperLabel, hotkey: this.hotkey, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
     }
     setOwnerAriaDescribedby() {
         var _a;