@siemens/ix 5.0.0 → 5.1.1

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

@@ -17,7 +17,7 @@ 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, Mixin, } from "@stencil/core";
+import { forceUpdate, h, Host, Mixin, } from "@stencil/core";
 import { a11yBoolean } from "../utils/a11y";
 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";
@@ -30,6 +30,7 @@ import { requestAnimationFrameNoNgZone } from "../utils/requestAnimationFrame";
 let selectId = 0;
 /**
  * @form-ready
+ * @slot default - Select items.
  */
 export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActiveDescendantMixin) {
     constructor() {
@@ -63,6 +64,14 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
      * @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
      **/
@@ -184,6 +193,9 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
     isDropdownEmpty = false;
     inputFilterText = '';
     inputValue = '';
+    visibleChipValues = null;
+    hiddenChipValues = [];
+    overflowDropdownShow = false;
     hasInputFocus = false;
     dropdownItemsVisualFocused = false;
     isInvalid = false;
@@ -195,6 +207,17 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
     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;
@@ -232,6 +255,12 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
         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(','));
@@ -317,6 +346,7 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
             });
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label ?? item.value);
+        this.pruneChipWidthCache();
         if (this.dropdownShow && this.inputFilterText) {
             return;
         }
@@ -372,6 +402,13 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
             subtree: true,
             childList: true,
         });
+        const chipsContainer = this.chipsContainerRef.current;
+        if (chipsContainer) {
+            this.chipsResizeObserver = new ResizeObserver(() => {
+                this.handleChipsContainerResize();
+            });
+            this.chipsResizeObserver.observe(chipsContainer);
+        }
     }
     componentWillLoad() {
         this.updateSelection();
@@ -380,10 +417,14 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
     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) {
@@ -527,12 +568,331 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 this.clear();
             } }, `${this.i18nAllSelected} (${this.selectedItems.length})`));
     }
