@siemens/ix 5.0.0 → 5.1.0

package/dist/cjs/ix-select.cjs.entry.js

@@ -1,20 +1,20 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var index$1 = require('./index-Dw-NwUuT.js');
-var a11y = require('./a11y-C_6YiIMa.js');
-var focusProxy = require('./focus-proxy-BCuVbpDb.js');
-var focusUtilities = require('./focus-utilities-yx7wWjEO.js');
-var component = require('./component-CYtonfpw.js');
+var index = require('./index-DnclGKUw.js');
+var index$1 = require('./index-CwJ-mkQd.js');
+var a11y = require('./a11y-_XjpTo2w.js');
+var focusProxy = require('./focus-proxy-CjxFZupW.js');
+var focusUtilities = require('./focus-utilities-5SZMxJg4.js');
+var component = require('./component-DgA9FH-W.js');
 var ariaActivedescendant_mixin = require('./aria-activedescendant.mixin-_lb0Xz2S.js');
 var id_mixin = require('./id.mixin-DINDQztK.js');
 var makeRef = require('./make-ref-CHsa3FY7.js');
 var requestAnimationFrame = require('./requestAnimationFrame-B0rWQ3G-.js');
-var validation = require('./validation-Dier-uPA.js');
-require('./shadow-dom-BG8VqeIu.js');
+var validation = require('./validation-DJaUH-UR.js');
+require('./shadow-dom-BL5F7RFW.js');
 require('./index-B4J4JK0P.js');
 
-const selectCss = () => `:host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .select{position:relative;display:flex;align-items:center;width:100%;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:hover:not(.readonly):not(.disabled){background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select.readonly,:host .select.disabled{box-shadow:none !important}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}:host .select.disabled input{color:var(--theme-input--color--disabled)}:host .select.readonly{border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}:host .select.readonly input{color:var(--theme-input--color--readonly)}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container ix-icon-button{height:1.875rem;width:1.875rem;min-height:1.875rem;min-width:1.875rem}:host .input-container input{background:transparent;height:1.75rem;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host ix-dropdown{display:flex;flex-direction:column;max-width:100%}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-std-text--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .hidden{display:none !important}:host .proxy-list{all:unset;position:absolute;left:0px;top:0px;overflow:hidden;color:transparent;opacity:0;pointer-events:all;z-index:1000}:host .proxy-list li{height:2px;width:2px;pointer-events:all}:host(.ix-focused) .select,:host(.show-focus-outline) .select{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--warning);background-color:var(--theme-input--background--warning)}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--invalid);background-color:var(--theme-input--background--invalid)}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--invalid--active) !important}`;
+const selectCss = () => `:host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .select{position:relative;display:flex;align-items:center;width:100%;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:hover:not(.readonly):not(.disabled){background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select.readonly,:host .select.disabled{box-shadow:none !important}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}:host .select.disabled input{color:var(--theme-input--color--disabled)}:host .select.readonly{border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}:host .select.readonly input{color:var(--theme-input--color--readonly)}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:nowrap;height:100%;flex-grow:1;overflow:hidden}:host .input-container .chips>ix-filter-chip{margin:0.1rem;flex-shrink:0;max-width:min(40%, 14rem)}:host .input-container .chips>ix-filter-chip.chip-measuring{position:absolute;visibility:hidden;pointer-events:none}:host .input-container .chips>ix-filter-chip.chip-overflow{cursor:pointer}:host .input-container .chips>ix-filter-chip.chip-overflow:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .input-container ix-icon-button{height:1.875rem;width:1.875rem;min-height:1.875rem;min-width:1.875rem}:host .input-container input{background:transparent;height:1.75rem;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host ix-dropdown{display:flex;flex-direction:column;max-width:100%}:host .overflow-dropdown-content{display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem;max-height:16rem;overflow-y:auto;padding:0.5rem}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-std-text--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .hidden{display:none !important}:host .proxy-list{all:unset;position:absolute;left:0px;top:0px;overflow:hidden;color:transparent;opacity:0;pointer-events:all;z-index:1000}:host .proxy-list li{height:2px;width:2px;pointer-events:all}:host(.ix-focused) .select,:host(.show-focus-outline) .select{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--warning);background-color:var(--theme-input--background--warning)}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select{border-color:var(--theme-input--border-color--invalid);background-color:var(--theme-input--background--invalid)}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .select:active{border-color:var(--theme-input--border-color--invalid--active) !important}`;
 
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
@@ -79,6 +79,14 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
      * @since TODO: Define
      */
     ariaLabelAddItem = 'Add item';
