@siemens/ix 4.4.0 → 5.1.0

package/dist/collection/components/select/select.js

@@ -17,134 +17,229 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { iconChevronDownSmall, iconChevronUpSmall, iconClear, iconPlus, } from "@siemens/ix-icons/icons";
-import { h, Host, } from "@stencil/core";
+import { forceUpdate, h, Host, Mixin, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
-import { ArrowFocusController } from "../utils/focus";
+import { FocusProxy, PROXY_LIST_ID_SUFFIX, PROXY_LISTITEM_ID_SUFFIX, updateFocusProxyList, } from "../utils/focus/focus-proxy";
+import { IX_FOCUS_VISIBLE_ACTIVE, queryElements, } from "../utils/focus/focus-utilities";
 import { HookValidationLifecycle, } from "../utils/input";
-import { OnListener } from "../utils/listener";
+import { DefaultMixins } from "../utils/internal/component";
+import { AriaActiveDescendantMixin, } from "../utils/internal/mixins/accessibility/aria-activedescendant.mixin";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
 import { makeRef } from "../utils/make-ref";
-import { createMutationObserver } from "../utils/mutation-observer";
 import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
+let selectId = 0;
 /**
  * @form-ready
  */
-export class Select {
+export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
-        /**
-         * A Boolean attribute indicating that an option with a non-empty string value must be selected
-         */
-        this.required = false;
-        /**
-         * ARIA label for the clear icon button
-         * Will be set as aria-label on the nested HTML button element
-         *
-         * @since 3.2.0
-         */
-        this.ariaLabelClearIconButton = 'Clear selection';
-        /**
-         * Current selected value.
-         * This corresponds to the value property of ix-select-items
-         */
-        this.value = '';
-        /**
-         * Show clear button
-         */
-        this.allowClear = false;
-        /**
-         * Selection mode
-         */
-        this.mode = 'single';
-        /**
-         * Select is extendable
-         */
-        this.editable = false;
-        /**
-         * If true the select will be in disabled state
-         */
-        this.disabled = false;
-        /**
-         * If true the select will be in readonly mode
-         */
-        this.readonly = false;
-        /**
-         * Input field placeholder
-         */
-        this.i18nPlaceholder = 'Select an option';
-        /**
-         * Input field placeholder for editable select
-         */
-        this.i18nPlaceholderEditable = 'Type of select option';
-        /**
-         * Select list header
-         */
-        this.i18nSelectListHeader = 'Select an option';
-        /**
-         * Information inside of dropdown if no items where found with current filter text
-         */
-        this.i18nNoMatches = 'No matches';
-        /**
-         * Chip label for all selected items in multiple mode.
-         */
-        this.i18nAllSelected = 'All';
-        /**
-         * Hide list header
-         */
-        this.hideListHeader = false;
-        /**
-         * Show "all" chip when all items are selected in multiple mode
-         */
-        this.collapseMultipleSelection = false;
-        /**
-         * Enable Popover API rendering for dropdown.
-         *
-         * @default false
-         * @since 4.3.0
-         */
-        this.enableTopLayer = false;
-        this.dropdownShow = false;
-        this.selectedLabels = [];
-        this.isDropdownEmpty = false;
-        this.inputFilterText = '';
-        this.inputValue = '';
-        this.isInvalid = false;
-        this.isValid = false;
-        this.isInfo = false;
-        this.isWarning = false;
-        this.dropdownWrapperRef = makeRef();
-        this.dropdownAnchorRef = makeRef();
-        this.inputRef = makeRef();
-        this.touched = false;
-        this.itemObserver = createMutationObserver(() => {
-            if (!this.arrowFocusController) {
-                return;
-            }
-            this.arrowFocusController.items = this.visibleNonShadowItems;
-        });
-        this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+        super();
     }
+    hostElement;
+    formInternals;
+    /**
+     * A string that represents the element's name attribute,
+     * containing a name that identifies the element when submitting the form.
+     */
+    name;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected
+     */
+    required = false;
+    /**
+     * Label for the select component
+     */
+    label;
+    /**
+     * ARIA label for the clear icon button
+     * Will be set as aria-label on the nested HTML button element
+     *
+     * @since 3.2.0
+     */
+    ariaLabelClearIconButton = 'Clear selection';
+    /**
+     * ARIA label for the add item
+     *
+     * @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
+     **/
+    warningText;
+    /**
+     * Info text for the select component
+     **/
+    infoText;
+    /**
+     * Error text for the select component
+     **/
+    invalidText;
+    /**
+     * Valid text for the select component
+     **/
+    validText;
+    /**
+     * Helper text for the select component
+     **/
+    helperText;
+    /**
+     * Show helper, error, info, warning text as tooltip
+     */
+    showTextAsTooltip;
+    /**
+     * Current selected value.
+     * This corresponds to the value property of ix-select-items
+     */
+    value = '';
+    /**
+     * Show clear button
+     */
+    allowClear = false;
+    /**
+     * Selection mode
+     */
+    mode = 'single';
+    /**
+     * Select is extendable
+     */
+    editable = false;
+    /**
+     * If true the select will be in disabled state
+     */
+    disabled = false;
+    /**
+     * If true the select will be in readonly mode
+     */
+    readonly = false;
+    /**
+     * Input field placeholder
+     */
+    i18nPlaceholder = 'Select an option';
+    /**
+     * Input field placeholder for editable select
+     */
+    i18nPlaceholderEditable = 'Type of select option';
+    /**
+     * Select list header
+     */
+    i18nSelectListHeader = 'Select an option';
+    /**
+     * Information inside of dropdown if no items where found with current filter text
+     */
+    i18nNoMatches = 'No matches';
+    /**
+     * Chip label for all selected items in multiple mode.
+     */
+    i18nAllSelected = 'All';
+    /**
+     * Prefix for the accessible name of the close control on a selected chip in multiple mode.
+     * The chip label or value is appended (e.g. "Remove Item 1").
+     *
+     * @since 5.0.0
+     */
+    i18nRemoveSelectedItem = 'Remove';
+    /**
+     * Hide list header
+     */
+    hideListHeader = false;
+    /**
+     * The width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").
+     */
+    dropdownWidth;
+    /**
+     * The maximum width of the dropdown element with value and unit (e.g. "200px" or "12.5rem").
+     * By default the maximum width of the dropdown element is set to 100%.
+     */
+    dropdownMaxWidth;
+    /**
+     * Show "all" chip when all items are selected in multiple mode
+     */
+    collapseMultipleSelection = false;
+    /**
+     * Enable Popover API rendering for dropdown.
+     *
+     * @default false
+     * @since 4.3.0
+     */
+    enableTopLayer = false;
+    /**
+     * Value changed
+     */
+    valueChange;
+    /**
+     * Event dispatched whenever the text input changes.
+     */
+    inputChange;
+    /**
+     * Item added to selection
+     */
+    addItem;
+    /**
+     * Blur input
+     */
+    ixBlur;
+    dropdownShow = false;
+    selectedLabels = [];
+    isDropdownEmpty = false;
+    inputFilterText = '';
+    inputValue = '';
+    visibleChipValues = null;
+    hiddenChipValues = [];
+    overflowDropdownShow = false;
+    hasInputFocus = false;
+    dropdownItemsVisualFocused = false;
+    isInvalid = false;
+    isValid = false;
+    isInfo = false;
+    isWarning = false;
+    hostId = `ix-select-${selectId++}`;
+    dropdownWrapperRef = makeRef();
+    dropdownAnchorRef = makeRef();
+    inputRef = makeRef();
+    dropdownRef = makeRef();
+    chipElementRefs = new Map();
+    chipWidths = new Map();
+    overflowChipRef = makeRef();
+    chipsContainerRef = makeRef();
+    clearButtonRef = makeRef();
+    chipHorizontalMargin = 4;
+    triggerMinWidth = 78;
+    overflowChipFallbackWidth = 52;
+    overflowChipWidth = 0;
+    chipsResizeObserver;
+    overflowDropdownOpenedByKeyboard = false;
+    proxyListObserver = null;
+    inputElement;
+    touched = false;
     get nonShadowItems() {
         return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
     }
-    get visibleNonShadowItems() {
-        return this.nonShadowItems.filter((item) => !item.classList.contains('display-none'));
-    }
     get shadowItems() {
         return Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item'));
     }
-    get visibleShadowItems() {
-        return this.shadowItems.filter((item) => !item.classList.contains('display-none'));
+    get focusableItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-select-item:not([disabled]):not([hidden]), ix-dropdown-item:not([disabled]):not([hidden])'));
+    }
+    get allFocusableItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-select-item, ix-dropdown-item'));
     }
     get items() {
         return [...this.nonShadowItems, ...this.shadowItems];
     }
