@limetech/lime-elements 39.11.1 → 39.12.1

package/dist/esm/limel-masonry-layout.entry.js

@@ -0,0 +1,211 @@
+import { r as registerInstance, h, H as Host, a as getElement } from './index-DBTJNfo7.js';
+
+const masonryLayoutCss = () => `:host(limel-masonry-layout){display:block;position:relative;box-sizing:border-box;visibility:hidden}:host(limel-masonry-layout) ::slotted(*){opacity:0;box-sizing:border-box}:host(limel-masonry-layout.is-laid-out){visibility:visible}:host(limel-masonry-layout.is-laid-out) ::slotted(*){opacity:1}`;
+
+const MasonryLayout = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * When `true`, items are placed left-to-right in DOM order.
+         * When `false` (default), items are placed in the shortest column.
+         */
+        this.ordered = false;
+        this.containerHeight = 0;
+        this.hasRendered = false;
+        this.pendingLayoutFrame = null;
+    }
+    onOrderedChange() {
+        this.scheduleLayout();
+    }
+    componentDidLoad() {
+        this.setupObservers();
+        this.layoutItems();
+        this.hasRendered = true;
+    }
+    connectedCallback() {
+        if (this.hasRendered) {
+            this.setupObservers();
+            this.scheduleLayout();
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.itemResizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+        if (this.pendingLayoutFrame !== null) {
+            cancelAnimationFrame(this.pendingLayoutFrame);
+        }
+    }
+    render() {
+        const style = {
+            height: `${this.containerHeight}rem`,
+        };
+        return (h(Host, { key: 'e41aecdf81962515dabef9b872cac4a44facf45d', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '94e9603630597a47bef3861a076fca9a8e90dd3c' })));
+    }
+    setupObservers() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleLayout();
+        });
+        this.resizeObserver.observe(this.host);
+        this.itemResizeObserver = new ResizeObserver(() => {
+            this.scheduleLayout();
+        });
+        this.mutationObserver = new MutationObserver(() => {
+            this.observeItemSizes();
+            this.scheduleLayout();
+        });
+        this.mutationObserver.observe(this.host, { childList: true });
+        this.observeItemSizes();
+    }
+    observeItemSizes() {
+        var _a;
+        (_a = this.itemResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        const items = this.getItems();
+        for (const item of items) {
+            this.itemResizeObserver.observe(item);
+        }
+    }
+    getItems() {
+        return [...this.host.children].filter((child) => child instanceof HTMLElement);
+    }
+    getRootFontSize() {
+        return Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+    }
+    pxToRem(px, rootFontSize) {
+        return px / rootFontSize;
+    }
+    /**
+     * Reads a CSS custom property from the host element and resolves
+     * its value to pixels. Falls back to the provided default if the
+     * property is not set.
+     *
+     * @param property - The CSS custom property name to read.
+     * @param fallback - The fallback CSS value if the property is not set.
+     * @param rootFontSize - The root font size in pixels for rem conversion.
+     */
+    getCssPropertyInPx(property, fallback, rootFontSize) {
+        const value = getComputedStyle(this.host).getPropertyValue(property).trim() ||
+            fallback;
+        const number = Number.parseFloat(value);
+        if (value.endsWith('px')) {
+            return number;
+        }
+        // Assume rem for any other unit (rem is the project standard)
+        return number * rootFontSize;
+    }
+    /**
+     * Debounces layout recalculations using `requestAnimationFrame`
+     * to coalesce multiple observer callbacks into a single layout
+     * pass per frame, avoiding layout thrashing.
+     */
+    scheduleLayout() {
+        if (this.pendingLayoutFrame !== null) {
+            cancelAnimationFrame(this.pendingLayoutFrame);
+        }
+        this.pendingLayoutFrame = requestAnimationFrame(() => {
+            this.pendingLayoutFrame = null;
+            this.layoutItems();
+        });
+    }
+    layoutItems() {
+        const items = this.getItems();
+        if (items.length === 0) {
+            this.containerHeight = 0;
+            return;
+        }
+        const hostWidth = this.host.offsetWidth;
+        if (!hostWidth) {
+            return;
+        }
+        const rootFontSize = this.getRootFontSize();
+        const gapPx = this.getCssPropertyInPx('--masonry-layout-gap', '1rem', rootFontSize);
+        const { columnCount, columnWidth } = this.calculateColumns(hostWidth, gapPx, rootFontSize);
+        const columnHeights = this.positionItems(items, columnCount, columnWidth, gapPx, rootFontSize);
+        const newHeight = this.pxToRem(Math.max(...columnHeights) - gapPx, rootFontSize);
+        if (Math.abs(newHeight - this.containerHeight) > 0.1) {
+            this.containerHeight = newHeight;
+        }
+    }
+    calculateColumns(hostWidth, gapPx, rootFontSize) {
+        const minColumnWidthPx = this.getCssPropertyInPx('--masonry-layout-min-column-width', '12rem', rootFontSize);
+        const columnCount = Math.max(1, Math.floor((hostWidth + gapPx) / (minColumnWidthPx + gapPx)));
+        const columnWidth = (hostWidth - (columnCount - 1) * gapPx) / columnCount;
+        return { columnCount, columnWidth };
+    }
+    /**
+     * Absolutely positions each item into the grid. In ordered mode,
+     * items are placed left-to-right via round-robin. In default mode,
+     * each item is placed in the shortest column for balanced heights.
+     *
+     * @param items - The child elements to position.
+     * @param columnCount - The number of columns in the grid.
+     * @param columnWidth - The width of each column in pixels.
+     * @param gapPx - The gap between items in pixels.
+     * @param rootFontSize - The root font size in pixels for rem conversion.
+     * @returns The cumulative height of each column in pixels.
+     */
+    positionItems(items, columnCount, columnWidth, gapPx, rootFontSize) {
+        const columnHeights = Array.from({ length: columnCount }, () => 0);
+        let index = 0;
+        for (const item of items) {
+            const column = this.ordered
+                ? index % columnCount
+                : columnHeights.indexOf(Math.min(...columnHeights));
+            const x = column * (columnWidth + gapPx);
+            const y = columnHeights[column];
+            item.style.position = 'absolute';
+            item.style.left = `${this.pxToRem(x, rootFontSize)}rem`;
+            item.style.top = `${this.pxToRem(y, rootFontSize)}rem`;
+            item.style.width = `${this.pxToRem(columnWidth, rootFontSize)}rem`;
+            if (!this.hasRendered) {
+                this.staggerFadeIn(item, index);
+            }
+            columnHeights[column] += item.offsetHeight + gapPx;
+            index++;
+        }
+        return columnHeights;
+    }
+    /**
+     * Applies a staggered fade-in transition to an item.
+     * Inline `transition` and `transitionDelay` styles are set
+     * temporarily and cleaned up via a `transitionend` listener
+     * so they don't interfere with the consumer's own transitions.
+     *
+     * The listener filters by `event.target` to avoid reacting to
+     * bubbled events from descendant elements.
+     *
+     * Skipped entirely when `prefers-reduced-motion: reduce` is
+     * active — items become visible instantly via the CSS
+     * `is-laid-out` class instead.
+     *
+     * @param item - The element to fade in.
+     * @param index - The item's position in the list, used to calculate the delay.
+     */
+    staggerFadeIn(item, index) {
+        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (prefersReducedMotion) {
+            return;
+        }
+        item.style.transition = 'opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1)';
+        item.style.transitionDelay = `${index * 20}ms`;
+        const cleanup = (event) => {
+            if (event.target !== item || event.propertyName !== 'opacity') {
+                return;
+            }
+            item.style.transition = '';
+            item.style.transitionDelay = '';
+            item.removeEventListener('transitionend', cleanup);
+        };
+        item.addEventListener('transitionend', cleanup);
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "ordered": [{
+                "onOrderedChange": 0
+            }]
+    }; }
+};
+MasonryLayout.style = masonryLayoutCss();
+
+export { MasonryLayout as limel_masonry_layout };

