npm - @uh-design-system/component-library - Versions diffs - 1.1.0 → 1.2.0-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1671) hide show

package/dist/esm/ds-options_2.entry.js CHANGED Viewed

@@ -1,14 +1,16 @@
-import { r as registerInstance, c as createEvent, d as getElement, h, f as forceUpdate, H as Host } from './index--5QqO1gx.js';
-import { t as transformTagName, a as ifDefined, d as declareComponentDependencies, i as idGenerator, b as debounce } from './utils-C1bsmWWB.js';
-import { c as cx } from './cx-NzJNIgFY.js';
-import { a as inheritAriaAttributes, i as inheritAttributes } from './attributes-BbTh8gdl.js';
+import { r as registerInstance, c as createEvent, d as getElement, h, M as Mixin, f as forceUpdate, H as Host } from './index-BohfivRs.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { q as selectAnOption, b as atLeastOneOption, e as thereAreOptionsToBrowse, l as loadingOptions, w as weCouldNotLoadOptions, f as tryAgainOrIfTheProblemPersists, r as removeSelection } from './controlUtils-BdIOt-Zq.js';
-import { F as FEEDBACK_RESET_TIMEOUT } from './constants-DCE1bBlR.js';
-import './store-BdNy6BhP.js';
+import { i as idGenerator, t as transformTagName, b as debounce, a as ifDefined, d as declareComponentDependencies } from './utils-C1bsmWWB.js';
+import { c as cx } from './cx--KIeFqyB.js';
+import { a as inheritAriaAttributes, i as inheritAttributes } from './attributes-BbTh8gdl.js';
+import { S as SCRIM_HEIGHT, F as FEEDBACK_RESET_TIMEOUT } from './constants-C6xow8e6.js';
+import { m as multiselectable, x as selectAnOption, b as atLeastOneOption, e as thereAreOptionsToBrowse, l as loadingOptions, w as weCouldNotLoadOptions, f as tryAgainOrIfTheProblemPersists, r as removeSelection, h as selections } from './controlUtils-D8oxroyE.js';
+import { m as multipleValueFactory } from './multipleValueFactory-DillH9U_.js';
+import './store-Bg23fUOM.js';
-const dsOptionsCss = ".ds-options__JDwdTJ__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__JDwdTJ.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__JDwdTJ.sc-ds-options:focus{outline:none}.ds-options__JDwdTJ__inner.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.ds-options__JDwdTJ__top-scrim.sc-ds-options,.ds-options__JDwdTJ__bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-options__JDwdTJ__top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__JDwdTJ__bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__JDwdTJ.has-top-scrim.sc-ds-options .ds-options__JDwdTJ__top-scrim.sc-ds-options{display:block}.ds-options__JDwdTJ.has-bottom-scrim.sc-ds-options .ds-options__JDwdTJ__bottom-scrim.sc-ds-options{display:block}.ds-options__JDwdTJ.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__JDwdTJ.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
+const dsOptionsCss = ".ds-options__nkrEji__inner.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.ds-options__nkrEji.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0;font-family:var(--ds-fontFamily-body)}.ds-options__nkrEji.sc-ds-options:focus{outline:none}.ds-options__nkrEji__inner.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.ds-options__nkrEji__top-scrim.sc-ds-options,.ds-options__nkrEji__bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.ds-options__nkrEji__top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__nkrEji__bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-options__nkrEji.has-top-scrim.sc-ds-options .ds-options__nkrEji__top-scrim.sc-ds-options{display:block}.ds-options__nkrEji.has-bottom-scrim.sc-ds-options .ds-options__nkrEji__bottom-scrim.sc-ds-options{display:block}.ds-options__nkrEji.sc-ds-options li.sc-ds-options{cursor:pointer}.ds-options__nkrEji.sc-ds-options li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";
+const optionsIdGenerator = idGenerator('ds-options');
 const DsOptions = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -21,12 +23,15 @@ const DsOptions = class {
     inheritedAttributes = {};
     dsEsc;
     dsActiveIndexChange;
-    dsId;
+    dsId = optionsIdGenerator.next().value;
     dsSelectedValue;
     dsActiveIndex = 0;
     dsLabelId;
-    onActiveIndexChange() {
-        setTimeout(() => this.focusActiveOption(), 0);
+    dsAriaMultiselectable;
+    hasBottomScrim = false;
+    hasTopScrim = false;
+    onActiveIndexChange(newValue) {
+        this.scrollToActiveOption(newValue);
     }
     componentWillLoad() {
         this.inheritedAttributes = {
@@ -44,19 +49,15 @@ const DsOptions = class {
         this.updateScrimClasses();
     };
     updateScrimClasses = () => {
-        const wrapper = this.optionsListRef;
-        const scrollEl = this.optionsListInnerRef;
-        if (!wrapper || !scrollEl)
+        if (!this.optionsListRef || !this.optionsListInnerRef)
             return;
-        const isAtTop = scrollEl.scrollTop === 0;
-        const isAtBottom = Math.ceil(scrollEl.scrollTop + scrollEl.clientHeight) >= scrollEl.scrollHeight;
-        wrapper.classList.toggle('has-top-scrim', !isAtTop);
-        wrapper.classList.toggle('has-bottom-scrim', !isAtBottom);
-        const groupLabels = wrapper.querySelectorAll(`.${cx('ds-option-group')}__label`);
+        this.hasBottomScrim = !(Math.ceil(this.optionsListInnerRef.scrollTop + this.optionsListInnerRef.clientHeight) >= this.optionsListInnerRef.scrollHeight);
+        this.hasTopScrim = this.optionsListInnerRef.scrollTop > 0;
+        const groupLabels = this.optionsListRef.querySelectorAll(`.${cx('ds-option-group')}__label`);
         groupLabels.forEach(label => {
             const rect = label.getBoundingClientRect();
-            const parentRect = wrapper.getBoundingClientRect();
-            if (scrollEl.scrollTop > 0 && rect.top <= parentRect.top && rect.bottom > parentRect.top) {
+            const parentRect = this.optionsListRef.getBoundingClientRect();
+            if (this.optionsListInnerRef.scrollTop > 0 && rect.top <= parentRect.top && rect.bottom > parentRect.top) {
                 label.classList.add(`${cx('ds-option-group')}__label__shadow`);
             }
             else {
@@ -67,40 +68,57 @@ const DsOptions = class {
     get DsOptionTag() {
         return transformTagName('ds-option', 'ds-options', this.el);
     }
-    focusActiveOption() {
+    getActiveOption(activeIndex) {
         const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
-        if (optionEls[this.dsActiveIndex]) {
-            optionEls[this.dsActiveIndex].focus();
+        if (!optionEls.length || activeIndex < 0 || activeIndex >= optionEls.length)
+            return null;
+        return optionEls[activeIndex];
+    }
+    scrollToActiveOption = (activeIndex) => {
+        const activeOption = this.getActiveOption(activeIndex);
+        if (!activeOption)
+            return;
+        const optionsListInnerRect = this.optionsListInnerRef?.getBoundingClientRect();
+        const optionRect = 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;
+        }
+    };
+    moveToNextEnabledOption(optionEls, direction) {
+        let nextIndex = this.dsActiveIndex;
+        let safe = 0;
+        do {
+            if (direction === 'down') {
+                nextIndex = (nextIndex + 1) % optionEls.length;
+            }
+            else {
+                nextIndex = (nextIndex - 1 + optionEls.length) % optionEls.length;
+            }
+            safe++;
+            if (safe > optionEls.length * 2)
+                break;
+        } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
+        this.dsActiveIndex = nextIndex;
+        this.dsActiveIndexChange.emit(this.dsActiveIndex);
     }
     handleKeyDown = (e) => {
         const optionEls = Array.from(this.el.querySelectorAll(this.DsOptionTag));
         if (!optionEls.length)
             return;
-        let nextIndex = this.dsActiveIndex;
         if (e.key === 'ArrowDown') {
             e.preventDefault();
-            let safe = 0;
-            do {
-                nextIndex = (nextIndex + 1) % optionEls.length;
-                safe++;
-                if (safe > optionEls.length * 2)
-                    break;
-            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
-            this.dsActiveIndex = nextIndex;
-            this.dsActiveIndexChange.emit(this.dsActiveIndex);
+            this.moveToNextEnabledOption(optionEls, 'down');
         }
         if (e.key === 'ArrowUp') {
             e.preventDefault();
-            let safe = 0;
-            do {
-                nextIndex = (nextIndex - 1 + optionEls.length) % optionEls.length;
-                safe++;
-                if (safe > optionEls.length * 2)
-                    break;
-            } while (optionEls[nextIndex].dsDisabled && nextIndex !== this.dsActiveIndex);
-            this.dsActiveIndex = nextIndex;
-            this.dsActiveIndexChange.emit(this.dsActiveIndex);
+            this.moveToNextEnabledOption(optionEls, 'up');
         }
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
@@ -110,20 +128,22 @@ const DsOptions = class {
             }
         }
         if (e.key === 'Tab') {
-            const option = optionEls[this.dsActiveIndex];
-            if (option && !option.dsDisabled) {
-                option.click();
-                this.dsEsc.emit();
+            if (!e.shiftKey) {
+                e.preventDefault();
             }
+            this.dsEsc.emit({ key: e.shiftKey ? 'Shift+Tab' : 'Tab' });
         }
         if (e.key === 'Escape') {
             e.preventDefault();
-            this.dsEsc.emit();
+            this.dsEsc.emit({ key: e.key });
         }
     };
     render() {
         const baseClass = cx('ds-options');
-        return (h("div", { key: 'b110ab1628d0ded3521e911fa9c11488936051d6', id: this.dsId, class: baseClass, role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, ...ifDefined('aria-labelledby', this.dsLabelId), ...this.inheritedAttributes }, h("div", { key: 'f147eff8060b1a8a4852158ef78b0112cb0a34aa', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: '92caa6aea8b6051ffd636cec592b28b51c813482', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: 'bb2b25707a5f42bc62d4d0aaa07a6f5026f131b1' }), h("div", { key: 'c80d27ec575538cbf336782e042637193de22b16', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
+        return (h("div", { key: 'e09bd069a766ebadf80ad3fded0dbf225f2f3812', id: this.dsId, class: classNames(baseClass, {
+                'has-bottom-scrim': this.hasBottomScrim,
+                'has-top-scrim': this.hasTopScrim,
+            }), role: "listbox", tabindex: 0, onKeyDown: this.handleKeyDown, ref: el => (this.optionsListRef = el), onScroll: this.handleScroll, onFocus: this.updateScrimClasses, "aria-multiselectable": this.dsAriaMultiselectable ? 'true' : 'false', "aria-label": this.dsAriaMultiselectable ? multiselectable() : undefined, "aria-labelledby": [this.dsLabelId, this.dsId].filter(Boolean).join(' '), ...this.inheritedAttributes }, h("div", { key: 'ad328efd8b1e88b5a653bdc1626528ca4a74573f', class: `${baseClass}__inner`, ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll }, h("div", { key: 'fefd988f94bb2c4d333651fa0e8f26cf414d42dd', class: `${baseClass}__top-scrim`, "aria-hidden": "true" }), h("slot", { key: '975fe6e6560c3f850574f42efa574451a2639215' }), h("div", { key: 'd81825c2befe958cc38142cdafd9d0e91bb783c3', class: `${baseClass}__bottom-scrim`, "aria-hidden": "true" }))));
     }
     static get watchers() { return {
         "dsActiveIndex": ["onActiveIndexChange"]
@@ -131,16 +151,18 @@ const DsOptions = class {
 };
 DsOptions.style = dsOptionsCss;
-const dsSelectCss = ".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__JDwdTJ-custom.sc-ds-select{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:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__JDwdTJ-custom.sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__JDwdTJ-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__JDwdTJ-custom-wrapper.sc-ds-select{position:relative}.ds-select__JDwdTJ-custom.sc-ds-select .ds-options__JDwdTJ.sc-ds-select{display:block}.ds-select__JDwdTJ-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__JDwdTJ-custom.sc-ds-select:not(.ds-select__JDwdTJ-custom--open,.ds-select__JDwdTJ-custom--invalid.sc-ds-select,.ds-select__JDwdTJ-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__JDwdTJ-custom.sc-ds-select:active:not(.ds-select__JDwdTJ-custom--open,.ds-select__JDwdTJ-custom--invalid.sc-ds-select,.ds-select__JDwdTJ-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__JDwdTJ-custom--open.sc-ds-select,.ds-select__JDwdTJ-custom.sc-ds-select:focus-visible{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-select__JDwdTJ-custom--open.sc-ds-select:not(.ds-select__JDwdTJ-custom--open--invalid,.ds-select__JDwdTJ-custom.sc-ds-select:focus-visible--invalid),.ds-select__JDwdTJ-custom.sc-ds-select:focus-visible:not(.ds-select__JDwdTJ-custom--open--invalid,.ds-select__JDwdTJ-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__JDwdTJ-custom--disabled.sc-ds-select{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__JDwdTJ-custom--disabled.sc-ds-select .ds-select__JDwdTJ-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__JDwdTJ-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__JDwdTJ-custom--invalid.sc-ds-select:not(.ds-select__JDwdTJ-custom--invalid--open,.ds-select__JDwdTJ-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__JDwdTJ-custom--invalid.sc-ds-select:not(.ds-select__JDwdTJ-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__JDwdTJ-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px))}.ds-select__JDwdTJ-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__JDwdTJ-custom--has-icon.sc-ds-select .ds-select__JDwdTJ-custom__selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__JDwdTJ-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__JDwdTJ-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__JDwdTJ-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__JDwdTJ-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed}.ds-select__JDwdTJ-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__JDwdTJ-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__JDwdTJ-custom__clear-button.sc-ds-select{position:absolute;right:var(--clear-button-offset, calc(24px + var(--ds-spacing-4xSmall) * 2 + var(--ds-spacing-xSmall) + 4px));cursor:pointer}.ds-select__JDwdTJ-custom__options-container.sc-ds-select{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-select__JDwdTJ-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__JDwdTJ-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__JDwdTJ-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__JDwdTJ-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__JDwdTJ-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__JDwdTJ-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__JDwdTJ-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__JDwdTJ-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__JDwdTJ-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{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:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__JDwdTJ-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
+const dsSelectCss = ".sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.ds-select__nkrEji-custom.sc-ds-select{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:pointer;box-sizing:border-box;height:2.75rem;width:100%}.ds-select__nkrEji-custom.sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__nkrEji-custom__dropdown-icon.sc-ds-select{cursor:pointer;align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-secondary);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-select__nkrEji-custom-wrapper.sc-ds-select{position:relative}.ds-select__nkrEji-custom.sc-ds-select .ds-options__nkrEji.sc-ds-select{display:block}.ds-select__nkrEji-custom-input-container.sc-ds-select{display:flex;position:relative}.ds-select__nkrEji-custom-input-container.sc-ds-select:has(.ds-select__nkrEji-custom__clear-button:hover) .ds-select__nkrEji-custom.sc-ds-select{background-color:var(--ds-bgColor-white-hover) !important}.ds-select__nkrEji-custom.sc-ds-select:not(.ds-select__nkrEji-custom--open,.ds-select__nkrEji-custom--invalid.sc-ds-select,.ds-select__nkrEji-custom--disabled).sc-ds-select:hover{background-color:var(--ds-bgColor-white-hover)}.ds-select__nkrEji-custom.sc-ds-select:active:not(.ds-select__nkrEji-custom--open,.ds-select__nkrEji-custom--invalid.sc-ds-select,.ds-select__nkrEji-custom--disabled).sc-ds-select{background-color:var(--ds-bgColor-white-active)}.ds-select__nkrEji-custom--open.sc-ds-select,.ds-select__nkrEji-custom.sc-ds-select:focus-visible{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-select__nkrEji-custom--open.sc-ds-select:not(.ds-select__nkrEji-custom--open--invalid,.ds-select__nkrEji-custom.sc-ds-select:focus-visible--invalid),.ds-select__nkrEji-custom.sc-ds-select:focus-visible:not(.ds-select__nkrEji-custom--open--invalid,.ds-select__nkrEji-custom.sc-ds-select:focus-visible--invalid){border-color:var(--ds-borderColor-primary)}.ds-select__nkrEji-custom--disabled.sc-ds-select{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-select__nkrEji-custom--disabled.sc-ds-select .ds-select__nkrEji-custom__dropdown-icon.sc-ds-select{color:var(--ds-textColor-disabled-onLight);border-left-color:var(--ds-borderColor-disabled-onLight);cursor:not-allowed}.ds-select__nkrEji-custom--invalid.sc-ds-select{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-select__nkrEji-custom--invalid.sc-ds-select:not(.ds-select__nkrEji-custom--invalid--open,.ds-select__nkrEji-custom--invalid--disabled).sc-ds-select:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-select__nkrEji-custom--invalid.sc-ds-select:not(.ds-select__nkrEji-custom--invalid--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-select__nkrEji-custom__dropdown-icon--has-clear-button.sc-ds-select{margin-left:var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px))}.ds-select__nkrEji-custom__selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall);flex:1;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.ds-select__nkrEji-custom--has-icon.sc-ds-select .ds-select__nkrEji-custom__selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-select__nkrEji-custom__selected-option__placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.ds-select__nkrEji-custom__selected-option__text.sc-ds-select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ds-textColor-default)}.ds-select__nkrEji-custom__selected-option__text--none-selected.sc-ds-select{color:var(--ds-textColor-secondary)}.ds-select__nkrEji-custom__selected-option__text--disabled.sc-ds-select{color:var(--ds-textColor-disabled-onLight)}.ds-select__nkrEji-custom.sc-ds-select input.sc-ds-select{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-select__nkrEji-custom.sc-ds-select input.sc-ds-select::placeholder{color:var(--ds-textColor-secondary)}.ds-select__nkrEji-custom.sc-ds-select input.sc-ds-select:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-select__nkrEji-custom.sc-ds-select input.sc-ds-select:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-select__nkrEji-custom.sc-ds-select input.sc-ds-select:focus{outline:none}.ds-select__nkrEji-custom__clear-button.sc-ds-select{position:absolute;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);cursor:pointer}.ds-select__nkrEji-custom__badge-container.sc-ds-select{position:absolute;z-index:2;pointer-events:none;right:calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px + 40px + var(--ds-spacing-4xSmall) * 2);padding:10px 0}.ds-select__nkrEji-custom__options-container.sc-ds-select{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-select__nkrEji-custom__options-container--open.sc-ds-select{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-select__nkrEji-custom__options-container__options.sc-ds-select{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-select__nkrEji-custom__options-container__options__inner.sc-ds-select{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-select__nkrEji-custom__options-container__options__inner__top-scrim.sc-ds-select,.ds-select__nkrEji-custom__options-container__options__inner__bottom-scrim.sc-ds-select{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-select__nkrEji-custom__options-container__options__inner__top-scrim--visible.sc-ds-select,.ds-select__nkrEji-custom__options-container__options__inner__bottom-scrim--visible.sc-ds-select{display:block}.ds-select__nkrEji-custom__options-container__options__inner__top-scrim.sc-ds-select{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-select__nkrEji-custom__options-container__options__inner__top-scrim--dark.sc-ds-select{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:0 -2px 7px var(--ds-overlay-black-50)}.ds-select__nkrEji-custom__options-container__options__inner__bottom-scrim.sc-ds-select{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}";
 const selectIdGenerator = idGenerator('ds-select');
 const defaultTextFns = {
     dsPlaceholder: selectAnOption,
 };
 const getTextValue = (key, value) => value || defaultTextFns[key]();
-const DsSelect = class {
+const DsSelect = class extends Mixin(multipleValueFactory) {
     constructor(hostRef) {
+        super();
         registerInstance(this, hostRef);
+        this.dsMultipleChange = createEvent(this, "dsMultipleChange");
         this.dsChange = createEvent(this, "dsChange");
         this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
         this.dsValidity = createEvent(this, "dsValidity");
@@ -157,6 +179,7 @@ const DsSelect = class {
     inheritedAttributes = {};
     get el() { return getElement(this); }
     internals;
+    dsMultipleChange;
     dsChange;
     dsSubmitInvalid;
     dsValidity;
@@ -180,17 +203,26 @@ const DsSelect = class {
     dsOptionsErrorText;
     dsRequired = false;
     activeOption = null;
-    selectedOption = null;
-    selectedOptionLabel;
+    selectedOptions = [];
+    selectedOptionsLabel;
     isOpen = false;
     activeIndex = null;
     hasFocus = false;
-    clearButtonOffset = null;
+    clearButtonRef;
+    iconRef;
+    badgeRef;
+    badgeContainerOffset = null;
     texts = {
         dsPlaceholder: selectAnOption(),
     };
     feedback = [];
     inputValidityId;
+    get isNative() {
+        return this.dsVariant === 'native';
+    }
+    get isMultiple() {
+        return this.dsVariant === 'multiple';
+    }
     getInputValidityId() {
         if (!this.inputValidityId) {
             this.inputValidityId = `${this.dsId}-validity`;
@@ -213,14 +245,17 @@ const DsSelect = class {
         return this.internals?.checkValidity();
     }
     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];
+    }
+    async getSelectedOptions() {
+        return await Promise.all(this.selectedOptions?.map(async (option) => ({
+            value: option.dsValue || null,
+            label: (await option.getLabel()) || null,
+            description: option.dsDescription || null,
+        })));
     }
     connectedCallback() {
         if (this.internals?.form) {
@@ -231,21 +266,14 @@ const DsSelect = class {
         this.setTexts();
         this.inheritedAttributes = {
             ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, this.dsVariant === 'native'
+            ...inheritAriaAttributes(this.el, this.isNative
                 ? ['aria-describedby', 'aria-controls', 'aria-haspopup']
                 : ['aria-haspopup', 'aria-expanded', 'aria-disabled', 'aria-labelledby', 'aria-describedby', 'aria-controls', 'aria-activedescendant']),
         };
     }
     componentDidLoad() {
-        if (this.dsValue) {
-            this.setSelectedOptionFromDsValue(this.dsValue);
-        }
-        if (this.internals) {
-            this.internals.setFormValue(this.dsValue || '');
-        }
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption());
-        }
+        this.internals?.setValidity({ valueMissing: this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)) }, atLeastOneOption());
+        this.value = this.toValue(this.dsValue);
     }
     disconnectedCallback() {
         if (this.internals?.form) {
@@ -253,13 +281,13 @@ const DsSelect = class {
         }
         this.debouncedResetFeedback.cancel();
     }
-    get DsIconTag() {
+    get DsIcon() {
         return transformTagName('ds-icon', 'ds-select', this.el);
     }
-    get DsInputValidityTag() {
+    get DsInputValidity() {
         return transformTagName('ds-input-validity', 'ds-select', this.el);
     }
-    get DsOptionTag() {
+    get DsOption() {
         return transformTagName('ds-option', 'ds-select', this.el);
     }
     get DsFeedback() {
@@ -267,7 +295,14 @@ const DsSelect = class {
     }
     customSelectRef;
     nativeSelectRef;
-    clearButtonRef;
+    handleEscEvent(event) {
+        if (this.selectedOptions.length > 0 && event.detail.key === 'Tab') {
+            this.clearButtonRef?.setFocus();
+        }
+        else if (['Escape', 'Shift+Tab'].includes(event.detail.key)) {
+            this.customSelectRef?.focus();
+        }
+    }
     handleLanguageChange() {
         this.setTexts();
     }
@@ -287,14 +322,20 @@ const DsSelect = class {
             });
         }
     }
-    async selectOption(option) {
+    async handleOptionClick(option) {
         if (!option || option.dsDisabled)
             return;
-        this.selectedOptionLabel = await option.getLabel();
-        this.dsValue = option.dsValue;
+        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.activeIndex = null;
         this.isOpen = false;
-        this.dsChange.emit(option.dsValue);
         (this.customSelectRef || this.nativeSelectRef)?.focus();
     }
     toggleDropdown() {
@@ -309,9 +350,11 @@ const DsSelect = class {
         if (this.dsDisabled)
             return;
         this.activeIndex = null;
-        this.selectedOption = null;
-        this.dsValue = null;
+        this.selectedOptions = [];
+        const removedValues = [...this.value];
+        this.value = this.toValue(null);
         this.isOpen = false;
+        this.dsMultipleChange.emit({ values: [], added: null, removed: removedValues });
         this.dsChange.emit(null);
         if (this.dsRequired) {
             this.dsValidity.emit({
@@ -348,16 +391,20 @@ const DsSelect = class {
             });
         }
     }
-    getClearButtonWidthOffset() {
-        this.clearButtonOffset = this.clearButtonRef?.clientWidth ? `${this.clearButtonRef.clientWidth}px` : null;
-    }
+    getBadgeContainerWidthOffset = async () => {
+        await this.clearButtonRef?.componentOnReady();
+        await this.badgeRef?.componentOnReady();
+        const clearButtonWidth = this.clearButtonRef?.getBoundingClientRect().width || 0;
+        const badgeContainerWidth = this.badgeRef?.getBoundingClientRect().width || 0;
+        this.badgeContainerOffset = clearButtonWidth && badgeContainerWidth ? clearButtonWidth + badgeContainerWidth : null;
+    };
     getAllOptions() {
-        return Array.from(this.el.querySelectorAll(this.DsOptionTag));
+        return Array.from(this.el.querySelectorAll(this.DsOption));
     }
     getFocusIndex() {
         const options = this.getAllOptions();
-        if (this.dsValue && this.dsValue.trim() !== '') {
-            const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.dsValue));
+        if (this.getValueItem(0)?.trim() !== '') {
+            const selectedIndex = options.findIndex(opt => String(opt.dsValue) === String(this.getValueItem(0)));
             if (selectedIndex !== -1) {
                 return selectedIndex;
             }
@@ -375,11 +422,11 @@ const DsSelect = class {
         this.activeOption = newValue !== null ? options[newValue] : null;
         options.forEach((opt, idx) => {
             opt.dsActive = idx === this.activeIndex;
-            opt.dsSelected = opt.dsValue === this.dsValue;
+            opt.dsSelected = this.inValue(opt.dsValue);
         });
     }
-    clearButtonOffsetObserver() {
-        this.getClearButtonWidthOffset();
+    clearButtonRefObserver() {
+        this.getBadgeContainerWidthOffset();
     }
     textPropObserver(newValue, _oldValue, propName) {
         this.texts = {
@@ -387,27 +434,28 @@ const DsSelect = class {
             [propName]: getTextValue(propName, newValue),
         };
     }
-    dsValueObserver(newValue) {
-        if (newValue === this.selectedOption?.dsValue) {
-            return;
-        }
-        this.setSelectedOptionFromDsValue(newValue);
-        if (this.internals) {
-            this.internals.setFormValue(newValue || '');
-        }
+    valueObserver(newValue) {
+        this.setSelectedOptionsFromValue(newValue);
     }
-    selectedOptionObserver(newValue, oldValue) {
-        if (oldValue) {
-            oldValue.dsSelected = false;
-        }
-        if (newValue) {
-            newValue.dsSelected = true;
+    dsValueObserver(newValue) {
+        this.value = this.toValue(newValue);
+    }
+    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,
+            });
         }
-        this.dsChange.emit(newValue?.dsValue || null);
-        this.dsValidity.emit({
-            flag: this.internals?.validity.valid ? 'valid' : 'customError',
-            message: this.internals?.validationMessage,
-        });
     }
     hasFocusObserver(newValue) {
         if (newValue) {
@@ -449,48 +497,48 @@ const DsSelect = class {
             return;
         }
     }
-    setSelectedOptionFromDsValue = async (dsValue) => {
-        if (!dsValue) {
-            await 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-select: No option found with dsValue "${dsValue}"`);
+        const options = this.getAllOptions().filter(opt => values.includes(opt.dsValue));
+        if (options.length === 0) {
+            console.warn(`ds-select: No options found matching dsValues "${values.join(', ')}"`);
             return;
         }
-        await this.setSelectedOption(option);
+        await this.setSelectedOptions(options);
     };
-    setSelectedOption = async (option) => {
-        if (option) {
-            option.dsActive = false;
-            this.internals?.setValidity({});
-        }
-        else if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption());
-        }
-        this.selectedOption = option;
-        this.activeOption = null;
-        this.selectedOptionLabel = (await option?.getLabel()) || '';
-        this.getClearButtonWidthOffset();
+    setSelectedOptions = async (options) => {
+        if (!this.isMultiple && this.activeOption) {
+            this.activeOption.dsActive = false;
+        }
+        this.internals?.setValidity({ valueMissing: this.dsRequired && options.length === 0 }, atLeastOneOption());
+        this.selectedOptions = options;
+        this.selectedOptionsLabel = options.length > 0 ? (await Promise.all(options.map(opt => opt.getLabel()))).join(', ') : '';
+        this.getBadgeContainerWidthOffset();
     };
     renderNativeSelect() {
         const DsSelectNative = transformTagName('ds-select-native', 'ds-select', this.el);
-        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsValue: this.dsValue, ...this.inheritedAttributes }, h("slot", { name: "label" }), h("slot", { name: "native" })));
+        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsName: this.dsName, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsValue: this.getValueItem(0) || '', ...this.inheritedAttributes }, h("slot", { name: "label" }), h("slot", { name: "native" })));
     }
     renderCustomSelect(baseClass) {
-        const noneSelected = !this.selectedOption;
+        const noneSelected = this.selectedOptions.length === 0;
         const labelId = `${this.dsId}-label`;
+        const badgeId = `${this.dsId}-badge`;
         const selectedOptionId = `${this.dsId}-selected-option`;
         const ariaDescribedBy = this.dsErrorText ? this.getInputValidityId() : undefined;
         const optionsContainerId = `ds-select-options-${this.dsId}`;
         const customSelectClass = `${baseClass}-custom`;
+        const DsBadge = transformTagName('ds-badge', 'ds-select', this.el);
         const DsButton = transformTagName('ds-button', 'ds-select', this.el);
         const DsOptions = transformTagName('ds-options', 'ds-select', this.el);
         const DsOptionsMessage = transformTagName('ds-options-message', 'ds-select', this.el);
         const DsControlLabel = transformTagName('ds-control-label', 'ds-select', this.el);
         const clearButtonAriaLabel = removeSelection(true);
-        return (h("div", null, h(DsControlLabel, { dsId: labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, onClick: () => {
+        return (h("div", { style: {
+                '--badge-container-offset': this.badgeContainerOffset ? `${this.badgeContainerOffset}px` : undefined,
+            } }, h(DsControlLabel, { dsId: labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, onClick: () => {
                 this.customSelectRef?.focus();
                 this.toggleDropdown();
             } }, h("slot", { name: "label" })), h("div", { class: `${customSelectClass}-wrapper` }, h("div", { class: `${customSelectClass}-input-container` }, h("div", { id: this.dsId, ref: el => (this.customSelectRef = el), class: classNames(`${customSelectClass}`, {
@@ -499,7 +547,7 @@ const DsSelect = class {
                 [`${customSelectClass}--disabled`]: this.dsDisabled,
                 [`${customSelectClass}--invalid`]: !!this.dsErrorText,
                 [`${customSelectClass}--has-icon`]: !!this.dsIcon,
-            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${this.dsId}-option-${this.activeIndex}` : undefined, onClick: () => {
+            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${labelId} ${badgeId}` : labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${this.dsId}-option-${this.activeIndex}` : undefined, onClick: () => {
                 if (!this.dsDisabled) {
                     this.toggleDropdown();
                 }
@@ -507,10 +555,15 @@ const DsSelect = class {
                 if (!this.dsDisabled) {
                     this.handleKeyDown(event);
                 }
-            } }, h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && h(this.DsIconTag, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon }), h("span", { id: selectedOptionId }, this.selectedOptionLabel || this.texts.dsPlaceholder)), h(this.DsIconTag, { style: { '--clear-button-offset': this.clearButtonOffset }, class: {
+            } }, h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && h(this.DsIcon, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon }), h("span", { id: selectedOptionId, class: classNames(`${customSelectClass}__selected-option__text`, {
+                [`${customSelectClass}__selected-option__text--none-selected`]: noneSelected,
+                [`${customSelectClass}__selected-option__text--disabled`]: this.dsDisabled,
+            }) }, this.selectedOptionsLabel || this.texts.dsPlaceholder)), h(this.DsIcon, { ref: el => {
+                this.iconRef = el;
+            }, class: {
                 [`${customSelectClass}__dropdown-icon`]: true,
-                [`${customSelectClass}__dropdown-icon--has-clear-button`]: this.dsClearable && this.selectedOptionLabel && !this.dsDisabled,
-            }, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.dsClearable && this.selectedOptionLabel && !this.dsDisabled && (h(DsButton, { style: { '--clear-button-offset': this.clearButtonOffset }, ref: el => {
+                [`${customSelectClass}__dropdown-icon--has-clear-button`]: this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled,
+            }, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: `${customSelectClass}__badge-container` }, h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (h(DsButton, { ref: el => {
                 this.clearButtonRef = el;
             }, class: `${customSelectClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: event => {
                 event.stopPropagation();
@@ -525,27 +578,29 @@ const DsSelect = class {
                 [`${customSelectClass}__options-container`]: true,
                 [`${customSelectClass}__options-container--open`]: this.isOpen,
             }, onClick: e => {
-                const option = e.target.closest(this.DsOptionTag);
-                if (option && !option.dsDisabled) {
-                    this.selectOption(option);
-                }
+                const option = e.target.closest(this.DsOption);
+                this.handleOptionClick(option);
             } }, h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText }), h(DsOptions, { dsActiveIndex: this.activeIndex, onDsActiveIndexChange: e => {
                 this.activeIndex = e.detail;
             }, onDsEsc: () => {
                 this.isOpen = false;
-            }, dsLabelId: labelId }, h("slot", null)))), !!this.dsErrorText && h(this.DsInputValidityTag, { id: this.getInputValidityId(), dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
+            }, dsLabelId: labelId, dsAriaMultiselectable: this.isMultiple }, h("slot", null)))), 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(this.DsInputValidity, { id: this.getInputValidityId(), dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
     }
     render() {
         const baseClass = cx('ds-select');
-        return (h(Host, { key: '825b69c2876b662dd1a82b9b50f91ad701d109a9', ...ifDefined('name', this.dsVariant === 'default' ? this.dsName : undefined) }, h("div", { key: '6f67a5a2ff5b0100c358533c174f78a479b5a483', tabIndex: -1 }, this.dsVariant === 'native' ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (h(Host, { key: 'd0760cf2e296b83e97f59d7b6b78e5315063d00b', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'db7efaf5b891b056e612d28fb46abd3e3399e3ac', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "activeIndex": ["activeIndexObserver"],
-        "clearButtonOffset": ["clearButtonOffsetObserver"],
+        "clearButtonRef": ["clearButtonRefObserver"],
+        "badgeRef": ["clearButtonRefObserver"],
         "dsPlaceholder": ["textPropObserver"],
+        "value": ["valueObserver"],
         "dsValue": ["dsValueObserver"],
-        "selectedOption": ["selectedOptionObserver"],
+        "selectedOptions": ["selectedOptionsObserver"],
         "hasFocus": ["hasFocusObserver"],
         "dsLoading": ["optionsMessagePropertyObserver"],
         "dsOptionsError": ["optionsMessagePropertyObserver"]