@ukic/web-components 3.0.0-alpha.9 → 3.1.0

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

@@ -19,14 +19,130 @@ export class Select {
         this.searchableMenuItemSelected = false;
         this.ungroupedOptions = [];
         this.hostMutationObserver = null;
+        this.clearButtonFocused = false;
+        this.noOptions = null;
+        this.open = false;
+        this.pressedCharacters = "";
+        this.searchableSelectInputValue = null;
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+         */
+        this.disableAutoFiltering = false;
+        /**
+         * The text displayed when there are no options in the option list.
+         */
+        this.emptyOptionListText = "No results found";
+        /**
+         * If `true`, the select will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * The helper text that will be displayed for additional field guidance.
+         */
+        this.helperText = "";
+        /**
+         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        this.hideLabel = false;
+        /**
+         * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        this.includeDescriptionsInSearch = false;
+        /**
+         * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        this.includeGroupTitlesInSearch = false;
+        /**
+         * The message displayed when external loading times out.
+         */
+        this.loadingErrorLabel = "Loading Error";
+        /**
+         * The message displayed whilst the options are being loaded externally.
+         */
+        this.loadingLabel = "Loading...";
+        /**
+         * If `true`, multiple options can be selected.
+         */
+        this.multiple = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The placeholder value to be displayed.
+         */
+        this.placeholder = "Select an option";
+        /**
+         * If `true`, the readonly state will be set.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the select will require a value.
+         */
+        this.required = false;
+        /**
+         * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
+         */
+        this.searchable = false;
+        /**
+         * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+         */
+        this.searchMatchPosition = "anywhere";
+        /**
+         * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
+         */
+        this.selectOnEnter = false;
+        /**
+         * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
+         */
+        this.showClearButton = false;
+        /**
+         * The size of the select.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The validation status - e.g. 'error' | 'warning' | 'success'.
+         */
+        this.validationStatus = "";
+        /**
+         * The text to display as the validation message.
+         */
+        this.validationText = "";
+        /**
+         * If `true`, the loading state will be triggered when fetching options asynchronously.
+         */
+        this.loading = false;
+        /**
+         * The possible selection options.
+         */
+        this.options = [];
+        this.filteredOptions = this.options;
+        this.uniqueOptions = this.options;
+        /**
+         * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
+         */
+        this.debounce = 0;
+        this.currDebounce = this.debounce;
+        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 (MUTABLE_ATTRIBUTES.includes(attributeName)) {
-                    this.inheritedAttributes[attributeName] =
-                        this.el.getAttribute(attributeName);
-                    forceComponentUpdate = true;
+                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");
@@ -58,7 +174,7 @@ export class Select {
                 this.value = value;
             }
             const valueToEmit = this.multiple ? this.value : value;
-            this.icChange.emit({ value: valueToEmit });
+            this.icChange.emit({ value: valueToEmit || null });
         };
         this.emitIcInput = (value) => {
             clearTimeout(this.debounceIcInput);
@@ -107,8 +223,7 @@ export class Select {
          * Loop through options array and for all options with no value, infer it from the label
          */
         this.setOptionsValuesFromLabels = () => {
-            var _a;
-            if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.options.map) {
+            if (this.options.length > 0) {
                 this.options.map((option) => {
                     if (!option.value) {
                         option.value = option.label;
@@ -120,11 +235,13 @@ export class Select {
             this.ungroupedOptions = event.detail.options;
         };
         this.setTextColor = () => {
-            if (this.nativeSelectElement.selectedIndex === 0) {
-                this.nativeSelectElement.className = "placeholder";
-            }
-            else {
-                this.nativeSelectElement.className = "select-option-selected";
+            if (this.nativeSelectElement) {
+                if (this.nativeSelectElement.selectedIndex === 0) {
+                    this.nativeSelectElement.className = "placeholder";
+                }
+                else {
+                    this.nativeSelectElement.className = "select-option-selected";
+                }
             }
         };
         this.setMenuChange = (open) => {
@@ -136,16 +253,18 @@ export class Select {
             return getLabelFromValue(value, this.uniqueOptions);
         };
         this.getMultipleOptionsString = (selectedValues) => {
-            const selectedLabels = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.map((value) => this.getLabelFromValue(value));
+            const selectedLabels = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.map((value) => this.getLabelFromValue(value)).filter((label) => !!label);
             return selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.join(", ");
         };
         this.getFilteredChildMenuOptions = (option) => {
             let children = option.children;
-            if (this.searchable) {
-                children = getFilteredMenuOptions(option.children, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
-            }
-            else {
-                children = getFilteredMenuOptions(option.children, false, this.pressedCharacters, "start");
+            if (option.children) {
+                if (this.searchable) {
+                    children = getFilteredMenuOptions(option.children, !!this.includeDescriptionsInSearch, this.searchableSelectInputValue || "", this.searchMatchPosition);
+                }
+                else {
+                    children = getFilteredMenuOptions(option.children, false, this.pressedCharacters, "start");
+                }
             }
             const newOption = Object.assign({}, option);
             newOption.children = children;
@@ -159,19 +278,19 @@ export class Select {
             return valueArray;
         };
         this.handleNativeSelectChange = () => {
-            this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
-            this.emitIcChange(this.nativeSelectElement.value);
+            if (this.nativeSelectElement) {
+                this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
+                this.emitIcChange(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;
+            var _a, _b;
             const value = event.detail.value;
             if (event.detail.label === this.emptyOptionListText) {
-                if (this.searchable) {
-                    this.searchableSelectElement.focus();
-                }
+                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
                 return;
             }
             if (this.searchable) {
@@ -179,12 +298,14 @@ export class Select {
                 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);
+                    this.searchableSelectInputValue =
+                        this.getLabelFromValue(this.value) || null;
                 }
                 this.inputValueToFilter = null;
-                this.hiddenInputValue = this.getValueFromLabel(this.searchableSelectInputValue);
+                this.hiddenInputValue =
+                    this.getValueFromLabel(this.searchableSelectInputValue) || null;
             }
-            if (this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(value))) {
+            if (this.multiple && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(value))) {
                 this.icOptionDeselect.emit({ value });
             }
             else {
@@ -252,12 +373,15 @@ export class Select {
             }
         };
         this.handleFocusIndicatorDisplay = () => {
-            const focusIndicator = this.el.shadowRoot.querySelector(".focus-indicator");
-            if (this.open) {
-                focusIndicator.classList.add("focus-indicator-enabled");
-            }
-            else {
-                focusIndicator.classList.remove("focus-indicator-enabled");
+            var _a;
+            const focusIndicator = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".focus-indicator");
+            if (focusIndicator) {
+                if (this.open) {
+                    focusIndicator.classList.add("focus-indicator-enabled");
+                }
+                else {
+                    focusIndicator.classList.remove("focus-indicator-enabled");
+                }
             }
         };
         this.handleMouseDown = (event) => {
@@ -265,10 +389,10 @@ export class Select {
                 event.preventDefault();
             }
         };
-        this.isExternalFiltering = () => this.searchable && this.disableAutoFiltering;
+        this.isExternalFiltering = () => this.searchable && !!this.disableAutoFiltering;
         this.handleClick = (event) => {
-            var _a;
-            if (!this.open) {
+            var _a, _b;
+            if (!this.open && this.menu) {
                 if (this.isExternalFiltering()) {
                     this.menu.options = this.filteredOptions;
                 }
@@ -281,17 +405,19 @@ export class Select {
                 }
             }
             if (event.detail !== 0) {
-                this.menu.handleClickOpen();
+                (_b = this.menu) === null || _b === void 0 ? void 0 : _b.handleClickOpen();
             }
         };
         this.handleExpandIconMouseDown = (event) => {
+            var _a;
             if (!this.disabled) {
                 event.preventDefault();
-                this.searchableSelectElement.focus();
+                (_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);
@@ -300,10 +426,10 @@ export class Select {
             this.icClear.emit();
             if (this.searchable) {
                 this.hiddenInputValue = null;
-                this.searchableSelectElement.focus();
+                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
             }
             else {
-                this.customSelectElement.focus();
+                (_b = this.customSelectElement) === null || _b === void 0 ? void 0 : _b.focus();
             }
         };
         this.handleCharacterKeyDown = (key) => {
@@ -337,11 +463,12 @@ export class Select {
             this.handleCharacterKeyDown(event.key);
         };
         this.handleKeyDown = (event) => {
+            var _a;
             if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
                 event.cancelBubble = true;
             }
             const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
-            if (!this.open) {
+            if (this.menu && !this.open) {
                 if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
                     this.menu.options = this.filteredOptions;
                 }
@@ -359,7 +486,7 @@ export class Select {
                 if (!(isArrowKey && this.noOptions !== null)) {
                     if (!(event.key === " " && this.pressedCharacters.length > 0)) {
                         // Keyboard events get passed onto ic-menu
-                        this.menu.handleKeyboardOpen(event);
+                        (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleKeyboardOpen(event);
                     }
                     if (!this.multiple) {
                         this.handleCharacterKeyDown(event.key);
@@ -392,7 +519,7 @@ export class Select {
             });
             let menuOptionsFiltered;
             if (this.searchable) {
-                menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.inputValueToFilter, this.searchMatchPosition);
+                menuOptionsFiltered = getFilteredMenuOptions(options, !!this.includeDescriptionsInSearch, this.inputValueToFilter || "", this.searchMatchPosition);
                 this.searchableMenuItemSelected = false;
             }
             else {
@@ -421,7 +548,7 @@ export class Select {
             if (isGrouped) {
                 noChildOptionsWhenFiltered = true;
                 newFilteredOptions.map((option) => {
-                    if (option.children.length > 0) {
+                    if (option.children && option.children.length > 0) {
                         noChildOptionsWhenFiltered = false;
                     }
                 });
@@ -463,7 +590,8 @@ export class Select {
         };
         this.getValueFromLabel = (label) => {
             var _a;
-            return (_a = this.uniqueOptions.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
+            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;
@@ -482,7 +610,8 @@ export class Select {
             }
         };
         this.updateSearchableSelectResultAriaLive = () => {
-            const searchableSelectResultsStatusEl = this.el.shadowRoot.querySelector(".searchable-select-results-status");
+            var _a;
+            const searchableSelectResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".searchable-select-results-status");
             if (searchableSelectResultsStatusEl) {
                 if (this.noOptions !== null) {
                     searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
@@ -493,19 +622,20 @@ export class Select {
             }
         };
         this.updateMultiSelectedCountAriaLive = () => {
-            var _a;
-            const multiSelectSelectedCountEl = this.el.shadowRoot.querySelector(".multi-select-selected-count");
-            const selectedCount = `${(_a = this.currValue) === null || _a === void 0 ? void 0 : _a.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
+            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) || value || null;
+        this.getDefaultValue = (value) => this.getLabelFromValue(value) || null;
         this.setDefaultValue = () => {
             if (!this.hasSetDefaultValue && this.currValue) {
-                this.searchableSelectInputValue =
-                    this.searchable && this.getDefaultValue(this.currValue);
+                this.searchableSelectInputValue = this.searchable
+                    ? this.getDefaultValue(this.currValue)
+                    : null;
                 this.initialValue = this.currValue;
                 this.hasSetDefaultValue = true;
             }
@@ -559,57 +689,14 @@ export class Select {
             }
         };
         this.clearInput = () => {
+            var _a;
             this.noOptions = null;
             if (this.searchable) {
-                this.searchableSelectElement.value = null;
+                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.setAttribute("value", "");
                 this.searchableSelectInputValue = null;
                 this.filteredOptions = this.uniqueOptions;
             }
         };
-        this.ariaActiveDescendant = undefined;
-        this.clearButtonFocused = false;
-        this.debounceIcInput = undefined;
-        this.hiddenInputValue = undefined;
-        this.noOptions = null;
-        this.open = false;
-        this.pressedCharacters = "";
-        this.searchableSelectInputValue = null;
-        this.disabled = false;
-        this.disableAutoFiltering = false;
-        this.emptyOptionListText = "No results found";
-        this.form = undefined;
-        this.fullWidth = false;
-        this.helperText = "";
-        this.hideLabel = false;
-        this.includeDescriptionsInSearch = false;
-        this.includeGroupTitlesInSearch = false;
-        this.label = undefined;
-        this.loadingErrorLabel = "Loading Error";
-        this.loadingLabel = "Loading...";
-        this.multiple = false;
-        this.name = this.inputId;
-        this.placeholder = "Select an option";
-        this.readonly = false;
-        this.required = false;
-        this.searchable = false;
-        this.searchMatchPosition = "anywhere";
-        this.selectOnEnter = false;
-        this.showClearButton = false;
-        this.size = "medium";
-        this.timeout = undefined;
-        this.theme = "inherit";
-        this.validationStatus = "";
-        this.validationText = "";
-        this.loading = false;
-        this.options = [];
-        this.filteredOptions = this.options;
-        this.uniqueOptions = this.options;
-        this.debounce = 0;
-        this.currDebounce = this.debounce;
-        this.value = undefined;
-        this.initialValue = this.value;
-        this.inputValueToFilter = this.value;
-        this.currValue = this.value;
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -618,13 +705,12 @@ export class Select {
         newValue && this.triggerLoading();
     }
     watchOptionsHandler() {
-        var _a;
         if (!this.hasTimedOut && this.options !== this.noOptions) {
             this.loading = false;
             clearTimeout(this.timeoutTimer);
             if (this.isExternalFiltering()) {
                 // When searchable select
-                if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+                if (this.options.length > 0) {
                     this.setOptionsValuesFromLabels();
                     this.noOptions = null;
                     this.uniqueOptions = this.deduplicateOptions(this.options);
@@ -650,7 +736,7 @@ export class Select {
         }
         else {
             if (!this.searchable) {
-                this.options = this.noOptions;
+                this.options = this.noOptions || [];
             }
         }
     }
@@ -660,18 +746,21 @@ export class Select {
     valueChangedHandler() {
         if (this.value !== this.currValue) {
             if (this.value && this.multiple) {
-                this.currValue = this.getValueSortedByOptions(this.value);
+                this.currValue = this.getMultipleOptionsString(this.value)
+                    ? this.getValueSortedByOptions(this.value)
+                    : null;
                 this.updateMultiSelectedCountAriaLive();
             }
             else {
-                this.currValue = this.value;
+                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)) ||
-                    this.currValue;
+                this.getLabelFromValue(String(this.currValue)) || null;
         }
     }
     openChangedHandler() {
@@ -683,12 +772,15 @@ export class Select {
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     componentWillLoad() {
-        var _a;
+        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 (!((_a = this.options) === null || _a === void 0 ? void 0 : _a.length)) {
+        if (!this.options.length) {
             this.initialOptionsEmpty = true;
             this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
             this.uniqueOptions = this.noOptions;
@@ -704,7 +796,9 @@ export class Select {
         if (this.loading) {
             this.triggerLoading();
         }
-        this.hiddenInputValue = this.searchable && this.currValue;
+        if (this.searchable) {
+            this.hiddenInputValue = this.currValue;
+        }
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
         this.hostMutationObserver.observe(this.el, {
             attributes: true,
@@ -745,26 +839,31 @@ export class Select {
         const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, theme, } = 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(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
+        renderHiddenInput(true, this.el, name || this.inputId, this.searchable ? this.hiddenInputValue : currValue, disabled);
         const invalid = `${validationStatus === IcInformationStatus.Error}`;
-        const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
+        const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, !!this.disabled)).trim();
         let showLeftIcon = !!this.el.querySelector(`[slot="icon"]`);
         if (showLeftIcon && (disabled || (readonly && !this.value))) {
             showLeftIcon = false;
         }
         const optionsSelectedCount = `${currValue === null || currValue === void 0 ? void 0 : currValue.length} of ${getOptionsWithoutGroupTitlesCount(this.options)} selected`;
-        return (h(Host, { class: {
-                "ic-select-disabled": disabled,
-                "ic-select-searchable": searchable,
+        const valueLabelString = multiple
+            ? this.getMultipleOptionsString(currValue)
+            : this.getLabelFromValue(currValue);
+        const isClearable = !disabled &&
+            (searchable
+                ? this.searchableSelectInputValue
+                : currValue && showClearButton);
+        return (h(Host, { key: '0c1e3c9c3f0f02e6c90f477a92227645bbb383be', class: {
+                "ic-select-disabled": !!disabled,
+                "ic-select-searchable": !!searchable,
                 [`ic-select-${size}`]: size !== "medium",
-                "ic-select-full-width": fullWidth,
+                "ic-select-full-width": !!fullWidth,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { slot: "left-icon", class: {
-                ["readonly"]: readonly,
+            }, onBlur: this.onBlur }, h("ic-input-container", { key: 'd5717cb6d0f74236066e5d21979d19a52d39afcd', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '1bcbd58fcdad81bc02911dc405b554aa03552b6b', for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { key: '72401753a0b711ba9ff7f5b574085fd5fc3e2215', ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, showLeftIcon && (h("span", { key: 'b1d8d94dddea38195ca54d546e894aef314698ee', slot: "left-icon", class: {
+                ["readonly"]: !!readonly,
                 ["has-value"]: !!this.value,
-            } }, h("slot", { name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, multiple
-            ? this.getMultipleOptionsString(currValue)
-            : this.getLabelFromValue(currValue)))) : isMobileOrTablet() && !multiple ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
+            } }, h("slot", { key: '47c722f6b782b628a33c05bad04613ba0ffa17e9', 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: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
             if (option.children) {
                 return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
             }
@@ -774,36 +873,33 @@ export class Select {
         }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: {
                 "select-input": true,
                 "with-clear-button": !!this.searchableSelectInputValue,
-            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${this.open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), this.searchableSelectInputValue &&
-            (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
+            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${this.open}`, "aria-invalid": invalid, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form }), isClearable && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
                 ? "Clear input"
                 : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": this.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", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${(multiple && currValue
-                ? `${optionsSelectedCount}, ${this.getMultipleOptionsString(currValue)}`
-                : this.getLabelFromValue(currValue)) ||
-                placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
+                ? `${optionsSelectedCount}, ${valueLabelString}`
+                : valueLabelString) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, 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": currValue && showClearButton,
-                placeholder: !this.value || (multiple && this.value.length < 1),
-            } }, (multiple
-            ? this.getMultipleOptionsString(currValue)
-            : this.getLabelFromValue(currValue)) ||
-            placeholder), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
+                "with-clear-button": !!isClearable,
+                placeholder: multiple
+                    ? !this.value || this.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": this.open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (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", theme: this.clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { class: {
+            }, 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", theme: this.clearButtonFocused ? "light" : "dark" }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { key: 'f34f8aeca465e1f2cf7b721c06f58e4a0bab4ac3', class: {
                 "no-results": this.loading ||
                     this.hasTimedOut ||
                     (this.noOptions !== null &&
                         this.noOptions[0] &&
                         this.noOptions[0].label === this.emptyOptionListText),
-            }, ref: (el) => (this.menu = el), inputEl: searchable
+            }, ref: (el) => (this.menu = el), inputEl: (searchable
                 ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: this.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: this.searchable || multiple || this.selectOnEnter
+                : this.customSelectElement), inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: this.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: this.searchable || multiple || this.selectOnEnter
                 ? "manual"
-                : "automatic", closeOnSelect: !multiple })), this.multiple && (h("div", { "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+                : "automatic", closeOnSelect: !multiple })), this.multiple && (h("div", { key: '4f7d83b5ce52b334acf98de594c02ad34a58f2f6', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), hasValidationStatus(this.validationStatus, !!this.disabled) && (h("ic-input-validation", { key: '3405974e038368a51105ba901a499e4234df5944', class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText || "", for: this.inputId })))));
     }
     static get is() { return "ic-select"; }
     static get encapsulation() { return "shadow"; }
@@ -825,7 +921,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -834,6 +930,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -843,7 +941,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -852,6 +950,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disable-auto-filtering",
                 "reflect": false,
                 "defaultValue": "false"
@@ -861,15 +961,17 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The text displayed when there are no options in the option list."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "empty-option-list-text",
                 "reflect": false,
                 "defaultValue": "\"No results found\""
@@ -879,7 +981,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -888,6 +990,8 @@ export class Select {
                     "tags": [],
                     "text": "The <form> element to associate the select with."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": false
             },
@@ -896,15 +1000,17 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true`, the select will fill the width of the container."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -914,7 +1020,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -923,6 +1029,8 @@ export class Select {
                     "tags": [],
                     "text": "The helper text that will be displayed for additional field guidance."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "helper-text",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -932,7 +1040,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -941,6 +1049,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "hide-label",
                 "reflect": false,
                 "defaultValue": "false"
@@ -950,7 +1060,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -959,6 +1069,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "include-descriptions-in-search",
                 "reflect": false,
                 "defaultValue": "false"
@@ -968,7 +1080,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -977,6 +1089,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "include-group-titles-in-search",
                 "reflect": false,
                 "defaultValue": "false"
@@ -995,6 +1109,8 @@ export class Select {
                     "tags": [],
                     "text": "The label for the select."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -1003,7 +1119,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1012,6 +1128,8 @@ export class Select {
                     "tags": [],
                     "text": "The message displayed when external loading times out."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading-error-label",
                 "reflect": false,
                 "defaultValue": "\"Loading Error\""
@@ -1021,7 +1139,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1030,6 +1148,8 @@ export class Select {
                     "tags": [],
                     "text": "The message displayed whilst the options are being loaded externally."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading-label",
                 "reflect": false,
                 "defaultValue": "\"Loading...\""
@@ -1039,7 +1159,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1048,6 +1168,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, multiple options can be selected."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1057,7 +1179,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1066,6 +1188,8 @@ export class Select {
                     "tags": [],
                     "text": "The name of the control, which is submitted with the form data."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false,
                 "defaultValue": "this.inputId"
@@ -1075,7 +1199,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1084,6 +1208,8 @@ export class Select {
                     "tags": [],
                     "text": "The placeholder value to be displayed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "\"Select an option\""
@@ -1093,7 +1219,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1102,6 +1228,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the readonly state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1111,7 +1239,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1120,6 +1248,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the select will require a value."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1129,7 +1259,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1138,6 +1268,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "searchable",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1147,7 +1279,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSearchMatchPositions",
-                    "resolved": "\"anywhere\" | \"start\"",
+                    "resolved": "\"anywhere\" | \"start\" | undefined",
                     "references": {
                         "IcSearchMatchPositions": {
                             "location": "import",
@@ -1162,6 +1294,8 @@ export class Select {
                     "tags": [],
                     "text": "Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "search-match-position",
                 "reflect": false,
                 "defaultValue": "\"anywhere\""
@@ -1171,7 +1305,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1180,6 +1314,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "select-on-enter",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1189,7 +1325,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1198,6 +1334,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-clear-button",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1207,7 +1345,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -1222,6 +1360,8 @@ export class Select {
                     "tags": [],
                     "text": "The size of the select."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
@@ -1231,7 +1371,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1240,6 +1380,8 @@ export class Select {
                     "tags": [],
                     "text": "If using external filtering, set a timeout for when loading takes too long."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "timeout",
                 "reflect": false
             },
@@ -1248,7 +1390,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -1263,6 +1405,8 @@ export class Select {
                     "tags": [],
                     "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -1272,7 +1416,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "IcInformationStatusOrEmpty",
-                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\"",
+                    "resolved": "\"\" | \"error\" | \"success\" | \"warning\" | undefined",
                     "references": {
                         "IcInformationStatusOrEmpty": {
                             "location": "import",
@@ -1287,6 +1431,8 @@ export class Select {
                     "tags": [],
                     "text": "The validation status - e.g. 'error' | 'warning' | 'success'."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-status",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -1296,7 +1442,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1305,6 +1451,8 @@ export class Select {
                     "tags": [],
                     "text": "The text to display as the validation message."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "validation-text",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -1314,7 +1462,7 @@ export class Select {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1323,6 +1471,8 @@ export class Select {
                     "tags": [],
                     "text": "If `true`, the loading state will be triggered when fetching options asynchronously."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
@@ -1332,7 +1482,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "IcMenuOption[]",
-                    "resolved": "IcMenuOption[]",
+                    "resolved": "IcMenuOption[] | undefined",
                     "references": {
                         "IcMenuOption": {
                             "location": "import",
@@ -1347,6 +1497,8 @@ export class Select {
                     "tags": [],
                     "text": "The possible selection options."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "debounce": {
@@ -1354,7 +1506,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "number",
-                    "resolved": "number",
+                    "resolved": "number | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1363,6 +1515,8 @@ export class Select {
                     "tags": [],
                     "text": "The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
@@ -1371,8 +1525,8 @@ export class Select {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | string[]",
-                    "resolved": "string | string[]",
+                    "original": "string | string[] | null",
+                    "resolved": "null | string | string[] | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1381,6 +1535,8 @@ export class Select {
                     "tags": [],
                     "text": "The value of the select, reflected by the value of the currently selected option.\nFor the searchable variant, the value is also reflected by the user input.\nFor the multi-select variant, the value must be an array of option values."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }
@@ -1431,13 +1587,13 @@ export class Select {
                     "text": "Emitted when the value changes."
                 },
                 "complexType": {
-                    "original": "IcValueEventDetail",
-                    "resolved": "IcValueEventDetail",
+                    "original": "IcMultiValueEventDetail",
+                    "resolved": "IcMultiValueEventDetail",
                     "references": {
-                        "IcValueEventDetail": {
+                        "IcMultiValueEventDetail": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcValueEventDetail"
+                            "id": "src/utils/types.ts::IcMultiValueEventDetail"
                         }
                     }
                 }
@@ -1497,13 +1653,13 @@ export class Select {
                     "text": "Emitted when a keyboard input occurred."
                 },
                 "complexType": {
-                    "original": "IcValueEventDetail",
-                    "resolved": "IcValueEventDetail",
+                    "original": "IcMultiValueEventDetail",
+                    "resolved": "IcMultiValueEventDetail",
                     "references": {
-                        "IcValueEventDetail": {
+                        "IcMultiValueEventDetail": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcValueEventDetail"
+                            "id": "src/utils/types.ts::IcMultiValueEventDetail"
                         }
                     }
                 }
@@ -1575,13 +1731,13 @@ export class Select {
                     "text": "Emitted when the 'retry loading' button is clicked for a searchable variant."
                 },
                 "complexType": {
-                    "original": "IcValueEventDetail",
-                    "resolved": "IcValueEventDetail",
+                    "original": "IcMultiValueEventDetail",
+                    "resolved": "IcMultiValueEventDetail",
                     "references": {
-                        "IcValueEventDetail": {
+                        "IcMultiValueEventDetail": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcValueEventDetail"
+                            "id": "src/utils/types.ts::IcMultiValueEventDetail"
                         }
                     }
                 }