-    get visibleItems() {
-        return this.items.filter((item) => !item.classList.contains('display-none'));
-    }
     get selectedItems() {
         return this.items.filter((item) => item.selected);
     }
-    get addItemButton() {
-        return this.hostElement.shadowRoot.querySelector('.add-item');
+    get addItemElement() {
+        return this.hostElement.querySelector('ix-dropdown-item.add-item');
     }
     get isSingleMode() {
         return this.mode === 'single';
@@ -153,32 +248,17 @@ export class Select {
         return this.mode === 'multiple';
     }
     get isEveryDropdownItemHidden() {
-        return this.items.every((item) => item.classList.contains('display-none'));
+        return this.items.every((item) => item.hidden === true);
     }
     watchValue(value) {
         this.value = value;
         this.updateSelection();
     }
-    watchDropdownShow(show) {
-        if (show && this.dropdownElement) {
-            this.itemObserver.observe(this.dropdownElement, {
-                childList: true,
-                subtree: true,
-            });
-        }
-        else {
-            this.cleanupResources();
-        }
-    }
-    cleanupResources() {
-        var _a, _b;
-        (_a = this.arrowFocusController) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.arrowFocusController = undefined;
-        (_b = this.itemObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    }
-    onItemClicked(event) {
-        const newId = event.detail;
-        this.itemClick(newId);
+    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)) {
@@ -198,20 +278,6 @@ export class Select {
         }
         return !!this.value;
     }
-    focusDropdownItem(index) {
-        var _a, _b;
-        this.navigationItem = undefined;
-        if (index < this.visibleNonShadowItems.length) {
-            const nestedDropdownItem = (_b = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('ix-dropdown-item');
-            if (!nestedDropdownItem) {
-                return;
-            }
-            requestAnimationFrameNoNgZone(() => {
-                var _a, _b;
-                (_b = (_a = nestedDropdownItem === null || nestedDropdownItem === void 0 ? void 0 : nestedDropdownItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
-            });
-        }
-    }
     itemClick(newId) {
         const oldValue = this.value;
         const value = this.toggleValue(newId);
@@ -224,15 +290,10 @@ export class Select {
         this.updateSelection();
         if (this.isMultipleMode && this.inputFilterText) {
             this.clearInput();
-            this.removeHiddenFromItems();
-            if (this.arrowFocusController) {
-                this.arrowFocusController.items = this.visibleNonShadowItems;
-            }
-            this.navigationItem = undefined;
+            this.removeHiddenAttributeFromItems();
         }
     }
     emitAddItem(value) {
-        var _a;
         if (value === undefined || value.trim() === '') {
             return false;
         }
@@ -243,9 +304,11 @@ export class Select {
         const newItem = document.createElement('ix-select-item');
         newItem.value = value;
         newItem.label = value;
-        (_a = this.customItemsContainerElement) === null || _a === void 0 ? void 0 : _a.appendChild(newItem);
-        this.clearInput();
-        this.itemClick(value);
+        this.addItemElement?.before(newItem);
+        requestAnimationFrameNoNgZone(() => {
+            this.clearInput();
+            this.itemClick(value);
+        });
         return false;
     }
     toggleValue(itemValue) {
@@ -267,7 +330,6 @@ export class Select {
         }
     }
     updateSelection() {
-        var _a, _b;
         let ids = [];
         if (this.value) {
             ids = Array.isArray(this.value) ? [...this.value] : [this.value];
@@ -282,12 +344,13 @@ export class Select {
                 }
             });
         });
-        this.selectedLabels = this.selectedItems.map((item) => item.label);
+        this.selectedLabels = this.selectedItems.map((item) => item.label ?? item.value);
+        this.pruneChipWidthCache();
         if (this.dropdownShow && this.inputFilterText) {
             return;
         }
-        if (((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length) && this.isSingleMode) {
-            this.inputValue = (_b = this.selectedLabels[0]) !== null && _b !== void 0 ? _b : '';
+        if (this.selectedLabels?.length && this.isSingleMode) {
+            this.inputValue = this.selectedLabels[0] ?? '';
         }
         else {
             this.inputValue = '';
@@ -302,209 +365,139 @@ export class Select {
         this.updateFormInternalValue(value);
         return false;
     }
+    createAddItemElement() {
+        const onAddItemButtonClick = () => {
+            this.emitAddItem(this.inputFilterText);
+        };
+        const createElement = () => {
+            const addItemElement = document.createElement('ix-dropdown-item');
+            addItemElement.hidden = true;
+            addItemElement.setAttribute('data-testid', 'add-item');
+            addItemElement.icon = iconPlus;
+            addItemElement.classList.add('add-item');
+            addItemElement.addEventListener('click', onAddItemButtonClick);
+            addItemElement.style.order = Number.MAX_SAFE_INTEGER.toString();
+            addItemElement.ariaHidden = 'true';
+            addItemElement.role = 'presentation';
+            return addItemElement;
+        };
+        const isRendered = this.hostElement.querySelector('.add-item');
+        if (!isRendered) {
+            this.hostElement.appendChild(createElement());
+        }
+    }
     componentDidLoad() {
-        var _a;
-        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('input', () => {
-            var _a;
+        this.inputElement?.addEventListener('input', () => {
             this.dropdownShow = true;
-            this.inputChange.emit((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value);
+            this.inputChange.emit(this.inputElement?.value);
         });
+        this.createAddItemElement();
+        this.proxyListObserver = new MutationObserver(() => {
+            this.updateAriaProxyListbox();
+        });
+        this.proxyListObserver.observe(this.hostElement, {
+            attributes: true,
+            attributeFilter: ['aria-selected'],
+            subtree: true,
+            childList: true,
+        });
+        const chipsContainer = this.chipsContainerRef.current;
+        if (chipsContainer) {
+            this.chipsResizeObserver = new ResizeObserver(() => {
+                this.handleChipsContainerResize();
+            });
+            this.chipsResizeObserver.observe(chipsContainer);
+        }
     }
     componentWillLoad() {
         this.updateSelection();
         this.updateFormInternalValue(this.value);
     }
-    componentDidRender() {
-        if (!this.dropdownShow ||
-            this.arrowFocusController ||
-            !this.dropdownElement) {
-            return;
-        }
-        this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownElement, this.focusControllerCallbackBind);
-        this.arrowFocusController.wrap =
-            !this.isAddItemVisible() && !this.visibleShadowItems.length;
+    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();
     }
-    disconnectedCallback() {
-        this.cleanupResources();
-    }
     itemExists(item) {
         return this.items.find((i) => i.label === item);
     }
+    getActiveVisualFocusedItem() {
+        const elements = queryElements(this.hostElement, `.${IX_FOCUS_VISIBLE_ACTIVE}`);
+        if (elements.length > 0) {
+            return elements[0];
+        }
+        return null;
+    }
     dropdownVisibilityChanged(event) {
-        var _a, _b;
         this.dropdownShow = event.detail;
         if (event.detail) {
-            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.select();
-            this.removeHiddenFromItems();
+            this.inputElement?.focus();
+            if (this.hasValue()) {
+                this.inputElement?.select();
+            }
+            if (!this.inputFilterText) {
+                this.removeHiddenAttributeFromItems();
+            }
             this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+            this.checkVisibilityOfProxyList();
         }
         else {
-            this.navigationItem = undefined;
             this.updateSelection();
             this.inputFilterText = '';
+            this.dropdownItemsVisualFocused = false;
+            this.inputElement?.setAttribute('aria-activedescendant', '');
         }
     }
-    async onKeyDown(event) {
-        if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
-            await this.onArrowNavigation(event, event.code);
-        }
-        if (!this.dropdownShow) {
-            return;
-        }
-        if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-            await this.onEnterNavigation(event.target);
-        }
-        if (event.code === 'Escape') {
-            this.dropdownShow = false;
-        }
-    }
-    async onEnterNavigation(el) {
-        if (this.isMultipleMode) {
-            return;
-        }
-        const itemLabel = el === null || el === void 0 ? void 0 : el.label;
-        const item = this.itemExists(this.inputFilterText);
-        if (item) {
-            this.itemClick(item.value);
-        }
-        else if (this.editable && !this.itemExists(itemLabel)) {
-            const defaultPrevented = this.emitAddItem(this.inputFilterText);
-            if (defaultPrevented) {
-                return;
-            }
-        }
-        this.dropdownShow = false;
-        this.updateSelection();
-    }
-    async onArrowNavigation(event, key) {
-        var _a;
-        if (event.defaultPrevented) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.dropdownShow = true;
-        if (!this.navigationItem && document.activeElement === this.hostElement) {
-            if (this.visibleItems.length) {
-                this.applyFocusTo(this.visibleItems.shift());
-            }
-            else if (this.isAddItemVisible()) {
-                this.focusAddItemButton();
-            }
-            return;
-        }
-        const moveUp = key === 'ArrowUp';
-        const indexNonShadow = document.activeElement
-            ? this.visibleNonShadowItems.indexOf(document.activeElement)
-            : -1;
-        // Slotted select items
-        if (indexNonShadow === 0) {
-            if (!this.visibleShadowItems.length && this.isAddItemVisible()) {
-                this.focusAddItemButton();
-            }
-            else {
-                this.applyFocusTo(this.visibleShadowItems.pop());
-            }
-            return;
-        }
-        else if (indexNonShadow !== -1 &&
-            indexNonShadow === this.visibleNonShadowItems.length - 1) {
-            if (this.visibleShadowItems.length) {
-                this.applyFocusTo(this.visibleShadowItems.shift());
-            }
-            else if (this.isAddItemVisible()) {
-                this.focusAddItemButton();
-            }
-            return;
-        }
-        if (!this.navigationItem) {
-            return;
-        }
-        if (this.isAddItemVisible() &&
-            ((_a = this.addItemElement) === null || _a === void 0 ? void 0 : _a.contains(await this.navigationItem.getDropdownItemElement()))) {
-            if (moveUp) {
-                this.applyFocusTo(this.visibleItems.pop());
-            }
-            else if (this.visibleItems.length) {
-                this.applyFocusTo(this.visibleItems.shift());
-            }
-            return;
-        }
-        // Custom select items
-        const indexShadow = this.visibleShadowItems.indexOf(this.navigationItem);
-        if (moveUp) {
-            if (indexShadow === 0) {
-                if (this.visibleNonShadowItems.length) {
-                    this.applyFocusTo(this.visibleNonShadowItems.pop());
-                }
-                else if (this.isAddItemVisible()) {
-                    this.focusAddItemButton();
-                }
-            }
-            else {
-                this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);
-            }
-        }
-        else {
-            if (indexShadow === this.visibleShadowItems.length - 1) {
-                if (this.isAddItemVisible()) {
-                    this.focusAddItemButton();
-                }
-                else {
-                    this.applyFocusTo(this.visibleItems.shift());
-                }
-            }
-            else {
-                this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);
-            }
-        }
-    }
-    applyFocusTo(element) {
-        if (!element) {
-            return;
-        }
-        this.navigationItem = element;
-        setTimeout(() => {
-            var _a, _b, _c, _d;
-            (_d = (_c = (_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ix-dropdown-item')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button')) === null || _d === void 0 ? void 0 : _d.focus();
-        });
-    }
-    focusAddItemButton() {
-        var _a, _b;
-        if (this.addItemButton) {
-            (_b = (_a = this.addItemButton.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button')) === null || _b === void 0 ? void 0 : _b.focus();
-            this.navigationItem = this.addItemElement;
-        }
-    }
-    filterItemsWithTypeahead() {
-        var _a, _b;
-        this.inputFilterText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value.trim()) !== null && _b !== void 0 ? _b : '';
+    setItemFilter() {
+        this.inputFilterText = this.inputElement?.value.trim() ?? '';
         if (this.inputFilterText) {
             this.items.forEach((item) => {
-                var _a;
-                item.classList.remove('display-none');
-                if (!((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.inputFilterText.toLowerCase()))) {
-                    item.classList.add('display-none');
+                const proxyItem = this.hostElement.shadowRoot?.getElementById(`${item.id}-${PROXY_LISTITEM_ID_SUFFIX}`);
+                item.hidden = false;
+                if (proxyItem) {
+                    proxyItem.hidden = false;
+                    proxyItem.setAttribute('aria-hidden', 'false');
+                }
+                if (!item.label
+                    ?.toLowerCase()
+                    .includes(this.inputFilterText.toLowerCase())) {
+                    item.hidden = true;
+                    if (proxyItem) {
+                        proxyItem.hidden = true;
+                        proxyItem.setAttribute('aria-hidden', 'true');
+                    }
                 }
             });
         }
         else {
-            this.removeHiddenFromItems();
-        }
-        if (this.arrowFocusController) {
-            this.arrowFocusController.items = this.visibleNonShadowItems;
+            this.removeHiddenAttributeFromItems();
         }
         this.isDropdownEmpty = this.isEveryDropdownItemHidden;
+        this.checkVisibilityOfProxyList();
     }
-    removeHiddenFromItems() {
+    checkVisibilityOfProxyList() {
+        const proxyList = this.hostElement?.shadowRoot?.getElementById(`${this.hostId}-${PROXY_LIST_ID_SUFFIX}`);
+        if (!proxyList) {
+            return;
+        }
+        proxyList.hidden = this.isDropdownEmpty;
+    }
+    removeHiddenAttributeFromItems() {
         this.items.forEach((item) => {
-            item.classList.remove('display-none');
+            item.hidden = false;
+            const proxyItem = this.hostElement.shadowRoot?.getElementById(`${item.id}-${PROXY_LISTITEM_ID_SUFFIX}`);
+            if (proxyItem) {
+                proxyItem.hidden = false;
+                proxyItem.setAttribute('aria-hidden', 'false');
+            }
         });
     }
     clearInput() {
@@ -524,6 +517,7 @@ export class Select {
     onInputBlur(event) {
         this.ixBlur.emit();
         this.touched = true;
+        this.hasInputFocus = false;
         if (this.editable) {
             return;
         }
@@ -535,6 +529,9 @@ export class Select {
             target.value = this.selectedLabels.toString();
         }
     }
+    onInputFocus() {
+        this.hasInputFocus = true;
+    }
     placeholderValue() {
         if (this.disabled) {
             return '';
@@ -556,20 +553,345 @@ export class Select {
         return (this.selectedItems.length === this.items.length &&
             this.collapseMultipleSelection);
     }
+    getRemoveChipAriaLabel(item) {
+        const name = (item.label ?? item.value)?.toString().trim();
+        if (!name) {
+            return this.i18nRemoveSelectedItem;
+        }
+        return `${this.i18nRemoveSelectedItem} ${name}`;
+    }
     renderAllChip() {
-        return (h("ix-filter-chip", { disabled: this.disabled || this.readonly, ariaLabelCloseIconButton: this.i18nAllSelected, onCloseClick: (e) => {
+        return (h("ix-filter-chip", { disabled: this.disabled || this.readonly, ariaLabelCloseIconButton: `${this.i18nRemoveSelectedItem} ${this.i18nAllSelected}`, onCloseClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.clear();
             } }, `${this.i18nAllSelected} (${this.selectedItems.length})`));
     }
-    renderChip(item) {
-        return (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
+    renderChip(item, measuring) {
+        const value = item.value.toString();
+        return (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 (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 (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": 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 (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);
+                }
+            } }, 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) {
+        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;
+            }
+            default:
+                break;
+        }
+    }
+    focusOverflowChip() {
+        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.
+            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) => 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();
+                forceUpdate(this);
+            }
+            return;
+        }
+        await this.measureOverflowChipWidth();
+        this.calculateChipOverflow();
+    }
     onValidationChange({ isInvalid, isInvalidByRequired, isValid, isInfo, isWarning, }) {
         this.isInvalid = isInvalid || isInvalidByRequired;
         this.isValid = isValid;
@@ -607,50 +929,105 @@ export class Select {
     isTouched() {
         return Promise.resolve(this.touched);
     }
+    getControllingAriaElement() {
+        return this.inputRef.waitForCurrent();
+    }
+    isAriaActiveDescendantActive() {
+        return this.dropdownShow;
+    }
+    getAriaActiveDescendantProxyItemId() {
+        return 'proxy-listbox-item';
+    }
+    componentWillRender() {
+        if (this.addItemElement) {
+            this.addItemElement.hidden = !this.isAddItemVisible();
+            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`);
+        if (this.focusableItems.length === 0) {
+            return;
+        }
+        updateFocusProxyList(ariaActiveDescendantHelper, this.focusableItems, (item, proxyElement) => {
+            const isSelectItem = item.tagName === 'IX-SELECT-ITEM';
+            const ariaLabel = item.getAttribute('aria-label') ||
+                item.label ||
+                (isSelectItem ? item.value : '') ||
+                '';
+            const selected = isSelectItem
+                ? item.selected
+                : item.checked;
+            proxyElement.role = 'option';
+            proxyElement.innerText = item.label ?? '';
+            proxyElement.ariaLabel = ariaLabel;
+            proxyElement.ariaSelected = a11yBoolean(!!selected);
+            // Forward clicks from the proxy element to the actual dropdown item
+            proxyElement.addEventListener('click', (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                item.click();
+            });
+            if (this.addItemElement === item) {
+                proxyElement.ariaLabel = `${this.ariaLabelAddItem}: ${item.label}`;
+            }
+            // Bad for building playwright selectors but necessary to ensure that assistive technologies
+            // can announce the items in the dropdown with their respective aria-labels
+            item.ariaHidden = 'true';
+        });
+    }
     render() {
-        var _a, _b, _c, _d, _e;
-        return (h(Host, { key: '44a92192a5bb2243e52b5dedfc6513b75e1762e6', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (h(Host, { key: '3d24590fff4b5d99842ec846719e68d65e13d69d', id: this.getHostElementId(), class: {
                 readonly: this.readonly,
                 disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: '51981eecb1437df709600af04d3444e75b7ba33b', 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 }, h("div", { key: '8f3fe3649221f9b09b009d6624eb096fea5a1cec', class: {
+                'show-focus-outline': this.hasInputFocus && !this.dropdownItemsVisualFocused,
+            }, tabIndex: this.disabled ? -1 : 0 }, 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 }, h("div", { key: 'e3640d7028f8e43208243a7a49d1065897199f85', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
                 this.dropdownAnchorRef(ref);
-                if (!this.editable)
-                    this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '3d64b588c5bf162777e6c76f7fbd252a6856f968', class: "input-container" }, h("div", { key: 'fc187195af89682f29494d779fabbb7fbf53c1d4', class: "chips" }, this.isMultipleMode &&
-            this.items.length !== 0 &&
-            (this.shouldDisplayAllChip()
-                ? this.renderAllChip()
-                : (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => this.renderChip(item))), h("div", { key: 'bf4730e7d19381c632063670ef11178e6998fe21', class: "trigger" }, h("input", { key: '5191e5a69165d1f22a0b807612d5c0eef16e4429', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
-                'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
-            }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
+                this.dropdownWrapperRef(ref);
+            } }, h("div", { key: '8f7f92597a46203db9c2bb9d6059dec538d5b288', class: "input-container" }, h("div", { key: '500f47f8ae57080d867b84ce31972108d5ef931d', class: "chips", ref: this.chipsContainerRef }, this.isMultipleMode && this.renderMultipleModeChips(), h("div", { key: '330c7e488669f0ca1283e0f2fe1a09ed9a823397', class: "trigger" }, h("input", { key: '69b2a620b3802ad51d9a092b589e9ab48290cb4c', id: `${this.hostId}-input`, role: "combobox", "aria-controls": `${this.hostId}-proxy-listbox`, "aria-expanded": a11yBoolean(this.dropdownShow), "aria-autocomplete": "list", "aria-disabled": 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;
                 this.inputRef(ref);
-            }, onBlur: (e) => this.onInputBlur(e), onFocus: () => {
-                this.navigationItem = undefined;
-            }, onInput: () => this.filterItemsWithTypeahead(), onKeyDown: (e) => this.onKeyDown(e) }), this.allowClear &&
+            }, onFocus: () => this.onInputFocus(), onBlur: (e) => this.onInputBlur(e), onInput: () => this.setItemFilter() }), this.allowClear &&
             !this.disabled &&
             !this.readonly &&
-            (((_d = this.selectedLabels) === null || _d === void 0 ? void 0 : _d.length) || this.inputFilterText) ? (h("ix-icon-button", { key: "clear", class: "clear", icon: iconClear, variant: "subtle-tertiary", oval: true, size: "16", onClick: (e) => {
+            (this.selectedLabels?.length || this.inputFilterText) ? (h("ix-icon-button", { key: "clear", class: "clear", icon: iconClear, variant: "subtle-tertiary", oval: true, size: "16", ref: this.clearButtonRef, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.clear();
-            }, "aria-label": this.ariaLabelClearIconButton })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: this.dropdownShow
-                ? iconChevronUpSmall
-                : iconChevronDownSmall, variant: "subtle-tertiary", ref: (ref) => {
-                if (this.editable)
-                    this.dropdownWrapperRef(ref);
-            }, "aria-label": (_e = this.ariaLabelChevronDownIconButton) !== null && _e !== void 0 ? _e : (this.dropdownShow
+            }, "aria-label": this.ariaLabelClearIconButton })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "aria-label": this.dropdownShow
                 ? 'Close select dropdown'
-                : 'Open select dropdown') }))))))), h("ix-dropdown", { key: 'd96aa53fe76fec50dd2b2955be1983f5d2f977a4', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
-                'display-none': this.disabled || this.readonly,
-            }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", enableTopLayer: this.enableTopLayer, overwriteDropdownStyle: async () => {
-                var _a, _b;
+                : 'Open select dropdown', "aria-hidden": "true", ref: (ref) => {
+                const element = ref;
+                // VDOM issue if tabIndex is provided via property <ix-icon-button tabIndex={-1}>
+                // the tabindex will be '0' after expanding the dropdown
+                element.tabIndex = -1;
+                element.ariaHidden = 'true';
+            }, "data-select-dropdown": true, key: "dropdown", class: { 'dropdown-visible': this.dropdownShow }, icon: this.dropdownShow
+                ? iconChevronUpSmall
+                : iconChevronDownSmall, variant: "subtle-tertiary" }))))))), 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();
+                }
+            }, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", enableTopLayer: this.enableTopLayer, overwriteDropdownStyle: async () => {
                 const styleOverwrites = {};
-                const minWidth = (_b = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.select')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+                const minWidth = this.hostElement.shadowRoot
+                    ?.querySelector('.select')
+                    ?.getBoundingClientRect().width;
                 if (minWidth) {
                     styleOverwrites.minWidth = `${minWidth}px`;
                 }
@@ -661,23 +1038,43 @@ export class Select {
                     styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
                 }
                 return styleOverwrites;
-            } }, h("div", { key: '72bf038496330903b51e0c29491de61035c2ca17', class: {
+            }, onClick: (event) => {
+                const target = event.target;
+                const isTargetElement = target.tagName === 'IX-DROPDOWN-ITEM' ||
+                    target.tagName === 'IX-SELECT-ITEM';
+                if (!isTargetElement) {
+                    return;
+                }
+                const activeVisualFocusedItem = this.getActiveVisualFocusedItem();
+                const item = activeVisualFocusedItem ?? target;
+                if (!item) {
+                    return;
+                }
+                event.stopPropagation();
+                if (!item.classList.contains('add-item')) {
+                    this.itemClick(item.value);
+                    this.setItemFilter();
+                }
+                if (this.isSingleMode) {
+                    this.dropdownShow = false;
+                }
+            } }, 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), h("slot", { key: '06f8ab01910cedaf38c1f6c80a6058189b58b297', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'e4294d41e1d797ad9fff11f36deb1bdc9cf87208', onSlotchange: () => {
                 this.updateSelection();
-            } }), h("div", { key: '99acea939a79985d5c26df1b10a498733bf82221', ref: (ref) => (this.customItemsContainerElement = ref) }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: iconPlus, class: {
-                'add-item': true,
-            }, label: this.inputFilterText, onItemClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                this.emitAddItem(this.inputFilterText);
-            }, onFocus: () => (this.navigationItem = this.addItemElement), ref: (ref) => {
-                this.addItemElement = ref;
-            } })) : null, this.isDropdownEmpty && !this.editable ? (h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
+            } }), h(FocusProxy, { key: '4d1c63a6f403f3cac6558176d3360d68b21c78c8', hostId: this.hostId, otherProps: {
+                'aria-hidden': a11yBoolean(!this.dropdownShow),
+                'aria-multiselectable': a11yBoolean(this.isMultipleMode),
+                hidden: this.disabled || this.readonly,
+            } }), this.isDropdownEmpty && !this.editable && (h("div", { key: 'a962db05209dba24fd4e800fc79c0a2c220ebe88', class: "select-list-header" }, this.i18nNoMatches))), this.isMultipleMode &&
+            !this.shouldDisplayAllChip() &&
+            this.hiddenChipValues.length > 0 &&
+            this.renderOverflowDropdown()));
     }
     static get is() { return "ix-select"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
@@ -749,7 +1146,7 @@ export class Select {
                 "reflect": false,
                 "attribute": "label"
             },
-            "ariaLabelChevronDownIconButton": {
+            "ariaLabelClearIconButton": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -764,35 +1161,59 @@ export class Select {
                             "name": "since",
                             "text": "3.2.0"
                         }],
-                    "text": "ARIA label for the chevron down icon button\nWill be set as aria-label on the nested HTML button element"
+                    "text": "ARIA label for the clear icon button\nWill be set as aria-label on the nested HTML button element"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-label-chevron-down-icon-button"
+                "attribute": "aria-label-clear-icon-button",
+                "defaultValue": "'Clear selection'"
             },
-            "ariaLabelClearIconButton": {
+            "ariaLabelAddItem": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [{
                             "name": "since",
-                            "text": "3.2.0"
+                            "text": "TODO: Define"
                         }],
-                    "text": "ARIA label for the clear icon button\nWill be set as aria-label on the nested HTML button element"
+                    "text": "ARIA label for the add item"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-label-clear-icon-button",
-                "defaultValue": "'Clear selection'"
+                "attribute": "aria-label-add-item",
+                "defaultValue": "'Add item'"
+            },
+            "i18nMoreItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Accessible label template for the overflow indicator chip shown in multiple\nmode when not all selected chips fit on a single row. The `{count}`\nplaceholder is replaced with the number of hidden items (e.g. \"3 more\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-more-items",
+                "defaultValue": "'{count} more'"
             },
             "warningText": {
                 "type": "string",
@@ -1128,6 +1549,29 @@ export class Select {
                 "attribute": "i18n-all-selected",
                 "defaultValue": "'All'"
             },
+            "i18nRemoveSelectedItem": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Prefix for the accessible name of the close control on a selected chip in multiple mode.\nThe chip label or value is appended (e.g. \"Remove Item 1\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "i18n-remove-selected-item",
+                "defaultValue": "'Remove'"
+            },
             "hideListHeader": {
                 "type": "boolean",
                 "mutable": false,
@@ -1239,9 +1683,13 @@ export class Select {
             "dropdownShow": {},
             "selectedLabels": {},
             "isDropdownEmpty": {},
-            "navigationItem": {},
             "inputFilterText": {},
             "inputValue": {},
+            "visibleChipValues": {},
+            "hiddenChipValues": {},
+            "overflowDropdownShow": {},
+            "hasInputFocus": {},
+            "dropdownItemsVisualFocused": {},
             "isInvalid": {},
             "isValid": {},
             "isInfo": {},
@@ -1423,18 +1871,15 @@ export class Select {
                 "propName": "value",
                 "methodName": "watchValue"
             }, {
-                "propName": "dropdownShow",
-                "methodName": "watchDropdownShow"
+                "propName": "disabled",
+                "methodName": "watchDisabledReadonly"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchDisabledReadonly"
             }];
     }
     static get listeners() {
         return [{
-                "name": "itemClick",
-                "method": "onItemClicked",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "ix-select-item:valueChange",
                 "method": "onLabelChange",
                 "target": undefined,
@@ -1446,13 +1891,16 @@ export class Select {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onOverflowRemoveButtonKeyDown",
+                "target": undefined,
+                "capture": true,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "formInternals"; }
 }
-__decorate([
-    OnListener('keydown', (self) => self.dropdownShow)
-], Select.prototype, "onKeyDown", null);
 __decorate([
     HookValidationLifecycle()
 ], Select.prototype, "onValidationChange", null);