package/dist/esm/limel-picker.entry.js

@@ -187,7 +187,7 @@ const Picker = class {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: 'e20f22b6907ad1d28f8b8c0847e5080faca09b3b', 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: '4f760b3049b45f6db36e19fd776479dcef11403f', 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)),
             this.renderDropdown(),
         ];
     }

package/dist/esm/limel-popover_2.entry.js

@@ -122,7 +122,7 @@ const Popover = class {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        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 }))));
+        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 }))));
     }
     globalClickListener(event) {
         const element = event.target;
@@ -165,7 +165,7 @@ const PopoverSurface = class {
         this.appendElement();
     }
     render() {
-        return h("div", { key: '72e73b254be6cebbd27332329b10a58210ae0352', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '2ade664e817c3559b6721f0567736c8942afd2f1', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');

package/dist/esm/limel-portal_3.entry.js

@@ -1873,7 +1873,7 @@ const Portal = class {
         }
     }
     render() {
-        return h("slot", { key: 'd6ed0d276afec19ba5ffd4d6a6fcf96937127d6a' });
+        return h("slot", { key: 'c8e7ba60cdab45dd239eae6c9123f673a48e8e22' });
     }
     onVisible() {
         if (!this.container && this.visible) {
@@ -2141,10 +2141,10 @@ const Tooltip = class {
     }
     render() {
         const tooltipZIndex = getComputedStyle(this.host).getPropertyValue('--tooltip-z-index');
-        return (h("div", { key: 'ffc3b079a0fcb1a4065c176228d720c64ca57d2e', class: "trigger-anchor" }, h("limel-portal", { key: 'e18fa14f5c328485f6755bc62c402c16d6dd0fd1', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
+        return (h("div", { key: '41e07fbdde2814c108805286e919ac0da916c0f3', class: "trigger-anchor" }, h("limel-portal", { key: '4bb06a6307a3ccb934cc30c76ebde152fb784beb', openDirection: this.openDirection, visible: this.open, containerId: this.portalId, containerStyle: {
                 'z-index': tooltipZIndex,
                 'pointer-events': 'none',
-            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: 'cc3a5f98a22082b4e8c2d0ec6bd71d5cf5770c0a', label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
+            }, anchor: this.ownerElement }, h("limel-tooltip-content", { key: 'eb24b1a7df99ef054b4d0108275480568c22eede', label: this.label, helperLabel: this.helperLabel, maxlength: this.maxlength, role: "tooltip", "aria-hidden": !this.open, id: this.tooltipId }))));
     }
     setOwnerAriaLabel() {
         var _a;
@@ -2187,7 +2187,7 @@ const TooltipContent = class {
             };
         }
         return [
-            h("text", Object.assign({ key: '14fbfda34a833644fd73cbfabb4e481ab5979c69', class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { key: '672c23e4d0f992395a422f684436ffb18720bd12', class: "label" }, this.label), h("div", { key: '132cffce86c4cd1a274ffbfd3d0ec1bfb9c3c073', class: "helper-label" }, this.helperLabel)),
+            h("text", Object.assign({ key: 'c19e656075b926d26447a5620a0a779686445129', class: { 'has-column-layout': isLabelsTextLong } }, props), h("div", { key: '3e6c1220fde6121d6da548c48c776cbfbb83f4cd', class: "label" }, this.label), h("div", { key: 'e0dd60dc54481586a4af70a6c133ded3b32bb688', class: "helper-label" }, this.helperLabel)),
         ];
     }
 };

package/dist/esm/limel-prosemirror-adapter.entry.js

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

package/dist/esm/limel-radio-button-group.entry.js

@@ -24,7 +24,7 @@ const RadioButtonGroup = class {
         };
     }
     render() {
-        return (h("limel-list", { key: 'd42e6342d4fd79d34cb2c6a9d25d3dfe577e9a99', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: '0a68f90122f1e246d966e3b747f0e13bed2c901b', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
     }
     createItems() {
         return this.items.map((option) => {

package/dist/esm/limel-radio-button.entry.js

@@ -7,12 +7,12 @@ const RadioButtonComponent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '64623e09534c5b4e457029cbed4865d97d3cc19e', class: {
+        return (h(Host, { key: 'd198242b1e1a066b38b1d6ddc55fcd8dd7817c36', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, 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)));
+            } }, 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)));
     }
 };
 RadioButtonComponent.style = radioButtonCss();

package/dist/esm/limel-select.entry.js

@@ -551,7 +551,7 @@ const Select = class {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: '0bc73012998fd97b022c0bdbab31e6806a3ddfd3', 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.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '10e53df1cc7d3e629da0e5b18a96045e4f8e6224', 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.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {

package/dist/esm/limel-shortcut.entry.js

@@ -46,7 +46,7 @@ const Shortcut = class {
     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: '68fa485e1c6552337de3e8304dcb14bd2056f3cc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'e83e54fcd7776e92938795a2f623e23df14985b0', "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: 'b1aa7fec058ef958c71b0a01fc3c1340e66a0422', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '59132d5f6b5d99f38bba8143a2ff39166dce8648' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: 'cfca58724948367892595cd9dd49d4482ac61bf3', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'f13f91fa379319448a95ca0182f61d375636b952', "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: '3d5b929acb6a26081626098f69cd29fb70b42faa', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '05dd83b54485aa7fdbc103e84f50532313e4b8f0' })), this.renderLabel(), this.renderNotification()));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/limel-slider.entry.js

@@ -194,9 +194,9 @@ const Slider = class {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        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
+        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
                 ? this.helperTextId
-                : 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()));
+                : 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()));
     }
     watchValue() {
         this.displayValue = this.multiplyByFactor(this.getValue());

package/dist/esm/limel-snackbar.entry.js

@@ -145,14 +145,14 @@ const Snackbar = class {
         }
     }
     render() {
-        return (h("aside", { key: '0c9605ecafcab256f9e1b2ac43b72c70695c1719', popover: "manual", style: {
+        return (h("aside", { key: 'f6658fa4fb12f30db4bed68726dfc8a45acb0075', 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: '58b4d6d2f94be604273c46e0babccade357798ab', class: "surface" }, h("div", { key: '148001236225eb6980f3894151e04fd43037863e', class: "label" }, 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: '2656ead3fd0b2e1e478229141a5651ed6fbf9c53', class: "surface" }, h("div", { key: '767a77e8558909e5f050715c94e2f72e7f3904e5', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

package/dist/esm/limel-split-button.entry.js

@@ -43,9 +43,9 @@ const SplitButton = class {
         };
     }
     render() {
-        return (h(Host, { key: '4ddbc6a1d81d69c50340512ed8a7112b2288fa3e', class: {
+        return (h(Host, { key: '461a17ec679b6f3e17ae9e89d03ebf00b1c28127', class: {
                 'has-menu': this.items.length > 0,
-            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '050586c28af81bc598021a602d4f274afd7a777b', 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: 'a2493b1f91c1ab1376685f2f9eec5fb8bbc7b1e8', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
     }
     static get delegatesFocus() { return true; }
 };

package/dist/esm/limel-switch.entry.js

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

package/dist/esm/limel-tab-bar.entry.js

@@ -2082,11 +2082,11 @@ const TabBar = class {
         this.tearDown();
     }
     render() {
-        return (h("div", { key: '011bbe3e75ebeb4fefe4942704ef003ad64e92fc', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: '6119888fd94f5ea3d474c1a14016e456ff98923e', class: {
+        return (h("div", { key: '5fcbc5f69907b3437a7c17d18d5356ac45f84ea4', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: '0ec7bac2105ac5a2620379a907fc660344387539', class: {
                 'mdc-tab-scroller': true,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, 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" }))))));
+            } }, 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" }))))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

package/dist/esm/limel-tab-panel.entry.js

@@ -42,7 +42,7 @@ const TabPanel = class {
         this.tabs.forEach(this.setTabStatus);
     }
     render() {
-        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' })))));
+        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' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();

package/dist/esm/limel-table.entry.js

@@ -31031,16 +31031,16 @@ const Table = class {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: '83aff83d2e82d2b6bb71cca08a0f9532f084edf7', class: {
+        return (h(Host, { key: '9277abb7977cb9acb8b8f4eb89b65d960d5e86c6', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
-            } }, h("div", { key: '159ef3258158b9987c2023612bc9975163253d91', id: "tabulator-container", class: {
+            } }, h("div", { key: '75386d5a89d461ce2c0c6318ed3c465abb92c8e9', id: "tabulator-container", class: {
                 'has-pagination': totalRows > this.pageSize,
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-movable-columns': this.movableColumns,
                 'has-rowselector': this.selectable,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: '74fbcc4af5ee32f05f19987127f1c26c71794cd3', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'b9da01750a35d99e2ea2f6ba024c5a3b25ac1aef', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'dc3936c5ea3999ded14c4929ad7a03eef11418b1', id: "tabulator-table" }))));
+            } }, h("div", { key: 'e3ab9bf53c9b5f4192ab65c49245bfc5be555940', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'ccef86fe3824a5117495e3fb96ea2928217663ce', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'cc7c274d6b0f81ac24b5a56467dc38fb204ed306', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

package/dist/esm/limel-text-editor-link-menu.entry.js

@@ -107,9 +107,9 @@ const TextEditorLinkMenu = class {
         var _a, _b;
         const isValid = this.isValid(this.link.href);
         return [
-            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" })),
+            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" })),
         ];
     }
 };

package/dist/esm/limel-text-editor.entry.js

@@ -129,7 +129,7 @@ const TextEditor = class {
         this.editorId = createRandomString();
     }
     render() {
-        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()));
+        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()));
     }
     renderEditor() {
         if (this.readonly) {