@ukic/web-components 3.0.0-alpha.2 → 3.0.0-alpha.4

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

@@ -443,12 +443,16 @@ video {
 
 /**
  * @prop --input-width: Width of the input field
+ * @prop --menu-width: Width of the dropdown menu
  * @prop --ic-z-index-menu: z-index of select menu
  */
 
 :host {
   display: block;
   position: relative;
+
+  --ic-input-label-helpertext-padding: var(--ic-space-xxs);
+  --menu-max-height: 100px;
 }
 
 :host(.ic-select-full-width) {
@@ -560,6 +564,23 @@ select:not([disabled]) {
   cursor: auto;
 }
 
+.select-input.with-clear-button {
+  padding-right: 0;
+}
+
+.value-text {
+  max-width: calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));
+  box-sizing: border-box;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  margin-bottom: 0 !important;
+}
+
+.value-text.with-clear-button {
+  padding-right: calc(var(--ic-space-xl) + var(--ic-space-xs));
+}
+
 .searchable-select-container {
   align-items: center;
   display: flex;
@@ -569,7 +590,7 @@ select:not([disabled]) {
 
 .expand-icon {
   height: var(--ic-space-lg);
-  padding-left: var(--ic-space-xs);
+  padding-left: var(--ic-space-xxs);
   color: var(--ic-action-dark);
 }
 
@@ -585,13 +606,14 @@ select:not([disabled]) {
 }
 
 :host(.ic-select-searchable) .expand-icon {
-  padding-left: var(--ic-space-xxs);
+  padding-left: 0;
   height: 2.25rem;
 }
 
 :host(.ic-select-searchable) .expand-icon > svg {
   height: 2.25rem;
-  padding: 0 0.375rem;
+  padding: 0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0
+    var(--ic-space-xxs);
 }
 
 :host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon > svg {
@@ -602,10 +624,6 @@ select:not([disabled]) {
   color: var(--ic-action-dark);
 }
 
-.expand-icon-filled {
-  color: var(--ic-action-dark);
-}
-
 .expand-icon-open,
 :host(.ic-select-searchable) .expand-icon-open {
   transform: rotateX(180deg);
@@ -623,17 +641,11 @@ select:not([disabled]) {
 
 .clear-button-container {
   display: flex;
-  gap: var(--ic-space-xxs);
-  padding-left: 2.375rem;
   align-items: center;
 }
 
-:host(.ic-select-small) .clear-button-container {
-  padding-left: 1.875rem;
-}
-
 .divider {
-  width: var(--ic-border-width);
+  width: var(--ic-space-1px);
   background-color: var(--ic-architectural-400);
   margin: var(--ic-space-xxs) 0;
   border-radius: var(--ic-space-1px);
@@ -644,9 +656,13 @@ select:not([disabled]) {
   height: var(--ic-space-md);
 }
 
+:host(.ic-select-large) .divider {
+  height: var(--ic-space-xl);
+}
+
 .clear-button {
   position: absolute;
-  right: 2.75rem;
+  right: calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));
   border-radius: var(--ic-border-radius);
   transition: box-shadow var(--ic-easing-transition),
     border-radius var(--ic-easing-transition);
@@ -662,7 +678,12 @@ select:not([disabled]) {
   fill: white;
 }
 
-.searchable-select-results-status {
+.clear-button.searchable {
+  position: static;
+}
+
+.searchable-select-results-status,
+.multi-select-selected-count {
   border: 0;
   clip: rect(0, 0, 0, 0, 0);
   height: var(--ic-space-1px);

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

@@ -1,5 +1,5 @@
 import { Host, h, forceUpdate, } from "@stencil/core";
-import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, addFormResetListener, removeFormResetListener, removeDisabledFalse, checkSlotInChildMutations, } from "../../utils/helpers";
+import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, getOptionsWithoutGroupTitlesCount, addFormResetListener, removeFormResetListener, removeDisabledFalse, checkSlotInChildMutations, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcInformationStatus, IcThemeForegroundEnum, } from "../../utils/types";
 import Expand from "./assets/Expand.svg";
@@ -47,17 +47,24 @@ export class Select {
         };
         this.emitIcChange = (value) => {
             if (!this.searchable) {
-                this.value = value;
+                // If "Select all" button clicked, replace value with new value (array of all option values)
+                if (this.multiple && !Array.isArray(value) && value !== null) {
+                    this.handleMultipleSelectChange(value);
+                }
+                else {
+                    this.value = value;
+                }
             }
             clearTimeout(this.debounceIcChange);
             this.debounceIcChange = window.setTimeout(() => {
-                this.icChange.emit({ value: value });
+                const valueToEmit = this.multiple ? this.value : value;
+                this.icChange.emit({ value: valueToEmit });
             }, this.currDebounce);
         };
         this.emitImmediateIcChange = (value) => {
             this.value = value;
             clearTimeout(this.debounceIcChange);
-            this.icChange.emit({ value: value });
+            this.icChange.emit({ value });
         };
         /**
          * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
@@ -130,6 +137,10 @@ export class Select {
         this.getLabelFromValue = (value) => {
             return getLabelFromValue(value, this.uniqueOptions);
         };
+        this.getMultipleOptionsString = (selectedValues) => {
+            const selectedLabels = selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.map((value) => this.getLabelFromValue(value));
+            return selectedLabels === null || selectedLabels === void 0 ? void 0 : selectedLabels.join(", ");
+        };
         this.getFilteredChildMenuOptions = (option) => {
             let children = option.children;
             if (this.searchable) {
@@ -142,18 +153,29 @@ export class Select {
             newOption.children = children;
             return newOption;
         };
+        // (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 = () => {
             this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
             this.emitImmediateIcChange(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;
+            const value = event.detail.value;
             if (this.searchable && event.detail.label === this.emptyOptionListText) {
                 this.searchableSelectElement.focus();
                 return;
             }
             if (this.searchable) {
-                this.value = event.detail.value;
+                this.value = value;
                 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) {
@@ -162,9 +184,59 @@ export class Select {
                 this.inputValueToFilter = null;
                 this.hiddenInputValue = this.getValueFromLabel(this.searchableSelectInputValue);
             }
+            if (this.multiple && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(value))) {
+                this.icOptionDeselect.emit({ value });
+            }
+            else {
+                this.icOptionSelect.emit({ value });
+            }
             this.ariaActiveDescendant = event.detail.optionId;
-            this.icOptionSelect.emit({ value: event.detail.value });
-            this.emitIcChange(event.detail.value);
+            this.emitIcChange(value);
+        };
+        // Update selected options - adds / removes them, in order of option list
+        // Create new array if value prop is undefined
+        this.handleMultipleSelectChange = (value) => {
+            if (this.value) {
+                let valueArray = this.value.slice();
+                if (this.value.includes(value)) {
+                    const valueIndex = valueArray.indexOf(value);
+                    valueArray.splice(valueIndex, 1);
+                }
+                else {
+                    valueArray.push(value);
+                    valueArray = this.getValueSortedByOptions(valueArray);
+                }
+                this.value = valueArray.length === 0 ? null : valueArray;
+            }
+            else {
+                const valueArray = [];
+                valueArray.push(value);
+                this.value = valueArray;
+            }
+        };
+        this.handleSelectAllChange = (event) => {
+            const selectAllOptions = event.detail.select;
+            const allEnabledOptions = this.ungroupedOptions.filter((option) => !option.disabled);
+            const allValues = allEnabledOptions.map((option) => option.value);
+            let newValue;
+            if (selectAllOptions) {
+                let unselectedValues;
+                // Only emit icOptionSelect for all values that are newly selected
+                if (this.value) {
+                    unselectedValues = allValues.filter((value) => this.value && !this.value.includes(value));
+                }
+                else {
+                    unselectedValues = allValues;
+                }
+                unselectedValues.forEach((value) => this.icOptionSelect.emit({ value }));
+                newValue = allValues;
+            }
+            else {
+                // Only emit icOptionDeselect for values that were selected
+                this.value.forEach((value) => this.icOptionDeselect.emit({ value }));
+                newValue = null;
+            }
+            this.emitIcChange(newValue);
         };
         this.handleMenuChange = (event) => {
             this.open = event.detail.open;
@@ -175,10 +247,9 @@ export class Select {
         // to prevent delay in change event, which should only occur when typing in input
         this.handleMenuKeyPress = (ev) => {
             ev.cancelBubble = true;
-            this.handleCharacterKeyDown(ev.detail.key);
-        };
-        this.handleMenuValueChange = (ev) => {
-            this.value = ev.detail.value;
+            if (!this.multiple) {
+                this.handleCharacterKeyDown(ev.detail.key);
+            }
         };
         this.handleFocusIndicatorDisplay = () => {
             const focusIndicator = this.el.shadowRoot.querySelector(".focus-indicator");
@@ -250,10 +321,12 @@ export class Select {
             if (key.length === 1 && !this.searchable) {
                 window.clearTimeout(this.characterKeyPressTimer);
                 this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
-                this.pressedCharacters += key;
-                this.handleFilter();
-                if (!this.noOptions) {
-                    this.emitImmediateIcChange(this.filteredOptions[0].value);
+                if (!(key === " " && !this.pressedCharacters)) {
+                    this.pressedCharacters += key;
+                    this.handleFilter();
+                    if (!this.noOptions) {
+                        this.emitImmediateIcChange(this.filteredOptions[0].value);
+                    }
                 }
             }
             else {
@@ -291,7 +364,9 @@ export class Select {
                         // Keyboard events get passed onto ic-menu
                         this.menu.handleKeyboardOpen(event);
                     }
-                    this.handleCharacterKeyDown(event.key);
+                    if (!this.multiple) {
+                        this.handleCharacterKeyDown(event.key);
+                    }
                 }
             }
         };
@@ -416,7 +491,24 @@ 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`;
+            if (multiSelectSelectedCountEl &&
+                multiSelectSelectedCountEl.innerText !== selectedCount) {
+                multiSelectSelectedCountEl.innerText = selectedCount;
+            }
+        };
         this.getDefaultValue = (value) => this.getLabelFromValue(value) || value || null;
+        this.setDefaultValue = () => {
+            if (!this.hasSetDefaultValue && this.currValue) {
+                this.searchableSelectInputValue =
+                    this.searchable && this.getDefaultValue(this.currValue);
+                this.initialValue = this.currValue;
+                this.hasSetDefaultValue = true;
+            }
+        };
         this.onFocus = () => {
             this.icFocus.emit();
         };
@@ -481,6 +573,7 @@ export class Select {
         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;
@@ -509,10 +602,11 @@ export class Select {
     }
     watchOptionsHandler() {
         var _a;
-        if (!this.hasTimedOut) {
+        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) {
                     this.setOptionsValuesFromLabels();
                     this.noOptions = null;
@@ -548,11 +642,18 @@ export class Select {
     }
     valueChangedHandler() {
         if (this.value !== this.currValue) {
-            this.currValue = this.value;
+            if (this.value && this.multiple) {
+                this.currValue = this.getValueSortedByOptions(this.value);
+                this.updateMultiSelectedCountAriaLive();
+            }
+            else {
+                this.currValue = this.value;
+            }
         }
         if (this.searchable) {
             this.searchableSelectInputValue =
-                this.getLabelFromValue(this.currValue) || this.currValue;
+                this.getLabelFromValue(this.currValue) ||
+                    this.currValue;
         }
     }
     openChangedHandler() {
@@ -622,15 +723,10 @@ export class Select {
             this.updateSearchableSelectResultAriaLive();
         }, 800);
     }
-    setDefaultValue() {
-        if (!this.hasSetDefaultValue && this.currValue) {
-            this.searchableSelectInputValue = this.getDefaultValue(this.currValue);
-            this.initialValue = this.currValue;
-            this.hasSetDefaultValue = true;
-        }
-    }
     render() {
-        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = 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);
         const invalid = `${validationStatus === IcInformationStatus.Error}`;
         const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
@@ -638,6 +734,7 @@ export class Select {
         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,
@@ -646,14 +743,19 @@ export class Select {
             }, 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,
                 ["has-value"]: !!this.value,
-            } }, h("slot", { name: "icon" }))), readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (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", { 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) => {
             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)))));
             }
             else {
                 return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label));
             }
-        }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", 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 &&
+        }))) : 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
                 ? "Clear input"
                 : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
@@ -661,17 +763,22 @@ export class Select {
                 : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
-                "expand-icon-filled": !(currValue == null || currValue === ""),
-            }, 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}, ${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: {
+            }, 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: {
                 "value-text": true,
-                placeholder: this.getLabelFromValue(currValue) === undefined,
-            } }, this.getLabelFromValue(currValue) || placeholder), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
+                "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: {
                 "expand-icon": true,
                 "expand-icon-open": this.open,
-                "expand-icon-filled": !(currValue == null || currValue === ""),
             }, 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", appearance: this.clearButtonFocused
                 ? IcThemeForegroundEnum.Light
-                : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
+                : IcThemeForegroundEnum.Dark }))))), (!isMobileOrTablet() || multiple) && (h("ic-menu", { class: {
                 "no-results": this.loading ||
                     this.hasTimedOut ||
                     (this.noOptions !== null &&
@@ -679,7 +786,9 @@ export class Select {
                         this.noOptions[0].label === this.emptyOptionListText),
             }, 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: currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || this.selectOnEnter ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+                : 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 })))));
     }
     static get is() { return "ic-select"; }
     static get encapsulation() { return "shadow"; }
@@ -779,7 +888,7 @@ export class Select {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true."
+                    "text": "If `true`, the select will fill the width of the container."
                 },
                 "attribute": "full-width",
                 "reflect": false,
@@ -910,6 +1019,24 @@ export class Select {
                 "reflect": false,
                 "defaultValue": "\"Loading...\""
             },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, multiple options can be selected."
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -1036,7 +1163,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown."
+                    "text": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select."
                 },
                 "attribute": "select-on-enter",
                 "reflect": false,
@@ -1078,7 +1205,7 @@ export class Select {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The size of the select component."
+                    "text": "The size of the select."
                 },
                 "attribute": "size",
                 "reflect": false,
@@ -1205,15 +1332,15 @@ export class Select {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input."
+                    "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."
                 },
                 "attribute": "value",
                 "reflect": false
@@ -1364,7 +1491,28 @@ export class Select {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when an option is highlighted within the menu.\nHighlighting a menu item will also trigger an `icChange/onIcChange` due to the value being updated."
+                    "text": "Emitted when an option is selected.\nSelecting an option will also trigger an `icChange/onIcChange` due to the value being updated."
+                },
+                "complexType": {
+                    "original": "IcOptionSelectEventDetail",
+                    "resolved": "IcOptionSelectEventDetail",
+                    "references": {
+                        "IcOptionSelectEventDetail": {
+                            "location": "import",
+                            "path": "../ic-menu/ic-menu.types",
+                            "id": "src/components/ic-menu/ic-menu.types.ts::IcOptionSelectEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "icOptionDeselect",
+                "name": "icOptionDeselect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when `multiple` is `true` and an option is deselected."
                 },
                 "complexType": {
                     "original": "IcOptionSelectEventDetail",