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

package/dist/cjs/ds-combobox.cjs.entry.js

@@ -1,21 +1,24 @@
 'use strict';
 
-var index = require('./index-JgJtlsd6.js');
+var index = require('./index-BLVteh3w.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-CEhBgrbV.js');
-var controlUtils = require('./controlUtils-Cqn295aw.js');
-var cx = require('./cx-7_PEyDS7.js');
+var controlUtils = require('./controlUtils-Df6dCmrT.js');
+var cx = require('./cx-C3dbeP9F.js');
 var attributes = require('./attributes-CdVB4RPe.js');
-var constants = require('./constants-ydR_Rcsg.js');
-require('./store-CCqF9deg.js');
+var constants = require('./constants-47xuonzN.js');
+var multipleValueFactory = require('./multipleValueFactory-DLiYU2wV.js');
+require('./store-B5JrXfGq.js');
 
-const dsComboboxCss = ".sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h:not(:has(.ds-combobox__JDwdTJ--full-width)){width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__JDwdTJ__input-container.sc-ds-combobox{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__JDwdTJ__input-container--disabled.sc-ds-combobox{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-combobox__JDwdTJ__input-container--disabled.sc-ds-combobox .ds-combobox__JDwdTJ__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__JDwdTJ__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__JDwdTJ__input-container--invalid.sc-ds-combobox:not(.ds-combobox__JDwdTJ__input-container--open):not(.ds-combobox__JDwdTJ__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__JDwdTJ__input-container--invalid.sc-ds-combobox:not(.ds-combobox__JDwdTJ__input-container--open):not(.ds-combobox__JDwdTJ__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__JDwdTJ__input-container.sc-ds-combobox:active:not(.ds-combobox__JDwdTJ__input-container--invalid,.ds-combobox__JDwdTJ__input-container--disabled).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__JDwdTJ__input-container.sc-ds-combobox:not(.ds-combobox__JDwdTJ__input-container--open,.ds-combobox__JDwdTJ__input-container.sc-ds-combobox:has(>.ds-combobox__JDwdTJ__input-container__clear-button>button:focus),.ds-combobox__JDwdTJ__input-container--invalid.sc-ds-combobox,.ds-combobox__JDwdTJ__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__JDwdTJ__input-container.sc-ds-combobox:has(>.ds-combobox__JDwdTJ__input-container__input:focus),.ds-combobox__JDwdTJ__input-container.sc-ds-combobox:has(>.ds-combobox__JDwdTJ__input-container__clear-button>button:focus){box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-combobox__JDwdTJ__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:inherit;font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-combobox__JDwdTJ__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__JDwdTJ__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed}.ds-combobox__JDwdTJ__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__JDwdTJ__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__JDwdTJ__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__JDwdTJ__input-container__icon.sc-ds-combobox+.ds-combobox__JDwdTJ__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__JDwdTJ__input-container__clear-button.sc-ds-combobox,.ds-combobox__JDwdTJ__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__JDwdTJ__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__JDwdTJ__input-container__toggle-button__icon.sc-ds-combobox{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:inherit;z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-combobox__JDwdTJ__options-container.sc-ds-combobox{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-combobox__JDwdTJ__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__JDwdTJ__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__JDwdTJ__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__JDwdTJ__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__JDwdTJ__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__JDwdTJ__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__JDwdTJ__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__JDwdTJ__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__JDwdTJ__options-container__options__inner__top-scrim--dark.sc-ds-combobox{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:var(--ds-shadow-overflow)}.ds-combobox__JDwdTJ__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
+const dsComboboxCss = ".sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h:not(:has(.ds-combobox__nkrEji--full-width)){width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__nkrEji__input-container.sc-ds-combobox{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);cursor:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__nkrEji__input-container--disabled.sc-ds-combobox{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-combobox__nkrEji__input-container--disabled.sc-ds-combobox .ds-combobox__nkrEji__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__nkrEji__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__nkrEji__input-container--invalid.sc-ds-combobox:not(.ds-combobox__nkrEji__input-container--open):not(.ds-combobox__nkrEji__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__nkrEji__input-container--invalid.sc-ds-combobox:not(.ds-combobox__nkrEji__input-container--open):not(.ds-combobox__nkrEji__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__nkrEji__input-container.sc-ds-combobox:active:not(.ds-combobox__nkrEji__input-container--invalid,.ds-combobox__nkrEji__input-container--disabled.sc-ds-combobox,.ds-combobox__nkrEji__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__nkrEji__input-container.sc-ds-combobox:not(.ds-combobox__nkrEji__input-container--open,.ds-combobox__nkrEji__input-container.sc-ds-combobox:has(>.ds-combobox__nkrEji__input-container__clear-button>button:focus),.ds-combobox__nkrEji__input-container--invalid.sc-ds-combobox,.ds-combobox__nkrEji__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__nkrEji__input-container.sc-ds-combobox:has(>.ds-combobox__nkrEji__input-container__input:focus),.ds-combobox__nkrEji__input-container.sc-ds-combobox:has(>.ds-combobox__nkrEji__input-container__clear-button>button:focus){box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-combobox__nkrEji__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-combobox__nkrEji__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__nkrEji__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__nkrEji__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__nkrEji__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__nkrEji__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__nkrEji__input-container__icon.sc-ds-combobox+.ds-combobox__nkrEji__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__nkrEji__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__nkrEji__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__nkrEji__input-container__clear-button.sc-ds-combobox,.ds-combobox__nkrEji__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__nkrEji__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__nkrEji__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__nkrEji__input-container__toggle-button__icon.sc-ds-combobox{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:inherit;z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-combobox__nkrEji__options-container.sc-ds-combobox{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-combobox__nkrEji__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__nkrEji__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__nkrEji__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__nkrEji__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__nkrEji__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__nkrEji__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__nkrEji__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__nkrEji__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__nkrEji__options-container__options__inner__top-scrim--dark.sc-ds-combobox{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:var(--ds-shadow-overflow)}.ds-combobox__nkrEji__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
 
 const comboboxIdGenerator = utils.idGenerator('ds-combobox');