-    renderChip(item) {
-        return (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 (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;
@@ -585,6 +945,14 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
             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`);
@@ -619,22 +987,18 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
         });
     }
     render() {
-        return (h(Host, { key: 'cf11caa1c57e34844d376a74d5c534184d322380', id: this.getHostElementId(), class: {
+        return (h(Host, { key: '9415e1e8af83d128ad9214824c182a9c03a70180', id: this.getHostElementId(), class: {
                 readonly: this.readonly,
                 disabled: this.disabled,
                 'show-focus-outline': this.hasInputFocus && !this.dropdownItemsVisualFocused,
-            }, tabIndex: this.disabled ? -1 : 0 }, 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 }, h("div", { key: '4f94efb21c4f1949ce6dad3ec8ba2664da2b3d9d', class: {
+            }, tabIndex: this.disabled ? -1 : 0 }, h("ix-field-wrapper", { key: '36b59b412aab4e527f2e09c7b800344d4831436e', 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: '353d3300511ab5311f1359d8591d58ffa862c8d1', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
             }, ref: (ref) => {
                 this.dropdownAnchorRef(ref);
                 this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '24d3ce5cab8107f69347917beca581dd71d6ba3a', class: "input-container" }, h("div", { key: '01adbf419c634fb8ccae19bc2dd4aa18a90553ae', class: "chips" }, this.isMultipleMode &&
-            this.items.length !== 0 &&
-            (this.shouldDisplayAllChip()
-                ? this.renderAllChip()
-                : this.selectedItems?.map((item) => this.renderChip(item))), h("div", { key: '9a8a9b3e4c57776d737e66fc836addaba9950cd3', class: "trigger" }, h("input", { key: '5f50f19cb0c6ab190535b2952d5e757548355124', 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: {
+            } }, h("div", { key: '66708c6629d362e2187de9620b6a1386863c0fdf', class: "input-container" }, h("div", { key: 'b5c607cd3766f624d8c608a4eaeb31bea7d3d387', class: "chips", ref: this.chipsContainerRef }, this.isMultipleMode && this.renderMultipleModeChips(), h("div", { key: '84084dbaa7e87c16acd3ca2b487a60eb130f6cc7', class: "trigger" }, h("input", { key: 'f1f7203f87901eca257935c2a4729fd6e2e3db00', 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;
@@ -642,21 +1006,24 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
             }, onFocus: () => this.onInputFocus(), onBlur: (e) => this.onInputBlur(e), onInput: () => this.setItemFilter() }), this.allowClear &&
             !this.disabled &&
             !this.readonly &&
-            (this.selectedLabels?.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", { "aria-label": this.dropdownShow
                 ? 'Close select dropdown'
-                : 'Open select dropdown', "aria-hidden": "true", ref: (ref) => {
+                : 'Open select dropdown', "aria-hidden": "true", tabindex: -1, ref: (ref) => {
+                if (!ref) {
+                    return;
+                }
                 const element = ref;
-                // VDOM issue if tabIndex is provided via property <ix-icon-button tabIndex={-1}>
+                // VDOM issue if tabIndex is provided only 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: '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) => {
+                : iconChevronDownSmall, variant: "subtle-tertiary" }))))))), h("ix-dropdown", { key: '1339c822f5fe72b80e0080f9bdc0a157f74fe7ad', 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();
                 }
@@ -695,16 +1062,19 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 if (this.isSingleMode) {
                     this.dropdownShow = false;
                 }
-            } }, h("div", { key: 'c2e65bc3e1df99c75ca482ea229c5e35d13c45ed', "aria-hidden": "true", class: {
+            } }, h("div", { key: 'df5024089e37d2a0416dd42d3e5c8c5c07ac5f4c', "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: '404e34ea75f438e875cebc94fd87cc8aa0c217c5', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: 'b9d758bf0a6c7452ab9e626f37c9fbb5b0a74dfc', onSlotchange: () => {
                 this.updateSelection();
-            } }), h(FocusProxy, { key: '18274eb400e5947dce03156c500b0392d0a6d1b7', hostId: this.hostId, otherProps: {
+            } }), h(FocusProxy, { key: 'a4bb5eed7ee4ab735ecf0141fc32c69df8c8d57c', 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: '800629d019d4ba79cff9f91f904d47aef41d7c25', class: "select-list-header" }, this.i18nNoMatches)))));
+            } }), this.isDropdownEmpty && !this.editable && (h("div", { key: '926fa88d0788351f0f2e865fe4ced2bb8422a43d', 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"; }
@@ -826,6 +1196,29 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 "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",
                 "mutable": false,
@@ -1296,6 +1689,9 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
             "isDropdownEmpty": {},
             "inputFilterText": {},
             "inputValue": {},
+            "visibleChipValues": {},
+            "hiddenChipValues": {},
+            "overflowDropdownShow": {},
             "hasInputFocus": {},
             "dropdownItemsVisualFocused": {},
             "isInvalid": {},
@@ -1478,6 +1874,12 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
         return [{
                 "propName": "value",
                 "methodName": "watchValue"
+            }, {
+                "propName": "disabled",
+                "methodName": "watchDisabledReadonly"
+            }, {
+                "propName": "readonly",
+                "methodName": "watchDisabledReadonly"
             }];
     }
     static get listeners() {
@@ -1493,6 +1895,12 @@ export class Select extends Mixin(...DefaultMixins, ComponentIdMixin, AriaActive
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "onOverflowRemoveButtonKeyDown",
+                "target": undefined,
+                "capture": true,
+                "passive": false
             }];
     }
     static get attachInternalsMemberName() { return "formInternals"; }

package/dist/collection/components/select-item/select-item.css

@@ -23,4 +23,9 @@
 
 :host(.display-none) {
   display: none;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
 }

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

@@ -33,6 +33,13 @@ export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, Compo
      * Flag indicating whether the item is selected
      */
     selected = false;
+    /**
+     * Disable the item. A disabled item cannot be selected via mouse or keyboard
+     * and is excluded from the focusable items of the parent ix-select.
+     *
+     * @since 5.1.0
+     */
+    disabled = false;
     /**
      * @internal
      */
@@ -78,12 +85,12 @@ export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, Compo
             ...this.inheritAriaAttributes,
             'aria-label': this.inheritAriaAttributes['aria-label'] ?? this.label,
         };
-        return (h(Host, { key: '41ab96fb19faa443d399c320bb1fd0ddfd436afb', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
+        return (h(Host, { key: 'adb8da016414dafc839fff44acbe5dd7d254c188', ...ariaAttributes, id: this.getHostElementId(), disableAriaSelectHandling: true, class: {
                 [IX_FOCUS_VISIBLE]: true,
-            }, "aria-hidden": "true", role: "presentation" }, h("ix-dropdown-item", { key: 'b346f53bce7b1294fb31f723b5446f4bcf133d88', "aria-hidden": "true", itemRole: "option", class: {
+            }, "aria-hidden": "true", role: "presentation" }, h("ix-dropdown-item", { key: '156824791385b920b04cb389553e020cf3f3183b', "aria-hidden": "true", itemRole: "option", class: {
                 'select-item-checked': this.selected,
                 [IX_FOCUS_VISIBLE_ACTIVE]: this.ixFocusVisible,
-            }, checked: this.selected, label: this.label ? this.label : this.value, ref: this.dropdownItemRef })));
+            }, checked: this.selected, disabled: this.disabled, label: this.label ? this.label : this.value, ref: this.dropdownItemRef })));
     }
     static get is() { return "ix-select-item"; }
     static get encapsulation() { return "shadow"; }
@@ -157,6 +164,29 @@ export class SelectItem extends Mixin(...DefaultMixins, FocusVisibleMixin, Compo
                 "attribute": "selected",
                 "defaultValue": "false"
             },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.1.0"
+                        }],
+                    "text": "Disable the item. A disabled item cannot be selected via mouse or keyboard\nand is excluded from the focusable items of the parent ix-select."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
             "hover": {
                 "type": "boolean",
                 "mutable": false,