@uh-design-system/component-library 1.1.0 → 1.2.0-rc.0

package/dist/collection/components/01-base-components/ds-combobox/ds-combobox.js

@@ -1,12 +1,16 @@
-import { forceUpdate, Fragment, h } from "@stencil/core";
+import { forceUpdate, Fragment, h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { debounce, declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
-import { atLeastOneOption, loadingOptions, noResultsFound, removeSelection, searchOrSelectAnOption, thereAreOptionsToBrowse, tryADifferentSearchTerm, tryAgainOrIfTheProblemPersists, weCouldNotLoadOptions, } from "../../../utils/controls/controlUtils";
+import { atLeastOneOption, loadingOptions, multiselectable, noResultsFound, removeSelection, searchOrSelectAnOption, selections, thereAreOptionsToBrowse, tryADifferentSearchTerm, tryAgainOrIfTheProblemPersists, weCouldNotLoadOptions, } from "../../../utils/controls/controlUtils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
-import { FEEDBACK_RESET_TIMEOUT, FEEDBACK_SET_TIMEOUT } from "../../../constants";
+import { FEEDBACK_RESET_TIMEOUT, FEEDBACK_SET_TIMEOUT, SCRIM_HEIGHT } from "../../../constants";
+import { multipleValueFactory } from "../../00-foundations/factories/multipleValueFactory";
 const comboboxIdGenerator = idGenerator('ds-combobox');
-export class DsCombobox {
+export class DsCombobox extends Mixin(multipleValueFactory) {
+    constructor() {
+        super();
+    }
     el;
     inheritedAttributes = {};
     internals;
@@ -14,6 +18,7 @@ export class DsCombobox {
     optionsListRef;
     optionsListInnerRef;
     observer;
+    badgeId;
     labelId;
     assistiveTextId;
     buttonId;
@@ -21,6 +26,7 @@ export class DsCombobox {
     inputValidityId;
     GROUP_ITERATION_STOP = 1000;
     dsFilterChange;
+    dsMultipleChange;
     dsChange;
     dsSelectedOptionValueChange;
     dsSelectedOptionRemoved;
@@ -28,6 +34,7 @@ export class DsCombobox {
     dsValidity;
     dsBlur;
     dsFocus;
+    dsVariant = 'default';
     dsForm;
     dsId = comboboxIdGenerator.next().value;
     dsName = this.dsId;
@@ -56,7 +63,7 @@ export class DsCombobox {
     dsFullWidth = false;
     isOpen = false;
     activeOption = null;
-    selectedOption = null;
+    selectedOptions = [];
     inputValue = '';
     hasTopScrim = false;
     hasBottomScrim = false;
@@ -64,6 +71,11 @@ export class DsCombobox {
     noResults = false;
     hasFocus = false;
     feedback = [];
+    forceUpdateInputValue = false;
+    preventImmediateOpen = false;
+    get DsBadge() {
+        return transformTagName('ds-badge', 'ds-combobox', this.el);
+    }
     get DsOptionGroupTag() {
         return transformTagName('ds-option-group', 'ds-combobox', this.el);
     }
@@ -83,6 +95,9 @@ export class DsCombobox {
             return;
         return this.dsNoResultsText || tryADifferentSearchTerm();
     }
+    get isMultiple() {
+        return this.dsVariant === 'multiple';
+    }
     async setFocus() {
         this.inputRef?.focus();
         this.dsFocus.emit();
@@ -94,33 +109,38 @@ export class DsCombobox {
         return this.getAllOptions();
     }
     async getSelectedOption() {
-        if (!this.selectedOption) {
+        if (this.selectedOptions.length === 0) {
             return null;
         }
-        return {
-            value: this.selectedOption?.dsValue || null,
-            label: this.selectedOption ? await this.selectedOption.getLabel() : null,
-            description: this.selectedOption?.dsDescription || null,
-        };
+        return (await this.getSelectedOptions())[0];
     }
-    dsValueObserver(newValue) {
-        if (newValue === this.selectedOption?.dsValue) {
-            return;
-        }
-        this.setSelectedOptionFromDsValue(newValue);
+    async getSelectedOptions() {
+        return await Promise.all(this.selectedOptions?.map(async (option) => ({
+            value: option.dsValue || null,
+            label: (await option.getLabel()) || null,
+            description: option.dsDescription || null,
+        })));
     }
-    selectedOptionObserver(newValue, oldValue) {
-        if (oldValue) {
-            oldValue.dsSelected = false;
+    selectedOptionsObserver(newValue, oldValue) {
+        const newValues = newValue.map(opt => opt.dsValue);
+        const oldValues = oldValue?.map(opt => opt.dsValue) || [];
+        const removedValues = oldValues.filter(val => !newValues.includes(val));
+        const addedValues = newValues.filter(val => !oldValues.includes(val));
+        const hasChanged = removedValues.length > 0 || addedValues.length > 0;
+        oldValue?.forEach(opt => (opt.dsSelected = false));
+        newValue.forEach(opt => (opt.dsSelected = true));
+        if (hasChanged) {
+            this.dsMultipleChange.emit({ values: newValues, added: addedValues, removed: removedValues });
+            this.dsChange.emit(newValues[0] || null);
+            this.dsValidity.emit({
+                flag: this.internals?.validity.valid ? 'valid' : 'customError',
+                message: this.internals?.validationMessage,
+            });
         }
-        if (newValue) {
-            newValue.dsSelected = true;
+        if (this.forceUpdateInputValue) {
+            this.forceUpdateInputValue = false;
+            this.setInputValue();
         }
-        this.dsChange.emit(newValue?.dsValue || null);
-        this.dsValidity.emit({
-            flag: this.internals?.validity.valid ? 'valid' : 'customError',
-            message: this.internals?.validationMessage,
-        });
     }
     inputValueObserver(newValue) {
         if (this.dsNoResults || this.noResults) {
@@ -130,17 +150,6 @@ export class DsCombobox {
         }
         this.dsFilterChange.emit(newValue);
     }
-    isOpenObserver(newValue) {
-        if (!newValue) {
-            this.setInputValue(this.selectedOption);
-            this.getAllGroups().forEach(group => {
-                group.dsHidden = false;
-            });
-            this.getAllOptions().forEach(option => {
-                option.dsHidden = false;
-            });
-        }
-    }
     hasFocusObserver(newValue) {
         if (newValue) {
             this.dsFocus.emit();
@@ -195,12 +204,35 @@ export class DsCombobox {
         };
         forceUpdate(this);
     }
+    valueObserver(newValue) {
+        this.setSelectedOptionsFromValue(newValue);
+    }
+    dsValueObserver(newValue) {
+        this.forceUpdateInputValue = !this.isOpen;
+        this.value = this.toValue(newValue);
+    }
+    isOpenObserver(newValue) {
+        if (newValue) {
+            document.addEventListener('click', this.handleClickOutside);
+            return;
+        }
+        document.removeEventListener('click', this.handleClickOutside);
+    }
+    async handleOptionClick(option) {
+        if (!option || option.dsDisabled)
+            return;
+        if (this.inValue(option.dsValue) && this.isMultiple) {
+            this.value = this.withoutValue(option.dsValue);
+        }
+        else {
+            this.value = this.isMultiple ? this.withValue(option.dsValue) : this.toValue(option.dsValue);
+        }
+        if (this.isMultiple)
+            return;
+        this.closeCombobox('select');
+    }
     onDsClick(event) {
-        this.setSelectedOption(event.target);
-        this.isOpen = false;
-        setTimeout(() => {
-            this.inputRef?.select();
-        }, 0);
+        this.handleOptionClick(event.target);
     }
     onDsMounted(event) {
         const option = event.target;
@@ -208,16 +240,16 @@ export class DsCombobox {
         option.dsMouseDownPreventDefault = true;
     }
     onDsValueChange(event) {
-        if (this.selectedOption?.dsValue === event.detail.oldValue) {
-            this.setSelectedOption(null);
+        if (this.selectedOptions.some(opt => opt.dsValue === event.detail.oldValue)) {
+            this.value = this.withoutValue(event.detail.oldValue);
         }
         if (this.dsValue && this.dsValue === event.detail.oldValue) {
             this.dsSelectedOptionValueChange.emit(event.detail.newValue);
         }
     }
     onDsLabelChange(event) {
-        if (this.selectedOption?.dsValue === event.detail.value) {
-            this.setInputValue(event.detail.label);
+        if (this.selectedOptions.some(opt => opt.dsValue === event.detail.value)) {
+            this.setInputValue(this.inputValue.replace(event.detail.oldLabel, event.detail.newLabel));
         }
     }
     onFocusIn() {
@@ -228,10 +260,8 @@ export class DsCombobox {
         const lostFocus = !nextFocused || !this.el.contains(nextFocused);
         if (lostFocus) {
             this.hasFocus = false;
-        }
-        if (this.isOpen && lostFocus) {
-            this.isOpen = false;
-            this.noResults = false;
+            this.unsetActiveOption();
+            this.closeCombobox('blur');
             this.dsValidity.emit({
                 flag: this.internals?.validity.valid ? 'valid' : 'customError',
                 message: this.internals?.validationMessage,
@@ -239,6 +269,7 @@ export class DsCombobox {
         }
     }
     componentWillLoad() {
+        this.badgeId = `${this.dsId}-badge`;
         this.labelId = `${this.dsId}-label`;
         this.assistiveTextId = `${this.dsId}-assistive-text`;
         this.buttonId = `${this.dsId}-button`;
@@ -256,16 +287,16 @@ export class DsCombobox {
     }
     componentDidLoad() {
         this.updateScrimClasses();
-        if (this.dsValue) {
-            this.setSelectedOptionFromDsValue(this.dsValue);
-        }
+        this.internals?.setValidity({ valueMissing: this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)) }, atLeastOneOption(), this.inputRef);
+        this.forceUpdateInputValue = Array.isArray(this.dsValue) ? this.dsValue.length > 0 : !!this.dsValue;
+        this.value = this.toValue(this.dsValue);
         this.observer = new MutationObserver(mutations => {
             for (const mutation of mutations) {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
                     const options = Array.from(mutation.removedNodes).filter(node => node.nodeType === Node.ELEMENT_NODE && this.elementIsOption(node));
-                    if (options.some(option => option.dsValue === this.selectedOption?.dsValue)) {
+                    if (options.some(option => this.inValue(option.dsValue))) {
                         this.dsSelectedOptionRemoved.emit();
-                        this.setSelectedOption(null);
+                        this.value = this.withoutValues(options.map(option => option.dsValue));
                     }
                 }
             }
@@ -274,9 +305,6 @@ export class DsCombobox {
             childList: true,
             subtree: true,
         });
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.inputRef);
-        }
     }
     componentDidUpdate() {
         this.updateScrimClasses();
@@ -300,49 +328,70 @@ export class DsCombobox {
         if (this.internals?.form) {
             this.el.removeEventListener('invalid', this.handleInvalid);
         }
+        document.removeEventListener('click', this.handleClickOutside);
         this.debouncedResetFeedback.cancel();
         this.debouncedAppendFeedback.cancel();
     }
-    setSelectedOptionFromDsValue = (dsValue) => {
-        if (!dsValue) {
-            this.setSelectedOption(null);
+    setSelectedOptionsFromValue = async (values) => {
+        if (!values || values.length === 0) {
+            await this.setSelectedOptions([]);
             return;
         }
-        const option = this.getAllOptions().find(opt => opt.dsValue === dsValue);
-        if (!option) {
-            console.warn(`ds-combobox: No option found with dsValue "${dsValue}"`);
+        const options = this.getAllOptions().filter(opt => values.includes(opt.dsValue));
+        if (options.length === 0) {
+            console.warn(`ds-combobox: No options found matching dsValues "${values.join(', ')}"`);
             return;
         }
-        this.setSelectedOption(option);
+        await this.setSelectedOptions(options);
     };
-    setSelectedOption = (option) => {
-        if (option) {
-            option.dsActive = false;
-            this.internals?.setValidity({});
-        }
-        else if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.inputRef);
+    setSelectedOptions = async (options) => {
+        if (!this.isMultiple) {
+            this.unsetActiveOption();
         }
-        this.selectedOption = option;
+        this.internals?.setValidity({ valueMissing: this.dsRequired && options.length === 0 }, atLeastOneOption(), this.inputRef);
+        this.selectedOptions = options;
+    };
+    unsetActiveOption = () => {
+        if (!this.activeOption)
+            return;
+        this.activeOption.dsActive = false;
         this.activeOption = null;
-        this.setInputValue(option);
+    };
+    scrollToActiveOption = () => {
+        if (!this.activeOption)
+            return;
+        const optionsListInnerRect = this.optionsListInnerRef?.getBoundingClientRect();
+        const optionRect = this.activeOption.getBoundingClientRect();
+        if (!optionsListInnerRect || !optionRect)
+            return;
+        if (this.hasBottomScrim && optionRect.bottom > optionsListInnerRect.bottom - SCRIM_HEIGHT) {
+            this.optionsListInnerRef.scrollTop += optionRect.bottom - (optionsListInnerRect.bottom - SCRIM_HEIGHT);
+            return;
+        }
+        if (this.hasTopScrim && optionRect.top < optionsListInnerRect.top + SCRIM_HEIGHT) {
+            this.optionsListInnerRef.scrollTop -= optionsListInnerRect.top + SCRIM_HEIGHT - optionRect.top;
+            return;
+        }
     };
     setActiveOption = (option) => {
         if (!option)
             return;
-        if (this.activeOption) {
-            this.activeOption.dsActive = false;
-        }
+        const hadActiveOption = !!this.activeOption;
+        this.unsetActiveOption();
         option.dsActive = true;
         this.activeOption = option;
-        this.activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
+        if (!hadActiveOption) {
+            this.activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
+            return;
+        }
+        this.scrollToActiveOption();
     };
-    setInputValue = async (option) => {
-        if (typeof option === 'string') {
-            this.inputValue = option;
+    setInputValue = async (newValue) => {
+        if (typeof newValue === 'string') {
+            this.inputValue = newValue;
             return;
         }
-        this.inputValue = (await option?.getLabel()) || '';
+        this.inputValue = this.selectedOptions.length > 0 ? (await Promise.all(this.selectedOptions.map(opt => opt.getLabel()))).join(', ') : '';
     };
     getAllGroups = () => Array.from(this.el.querySelectorAll(this.DsOptionGroupTag));
     getAllOptions = () => Array.from(this.el.querySelectorAll(this.DsOptionTag));
@@ -414,47 +463,62 @@ export class DsCombobox {
         switch (event.key) {
             case 'Enter': {
                 event.preventDefault();
+                this.openCombobox('');
                 if (this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) {
-                    this.setSelectedOption(this.activeOption);
-                    this.isOpen = false;
-                    setTimeout(() => {
-                        this.inputRef?.select();
-                    }, 0);
+                    this.handleOptionClick(this.activeOption);
                 }
                 break;
             }
             case 'Down':
             case 'ArrowDown': {
+                this.openCombobox('');
                 this.onNavigationKeyDown(this.getNextOption)(event, this.activeOption);
                 break;
             }
             case 'Up':
             case 'ArrowUp': {
+                this.openCombobox('');
                 this.onNavigationKeyDown(this.getPreviousOption)(event, this.activeOption);
                 break;
             }
             case 'Home': {
+                this.openCombobox();
                 this.onNavigationKeyDown(this.getFirstOption)(event);
                 break;
             }
             case 'End': {
+                this.openCombobox();
                 this.onNavigationKeyDown(this.getLastOption)(event);
                 break;
             }
             case 'Tab': {
-                if (this.activeOption && !this.activeOption.dsDisabled && !this.activeOption.dsHidden) {
-                    this.setSelectedOption(this.activeOption);
+                const hadActiveOption = !!this.activeOption;
+                this.unsetActiveOption();
+                let closeEvent;
+                if (hadActiveOption && event.shiftKey) {
+                    closeEvent = 'focus';
+                    this.preventImmediateOpen = this.isOpen;
                 }
+                this.closeCombobox(closeEvent);
                 break;
             }
             case 'Esc':
             case 'Escape': {
-                this.isOpen = false;
-                this.setFocus();
+                if (this.isOpen) {
+                    this.closeCombobox('select');
+                    return;
+                }
+                this.inputRef?.setSelectionRange(this.inputRef?.value?.length, this.inputRef?.value?.length);
+                break;
+            }
+            case 'Shift': {
+                if (event.repeat) {
+                    break;
+                }
                 break;
             }
             default: {
-                this.isOpen = true;
+                this.openCombobox();
                 break;
             }
         }
@@ -465,11 +529,15 @@ export class DsCombobox {
             group.dsHidden = !(await group.hasVisibleOptions());
         }
     };
-    handleInput = (event) => {
-        this.setInputValue(event.target.value);
-        if (this.dsFilteringStrategy === 'static') {
+    handleClickOutside = (event) => {
+        if (this.el.contains(event.target))
+            return;
+        this.closeCombobox('blur');
+    };
+    handleInput = async (event) => {
+        await this.setInputValue(event.target.value);
+        if (this.dsFilteringStrategy === 'static')
             return;
-        }
         let hiddenOptionsCount = 0;
         const allOptions = this.getAllOptions();
         allOptions.forEach(option => {
@@ -481,33 +549,65 @@ export class DsCombobox {
         });
         this.noResults = hiddenOptionsCount === allOptions.length;
     };
-    openCombobox = () => {
+    openCombobox = async (nextInputValue) => {
+        if (this.isOpen)
+            return;
+        if (typeof nextInputValue === 'string') {
+            await this.setInputValue(nextInputValue);
+        }
         this.isOpen = true;
-        this.inputRef?.select();
+        this.inputRef?.focus();
+    };
+    closeCombobox = async (event, nextInputValue) => {
+        if (!this.isOpen)
+            return;
+        this.getAllGroups().forEach(group => {
+            group.dsHidden = false;
+        });
+        this.getAllOptions().forEach(option => {
+            option.dsHidden = false;
+            option.dsActive = false;
+        });
+        this.unsetActiveOption();
+        await this.setInputValue(nextInputValue);
+        this.isOpen = false;
+        this.noResults = false;
+        if (event) {
+            requestAnimationFrame(() => {
+                this.inputRef?.[event]();
+            });
+        }
     };
     handleFocus = () => {
         if (this.dsDisabled)
             return;
-        this.openCombobox();
+        if (this.selectedOptions?.length === 0 && !this.preventImmediateOpen) {
+            this.openCombobox();
+            return;
+        }
+        this.preventImmediateOpen = false;
+        this.inputRef?.select();
     };
-    handleToggleButtonClick = (event) => {
+    handleToggleButtonClick = async (event) => {
         event.stopPropagation();
         if (this.dsDisabled)
             return;
         if (this.isOpen) {
-            this.inputRef?.blur();
-            this.isOpen = false;
+            this.closeCombobox('focus');
             return;
         }
         this.openCombobox();
     };
     handleClearButtonClick = (event) => {
         event.stopPropagation();
+        this.unsetActiveOption();
+        this.value = this.toValue(null);
+        if (this.isOpen) {
+            this.closeCombobox('focus', '');
+            return;
+        }
         this.setInputValue('');
-        this.setSelectedOption(null);
-        setTimeout(() => {
-            this.inputRef?.select();
-        }, 0);
+        this.inputRef?.focus();
     };
     updateScrimClasses = () => {
         const wrapper = this.optionsListRef;
@@ -523,6 +623,10 @@ export class DsCombobox {
     render() {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = attrAriaLabel || this.dsAriaLabel;
+        const listBoxAriaLabel = (() => {
+            const multiselectableLabel = this.isMultiple ? multiselectable() : undefined;
+            return this.dsLabel ? multiselectableLabel : [ariaLabel, multiselectableLabel].filter(Boolean).join(' ');
+        })();
         const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
         const clearButtonAriaLabel = removeSelection(true);
         const DsIcon = transformTagName('ds-icon', 'ds-combobox', this.el);
@@ -533,25 +637,33 @@ export class DsCombobox {
         const baseClass = cx('ds-combobox');
         const inputContainerClass = `${baseClass}__input-container`;
         const optionsContainerClass = `${baseClass}__options-container`;
-        return (h(Fragment, { key: '14bdc26b302170781786d4ee50e8a2803179824f' }, h(DsControlLabel, { key: '1c81d8c5fe4c02d71eda6e28ab9856c116a24c66', dsId: this.labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { key: 'ffc883ead7cea2eed643f46be57bb0056b4016ce', name: "label" }), h("slot", { key: '8a667a540c0d5dd19c88f689d975a7d719f49868', name: "assistiveText" })), h("div", { key: 'db9b719cb5566f4e9c590babbf99297dd337063a', class: classNames(baseClass, {
+        return (h(Fragment, null, h(DsControlLabel, { dsId: this.labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { name: "label" }), h("slot", { name: "assistiveText" })), h("div", { class: classNames(baseClass, {
                 [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${baseClass}--open`]: this.isOpen,
-            }) }, h("div", { key: 'bfa85967f061425ed824a97c210e327a2bb46e1f', class: classNames(inputContainerClass, {
+            }) }, h("div", { class: classNames(inputContainerClass, {
                 [`${inputContainerClass}--disabled`]: this.dsDisabled,
                 [`${inputContainerClass}--invalid`]: !!this.dsErrorText,
                 [`${inputContainerClass}--open`]: this.isOpen,
-            }), onClick: () => {
+            }), onMouseDown: e => {
+                if (e.target !== this.inputRef) {
+                    e.preventDefault();
+                }
+            }, onClick: () => {
                 if (this.dsDisabled)
                     return;
-                this.openCombobox();
-            } }, this.dsIcon && h(DsIcon, { key: 'f210d8c4af7ce442b79d951dd0b05c81b9d96f3d', class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), h("input", { key: '05e0e0114a281dc9ca4866b904eca7a098f2b2c1', ref: el => (this.inputRef = el), class: `${inputContainerClass}__input`, id: this.dsId, name: this.dsName, form: this.dsForm, type: "text", placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || searchOrSelectAnOption(), disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onFocus: this.handleFocus, value: this.inputValue, role: "combobox", "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }), this.dsClearable && this.selectedOption && !this.dsDisabled && (h(DsButton, { key: '14544ce37e87cbe3de1328bc9d9177f595c7d26a', class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: this.handleClearButtonClick, "aria-label": clearButtonAriaLabel, "aria-describedby": this.dsId })), h("div", { key: '9cf8a674e1c1376043319874d64e67f331010b91', id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabIndex: -1, "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { key: '57e8cae8230e002fb96adb9e0c46541b4cb69d4b', class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { key: '899f7faa22d8e8724c31981a23f4f33c766bf0a0', class: classNames(optionsContainerClass, {
+                this.openCombobox('');
+            } }, this.dsIcon && h(DsIcon, { class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), h("input", { ref: el => (this.inputRef = el), class: `${inputContainerClass}__input`, id: this.dsId, form: this.dsForm, type: "text", placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || searchOrSelectAnOption(), disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onFocus: this.handleFocus, value: this.inputValue, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${this.labelId} ${this.badgeId}` : this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: classNames(`${inputContainerClass}__badge-container`, {
+                [`${inputContainerClass}__badge-container--padded`]: this.dsDisabled || !this.dsClearable,
+            }) }, h(this.DsBadge, { dsId: this.badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections(), dsVariant: this.dsDisabled ? 'disabled' : 'default' }))), this.dsClearable && this.selectedOptions?.length > 0 && !this.dsDisabled && (h(DsButton, { class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: this.handleClearButtonClick, "aria-label": clearButtonAriaLabel, "aria-describedby": this.dsId })), h("div", { id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabIndex: -1, "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { class: classNames(optionsContainerClass, {
                 [`${optionsContainerClass}--open`]: this.isOpen,
-            }) }, h("div", { key: 'ac9b5f4693dc5fa09a2c26db14f1072c76d4d943', ref: el => (this.optionsListRef = el), class: classNames(`${optionsContainerClass}__options`) }, h(DsOptionsMessage, { key: '3dbfb8ab9abc5eabe18641133b0df53752285e6f', dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText, dsNoResults: this.dsNoResults || this.noResults, dsNoResultsTitle: this.getNoResultsTitle(this.inputValue), dsNoResultsText: this.dsNoResultsText }), h("div", { key: '9af515b635c5acc9458bdfb511176cb32985398d', id: this.optionsId, class: `${optionsContainerClass}__options__inner`, tabIndex: -1, role: "listbox", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll, "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId }, h("div", { key: '7626777984aef6d12a83ac6d895ad0d547c5833d', class: classNames(`${optionsContainerClass}__options__inner__top-scrim`, {
+            }) }, h("div", { ref: el => (this.optionsListRef = el), class: classNames(`${optionsContainerClass}__options`) }, h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText, dsNoResults: this.dsNoResults || this.noResults, dsNoResultsTitle: this.getNoResultsTitle(this.inputValue), dsNoResultsText: this.dsNoResultsText }), h("div", { id: this.optionsId, class: `${optionsContainerClass}__options__inner`, tabIndex: -1, role: "listbox", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll, "aria-multiselectable": this.isMultiple ? 'true' : 'false', "aria-label": listBoxAriaLabel, "aria-labelledby": this.dsLabel && [this.labelId, this.optionsId].join(' ') }, h("div", { class: classNames(`${optionsContainerClass}__options__inner__top-scrim`, {
                 [`${optionsContainerClass}__options__inner__top-scrim--dark`]: this.hasTopScrimDark,
                 [`${optionsContainerClass}__options__inner__top-scrim--visible`]: this.hasTopScrim,
-            }), "aria-hidden": "true" }), h("slot", { key: 'ad18ad7ceefb44489fff62a157d1f1f8db44dbf9' }), h("div", { key: '15102d664d53af7fd8ff4e1eaecf4ebe6603ae7b', class: classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
+            }), "aria-hidden": "true" }), h("slot", null), h("div", { class: classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
                 [`${optionsContainerClass}__options__inner__bottom-scrim--visible`]: this.hasBottomScrim,
-            }), "aria-hidden": "true" }))))), !!this.dsErrorText && h(DsInputValidity, { key: '31b705cfe8a847731ea7e49bcb1611725f71adde', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { key: 'd37ef1cd49fae0f5a6b35c4ce467af2faaa9fad6', dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
+            }), "aria-hidden": "true" }))))), this.internals?.form &&
+            this.internals?.validity.valid &&
+            this.selectedOptions.map(option => h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), !!this.dsErrorText && h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
     }
     static get is() { return "ds-combobox"; }
     static get encapsulation() { return "scoped"; }
@@ -568,6 +680,26 @@ export class DsCombobox {
     }
     static get properties() {
         return {
+            "dsVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'multiple'",
+                    "resolved": "\"default\" | \"multiple\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the variant of the combobox:\n- \"default\": allows selection of a single option\n- \"multiple\": allows selection of multiple options"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-variant",
+                "defaultValue": "'default'"
+            },
             "dsForm": {
                 "type": "string",
                 "mutable": false,
@@ -980,15 +1112,15 @@ export class DsCombobox {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
+                    "original": "string | string[] | null",
+                    "resolved": "string | string[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the selected option.\n\nSet this property to programmatically select an option by its `dsValue`.\nListen to the `dsChange` event to keep this property synchronized when users make selections."
+                    "text": "The value of the selected option.\n\nSet this property to programmatically select an option by its `dsValue`.\nListen to the `dsChange` or `dsMultipleChange` event (depending on the variant) to keep this property synchronized when users make selections."
                 },
                 "getter": false,
                 "setter": false,
@@ -1081,7 +1213,7 @@ export class DsCombobox {
         return {
             "isOpen": {},
             "activeOption": {},
-            "selectedOption": {},
+            "selectedOptions": {},
             "inputValue": {},
             "hasTopScrim": {},
             "hasBottomScrim": {},
@@ -1113,6 +1245,27 @@ export class DsCombobox {
                         }
                     }
                 }
+            }, {
+                "method": "dsMultipleChange",
+                "name": "dsMultipleChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when user selects an option. For \"multiple\" `dsVariant`."
+                },
+                "complexType": {
+                    "original": "DsComboboxMultipleChangeEvent",
+                    "resolved": "{ values: string[]; added: string[]; removed: string[]; }",
+                    "references": {
+                        "DsComboboxMultipleChangeEvent": {
+                            "location": "local",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxMultipleChangeEvent"
+                        }
+                    }
+                }
             }, {
                 "method": "dsChange",
                 "name": "dsChange",
@@ -1121,7 +1274,7 @@ export class DsCombobox {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event emitted when user selects an option."
+                    "text": "Event emitted when user selects an option. For \"default\" `dsVariant`."
                 },
                 "complexType": {
                     "original": "DsComboboxChangeEvent",
@@ -1335,23 +1488,34 @@ export class DsCombobox {
                     "text": "",
                     "tags": []
                 }
+            },
+            "getSelectedOptions": {
+                "complexType": {
+                    "signature": "() => Promise<{ value: string; label: string; description: string; }[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ value: string; label: string; description: string; }[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
             }
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "dsValue",
-                "methodName": "dsValueObserver"
-            }, {
-                "propName": "selectedOption",
-                "methodName": "selectedOptionObserver"
+                "propName": "selectedOptions",
+                "methodName": "selectedOptionsObserver"
             }, {
                 "propName": "inputValue",
                 "methodName": "inputValueObserver"
-            }, {
-                "propName": "isOpen",
-                "methodName": "isOpenObserver"
             }, {
                 "propName": "hasFocus",
                 "methodName": "hasFocusObserver"
@@ -1370,6 +1534,15 @@ export class DsCombobox {
             }, {
                 "propName": "aria-label",
                 "methodName": "ariaAttributeObserver"
+            }, {
+                "propName": "value",
+                "methodName": "valueObserver"
+            }, {
+                "propName": "dsValue",
+                "methodName": "dsValueObserver"
+            }, {
+                "propName": "isOpen",
+                "methodName": "isOpenObserver"
             }];
     }
     static get listeners() {