-const DsCombobox = class {
+const DsCombobox = class extends index.Mixin(multipleValueFactory.multipleValueFactory) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.dsFilterChange = index.createEvent(this, "dsFilterChange");
+        this.dsMultipleChange = index.createEvent(this, "dsMultipleChange");
         this.dsChange = index.createEvent(this, "dsChange");
         this.dsSelectedOptionValueChange = index.createEvent(this, "dsSelectedOptionValueChange");
         this.dsSelectedOptionRemoved = index.createEvent(this, "dsSelectedOptionRemoved");
@@ -38,6 +41,7 @@ const DsCombobox = class {
     optionsListRef;
     optionsListInnerRef;
     observer;
+    badgeId;
     labelId;
     assistiveTextId;
     buttonId;
@@ -45,6 +49,7 @@ const DsCombobox = class {
     inputValidityId;
     GROUP_ITERATION_STOP = 1000;
     dsFilterChange;
+    dsMultipleChange;
     dsChange;
     dsSelectedOptionValueChange;
     dsSelectedOptionRemoved;
@@ -52,6 +57,7 @@ const DsCombobox = class {
     dsValidity;
     dsBlur;
     dsFocus;
+    dsVariant = 'default';
     dsForm;
     dsId = comboboxIdGenerator.next().value;
     dsName = this.dsId;
@@ -80,7 +86,7 @@ const DsCombobox = class {
     dsFullWidth = false;
     isOpen = false;
     activeOption = null;
-    selectedOption = null;
+    selectedOptions = [];
     inputValue = '';
     hasTopScrim = false;
     hasBottomScrim = false;
@@ -88,6 +94,11 @@ const DsCombobox = class {
     noResults = false;
     hasFocus = false;
     feedback = [];
+    forceUpdateInputValue = false;
+    preventImmediateOpen = false;
+    get DsBadge() {
+        return utils.transformTagName('ds-badge', 'ds-combobox', this.el);
+    }
     get DsOptionGroupTag() {
         return utils.transformTagName('ds-option-group', 'ds-combobox', this.el);
     }
@@ -107,6 +118,9 @@ const DsCombobox = class {
             return;
         return this.dsNoResultsText || controlUtils.tryADifferentSearchTerm();
     }
+    get isMultiple() {
+        return this.dsVariant === 'multiple';
+    }
     async setFocus() {
         this.inputRef?.focus();
         this.dsFocus.emit();
@@ -118,33 +132,38 @@ const DsCombobox = class {
         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) {
@@ -154,17 +173,6 @@ const DsCombobox = class {
         }
         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();
@@ -219,12 +227,35 @@ const DsCombobox = class {
         };
         index.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;
@@ -232,16 +263,16 @@ const DsCombobox = class {
         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() {
@@ -252,10 +283,8 @@ const DsCombobox = class {
         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,
@@ -263,6 +292,7 @@ const DsCombobox = class {
         }
     }
     componentWillLoad() {
+        this.badgeId = `${this.dsId}-badge`;
         this.labelId = `${this.dsId}-label`;
         this.assistiveTextId = `${this.dsId}-assistive-text`;
         this.buttonId = `${this.dsId}-button`;
@@ -280,16 +310,16 @@ const DsCombobox = class {
     }
     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)) }, controlUtils.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));
                     }
                 }
             }
@@ -298,9 +328,6 @@ const DsCombobox = class {
             childList: true,
             subtree: true,
         });
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, controlUtils.atLeastOneOption(), this.inputRef);
-        }
     }
     componentDidUpdate() {
         this.updateScrimClasses();
@@ -324,49 +351,70 @@ const DsCombobox = class {
         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 }, controlUtils.atLeastOneOption(), this.inputRef);