+    /**
+     * Accessible label template for the overflow indicator chip shown in multiple
+     * mode when not all selected chips fit on a single row. The `{count}`
+     * placeholder is replaced with the number of hidden items (e.g. "3 more").
+     *
+     * @since 5.1.0
+     */
+    i18nMoreItems = '{count} more';
     /**
      * Warning text for the select component
      **/
@@ -200,6 +208,9 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
     isDropdownEmpty = false;
     inputFilterText = '';
     inputValue = '';
+    visibleChipValues = null;
+    hiddenChipValues = [];
+    overflowDropdownShow = false;
     hasInputFocus = false;
     dropdownItemsVisualFocused = false;
     isInvalid = false;
@@ -211,6 +222,17 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
     dropdownAnchorRef = makeRef.makeRef();
     inputRef = makeRef.makeRef();
     dropdownRef = makeRef.makeRef();
+    chipElementRefs = new Map();
+    chipWidths = new Map();
+    overflowChipRef = makeRef.makeRef();
+    chipsContainerRef = makeRef.makeRef();
+    clearButtonRef = makeRef.makeRef();
+    chipHorizontalMargin = 4;
+    triggerMinWidth = 78;
+    overflowChipFallbackWidth = 52;
+    overflowChipWidth = 0;
+    chipsResizeObserver;
+    overflowDropdownOpenedByKeyboard = false;
     proxyListObserver = null;
     inputElement;
     touched = false;
@@ -248,6 +270,12 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
         this.value = value;
         this.updateSelection();
     }
+    watchDisabledReadonly() {
+        // Disabled/readonly hides the chip close button, changing chip widths, so
+        // invalidate the measurement cache to force a re-measure on next render.
+        this.chipWidths.clear();
+        this.overflowChipWidth = 0;
+    }
     updateFormInternalValue(value) {
         if (Array.isArray(value)) {
             this.formInternals.setFormValue(value.join(','));
@@ -333,6 +361,7 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
             });
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label ?? item.value);
+        this.pruneChipWidthCache();
         if (this.dropdownShow && this.inputFilterText) {
             return;
         }
@@ -388,6 +417,13 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
             subtree: true,
             childList: true,
         });
+        const chipsContainer = this.chipsContainerRef.current;
+        if (chipsContainer) {
+            this.chipsResizeObserver = new ResizeObserver(() => {
+                this.handleChipsContainerResize();
+            });
+            this.chipsResizeObserver.observe(chipsContainer);
+        }
     }
     componentWillLoad() {
         this.updateSelection();
@@ -396,10 +432,14 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
     disconnectedCallback() {
         super.disconnectedCallback();
         this.proxyListObserver?.disconnect();
+        this.chipsResizeObserver?.disconnect();
     }
     onLabelChange(event) {
         event.preventDefault();
         event.stopImmediatePropagation();
+        // A changed label/value alters the chip width, so drop the cache and let
+        // the next render re-measure the affected chips.
+        this.chipWidths.clear();
         this.updateSelection();
     }
     itemExists(item) {
@@ -543,12 +583,329 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
                 this.clear();
             } }, `${this.i18nAllSelected} (${this.selectedItems.length})`));
     }
