@ukic/web-components 3.20.0 → 3.22.0

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

@@ -1,5 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { Host, h, forceUpdate, } from "@stencil/core";
-import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, getOptionsWithoutGroupTitlesCount, addFormResetListener, removeFormResetListener, removeDisabledFalse, checkSlotInChildMutations, isSlotUsed, isMacDevice, } from "../../utils/helpers";
+import { addFormResetListener, checkSlotInChildMutations, getInputDescribedByText, isMobileOrTablet, isSlotUsed, removeDisabledFalse, removeFormResetListener, renderHiddenInput, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcInformationStatus, } from "../../utils/types";
 import Expand from "./assets/Expand.svg";
@@ -12,22 +24,18 @@ const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "tabindex", "title"];
  */
 export class Select {
     constructor() {
-        this.blurredBecauseButtonPressed = false;
-        this.hasSetDefaultValue = false;
-        this.hasTimedOut = false;
-        this.inheritedAttributes = {};
-        this.initialOptionsEmpty = false;
         this.inputId = `ic-select-input-${inputIds++}`;
         this.menuId = `${this.inputId}-menu`;
-        this.retryButtonClick = false;
-        this.searchableMenuItemSelected = false;
-        this.ungroupedOptions = [];
+        this.inheritedAttributes = {};
         this.hostMutationObserver = null;
-        this.clearButtonFocused = false;
-        this.noOptions = null;
-        this.open = false;
+        this.timeoutTimer = null;
+        this.hasTimedOut = false;
+        this.initialRender = true;
         this.pressedCharacters = "";
-        this.searchableSelectInputValue = null;
+        this.hasError = false;
+        this.searchableSelectInputValue = "";
+        this.selectButtonAriaLiveText = "";
+        this.selectInputAriaLiveText = "";
         /**
          * If `true`, the disabled state will be set.
          */
@@ -124,6 +132,10 @@ export class Select {
          * The text to display as the validation message.
          */
         this.validationText = "";
+        /**
+         * If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability.
+         */
+        this.useNativeSelectOnMobile = true;
         /**
          * If `true`, the loading state will be triggered when fetching options asynchronously.
          */
@@ -132,8 +144,7 @@ export class Select {
          * The possible selection options.
          */
         this.options = [];
-        this.filteredOptions = this.options;
-        this.uniqueOptions = this.options;
+        this.flatOptions = [];
         /**
          * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
          */
@@ -146,147 +157,125 @@ export class Select {
          */
         this.value = null;
         this.initialValue = this.value;
-        this.inputValueToFilter = this.value;
-        // triggered when attributes of host element change
-        this.hostMutationCallback = (mutationList) => {
-            let forceComponentUpdate = false;
-            mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
-                if (attributeName) {
-                    const attribute = this.el.getAttribute(attributeName);
-                    if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {
-                        this.inheritedAttributes[attributeName] = attribute;
-                        forceComponentUpdate = true;
-                    }
-                }
-                else if (type === "childList") {
-                    forceComponentUpdate = checkSlotInChildMutations(addedNodes, removedNodes, "icon");
-                }
-            });
-            if (forceComponentUpdate) {
-                forceUpdate(this);
+        this.open = false;
+        this.getValidatedValue = (value) => {
+            const validValues = this.flatOptions.map((opt) => opt.value);
+            if (validValues.length === 0)
+                return value;
+            if (this.multiple) {
+                if (!value)
+                    return null;
+                const arr = Array.isArray(value) ? value : [value]; // Ensure value is an array
+                const filtered = validValues.filter((v) => arr.includes(v)); // Keep only valid values
+                return filtered.length > 0 ? filtered : null;
+            }
+            else {
+                return validValues.includes(value) ? value : null;
             }
         };
-        this.handleRetry = (ev) => {
-            var _a;
-            if (ev.detail.keyPressed)
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
-            this.blurredBecauseButtonPressed = true;
-            this.retryButtonClick = true;
-            this.hasSetDefaultValue = true;
-            this.icRetryLoad.emit({
-                value: this.searchable
-                    ? this.searchableSelectInputValue
-                    : this.hiddenInputValue,
-            });
+        this.getFilteredOptions = (searchString, searchMatchPosition, includeDescriptionsInSearch, includeGroupTitlesInSearch) => {
+            const search = searchString.toLowerCase();
+            const match = (text, method) => method === "anywhere" ? text.includes(search) : text.startsWith(search);
+            return this.unflattenOptions(this.flatOptions.filter((option) => {
+                var _a, _b, _c, _d;
+                const label = option.label.toLowerCase();
+                const group = (_b = (_a = option.group) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+                const description = (_d = (_c = option.description) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== null && _d !== void 0 ? _d : "";
+                return (match(label, searchMatchPosition) ||
+                    (includeDescriptionsInSearch &&
+                        match(description, searchMatchPosition)) ||
+                    (includeGroupTitlesInSearch && match(group, searchMatchPosition)));
+            }));
         };
-        this.emitIcChange = (value) => {
-            // If "Select all" button clicked, replace value with new value (array of all option values)
-            if (this.multiple && !Array.isArray(value) && value !== null) {
-                // Update selected options - adds / removes them, in order of option list
-                // Create new array if value prop is undefined
-                if (this.value) {
-                    let valueArray = this.value.slice();
-                    if (this.value.includes(value)) {
-                        valueArray.splice(valueArray.indexOf(value), 1);
-                    }
-                    else {
-                        valueArray.push(value);
-                        valueArray = this.getValueSortedByOptions(valueArray);
+        this.getOptions = () => {
+            const options = this.searchable &&
+                !this.disableAutoFiltering &&
+                this.searchableSelectInputValue
+                ? this.getFilteredOptions(this.searchableSelectInputValue, this.searchMatchPosition, this.includeDescriptionsInSearch, this.includeGroupTitlesInSearch)
+                : this.unflattenOptions(this.flatOptions);
+            if (this.hasTimedOut)
+                return [{ label: this.loadingErrorLabel, value: "", timedOut: true }];
+            if (this.loading)
+                return [{ label: this.loadingLabel, value: "", loading: true }];
+            if (options.length > 0)
+                return options;
+            return [{ label: this.emptyOptionListText, value: "" }];
+        };
+        this.getFlatOptions = (options) => options.flatMap((item) => ("children" in item && item.children
+            ? [...item.children.map((child) => (Object.assign({ group: item.label }, child)))]
+            : [item]));
+        this.unflattenOptions = (flatOptions) => {
+            const groupMap = new Map();
+            const result = [];
+            for (const option of flatOptions) {
+                if (option.group) {
+                    let group = groupMap.get(option.group);
+                    if (!group) {
+                        group = { label: option.group, children: [] };
+                        groupMap.set(option.group, group);
+                        result.push(group);
                     }
-                    this.value = valueArray.length === 0 ? null : valueArray;
+                    const { group: _ } = option, rest = __rest(option, ["group"]);
+                    group.children.push(rest);
                 }
                 else {
-                    this.value = [value];
+                    result.push(option);
                 }
             }
-            else {
-                this.value = value;
+            return result;
+        };
+        this.getLabelFromValue = (value) => { var _a, _b; return (_b = (_a = this.flatOptions.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : ""; };
+        // Construct the string that will be shown in the select input or button
+        this.getLabelString = () => {
+            if (Array.isArray(this.value)) {
+                return this.value.map(this.getLabelFromValue).filter(Boolean).join(", ");
             }
-            this.icChange.emit({ value: this.multiple ? this.value : value });
+            return (this.getLabelFromValue(this.value) ||
+                (this.searchable ? "" : this.placeholder));
         };
-        this.emitIcInput = (value) => {
-            clearTimeout(this.debounceIcInput);
-            this.debounceIcInput = window.setTimeout(() => this.icInput.emit({ value }), this.currDebounce);
+        this.handleClick = (event) => {
+            var _a;
+            if (event.detail !== 0) {
+                (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleClickOpen();
+            }
         };
-        this.setOptions = () => {
-            if (!this.hasTimedOut && this.options !== this.noOptions) {
-                this.loading = false;
-                clearTimeout(this.timeoutTimer);
-                if (this.options.length > 0) {
-                    this.setOptionsValuesFromLabels();
-                    this.uniqueOptions = this.deduplicateOptions(this.options);
-                }
-                else {
-                    this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-                    this.uniqueOptions = this.noOptions;
-                }
-                this.filteredOptions = this.uniqueOptions;
-                if (this.isExternalFiltering()) {
-                    // When searchable select
-                    this.noOptions = null;
-                    this.updateSearchableSelectResultAriaLive();
-                    this.setDefaultValue();
-                }
-                else if (this.initialOptionsEmpty) {
-                    this.setDefaultValue();
-                    this.initialOptionsEmpty = false;
-                }
+        this.handleExpandIconMouseDown = (event) => {
+            var _a;
+            if (!this.disabled) {
+                event.preventDefault();
+                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
+                this.handleClick(event);
             }
-            else if (!this.searchable) {
-                this.options = this.noOptions || [];
+        };
+        this.handleBlur = ({ relatedTarget }) => {
+            var _a, _b;
+            const target = relatedTarget;
+            if (this.el.contains(target) ||
+                ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target)) ||
+                ((_b = this.menu) === null || _b === void 0 ? void 0 : _b.contains(target)) ||
+                target === this.clearButton) {
+                return;
             }
+            this.open = false;
+            this.handleFocusIndicatorDisplay();
+            if (this.searchable) {
+                this.searchableSelectInputValue = "";
+            }
+            this.icBlur.emit();
         };
-        /**
-         * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
-         * @param options array of IcMenuOptions
-         * @returns a new options object, with all entries possessing a duplicate 'value' field removed
-         */
-        this.deduplicateOptions = (options) => {
-            const uniqueValues = [];
-            const dedupedOptions = [];
-            options.forEach((option) => {
-                if (option.children) {
-                    //If an option has children, we will loop through them
-                    const dedupedChildren = [];
-                    option.children.forEach((child) => {
-                        if (uniqueValues.includes(child.value)) {
-                            console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${child.value}) which has been removed.`);
-                        }
-                        else {
-                            uniqueValues.push(child.value);
-                            dedupedChildren.push(child);
-                        }
-                    });
-                    // construct a modified option, inserting the deduplicated children alongside the original information
-                    dedupedOptions.push(Object.assign(Object.assign({}, option), { children: dedupedChildren }));
-                }
-                else {
-                    // If an option does not have children, assess to see if it's value has been included already
-                    if (uniqueValues.includes(option.value)) {
-                        console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${option.value}) which has been removed.`);
-                    }
-                    else {
-                        uniqueValues.push(option.value);
-                        dedupedOptions.push(option);
-                    }
-                }
-            });
-            return dedupedOptions;
+        this.handleTimeoutBlur = (event) => {
+            this.handleBlur(event.detail.ev);
         };
-        /**
-         * Loop through options array and for all options with no value, infer it from the label
-         */
-        this.setOptionsValuesFromLabels = () => {
-            if (this.options.length > 0) {
-                this.options.map((option) => {
-                    if (!option.value) {
-                        option.value = option.label;
-                    }
-                });
-            }
+        this.handleFocus = () => {
+            this.icFocus.emit();
         };
-        this.setUngroupedOptions = (event) => {
-            this.ungroupedOptions = event.detail.options;
+        this.handleClear = () => {
+            this.clearTimer();
+            this.loading = false;
+            this.value = null;
+            this.searchableSelectInputValue = "";
+            this.icClear.emit();
+            this.setFocus();
         };
         this.setTextColor = () => {
             if (this.nativeSelectElement) {
@@ -296,94 +285,13 @@ export class Select {
                         : "select-option-selected";
             }
         };
-        this.setMenuChange = (open) => {
-            if (this.open !== open) {
-                this.open = open;
-            }
-        };
-        this.getLabelFromValue = (value) => getLabelFromValue(value, this.uniqueOptions);
-        this.getMultipleOptionsString = (selectedValues) => selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.map((value) => this.getLabelFromValue(value)).filter((label) => !!label).join(", ");
-        this.getFilteredChildMenuOptions = (option) => (Object.assign(Object.assign({}, option), { children: option.children &&
-                getFilteredMenuOptions(option.children, this.searchable && !!this.includeDescriptionsInSearch, this.searchable
-                    ? this.searchableSelectInputValue || ""
-                    : this.pressedCharacters, this.searchable ? this.searchMatchPosition : "start") }));
-        // (For multi-select) get value array, i.e. selected option values, in order they appear in option list
-        this.getValueSortedByOptions = (value) => {
-            const valueArray = value;
-            const valuesFromAllOptions = this.ungroupedOptions.map((option) => option.value);
-            valueArray.sort((a, b) => valuesFromAllOptions.indexOf(a) - valuesFromAllOptions.indexOf(b));
-            return valueArray;
-        };
         this.handleNativeSelectChange = () => {
             if (this.nativeSelectElement) {
                 this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
-                this.emitIcChange(this.nativeSelectElement.value);
+                this.icChange.emit({ value: this.nativeSelectElement.value });
             }
             this.setTextColor();
         };
-        // Handle option select for when a custom input box and menu is rendered
-        // (rather than native <select> - rendered when viewed on a mobile / tablet screen)
-        this.handleCustomSelectChange = (event) => {
-            var _a, _b;
-            const { value, label, optionId } = event.detail;
-            if (label === this.emptyOptionListText) {
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            if (this.searchable) {
-                this.value = value || null;
-                this.searchableMenuItemSelected = true;
-                // After editing the input, if selecting the same option as before, set the input value to label again
-                if (this.value === this.currValue) {
-                    this.searchableSelectInputValue =
-                        this.getLabelFromValue(this.value) || null;
-                }
-                this.inputValueToFilter = null;
-                this.hiddenInputValue =
-                    this.getValueFromLabel(this.searchableSelectInputValue) || null;
-            }
-            if (value) {
-                if (this.multiple && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(value))) {
-                    this.icOptionDeselect.emit({ value });
-                }
-                else {
-                    this.icOptionSelect.emit({ value });
-                }
-            }
-            this.ariaActiveDescendant = optionId;
-            this.emitIcChange(value || null);
-        };
-        this.handleSelectAllChange = ({ detail, }) => {
-            const allValues = this.ungroupedOptions
-                .filter((option) => !option.disabled)
-                .map((option) => option.value);
-            if (detail.select) {
-                // Only emit icOptionSelect for all values that are newly selected
-                const unselectedValues = this.value
-                    ? allValues.filter((value) => this.value && !this.value.includes(value))
-                    : allValues;
-                unselectedValues.forEach((value) => this.icOptionSelect.emit({ value }));
-            }
-            else {
-                // Only emit icOptionDeselect for values that were selected
-                this.value.forEach((value) => this.icOptionDeselect.emit({ value }));
-            }
-            this.emitIcChange(detail.select ? allValues : null);
-        };
-        this.handleMenuChange = (event) => {
-            this.open = event.detail.open;
-            this.pressedCharacters = "";
-            if (this.searchable)
-                this.handleFocusIndicatorDisplay();
-        };
-        // clears the debounce delay when navigating the menu with arrow keys etc
-        // to prevent delay in change event, which should only occur when typing in input
-        this.handleMenuKeyPress = (ev) => {
-            ev.cancelBubble = true;
-            if (!this.multiple) {
-                this.handleCharacterKeyDown(ev.detail.key);
-            }
-        };
         this.handleFocusIndicatorDisplay = () => {
             var _a;
             const focusIndicator = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".focus-indicator");
@@ -396,58 +304,27 @@ export class Select {
                 }
             }
         };
-        this.handleMouseDown = (event) => {
-            if (!this.open) {
-                event.preventDefault();
-            }
-        };
-        this.isExternalFiltering = () => this.searchable && !!this.disableAutoFiltering;
-        this.handleClick = (event) => {
+        this.handleKeyDown = (event) => {
             var _a, _b;
-            if (!this.open && this.menu) {
-                if (this.isExternalFiltering()) {
-                    this.menu.options = this.filteredOptions;
+            if (!(event.key === " " && this.pressedCharacters.length > 0)) {
+                if (this.open) {
+                    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleMenuKeyDown(event);
                 }
-                else if (!this.hasTimedOut &&
-                    !this.loading &&
-                    !((_a = this.noOptions) === null || _a === void 0 ? void 0 : _a.length) &&
-                    (!this.searchable || this.searchableMenuItemSelected)) {
-                    this.noOptions = null;
-                    this.menu.options = this.uniqueOptions;
+                else {
+                    (_b = this.menu) === null || _b === void 0 ? void 0 : _b.handleKeyboardOpen(event);
                 }
             }
-            if (event.detail !== 0) {
-                (_b = this.menu) === null || _b === void 0 ? void 0 : _b.handleClickOpen();
-            }
-        };
-        this.handleExpandIconMouseDown = (event) => {
-            var _a;
-            if (!this.disabled) {
-                event.preventDefault();
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
-                this.handleClick(event);
-            }
-        };
-        this.handleClear = (event) => {
-            var _a, _b;
-            event.stopPropagation();
-            this.hasTimedOut = false;
-            clearTimeout(this.timeoutTimer);
-            this.clearInput();
-            this.emitIcChange(null);
-            this.icClear.emit();
-            if (this.searchable) {
-                this.hiddenInputValue = null;
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                (_b = this.customSelectElement) === null || _b === void 0 ? void 0 : _b.focus();
+            if (!this.multiple &&
+                !this.searchable &&
+                !this.selectOnEnter &&
+                /^[a-zA-Z0-9 ]$/.test(event.key)) {
+                this.handleCharacterKeyDown(event.key);
             }
         };
         this.handleCharacterKeyDown = (key) => {
             // Only close menu when space is pressed if not being used alongside character keys to quickly select options
             if (this.open && key === " " && this.pressedCharacters.length === 0) {
-                this.setMenuChange(false);
+                this.open = false;
             }
             if (key.length !== 1 || this.searchable) {
                 this.pressedCharacters = "";
@@ -457,385 +334,316 @@ export class Select {
             this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
             if (key !== " " || !!this.pressedCharacters) {
                 this.pressedCharacters += key;
-                this.handleFilter();
-                if (!this.noOptions) {
-                    this.emitIcChange(this.filteredOptions[0].value);
+                const filteredOptions = this.getFilteredOptions(this.pressedCharacters, "start", false, false);
+                if (filteredOptions.length > 0) {
+                    const firstOption = filteredOptions[0];
+                    if ("children" in firstOption) {
+                        this.value = firstOption.children[0].value;
+                    }
+                    else {
+                        this.value = firstOption.value;
+                    }
                 }
             }
         };
         this.handleNativeSelectKeyDown = (event) => {
-            if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
-                event.cancelBubble = true;
-            }
-            this.handleCharacterKeyDown(event.key);
+            this.handleKeyDown(event);
         };
-        this.handleKeyDown = (event) => {
-            var _a;
-            if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
-                event.cancelBubble = true;
+        this.handleSelectChange = (event) => {
+            const { value } = event.detail;
+            if (!value || this.getLabelFromValue(value) === this.emptyOptionListText) {
+                this.value = null;
+                return;
             }
-            const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
-            if (this.menu && !this.open) {
-                if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
-                    this.menu.options = this.filteredOptions;
+            if (this.multiple) {
+                let valueArray = Array.isArray(this.value) ? [...this.value] : [];
+                const index = valueArray.indexOf(value);
+                if (index > -1) {
+                    valueArray.splice(index, 1);
+                    this.icOptionDeselect.emit({ value });
                 }
-                else if (!this.hasTimedOut) {
-                    this.noOptions = null;
-                    this.menu.options = this.uniqueOptions;
+                else {
+                    this.icOptionSelect.emit({ value });
+                    valueArray.push(value);
+                    valueArray = this.getValidatedValue(valueArray);
                 }
-            }
-            if (this.open && event.key === "Enter") {
-                this.setMenuChange(false);
+                this.value = valueArray.length ? valueArray : null;
             }
             else {
-                if (!isArrowKey || this.noOptions === null) {
-                    if (event.key !== " " || this.pressedCharacters.length <= 0) {
-                        // Keyboard events get passed onto ic-menu except in the case of ctrl-a on a searchable select
-                        const isCtrlA = event.key === "a" &&
-                            ((isMacDevice() && event.metaKey) ||
-                                (!isMacDevice() && event.ctrlKey));
-                        if (!(this.searchable && isCtrlA)) {
-                            (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleKeyboardOpen(event);
-                        }
-                    }
-                    if (!this.multiple) {
-                        this.handleCharacterKeyDown(event.key);
-                    }
-                }
-            }
-        };
-        this.handleClearButtonFocus = () => {
-            this.clearButtonFocused = true;
-        };
-        this.handleClearButtonBlur = (ev) => {
-            var _a;
-            const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
-            if ((!this.searchableSelectElement ||
-                ev.relatedTarget !== this.searchableSelectElement) &&
-                (!retryButton || ev.relatedTarget !== retryButton)) {
-                this.setMenuChange(false);
-                this.handleFocusIndicatorDisplay();
+                this.icOptionSelect.emit({ value });
+                this.value = value;
+                if (this.searchable)
+                    this.searchableSelectInputValue = "";
             }
-            this.clearButtonFocused = false;
         };
-        this.handleFilter = () => {
-            var _a;
-            const options = this.deduplicateOptions(this.searchable ? [...this.uniqueOptions] : this.ungroupedOptions);
-            const isGrouped = options.some((option) => !!option.children);
-            let newFilteredOptions = [];
-            let menuOptionsFiltered;
-            if (this.searchable) {
-                menuOptionsFiltered = getFilteredMenuOptions(options, !!this.includeDescriptionsInSearch, this.inputValueToFilter || "", this.searchMatchPosition);
-                this.searchableMenuItemSelected = false;
+        this.handleSelectAllChange = ({ detail, }) => {
+            const allSelectableValues = this.flatOptions
+                .filter((option) => !option.disabled)
+                .map((option) => option.value);
+            if (detail.select) {
+                allSelectableValues
+                    .filter((value) => { var _a; return !((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(value); })
+                    .forEach((value) => {
+                    this.icOptionSelect.emit({ value });
+                });
+                this.value = allSelectableValues;
             }
             else {
-                menuOptionsFiltered = getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
-            }
-            if (!isGrouped &&
-                ((_a = menuOptionsFiltered[0]) === null || _a === void 0 ? void 0 : _a.label) !== this.emptyOptionListText) {
-                newFilteredOptions = menuOptionsFiltered;
-            }
-            else if (isGrouped) {
-                newFilteredOptions = options.map((option) => this.includeGroupTitlesInSearch &&
-                    menuOptionsFiltered.indexOf(option) !== -1
-                    ? option
-                    : this.getFilteredChildMenuOptions(option));
-            }
-            if (newFilteredOptions.length > 0 &&
-                (!isGrouped ||
-                    newFilteredOptions.some(({ children }) => children && children.length > 0))) {
-                this.noOptions = null;
-                this.filteredOptions = newFilteredOptions;
+                this.value.forEach((value) => this.icOptionDeselect.emit({ value }));
+                this.value = null;
             }
-            else {
-                this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-                this.filteredOptions = this.noOptions;
+        };
+        this.handleFormReset = () => {
+            this.value = this.initialValue;
+            this.searchableSelectInputValue = "";
+            if (this.searchable) {
+                this.hiddenInputValue = this.initialValue;
             }
         };
-        /**
-         * Put the select component into loading state.
-         * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
-         */
-        this.triggerLoading = () => {
+        this.handleRetry = () => {
+            this.clearTimer();
             this.hasTimedOut = false;
-            this.noOptions = [{ label: this.loadingLabel, value: "", loading: true }];
-            if (this.filteredOptions !== this.noOptions && this.searchable) {
-                this.filteredOptions = this.noOptions;
-            }
-            else if (this.uniqueOptions !== this.noOptions && !this.searchable) {
-                this.uniqueOptions = this.noOptions;
-            }
-            if (this.timeout) {
-                this.timeoutTimer = window.setTimeout(() => {
-                    this.loading = false;
-                    this.hasTimedOut = true;
-                    this.noOptions = [
-                        { label: this.loadingErrorLabel, value: "", timedOut: true },
-                    ];
-                    this.filteredOptions = this.noOptions;
-                    if (!this.searchable)
-                        this.uniqueOptions = this.noOptions;
-                }, this.timeout);
-            }
+            this.hasError = false;
+            this.loading = true;
+            this.icRetryLoad.emit({
+                value: this.searchable
+                    ? this.searchableSelectInputValue
+                    : this.hiddenInputValue,
+            });
+            this.setFocus();
         };
-        this.getValueFromLabel = (label) => { var _a; return label && ((_a = this.uniqueOptions.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value); };
         this.handleSearchableSelectInput = (event) => {
-            this.searchableSelectInputValue = event.target.value;
-            this.emitIcInput(this.searchableSelectInputValue);
-            // De-select previous selection when input is edited
-            // Only emit icChange once when editing input
-            if (this.value != null) {
-                this.emitIcChange(null);
-            }
-            this.hiddenInputValue = null;
-            this.inputValueToFilter = this.searchableSelectInputValue;
-            this.setMenuChange(true);
-            if (!this.disableAutoFiltering) {
-                this.handleFilter();
-                clearTimeout(this.debounceAria);
-                window.setTimeout(() => {
-                    this.updateSearchableSelectResultAriaLive();
-                }, 800);
-            }
-        };
-        this.updateSearchableSelectResultAriaLive = () => {
             var _a;
-            const searchableSelectResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".searchable-select-results-status");
-            if (searchableSelectResultsStatusEl) {
-                searchableSelectResultsStatusEl.innerText =
-                    this.noOptions !== null ? this.emptyOptionListText : "";
-            }
-        };
-        this.updateMultiSelectedCountAriaLive = () => {
-            var _a, _b;
-            const multiSelectSelectedCountEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".multi-select-selected-count");
-            const selectedCount = `${(_b = this.currValue) === null || _b === void 0 ? void 0 : _b.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
-            if (multiSelectSelectedCountEl &&
-                multiSelectSelectedCountEl.innerText !== selectedCount) {
-                multiSelectSelectedCountEl.innerText = selectedCount;
-            }
-        };
-        this.getDefaultValue = (value) => this.getLabelFromValue(value) || null;
-        this.setDefaultValue = () => {
-            if (!this.hasSetDefaultValue && this.currValue) {
-                this.searchableSelectInputValue = this.searchable
-                    ? this.getDefaultValue(this.currValue)
-                    : null;
-                this.initialValue = this.currValue;
-                this.hasSetDefaultValue = true;
+            this.updateSearchableSelectResultAriaLive();
+            if (!this.multiple) {
+                this.value = null;
             }
+            this.searchableSelectInputValue =
+                (_a = event.target.value) !== null && _a !== void 0 ? _a : "";
+            this.open = true;
+            clearTimeout(this.debounceIcInput);
+            this.debounceIcInput = window.setTimeout(() => this.icInput.emit({ value: this.searchableSelectInputValue }), this.currDebounce);
         };
-        this.onFocus = () => {
-            this.icFocus.emit();
-        };
-        this.onBlur = ({ relatedTarget }) => {
-            var _a;
-            const target = relatedTarget;
-            if (target !== null &&
-                ((target.tagName === "UL" && target.className.includes("menu")) ||
-                    (target.tagName === "LI" && target.className.includes("option")))) {
-                return;
-            }
-            const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
-            if (this.searchable &&
-                !!this.menu &&
-                target !== this.menu &&
-                !Array.from(this.menu.querySelectorAll("[role='option']")).includes(target) &&
-                (!this.clearButton || target !== this.clearButton) &&
-                (!retryButton || target !== retryButton)) {
-                if (!this.retryButtonClick) {
-                    this.setMenuChange(false);
-                    // Clear input field on blur when searchable if no option is selected
-                    if (!this.value) {
-                        this.clearInput();
+        this.hostMutationCallback = (mutationList) => {
+            let forceComponentUpdate = false;
+            mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
+                if (attributeName) {
+                    const attribute = this.el.getAttribute(attributeName);
+                    if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {
+                        this.inheritedAttributes[attributeName] = attribute;
+                        forceComponentUpdate = true;
                     }
                 }
-                this.handleFocusIndicatorDisplay();
+                else if (type === "childList") {
+                    forceComponentUpdate = checkSlotInChildMutations(addedNodes, removedNodes, "icon");
+                }
+            });
+            if (forceComponentUpdate) {
+                forceUpdate(this);
             }
-            this.retryButtonClick = false;
-            this.icBlur.emit();
         };
-        this.onTimeoutBlur = (ev) => {
-            if (ev.detail.ev.relatedTarget !==
-                this.searchableSelectElement &&
-                !this.blurredBecauseButtonPressed) {
-                this.setMenuChange(false);
-                this.handleFocusIndicatorDisplay();
-                this.icBlur.emit();
-            }
-            this.blurredBecauseButtonPressed = false;
+        this.updateSelectButtonAriaLive = () => {
+            const value_label = this.getLabelFromValue(this.value);
+            this.selectButtonAriaLiveText = this.multiple
+                ? `${this.value ? this.value.length : 0} of ${this.flatOptions.length} selected`
+                : this.value
+                    ? value_label !== null && value_label !== void 0 ? value_label : `${value_label} selected`
+                    : "";
         };
-        this.handleFormReset = () => {
-            this.value = this.initialValue;
-            if (this.searchable) {
-                this.searchableSelectInputValue = this.getDefaultValue(this.value);
-                this.hiddenInputValue = this.value;
-            }
+        this.updateSearchableSelectResultAriaLive = () => {
+            var _a, _b;
+            this.selectInputAriaLiveText =
+                ((_b = (_a = this.getOptions()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.label) == this.emptyOptionListText
+                    ? this.emptyOptionListText
+                    : "";
         };
-        this.clearInput = () => {
-            var _a;
-            this.noOptions = null;
-            if (this.searchable) {
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.setAttribute("value", "");
-                this.searchableSelectInputValue = null;
-                this.filteredOptions = this.uniqueOptions;
-            }
+        this.updateAriaActiveDescendant = (event) => {
+            this.ariaActiveDescendant = event.detail.optionId;
         };
-        this.renderNativeOption = (option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === this.currValue }, option.label));
+        this.handleMenuChange = (event) => {
+            this.open = event.detail.open;
+            this.pressedCharacters = "";
+        };
+        this.getDeduplicatedOptions = (flatOptions) => {
+            const seen = new Set();
+            return flatOptions.filter((option) => {
+                if (option.value && seen.has(option.value)) {
+                    console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${option.value}) which has been removed.`);
+                    return false;
+                }
+                if (option.value)
+                    seen.add(option.value);
+                return true;
+            });
+        };
+        this.renderNativeOption = (option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === this.value }, option.label));
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
     loadingHandler(newValue) {
-        newValue ? this.triggerLoading() : this.setOptions();
+        this.hasTimedOut = false;
+        if (newValue) {
+            this.hasError = false;
+            if (this.timeout) {
+                if (this.timeoutTimer) {
+                    this.clearTimer();
+                }
+                this.timeoutTimer = window.setTimeout(() => {
+                    this.loading = false;
+                    this.hasTimedOut = true;
+                    forceUpdate(this);
+                }, this.timeout);
+            }
+        }
+        else {
+            if (this.timeoutTimer) {
+                this.clearTimer();
+            }
+        }
     }
-    watchOptionsHandler() {
-        this.setOptions();
+    clearTimer() {
+        if (this.timeoutTimer) {
+            clearTimeout(this.timeoutTimer);
+            this.timeoutTimer = null;
+        }
+    }
+    optionsChangedHandler() {
+        const flat = this.getFlatOptions(this.options)
+            .filter((option) => option.value != null || option.label != null) // filter out options missing both value and label
+            .map((option) => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, option), { value: (_a = option.value) !== null && _a !== void 0 ? _a : option.label, label: (_b = option.label) !== null && _b !== void 0 ? _b : option.value }));
+        });
+        this.flatOptions = this.getDeduplicatedOptions(flat);
+        if (!this.initialRender)
+            this.loading = false;
+        this.clearTimer();
+        this.updateSelectButtonAriaLive();
     }
     debounceChangedHandler(newValue) {
         if (this.currDebounce !== newValue) {
             this.currDebounce = newValue;
         }
     }
-    valueChangedHandler() {
-        if (this.value !== this.currValue) {
-            if (this.value && this.multiple) {
-                this.currValue = this.getMultipleOptionsString(this.value)
-                    ? this.getValueSortedByOptions(this.value)
-                    : null;
-                this.updateMultiSelectedCountAriaLive();
-            }
-            else {
-                this.currValue = this.getLabelFromValue(this.value)
-                    ? this.value
-                    : null;
-            }
-        }
-        if (this.searchable && this.value) {
-            // Only set if value not null - prevents whole input value being cleared when edited
-            this.searchableSelectInputValue =
-                this.getLabelFromValue(String(this.currValue)) || null;
+    valueChangedHandler(newValue) {
+        const validated = this.getValidatedValue(newValue);
+        const isEqual = Array.isArray(validated) && Array.isArray(this.value)
+            ? validated.length === this.value.length &&
+                validated.every((v, i) => v === this.value[i])
+            : validated === this.value;
+        if (!isEqual) {
+            this.value = validated;
+            return;
         }
+        this.updateSelectButtonAriaLive();
+        this.icChange.emit({ value: this.value });
     }
     openChangedHandler() {
         this.open ? this.icOpen.emit() : this.icClose.emit();
+        if (!this.open) {
+            this.ariaActiveDescendant = undefined;
+        }
+        this.handleFocusIndicatorDisplay();
+    }
+    /**
+     * Sets focus on the select component.
+     */
+    async setFocus() {
+        if (this.nativeSelectElement) {
+            this.nativeSelectElement.focus();
+        }
+        else if (this.selectElement) {
+            this.selectElement.focus();
+        }
+        else if (this.searchableSelectElement) {
+            this.searchableSelectElement.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.nativeSelectElement && !this.disabled) {
+            this.setTextColor();
+        }
+        this.initialRender = false;
     }
     disconnectedCallback() {
         var _a;
         removeFormResetListener(this.el, this.handleFormReset);
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    componentWillLoad() {
-        const valueInOptions = this.multiple
-            ? this.getMultipleOptionsString(this.value)
-            : this.getLabelFromValue(this.value);
-        this.currValue = valueInOptions ? this.value : null;
-        this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
-        removeDisabledFalse(this.disabled, this.el);
-        this.setOptionsValuesFromLabels();
-        addFormResetListener(this.el, this.handleFormReset);
-        if (!this.options.length) {
-            this.initialOptionsEmpty = true;
-            this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-            this.uniqueOptions = this.noOptions;
-            this.filteredOptions = this.noOptions;
-        }
-        else {
-            this.setDefaultValue();
-            this.uniqueOptions = this.deduplicateOptions(this.options);
-        }
+        this.clearTimer();
     }
     componentDidLoad() {
-        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
-        if (this.loading) {
-            this.triggerLoading();
-        }
-        if (this.searchable) {
-            this.hiddenInputValue = this.currValue;
-        }
+        forceUpdate(this);
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
         this.hostMutationObserver.observe(this.el, {
             attributes: true,
             childList: true,
         });
     }
-    componentDidRender() {
-        if (this.nativeSelectElement && !this.disabled) {
-            this.setTextColor();
-        }
-    }
-    /**
-     * Sets focus on the input box.
-     */
-    async setFocus() {
-        if (this.nativeSelectElement) {
-            this.nativeSelectElement.focus();
-        }
-        else if (this.customSelectElement) {
-            this.customSelectElement.focus();
-        }
-        else if (this.searchableSelectElement) {
-            this.searchableSelectElement.focus();
-        }
+    componentWillLoad() {
+        this.optionsChangedHandler();
+        this.value = this.getValidatedValue(this.value);
+        this.initialValue = this.value;
+        if (this.loading)
+            this.loadingHandler(true);
+        addFormResetListener(this.el, this.handleFormReset);
     }
     render() {
-        var _a, _b, _c, _d;
-        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationAriaLive, validationStatus, validationText, currValue, theme, hiddenInputValue, open, inputId, searchableSelectInputValue, loading, value, emptyOptionListText, uniqueOptions, selectOnEnter, form, inheritedAttributes, ariaActiveDescendant, hasTimedOut, filteredOptions, clearButtonFocused, } = this;
-        // HTML inputs only accept 'string' for their value
-        // Does not cause errors when it is a multi-select - sets value correctly, to a comma-separated string
-        renderHiddenInput(this.el, searchable ? hiddenInputValue : currValue, name || inputId, disabled);
-        const invalid = `${validationStatus === IcInformationStatus.Error}`;
-        const showValidation = hasValidationStatus(validationStatus, !!disabled);
-        const describedBy = getInputDescribedByText(this.el, inputId, helperText !== "", showValidation).trim();
-        const valueLabelString = multiple
-            ? this.getMultipleOptionsString(currValue)
-            : this.getLabelFromValue(currValue);
+        const { disabled, searchable, size, fullWidth, theme, readonly, hideLabel, inputId, label, helperText, required, value, options, menuId, multiple, validationStatus, open, showClearButton, selectOnEnter, loading, searchableSelectInputValue, validationText, validationAriaLive, form, ariaActiveDescendant, placeholder, name, inheritedAttributes, selectInputAriaLiveText, selectButtonAriaLiveText, } = this;
+        const hasValue = !!value;
+        const hasInput = !!searchableSelectInputValue;
         const isClearable = !disabled &&
-            (searchable
-                ? !!searchableSelectInputValue
-                : !!currValue && !loading && showClearButton);
-        return (h(Host, { key: '7fe228e078a155a73e2fc94cc2b118c93b4145fe', class: {
+            ((searchable && (hasInput || hasValue)) ||
+                (!searchable && hasValue && !loading && showClearButton));
+        const showValidation = !!validationStatus && !disabled;
+        const invalid = validationStatus === IcInformationStatus.Error;
+        const describedBy = getInputDescribedByText(this.el, inputId, helperText !== "", showValidation).trim();
+        const menuOptions = this.getOptions();
+        const noOptions = disabled ||
+            (menuOptions.length === 1 &&
+                (menuOptions[0].label === this.emptyOptionListText ||
+                    "loading" in menuOptions[0] ||
+                    "timedOut" in menuOptions[0]));
+        renderHiddenInput(this.el, value, name || inputId, disabled);
+        const ClearButton = () => (h("ic-button", { key: '983b6bfae4f3a9d439f23fe022652605d91f0a1e', ref: (el) => (this.clearButton = el), id: "clear-button", "aria-label": this.searchable ? "Clear input" : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onBlur: this.handleBlur, size: size, variant: "icon-tertiary" }));
+        const NativeSelect = () => (h("select", Object.assign({ key: '2fb628398e722cff8c3759229af969600e553485', ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { key: '5fb827fef7ab7c597a2361ac4d019f9e07adb55f', value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => "children" in option ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option)))));
+        const SelectButton = () => (h("div", { key: '47ad04d6da391fcb88a8b6a6a841dec93f53cd74', class: "select-container" }, h("button", { key: '7ee23a4f16c4aca4b287391ac5bf5f6ee4441b07', class: "select-input", role: "combobox", ref: (el) => (this.selectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && value
+                ? `${value.length} of ${this.flatOptions.length} selected, ${this.getLabelString()}`
+                : this.getLabelString()) || placeholder}`, onClick: this.handleClick, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-activedescendant": ariaActiveDescendant }, h("ic-typography", { key: '438cce7c257e37d0a0aef5247d28d31586725a1e', variant: "body", class: {
+                "value-text": true,
+                "with-clear-button": !!isClearable,
+                placeholder: !value,
+            } }, this.getLabelString()), h("div", { key: '8926d05851401339717c159651b802fb41e53096', class: "select-input-end" }, isClearable && h("div", { key: '5c94e4ba98ad972001890d639b00c82887e0fb5d', class: "divider" }), h("span", { key: '23569f5196d66f2b4a834d44006f6a05446598cd', class: {
+                "expand-icon": true,
+                "expand-icon-open": open,
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && h(ClearButton, { key: 'e4165cb01b0bdc1681e3d9490007182b934f40ea' }), h("div", { key: '6208229358ee8ba7a007a08f5e551d494015a347', "aria-live": "polite", "aria-atomic": "true", class: "aria-live-hidden-text" }, selectButtonAriaLiveText)));
+        const SelectInput = () => (h("div", { key: 'af39791c29e8d792c16fed1fffe08db8f621fcac', class: "searchable-select-container" }, h("input", { key: '366bd3c57ad76f130d73ab2390c557b9e8fe98c8', class: {
+                "value-text": true,
+                "select-input": true,
+                "with-clear-button": !!searchableSelectInputValue,
+            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${open}`, "aria-invalid": invalid ? "true" : "false", "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: inputId, value: multiple
+                ? ""
+                : value
+                    ? this.getLabelString()
+                    : searchableSelectInputValue || undefined, disabled: disabled, placeholder: placeholder, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, form: form }), isClearable && (h("div", { key: 'e9260358a6c8ac3683d1de3015064665d32d907f', class: "clear-button-container" }, h(ClearButton, { key: '0c05ed1cf92ac8fde61ba55192a8a1511338239e' }), h("div", { key: 'e44933edcc7c79459f1ecd551eec43a86fd53b11', class: "divider" }))), h("span", { key: '36e7fe34e7d438caab2967fae27bfe4fb2e49041', onMouseDown: this.handleExpandIconMouseDown, class: {
+                "expand-icon": true,
+                "expand-icon-open": open,
+            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { key: 'c3e06f04e62b273b8a7a6f9df0aa27bf71060ed4', "aria-live": "polite", role: "status", class: "aria-live-hidden-text" }, selectInputAriaLiveText)));
+        const ReadOnly = () => (h("ic-typography", { key: '979d342f453fdb2ed79a6cf231d9a40275662a44' }, h("p", { key: '221530958da8731657b5ad4d455041dc3934718f' }, this.getLabelString() === placeholder ? "" : this.getLabelString())));
+        return (h(Host, { key: 'efbdccb0f0b7e86142cd530d52a86f7ce95d6c1c', class: {
                 "ic-select-disabled": disabled,
                 "ic-select-searchable": searchable,
                 [`ic-select-${size}`]: size !== "medium",
                 "ic-select-full-width": fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: this.onBlur }, h("ic-input-container", { key: 'f354e43e2138805bfb8e7f47dad8460c54bc4150', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '5e0a35593115e83abab6de7f4c4c13d0865e4cd0', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: 'a1bb94c8b02a3b859245e384443395b92a24cc87', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '0ce9a0afd7163ad10add85df056d8ed5b1e5e856', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
+            } }, h("ic-input-container", { key: '48fe83c1c79ec578f94a2d8af4b8b452570a421f', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '8410dabe6d0d62c7c1459991631807cfa6546735', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '77ce0ab9ca879ecf515de633ff27ba8e2320cf2c', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '699375a82eb49f5eb351cf95b4822b4cad7bcc1a', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
             !disabled &&
-            (!readonly || !!value) && (h("span", { key: '6976af6d54de212225c8187634faceac225d769e', slot: "left-icon", class: {
+            (!readonly || !!value) && (h("span", { key: 'fcfec6b75fdb0eb41950460af3c6d7dc5ad43657', slot: "left-icon", class: {
                 readonly,
                 "has-value": !!value,
-            } }, h("slot", { key: 'f198b118f799e71cc850ff9b4e8f72b2e6bb531c', name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, valueLabelString))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => option.children ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option))))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
-                "value-text": true,
-                "select-input": true,
-                "with-clear-button": !!searchableSelectInputValue,
-            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: inputId, value: searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: form }), isClearable && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": searchableSelectInputValue &&
-                (currValue === null || loading)
-                ? "Clear input"
-                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
-                "expand-icon": true,
-                "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { role: "combobox", class: "select-input", ref: (el) => (this.customSelectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && currValue
-                ? `${currValue.length} of ${getOptionsWithoutGroupTitlesCount(options)} selected, ${valueLabelString}`
-                : valueLabelString) || placeholder}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-owns": menuId, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
-                "value-text": true,
-                "with-clear-button": isClearable,
-                placeholder: !loading && multiple
-                    ? !value || value.length < 1
-                    : !this.getLabelFromValue(currValue),
-            } }, valueLabelString || placeholder), h("div", { class: "select-input-end" }, isClearable && h("div", { class: "divider" }), h("span", { class: {
-                "expand-icon": true,
-                "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: '34f6484de01345c4ea6d9fcaa1cdc09c394e6904', class: {
-                "no-results": loading ||
-                    hasTimedOut ||
-                    (searchable &&
-                        ((_b = (_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.label) === emptyOptionListText) ||
-                    (!searchable &&
-                        ((_d = (_c = this.uniqueOptions) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.label) === emptyOptionListText),
-            }, ref: (el) => (this.menu = el), inputEl: searchable
-                ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: searchable ? filteredOptions : uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", closeOnSelect: !multiple, multiSelect: multiple ? true : false, searchableSelect: searchable ? true : false })), multiple && (h("div", { key: 'edbcf92bebb2999f1b9dbff3da4299fd3fa21c00', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), h("ic-input-validation", { key: '37d687c64608a1bd70763c2c09351be2d736c624', class: {
+            } }, h("slot", { key: '08d321011ba86b6d50bf3c8c85bf16595c8df657', name: "icon" }))), isMobileOrTablet() && this.useNativeSelectOnMobile && !multiple ? (h(NativeSelect, null)) : readonly ? (h(ReadOnly, null)) : !searchable ? (h(SelectButton, null)) : (h(SelectInput, null))), !(isMobileOrTablet() &&
+            this.useNativeSelectOnMobile &&
+            !multiple) && (h("ic-menu", { key: '3fc0ee9172a93e744174e2f2b7a16c4f327a82c9', ref: (el) => (this.menu = el), class: { "no-results": noOptions }, inputEl: searchable ? this.searchableSelectElement : this.selectElement, allowMenuFocus: false, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: this.getOptions(), value: multiple ? value : value, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onTimeoutBlur: this.handleTimeoutBlur, onMenuOptionId: this.updateAriaActiveDescendant, onClick: this.setFocus, parentEl: this.el, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", onRetryButtonClicked: this.handleRetry, closeOnSelect: !multiple, multiSelect: multiple, searchableSelect: searchable })), h("ic-input-validation", { key: '6b8bd66f22d67776d418e0aac1b41d2f03f3c9cd', class: {
                 "menu-open": open,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
     }
@@ -1421,6 +1229,26 @@ export class Select {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "useNativeSelectOnMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "use-native-select-on-mobile",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": true,
@@ -1445,13 +1273,13 @@ export class Select {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcMenuOption[]",
-                    "resolved": "IcMenuOption[]",
+                    "original": "IcSelectOption[]",
+                    "resolved": "IcSelectOption[]",
                     "references": {
-                        "IcMenuOption": {
+                        "IcSelectOption": {
                             "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcMenuOption"
+                            "path": "./ic-select.types",
+                            "id": "src/components/ic-select/ic-select.types.ts::IcSelectOption"
                         }
                     }
                 },
@@ -1510,19 +1338,16 @@ export class Select {
     static get states() {
         return {
             "ariaActiveDescendant": {},
-            "clearButtonFocused": {},
             "debounceIcInput": {},
             "hiddenInputValue": {},
-            "noOptions": {},
-            "open": {},
-            "pressedCharacters": {},
+            "hasError": {},
             "searchableSelectInputValue": {},
-            "filteredOptions": {},
-            "uniqueOptions": {},
+            "selectButtonAriaLiveText": {},
+            "selectInputAriaLiveText": {},
+            "flatOptions": {},
             "currDebounce": {},
             "initialValue": {},
-            "inputValueToFilter": {},
-            "currValue": {}
+            "open": {}
         };
     }
     static get events() {
@@ -1723,7 +1548,7 @@ export class Select {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on the input box.",
+                    "text": "Sets focus on the select component.",
                     "tags": []
                 }
             }
@@ -1739,7 +1564,7 @@ export class Select {
                 "methodName": "loadingHandler"
             }, {
                 "propName": "options",
-                "methodName": "watchOptionsHandler"
+                "methodName": "optionsChangedHandler"
             }, {
                 "propName": "debounce",
                 "methodName": "debounceChangedHandler"