+    setSelectedOptions = async (options) => {
+        if (!this.isMultiple) {
+            this.unsetActiveOption();
         }
-        this.selectedOption = option;
+        this.internals?.setValidity({ valueMissing: this.dsRequired && options.length === 0 }, controlUtils.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 - constants.SCRIM_HEIGHT) {
+            this.optionsListInnerRef.scrollTop += optionRect.bottom - (optionsListInnerRect.bottom - constants.SCRIM_HEIGHT);
+            return;
+        }
+        if (this.hasTopScrim && optionRect.top < optionsListInnerRect.top + constants.SCRIM_HEIGHT) {
+            this.optionsListInnerRef.scrollTop -= optionsListInnerRect.top + constants.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));
@@ -438,47 +486,62 @@ const DsCombobox = class {
         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;
             }
         }
@@ -489,11 +552,15 @@ const DsCombobox = class {
             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 => {
@@ -505,33 +572,65 @@ const DsCombobox = class {
         });
         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;
@@ -547,6 +646,10 @@ const DsCombobox = class {
     render() {
         const { ['aria-label']: attrAriaLabel, ...restAttributes } = this.inheritedAttributes;
         const ariaLabel = attrAriaLabel || this.dsAriaLabel;
+        const listBoxAriaLabel = (() => {
+            const multiselectableLabel = this.isMultiple ? controlUtils.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 = controlUtils.removeSelection(true);
         const DsIcon = utils.transformTagName('ds-icon', 'ds-combobox', this.el);
@@ -557,38 +660,47 @@ const DsCombobox = class {
         const baseClass = cx.cx('ds-combobox');
         const inputContainerClass = `${baseClass}__input-container`;
         const optionsContainerClass = `${baseClass}__options-container`;
-        return (index.h(index.Fragment, { key: '14bdc26b302170781786d4ee50e8a2803179824f' }, index.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 }, index.h("slot", { key: 'ffc883ead7cea2eed643f46be57bb0056b4016ce', name: "label" }), index.h("slot", { key: '8a667a540c0d5dd19c88f689d975a7d719f49868', name: "assistiveText" })), index.h("div", { key: 'db9b719cb5566f4e9c590babbf99297dd337063a', class: index$1.classNames(baseClass, {
+        return (index.h(index.Fragment, null, index.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 }, index.h("slot", { name: "label" }), index.h("slot", { name: "assistiveText" })), index.h("div", { class: index$1.classNames(baseClass, {
                 [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${baseClass}--open`]: this.isOpen,
-            }) }, index.h("div", { key: 'bfa85967f061425ed824a97c210e327a2bb46e1f', class: index$1.classNames(inputContainerClass, {
+            }) }, index.h("div", { class: index$1.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 && index.h(DsIcon, { key: 'f210d8c4af7ce442b79d951dd0b05c81b9d96f3d', class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), index.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 || controlUtils.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, ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }), this.dsClearable && this.selectedOption && !this.dsDisabled && (index.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 })), index.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 }, index.h(DsIcon, { key: '57e8cae8230e002fb96adb9e0c46541b4cb69d4b', class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), index.h("div", { key: '899f7faa22d8e8724c31981a23f4f33c766bf0a0', class: index$1.classNames(optionsContainerClass, {
+                this.openCombobox('');
+            } }, this.dsIcon && index.h(DsIcon, { class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), index.h("input", { ref: el => (this.inputRef = el), class: `${inputContainerClass}__input`, id: this.dsId, form: this.dsForm, type: "text", placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || controlUtils.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, ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }), this.isMultiple && this.selectedOptions?.length > 0 && (index.h("div", { class: index$1.classNames(`${inputContainerClass}__badge-container`, {
+                [`${inputContainerClass}__badge-container--padded`]: this.dsDisabled || !this.dsClearable,
+            }) }, index.h(this.DsBadge, { dsId: this.badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: controlUtils.selections(), dsVariant: this.dsDisabled ? 'disabled' : 'default' }))), this.dsClearable && this.selectedOptions?.length > 0 && !this.dsDisabled && (index.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 })), index.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 }, index.h(DsIcon, { class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), index.h("div", { class: index$1.classNames(optionsContainerClass, {
                 [`${optionsContainerClass}--open`]: this.isOpen,
-            }) }, index.h("div", { key: 'ac9b5f4693dc5fa09a2c26db14f1072c76d4d943', ref: el => (this.optionsListRef = el), class: index$1.classNames(`${optionsContainerClass}__options`) }, index.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 }), index.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 }, index.h("div", { key: '7626777984aef6d12a83ac6d895ad0d547c5833d', class: index$1.classNames(`${optionsContainerClass}__options__inner__top-scrim`, {
+            }) }, index.h("div", { ref: el => (this.optionsListRef = el), class: index$1.classNames(`${optionsContainerClass}__options`) }, index.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 }), index.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(' ') }, index.h("div", { class: index$1.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" }), index.h("slot", { key: 'ad18ad7ceefb44489fff62a157d1f1f8db44dbf9' }), index.h("div", { key: '15102d664d53af7fd8ff4e1eaecf4ebe6603ae7b', class: index$1.classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
+            }), "aria-hidden": "true" }), index.h("slot", null), index.h("div", { class: index$1.classNames(`${optionsContainerClass}__options__inner__bottom-scrim`, {
                 [`${optionsContainerClass}__options__inner__bottom-scrim--visible`]: this.hasBottomScrim,
-            }), "aria-hidden": "true" }))))), !!this.dsErrorText && index.h(DsInputValidity, { key: '31b705cfe8a847731ea7e49bcb1611725f71adde', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), index.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 => index.h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), !!this.dsErrorText && index.h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), index.h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
-        "dsValue": ["dsValueObserver"],
-        "selectedOption": ["selectedOptionObserver"],
+        "selectedOptions": ["selectedOptionsObserver"],
         "inputValue": ["inputValueObserver"],
-        "isOpen": ["isOpenObserver"],
         "hasFocus": ["hasFocusObserver"],
         "dsLoading": ["statusPropertyObserver"],
         "dsOptionsError": ["statusPropertyObserver"],
         "dsNoResults": ["statusPropertyObserver"],
         "noResults": ["statusPropertyObserver"],
-        "aria-label": ["ariaAttributeObserver"]
+        "aria-label": ["ariaAttributeObserver"],
+        "value": ["valueObserver"],
+        "dsValue": ["dsValueObserver"],
+        "isOpen": ["isOpenObserver"]
     }; }
 };
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" }), index.h("ds-button", null), index.h("ds-options-message", null), index.h("ds-input-validity", null), index.h("ds-control-label", null), index.h("ds-feedback", null)]);