-    renderChip(item) {
-        return (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, ariaLabelCloseIconButton: this.getRemoveChipAriaLabel(item), onCloseClick: () => {
+    renderChip(item, measuring) {
+        const value = item.value.toString();
+        return (index.h("ix-filter-chip", { class: {
+                'chip-measuring': measuring,
+            }, disabled: this.disabled || this.readonly, key: value, ariaLabelCloseIconButton: this.getRemoveChipAriaLabel(item), ref: (ref) => {
+                if (ref) {
+                    this.chipElementRefs.set(value, ref);
+                    return;
+                }
+                this.chipElementRefs.delete(value);
+            }, onCloseClick: () => {
+                this.itemClick(item.value);
+                this.inputElement?.focus();
+            } }, item.label));
+    }
+    renderHiddenChip(item) {
+        return (index.h("ix-filter-chip", { class: "chip-hidden-item", disabled: this.disabled || this.readonly, key: `hidden-${item.value}`, ariaLabelCloseIconButton: this.getRemoveChipAriaLabel(item), onCloseClick: () => {
+                this.overflowDropdownShow = false;
                 this.itemClick(item.value);
                 this.inputElement?.focus();
             } }, item.label));
     }
+    renderOverflowChip() {
+        const count = this.hiddenChipValues.length;
+        const ariaLabel = this.i18nMoreItems.replace('{count}', count.toString());
+        return (index.h("ix-filter-chip", { key: "overflow-chip", class: "chip-overflow", hideCloseButton: true, disabled: this.disabled || this.readonly, tabindex: this.disabled || this.readonly ? -1 : 0, role: "button", "aria-haspopup": "listbox", "aria-expanded": a11y.a11yBoolean(this.overflowDropdownShow), "aria-label": ariaLabel, ref: this.overflowChipRef, onClick: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                this.toggleOverflowDropdown();
+            }, onKeyDown: (event) => {
+                if (event.key === 'Enter' ||
+                    event.key === ' ' ||
+                    event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    this.overflowDropdownOpenedByKeyboard = true;
+                    this.overflowDropdownShow = true;
+                }
+            } }, `+${count}`));
+    }
+    renderMultipleModeChips() {
+        if (this.items.length === 0) {
+            return null;
+        }
+        if (this.shouldDisplayAllChip()) {
+            return this.renderAllChip();
+        }
+        const selected = this.selectedItems;
+        if (selected.length === 0) {
+            return null;
+        }
+        const visibleItems = selected.filter((item) => {
+            const value = item.value.toString();
+            if (!this.chipWidths.has(value)) {
+                return false;
+            }
+            return (this.visibleChipValues === null ||
+                this.visibleChipValues.includes(value));
+        });
+        const unmeasuredItems = selected.filter((item) => !this.chipWidths.has(item.value.toString()));
+        return [
+            ...visibleItems.map((item) => this.renderChip(item, false)),
+            this.hiddenChipValues.length > 0 ? this.renderOverflowChip() : null,
+            ...unmeasuredItems.map((item) => this.renderChip(item, true)),
+        ];
+    }
+    renderOverflowDropdown() {
+        return (index.h("ix-dropdown", { class: "overflow-dropdown", show: this.overflowDropdownShow, anchor: this.overflowChipRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: (event) => {
+                this.overflowDropdownShow = event.detail;
+                if (event.detail && this.overflowDropdownOpenedByKeyboard) {
+                    this.overflowDropdownOpenedByKeyboard = false;
+                    this.focusOverflowRemoveButton(0);
+                }
+            } }, index.h("div", { class: "overflow-dropdown-content" }, this.hiddenChipValues.map((value) => {
+            const item = this.selectedItems.find((selectedItem) => selectedItem.value.toString() === value);
+            return item ? this.renderHiddenChip(item) : null;
+        }))));
+    }
+    toggleOverflowDropdown() {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        this.overflowDropdownShow = !this.overflowDropdownShow;
+    }
+    getOverflowRemoveButtons() {
+        const dropdown = this.hostElement.shadowRoot?.querySelector('ix-dropdown.overflow-dropdown');
+        if (!dropdown) {
+            return [];
+        }
+        return Array.from(dropdown.querySelectorAll('ix-filter-chip.chip-hidden-item')).flatMap((chip) => {
+            const iconButton = chip.shadowRoot?.querySelector('ix-icon-button');
+            const button = iconButton?.shadowRoot?.querySelector('button');
+            return button ? [button] : [];
+        });
+    }
+    focusOverflowRemoveButton(index) {
+        requestAnimationFrame.requestAnimationFrameNoNgZone(() => {
+            const buttons = this.getOverflowRemoveButtons();
+            const button = buttons[index];
+            if (!button) {
+                return;
+            }
+            button.focus({ preventScroll: true });
+            button.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    onOverflowRemoveButtonKeyDown(event) {
+        if (!this.overflowDropdownShow) {
+            return;
+        }
+        const buttons = this.getOverflowRemoveButtons();
+        const currentIndex = buttons.findIndex((button) => event.composedPath().includes(button));
+        if (currentIndex === -1) {
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.focusOverflowRemoveButton((currentIndex + 1) % buttons.length);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.focusOverflowRemoveButton((currentIndex - 1 + buttons.length) % buttons.length);
+                break;
+            }
+            case 'Tab': {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.focusOverflowRemoveButton(event.shiftKey
+                    ? (currentIndex - 1 + buttons.length) % buttons.length
+                    : (currentIndex + 1) % buttons.length);
+                break;
+            }
+            case 'Escape': {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                this.overflowDropdownShow = false;
+                this.focusOverflowChip();
+                break;
+            }
+        }
+    }
+    focusOverflowChip() {
+        requestAnimationFrame.requestAnimationFrameNoNgZone(() => {
+            this.overflowChipRef.current?.focus({ preventScroll: true });
+        });
+    }
+    pruneChipWidthCache() {
+        const validValues = new Set(this.selectedItems.map((item) => item.value.toString()));
+        for (const value of this.chipWidths.keys()) {
+            if (!validValues.has(value)) {
+                this.chipWidths.delete(value);
+            }
+        }
+    }
+    sameChipValues(a, b) {
+        if (a === b) {
+            return true;
+        }
+        if (a === null || b === null) {
+            return false;
+        }
+        if (a.length !== b.length) {
+            return false;
+        }
+        return a.every((value, index) => value === b[index]);
+    }
+    applyOverflowState(visible, hidden) {
+        if (!this.sameChipValues(this.visibleChipValues, visible)) {
+            this.visibleChipValues = visible;
+        }
+        if (!this.sameChipValues(this.hiddenChipValues, hidden)) {
+            this.hiddenChipValues = hidden;
+        }
+        if (hidden.length === 0 && this.overflowDropdownShow) {
+            this.overflowDropdownShow = false;
+        }
+    }
+    getChipWidthWithMargin(value) {
+        return (this.chipWidths.get(value) ?? 0) + this.chipHorizontalMargin;
+    }
+    getOverflowChipWidthWithMargin() {
+        return ((this.overflowChipWidth || this.overflowChipFallbackWidth) +
+            this.chipHorizontalMargin);
+    }
+    canShowAllChips(values, available) {
+        const totalWidth = values.reduce((width, value) => width + this.getChipWidthWithMargin(value), 0);
+        return totalWidth <= available;
+    }
+    getOverflowChipValues(values, available) {
+        const [firstValue, ...remainingValues] = values;
+        if (firstValue === undefined) {
+            return { visible: [], hidden: [] };
+        }
+        const visible = [firstValue];
+        const hidden = [];
+        let usedWidth = this.getChipWidthWithMargin(firstValue);
+        const overflowChipWidth = this.getOverflowChipWidthWithMargin();
+        for (const [index, value] of remainingValues.entries()) {
+            const width = this.getChipWidthWithMargin(value);
+            if (usedWidth + width + overflowChipWidth <= available) {
+                visible.push(value);
+                usedWidth += width;
+                continue;
+            }
+            hidden.push(...remainingValues.slice(index));
+            break;
+        }
+        return { visible, hidden };
+    }
+    hasUnmeasuredSelectedChips(values) {
+        return values.some((value) => !this.chipWidths.has(value));
+    }
+    getChipOverflowContext() {
+        if (!this.isMultipleMode || this.shouldDisplayAllChip()) {
+            this.applyOverflowState(null, []);
+            return null;
+        }
+        const container = this.chipsContainerRef.current;
+        if (!container) {
+            return null;
+        }
+        const values = this.selectedItems.map((item) => item.value.toString());
+        if (values.length === 0) {
+            this.applyOverflowState(null, []);
+            return null;
+        }
+        return { container, values };
+    }
+    handleChipsContainerResize() {
+        const context = this.getChipOverflowContext();
+        if (!context) {
+            return;
+        }
+        if (this.hasUnmeasuredSelectedChips(context.values)) {
+            // If the select was initially hidden, widths can be 0 on first render.
+            // A resize after becoming visible should trigger a re-measure pass.
+            index.forceUpdate(this);
+            return;
+        }
+        this.calculateChipOverflow(context);
+    }
+    calculateChipOverflow(context = this.getChipOverflowContext()) {
+        if (!context) {
+            return;
+        }
+        const { container, values } = context;
+        if (!values.every((value) => this.chipWidths.has(value))) {
+            return;
+        }
+        const clearButtonWidth = this.allowClear && this.clearButtonRef.current
+            ? this.clearButtonRef.current.offsetWidth
+            : 0;
+        const available = container.clientWidth - this.triggerMinWidth - clearButtonWidth;
+        if (this.canShowAllChips(values, available)) {
+            this.applyOverflowState(null, []);
+            return;
+        }
+        const { visible, hidden } = this.getOverflowChipValues(values, available);
+        this.applyOverflowState(visible, hidden);
+    }
+    async waitForComponentReady(element) {
+        const stencilComponent = element;
+        if (typeof stencilComponent?.componentOnReady === 'function') {
+            await stencilComponent.componentOnReady();
+        }
+    }
+    waitForNextFrame() {
+        return new Promise((resolve) => requestAnimationFrame.requestAnimationFrameNoNgZone(() => resolve()));
+    }
+    async waitForChipLayout(elements) {
+        await Promise.all(elements.map((element) => this.waitForComponentReady(element)));
+        await this.waitForNextFrame();
+    }
+    async measureSelectedChipWidths(items) {
+        const elements = items.map((item) => this.chipElementRefs.get(item.value.toString()));
+        await this.waitForChipLayout(elements);
+        let measuredAny = false;
+        for (const item of items) {
+            const value = item.value.toString();
+            const element = this.chipElementRefs.get(value);
+            if (element && element.offsetWidth > 0) {
+                this.chipWidths.set(value, element.offsetWidth);
+                measuredAny = true;
+            }
+        }
+        return measuredAny;
+    }
+    async measureOverflowChipWidth() {
+        if (this.hiddenChipValues.length === 0 || this.overflowChipWidth > 0) {
+            return;
+        }
+        const overflowElement = await this.overflowChipRef.waitForCurrent();
+        await this.waitForChipLayout([overflowElement]);
+        if (overflowElement.offsetWidth > 0) {
+            this.overflowChipWidth = overflowElement.offsetWidth;
+        }
+    }
+    async componentDidRender() {
+        if (!this.isMultipleMode || this.shouldDisplayAllChip()) {
+            this.applyOverflowState(null, []);
+            return;
+        }
+        const selected = this.selectedItems;
+        if (selected.length === 0) {
+            this.applyOverflowState(null, []);
+            return;
+        }
+        const unmeasured = selected.filter((item) => !this.chipWidths.has(item.value.toString()));
+        if (unmeasured.length > 0) {
+            const measuredAny = await this.measureSelectedChipWidths(unmeasured);
+            if (measuredAny) {
+                this.calculateChipOverflow();
+                index.forceUpdate(this);
+            }
+            return;
+        }
+        await this.measureOverflowChipWidth();
+        this.calculateChipOverflow();
+    }
     onValidationChange({ isInvalid, isInvalidByRequired, isValid, isInfo, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired;
         this.isValid = isValid;
@@ -601,6 +958,14 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
             this.addItemElement.label = this.inputFilterText;
         }
         this.updateAriaProxyListbox();
+        if (this.isMultipleMode && !this.shouldDisplayAllChip()) {
+            const selected = this.selectedItems;
+            const allMeasured = selected.length > 0 &&
+                selected.every((item) => this.chipWidths.has(item.value.toString()));
+            if (allMeasured) {
+                this.calculateChipOverflow();
+            }
+        }
     }
     updateAriaProxyListbox() {
         const ariaActiveDescendantHelper = this.hostElement.shadowRoot?.getElementById(`${this.hostId}-proxy-listbox`);
@@ -635,22 +1000,18 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'cf11caa1c57e34844d376a74d5c534184d322380', id: this.getHostElementId(), class: {
+        return (index.h(index.Host, { key: '3d24590fff4b5d99842ec846719e68d65e13d69d', id: this.getHostElementId(), class: {
                 readonly: this.readonly,
                 disabled: this.disabled,
                 'show-focus-outline': this.hasInputFocus && !this.dropdownItemsVisualFocused,
-            }, tabIndex: this.disabled ? -1 : 0 }, index.h("ix-field-wrapper", { key: 'b21d0e4a1e7f914893e9e2c1f4aff7e89ab4c066', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, index.h("div", { key: '4f94efb21c4f1949ce6dad3ec8ba2664da2b3d9d', class: {
+            }, tabIndex: this.disabled ? -1 : 0 }, index.h("ix-field-wrapper", { key: '38d7afa06295f5ad795a43cfbe875e341f9837bd', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, index.h("div", { key: 'e3640d7028f8e43208243a7a49d1065897199f85', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
                 this.dropdownAnchorRef(ref);
                 this.dropdownWrapperRef(ref);
-            } }, index.h("div", { key: '24d3ce5cab8107f69347917beca581dd71d6ba3a', class: "input-container" }, index.h("div", { key: '01adbf419c634fb8ccae19bc2dd4aa18a90553ae', class: "chips" }, this.isMultipleMode &&
-            this.items.length !== 0 &&
-            (this.shouldDisplayAllChip()
-                ? this.renderAllChip()
-                : this.selectedItems?.map((item) => this.renderChip(item))), index.h("div", { key: '9a8a9b3e4c57776d737e66fc836addaba9950cd3', class: "trigger" }, index.h("input", { key: '5f50f19cb0c6ab190535b2952d5e757548355124', id: `${this.hostId}-input`, role: "combobox", "aria-controls": `${this.hostId}-proxy-listbox`, "aria-expanded": a11y.a11yBoolean(this.dropdownShow), "aria-autocomplete": "list", "aria-disabled": a11y.a11yBoolean(this.disabled), autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            } }, index.h("div", { key: '8f7f92597a46203db9c2bb9d6059dec538d5b288', class: "input-container" }, index.h("div", { key: '500f47f8ae57080d867b84ce31972108d5ef931d', class: "chips", ref: this.chipsContainerRef }, this.isMultipleMode && this.renderMultipleModeChips(), index.h("div", { key: '330c7e488669f0ca1283e0f2fe1a09ed9a823397', class: "trigger" }, index.h("input", { key: '69b2a620b3802ad51d9a092b589e9ab48290cb4c', id: `${this.hostId}-input`, role: "combobox", "aria-controls": `${this.hostId}-proxy-listbox`, "aria-expanded": a11y.a11yBoolean(this.dropdownShow), "aria-autocomplete": "list", "aria-disabled": a11y.a11yBoolean(this.disabled), autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!this.selectedLabels?.length,
             }, placeholder: this.placeholderValue(), value: this.inputValue ?? '', ref: (ref) => {
                 this.inputElement = ref;
@@ -658,7 +1019,7 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
             }, onFocus: () => this.onInputFocus(), onBlur: (e) => this.onInputBlur(e), onInput: () => this.setItemFilter() }), this.allowClear &&
             !this.disabled &&
             !this.readonly &&
-            (this.selectedLabels?.length || this.inputFilterText) ? (index.h("ix-icon-button", { key: "clear", class: "clear", icon: index$1.iconClear, variant: "subtle-tertiary", oval: true, size: "16", onClick: (e) => {
+            (this.selectedLabels?.length || this.inputFilterText) ? (index.h("ix-icon-button", { key: "clear", class: "clear", icon: index$1.iconClear, variant: "subtle-tertiary", oval: true, size: "16", ref: this.clearButtonRef, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.clear();
@@ -672,7 +1033,7 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
                 element.ariaHidden = 'true';
             }, "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: this.dropdownShow
                 ? index$1.iconChevronUpSmall
-                : index$1.iconChevronDownSmall, variant: "subtle-tertiary" }))))))), index.h("ix-dropdown", { key: '187d36c8fd120fffa047648a4ff8e8e9e1a444e3', id: `${this.hostId}-listbox`, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'], keyboardItemTriggerKeys: ['Enter'], disableFocusTrap: true, focusHost: this.hostElement, ref: this.dropdownRef, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', hidden: this.disabled || this.readonly, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChange: (event) => {
+                : index$1.iconChevronDownSmall, variant: "subtle-tertiary" }))))))), index.h("ix-dropdown", { key: 'c44d1ab3cc63edc72b69a328290f51b677002bfa', id: `${this.hostId}-listbox`, keyboardActivationKeys: ['ArrowUp', 'ArrowDown'], keyboardItemTriggerKeys: ['Enter'], disableFocusTrap: true, focusHost: this.hostElement, ref: this.dropdownRef, show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', hidden: this.disabled || this.readonly, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChange: (event) => {
                 if ((this.disabled || this.readonly) && event.detail) {
                     event.preventDefault();
                 }
@@ -711,22 +1072,31 @@ const Select = class extends index.Mixin(...component.DefaultMixins, id_mixin.Co
                 if (this.isSingleMode) {
                     this.dropdownShow = false;
                 }
-            } }, index.h("div", { key: 'c2e65bc3e1df99c75ca482ea229c5e35d13c45ed', "aria-hidden": "true", class: {
+            } }, index.h("div", { key: '992a4564d8d601adad70a14fb45efc22155f66ea', "aria-hidden": "true", class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), index.h("slot", { key: '404e34ea75f438e875cebc94fd87cc8aa0c217c5', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), index.h("slot", { key: 'e4294d41e1d797ad9fff11f36deb1bdc9cf87208', onSlotchange: () => {
                 this.updateSelection();
-            } }), index.h(focusProxy.FocusProxy, { key: '18274eb400e5947dce03156c500b0392d0a6d1b7', hostId: this.hostId, otherProps: {
+            } }), index.h(focusProxy.FocusProxy, { key: '4d1c63a6f403f3cac6558176d3360d68b21c78c8', hostId: this.hostId, otherProps: {
                 'aria-hidden': a11y.a11yBoolean(!this.dropdownShow),
                 'aria-multiselectable': a11y.a11yBoolean(this.isMultipleMode),
                 hidden: this.disabled || this.readonly,
-            } }), this.isDropdownEmpty && !this.editable && (index.h("div", { key: '800629d019d4ba79cff9f91f904d47aef41d7c25', class: "select-list-header" }, this.i18nNoMatches)))));
+            } }), this.isDropdownEmpty && !this.editable && (index.h("div", { key: 'a962db05209dba24fd4e800fc79c0a2c220ebe88', class: "select-list-header" }, this.i18nNoMatches))), this.isMultipleMode &&
+            !this.shouldDisplayAllChip() &&
+            this.hiddenChipValues.length > 0 &&
+            this.renderOverflowDropdown()));
     }
     static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "value": [{
                 "watchValue": 0
+            }],
+        "disabled": [{
+                "watchDisabledReadonly": 0
+            }],
+        "readonly": [{
+                "watchDisabledReadonly": 0
             }]
     }; }
 };

package/dist/cjs/ix-slider.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-BKQkUbyE.js');
-var a11y = require('./a11y-C_6YiIMa.js');
-var listener = require('./listener-BafrcTaM.js');
+var index = require('./index-DnclGKUw.js');
+var a11y = require('./a11y-_XjpTo2w.js');
+var listener = require('./listener-ClEsCfX0.js');
 var makeRef = require('./make-ref-CHsa3FY7.js');
-var validation = require('./validation-Dier-uPA.js');
+var validation = require('./validation-DJaUH-UR.js');
 require('./index-B4J4JK0P.js');
 
 const sliderCss = () => `:host{display:flex;flex-direction:column;min-height:2rem;justify-content:center;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-slider-track-marker--background);--trace-color:var(--theme-slider-trace--background);--tick-color:var(--theme-slider-track-marker--background);--tick-color--active:var(--theme-slider-trace-marker--background);--track-color:var(--theme-slider-track--background)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1.5rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc((var(--trace-end) - var(--trace-start)) * 100%);left:calc(var(--trace-start) * 100%);height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%);border-radius:clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (var(--trace-end) - 0.99) * 999rem, 0.125rem) clamp(0rem, (0.01 - var(--trace-start)) * 999rem, 0.125rem)}:host .slider-container{width:100%}:host .slider-container .slider{width:100%}:host .slider-container .slider input[type=range]{width:100%}:host input[type=range].trace:not(.hide-trace-reference)::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(100% * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:50%;background-color:var(--theme-slider-thumb--background);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--hover)}:host input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--active)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host{}:host .ticks{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none}:host .ticks circle.tick{--tick-size:6px;--tick-radius:calc(var(--tick-size) / 2);r:var(--tick-radius);fill:var(--tick-color);transform:translate(calc(var(--tick-value) * (100% - var(--thumb-size)) + var(--thumb-size) / 2), 50%)}:host .ticks .tick.tick-at-min{transform:translate(var(--tick-radius), 50%)}:host .ticks .tick.tick-at-max{transform:translate(calc(100% - var(--tick-radius)), 50%)}:host .ticks .tick.tick-active{fill:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:100%;top:50%;transform:translateY(-50%);left:0px;border-radius:2px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host(.invalid){--trace-color:var(--theme-slider-trace--background--invalid);--tick-color--active:var(--theme-slider-trace-marker--background--invalid)}:host(.invalid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.invalid) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid)}:host(.invalid) input[type=range]:hover::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.invalid) input[type=range]:hover::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--hover)}:host(.invalid) input[type=range]:active::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.invalid) input[type=range]:active::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--invalid--active)}:host(.disabled){pointer-events:none;--track-color:var(--theme-slider-track--background--disabled);--trace-color:var(--theme-slider-trace--background--disabled);--tick-color:var(--theme-slider-track-marker--background--disabled);--tick-color--active:var(--theme-slider-trace-marker--background--disabled)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-slider-thumb--background--disabled)}:host(.warning){--trace-color:var(--theme-color-warning-40);--tick-color--active:var(--theme-color-warning)}:host(.warning) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-warning)}:host(.warning) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-warning)}:host(.info){--trace-color:var(--theme-color-info-40);--tick-color--active:var(--theme-color-info)}:host(.info) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-info)}:host(.info) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-info)}:host(.valid){--trace-color:var(--theme-color-success-40);--tick-color--active:var(--theme-color-success)}:host(.valid) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-success)}:host(.valid) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-success)}`;
@@ -245,15 +245,15 @@ const Slider = class {
             traceStart = valueInPercentage;
             traceEnd = traceReferenceInPercentage;
         }
-        return (index.h(index.Host, { key: '4e158f7b4af6a8786274b094fcbdc26a00ec19ed', class: {
+        return (index.h(index.Host, { key: '5eed909b2857b9bfbea41402736fe01d7ad9a434', class: {
                 disabled: this.disabled,
                 invalid: this.isInvalid,
                 info: this.isInfo,
                 valid: this.isValid,
                 warning: this.isWarning,
-            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("ix-field-wrapper", { key: 'a18bd3265b8f50d1a3383b59e70efe0bfb829f39', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, index.h("div", { key: 'e01718c2e79b41df00aff2cafd6c8e5becdba85d', class: "slider-container" }, index.h("div", { key: '8b83be7e28cac0484b54768c6283d1d37a74e857', class: "slider" }, index.h("div", { key: '9fa8db2173cd87de771d6a0d5a2ace01820fe128', class: "track" }, index.h("div", { key: '46b3b6487f23f4a9219420642587813906c53ce8', ref: this.thumbRef, class: "thumb", style: {
+            }, onPointerDown: () => setTimeout(() => (this.showTooltip = true)) }, index.h("ix-field-wrapper", { key: '6f5ef62c132260787b91ea5b5f08faf21153735f', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid, controlRef: this.controlRef }, index.h("div", { key: 'c67536334750605b342859dbf6c38abcc730c6a6', class: "slider-container" }, index.h("div", { key: '33649db602e05ea4f2496c6b7b5a3620eca81a49', class: "slider" }, index.h("div", { key: 'f282b195ad420d036e90b4cc45c59fe9232b5919', class: "track" }, index.h("div", { key: 'f68211f2d377f2741eaedcdc4ca7fcbcd0f1bbfb', ref: this.thumbRef, class: "thumb", style: {
                 left: `calc(${valueInPercentage} * (100% - 1rem))`,
-            } }), index.h("svg", { key: '53a69bb9f7e79558323d7558d60655293a467012', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, this.marker
+            } }), index.h("svg", { key: '50576c072bbd33c8689017d7f67b83694d73516c', class: "ticks", xmlns: "http://www.w3.org/2000/svg" }, this.marker
             ?.filter((markerValue) => markerValue >= this.min && markerValue <= this.max)
             .map((markerValue) => {
             const markerPosition = (markerValue - this.rangeMin) / range;
@@ -265,7 +265,7 @@ const Slider = class {
                 }, cx: "0", cy: "0", style: {
                     '--tick-value': `${markerPosition}`,
                 } }));
-        }))), index.h("input", { key: 'e92242dc3fa7207e1d86071369e76178c9ae6ddf', id: "slider", ref: this.controlRef, type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), onFocus: () => {
+        }))), index.h("input", { key: '3ee47514d9a51488410c2b0984f05f39e74153a7', id: "slider", ref: this.controlRef, type: "range", list: this.marker ? 'markers' : undefined, step: this.step, min: this.min, max: this.max, value: this.rangeInput, tabindex: this.disabled ? -1 : 0, onInput: (event) => this.onInput(event), onFocus: () => {
                 this.showTooltip = true;
                 this.touched = true;
             }, onBlur: () => {
@@ -281,9 +281,9 @@ const Slider = class {
                 'hide-trace-reference': this.trace &&
                     (this.traceReference <= this.min ||
                         this.traceReference >= this.max),
-            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max, ...this.a11yAttributes }), index.h("ix-tooltip", { key: 'aff89362b88b37ec1d9b6bd9f6ba59646dd538a0', ref: this.tooltipRef, class: {
+            }, role: "slider", "aria-valuenow": this.rangeInput, "aria-valuemin": this.min, "aria-valuemax": this.max, ...this.a11yAttributes }), index.h("ix-tooltip", { key: '740ea0d7cf7a200c7db7ea8ac70fd2537b84b4a5', ref: this.tooltipRef, class: {
                 'hide-tooltip': !this.showTooltip,
-            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (index.h("div", { key: '34feab8797c1338f3063e17e145811ea33518f4e', class: "label" }, index.h("div", { key: 'c95ca806e153beab2c91451859b12c82f2e89a65' }, index.h("slot", { key: 'e49498aba11ed8f8711db171308f4979a942a93c', name: "label-start" })), index.h("div", { key: 'ac2e3855bc845f00f3ac8f79022c767befa2c7ea' }, index.h("slot", { key: 'a21bc3e1329c8467762e5b44801fc8db0868ec13', name: "label-end" }))))))));
+            }, animationFrame: true, for: this.thumbRef.waitForCurrent() }, this.rangeInput)), this.hasLabels && (index.h("div", { key: 'd5264eaabacd9f667600df1f0cdf8e89b24d7730', class: "label" }, index.h("div", { key: '4ac2ebda49543e04e619452bd59c3f30a0404879' }, index.h("slot", { key: 'dcc9ecd173f1d49133e1070b72b34b8485cc9860', name: "label-start" })), index.h("div", { key: '022869a430a0644e24932553a321da5fa8dd4df2' }, index.h("slot", { key: '4da9fdcb1d570657a3796a32d0925025e16dc4b7', name: "label-end" }))))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {