@uh-design-system/component-library 1.6.0-rc.0 → 1.6.0-rc.2

package/dist/cjs/ds-chip-group.cjs.entry.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-CmX4GdqZ.js');
-var utils = require('./utils-DK6WJuOa.js');
-var cx = require('./cx-B9luWO9I.js');
-var attributes = require('./attributes-5eBKMo1N.js');
-var controlUtils = require('./controlUtils-DKHcFVTq.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-ovkM9FIg.js');
-var componentFactory = require('./componentFactory-Cw20ncNZ.js');
-require('./store-Bc8GbxUL.js');
+var index = require('./index-zpctLS3M.js');
+var utils = require('./utils-D94MuKO1.js');
+var cx = require('./cx-CpuRM28-.js');
+var attributes = require('./attributes-DbNfxmvc.js');
+var controlUtils = require('./controlUtils-ClIkm4zt.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-6qJMJOuL.js');
+var componentFactory = require('./componentFactory-D5ZfrobO.js');
+require('./store-CSrs5MF9.js');
 
-const dsChipGroupCss = () => `.ds-chip-group__cpPWV0__chips.sc-ds-chip-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}`;
+const dsChipGroupCss = () => `.ds-chip-group__9el4Wy__chips.sc-ds-chip-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}`;
 
 const DsChipGroup = class extends index.Mixin(componentFactory.componentFactory('ds-chip-group', { stopRootTracking: true }), ariaDeprecationFactory.ariaDeprecationFactory) {
     constructor(hostRef) {
@@ -40,36 +40,29 @@ const DsChipGroup = class extends index.Mixin(componentFactory.componentFactory(
     dsAriaDescribedby;
     dsAssistiveText;
     dsErrorText;
-    setItemsProp = (prop, value) => {
-        if (!value) {
-            this[prop] = undefined;
-        }
-        else if (value < 0) {
-            this[prop] = 0;
-        }
-        else if (prop === '_dsMinItems' && this.dsMaxItems !== undefined && value > this.dsMaxItems) {
-            this[prop] = this.dsMaxItems;
-        }
-        else if (prop === '_dsMaxItems' && this.dsMinItems !== undefined && value < this.dsMinItems) {
-            this[prop] = this.dsMinItems;
-        }
-        else {
-            this[prop] = value;
-        }
+    normalizeItems = (value, { min, max }) => {
+        if (value === undefined)
+            return undefined;
+        let next = Math.max(0, value);
+        if (min !== undefined && next < min)
+            next = min;
+        if (max !== undefined && next > max)
+            next = max;
+        return next;
     };
     _dsMinItems;
     get dsMinItems() {
         return this._dsMinItems;
     }
     set dsMinItems(value) {
-        this.setItemsProp('_dsMinItems', value);
+        this._dsMinItems = this.normalizeItems(value, { min: 0, max: this.dsMaxItems });
     }
     _dsMaxItems;
     get dsMaxItems() {
         return this._dsMaxItems;
     }
     set dsMaxItems(value) {
-        this.setItemsProp('_dsMaxItems', value);
+        this._dsMaxItems = this.normalizeItems(value, { min: this.dsMinItems });
     }
     childCount = 0;
     get DsChipTag() {
@@ -140,7 +133,8 @@ const DsChipGroup = class extends index.Mixin(componentFactory.componentFactory(
         index.forceUpdate(this);
     }
     dsNameObserver(newValue) {
-        this.childChips.forEach(chip => (chip.dsName = newValue));
+        for (const chip of this.childChips)
+            chip.dsName = newValue;
     }
     childCountObserver(newValue) {
         this.setValidity({ childCount: newValue });
@@ -167,7 +161,7 @@ const DsChipGroup = class extends index.Mixin(componentFactory.componentFactory(
         const ariaDescribedBy = this.dsAriaDescribedby || attrAriaDescribedBy || [!!this.dsAssistiveText && assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
         const errorTextId = `${this.dsId}-error-text`;
-        return (index.h("div", { key: '4ababae35585e255c0a113e4841af4d9efe140a6', class: baseClass, role: "group", ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', this.dsAriaLabelledby), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...utils.ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, index.h(this.DsGroupLabel, { key: 'cf458c09e8a31ada663516781096d5c373fa1d68', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, index.h("slot", { key: '62fce22b818aa90866628b942500742f37e07a88', name: "label" }), index.h("slot", { key: '1c716f1105fbe74d2a5e72a40f7237a586d46f12', name: "assistiveText" })), index.h("div", { key: '3f02a975d23cdec126b53c1c1ff1508b61ba0eb6', role: "list", class: `${baseClass}__chips` }, index.h("slot", { key: '63f1039a8aa2a5ec7cfd33f15052988a6c6dbf41' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => index.h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), index.h(this.DsInputValidity, { key: '98b5b3a5a46d4eab0847e98e0d74dab2b64e1e97', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
+        return (index.h("div", { key: '65cfa5aecda4f0b674889cc0e120dfc9a0ea7e35', class: baseClass, role: "group", ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', this.dsAriaLabelledby), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...utils.ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, index.h(this.DsGroupLabel, { key: 'fa767b112ab1a442e06ce9341938b81d42487f9b', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, index.h("slot", { key: '7db691d4f8a2228ea5aebe55bf63cb53bc0bb548', name: "label" }), index.h("slot", { key: '529ba250c6345977b1d34041235b5b933700f68a', name: "assistiveText" })), index.h("div", { key: 'f6b4247b90ba8a87566f164f64692ab29e70c66e', role: "list", class: `${baseClass}__chips` }, index.h("slot", { key: '424b01344c6640e751530f582b58be72ed0869b4' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => index.h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), index.h(this.DsInputValidity, { key: '459a9a51d0bb5c4179e93ade081e012fd1220c79', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-CmX4GdqZ.js');
-var controlUtils = require('./controlUtils-DKHcFVTq.js');
-var utils = require('./utils-DK6WJuOa.js');
-var cx = require('./cx-B9luWO9I.js');
-var attributes = require('./attributes-5eBKMo1N.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-ovkM9FIg.js');
-var componentFactory = require('./componentFactory-Cw20ncNZ.js');
-require('./store-Bc8GbxUL.js');
+var index = require('./index-zpctLS3M.js');
+var controlUtils = require('./controlUtils-ClIkm4zt.js');
+var utils = require('./utils-D94MuKO1.js');
+var cx = require('./cx-CpuRM28-.js');
+var attributes = require('./attributes-DbNfxmvc.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-6qJMJOuL.js');
+var componentFactory = require('./componentFactory-D5ZfrobO.js');
+require('./store-CSrs5MF9.js');
 
-const dsChipCss = () => `.ds-chip__cpPWV0: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-chip__cpPWV0{box-sizing:border-box;display:inline-flex;align-items:center;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-primary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);padding:calc(var(--ds-spacing-3xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);border-radius:1rem}.ds-chip__cpPWV0:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__cpPWV0:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__cpPWV0__text{padding:0 var(--ds-spacing-3xSmall)}`;
+const dsChipCss = () => `.ds-chip__9el4Wy: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-chip__9el4Wy{box-sizing:border-box;display:inline-flex;align-items:center;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-primary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);padding:calc(var(--ds-spacing-3xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);border-radius:1rem}.ds-chip__9el4Wy:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__9el4Wy:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__9el4Wy__text{padding:0 var(--ds-spacing-3xSmall)}`;
 
 const parseName = (newValue, currValue) => {
     return newValue || currValue;

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

@@ -1,18 +1,17 @@
 'use strict';
 
-var index = require('./index-CmX4GdqZ.js');
+var index = require('./index-zpctLS3M.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DK6WJuOa.js');
-var controlUtils = require('./controlUtils-DKHcFVTq.js');
-var cx = require('./cx-B9luWO9I.js');
-var attributes = require('./attributes-5eBKMo1N.js');
-var constants = require('./constants-DQ8n-aJY.js');
-var multipleValueFactory = require('./multipleValueFactory-D1ktNvV9.js');
-var disableEventsFactory = require('./disableEventsFactory-c9n5p8Yp.js');
-var componentFactory = require('./componentFactory-Cw20ncNZ.js');
-require('./store-Bc8GbxUL.js');
+var utils = require('./utils-D94MuKO1.js');
+var controlUtils = require('./controlUtils-ClIkm4zt.js');
+var cx = require('./cx-CpuRM28-.js');
+var attributes = require('./attributes-DbNfxmvc.js');
+var multipleValueFactory = require('./multipleValueFactory-BYHR71-G.js');
+var disableEventsFactory = require('./disableEventsFactory-BEynoDKz.js');
+var componentFactory = require('./componentFactory-D5ZfrobO.js');
+require('./store-CSrs5MF9.js');
 
-const dsComboboxCss = () => `.sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h:not(:has(.ds-combobox__cpPWV0--full-width)){width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__cpPWV0__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__cpPWV0__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__cpPWV0__input-container--disabled.sc-ds-combobox .ds-combobox__cpPWV0__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__cpPWV0__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__cpPWV0__input-container--invalid.sc-ds-combobox:not(.ds-combobox__cpPWV0__input-container--open):not(.ds-combobox__cpPWV0__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__cpPWV0__input-container--invalid.sc-ds-combobox:not(.ds-combobox__cpPWV0__input-container--open):not(.ds-combobox__cpPWV0__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__cpPWV0__input-container.sc-ds-combobox:active:not(.ds-combobox__cpPWV0__input-container--invalid,.ds-combobox__cpPWV0__input-container--disabled.sc-ds-combobox,.ds-combobox__cpPWV0__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__cpPWV0__input-container.sc-ds-combobox:not(.ds-combobox__cpPWV0__input-container--open,.ds-combobox__cpPWV0__input-container.sc-ds-combobox:has(>.ds-combobox__cpPWV0__input-container__clear-button>button:focus),.ds-combobox__cpPWV0__input-container--invalid.sc-ds-combobox,.ds-combobox__cpPWV0__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__cpPWV0__input-container.sc-ds-combobox:has(>.ds-combobox__cpPWV0__input-container__input: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__cpPWV0__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__cpPWV0__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__cpPWV0__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__cpPWV0__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__cpPWV0__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__cpPWV0__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__cpPWV0__input-container__icon.sc-ds-combobox+.ds-combobox__cpPWV0__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__cpPWV0__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__cpPWV0__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__cpPWV0__input-container__clear-button.sc-ds-combobox,.ds-combobox__cpPWV0__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__cpPWV0__input-container__clear-button.sc-ds-combobox:has(button:focus){box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 2)}.ds-combobox__cpPWV0__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__cpPWV0__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__cpPWV0__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__cpPWV0__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-default);background-color:var(--ds-bgColor-white)}.ds-combobox__cpPWV0__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__cpPWV0__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__cpPWV0__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__cpPWV0__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__cpPWV0__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__cpPWV0__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__cpPWV0__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__cpPWV0__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__cpPWV0__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__cpPWV0__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 = () => `.ds-no-style-leak.sc-ds-combobox *.sc-ds-combobox{all:unset;box-sizing:border-box;display:block}.sc-ds-combobox-h{display:inline-block}.ds-combobox__9el4Wy__host.sc-ds-combobox-h{width:100%}@media (min-width: 30rem){.ds-combobox__9el4Wy__host.sc-ds-combobox-h{width:20rem}}@media (min-width: 30rem){.ds-combobox__9el4Wy__host--full-width.sc-ds-combobox-h{width:100%}}.sc-ds-combobox-h>.ds-combobox__9el4Wy.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__9el4Wy.sc-ds-combobox{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-combobox__9el4Wy__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__9el4Wy__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__9el4Wy__input-container--disabled.sc-ds-combobox .ds-combobox__9el4Wy__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__9el4Wy__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__9el4Wy__input-container--invalid.sc-ds-combobox:not(.ds-combobox__9el4Wy__input-container--open):not(.ds-combobox__9el4Wy__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__9el4Wy__input-container--invalid.sc-ds-combobox:not(.ds-combobox__9el4Wy__input-container--open):not(.ds-combobox__9el4Wy__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__9el4Wy__input-container.sc-ds-combobox:active:not(.ds-combobox__9el4Wy__input-container--invalid,.ds-combobox__9el4Wy__input-container--disabled.sc-ds-combobox,.ds-combobox__9el4Wy__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__9el4Wy__input-container.sc-ds-combobox:not(.ds-combobox__9el4Wy__input-container--open,.ds-combobox__9el4Wy__input-container.sc-ds-combobox:has(>.ds-combobox__9el4Wy__input-container__clear-button>button:focus),.ds-combobox__9el4Wy__input-container--invalid.sc-ds-combobox,.ds-combobox__9el4Wy__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__9el4Wy__input-container.sc-ds-combobox:has(>.ds-combobox__9el4Wy__input-container__input: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__9el4Wy__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__9el4Wy__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__9el4Wy__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__9el4Wy__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__9el4Wy__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__9el4Wy__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__9el4Wy__input-container__icon.sc-ds-combobox+.ds-combobox__9el4Wy__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__9el4Wy__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__9el4Wy__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__9el4Wy__input-container__clear-button.sc-ds-combobox,.ds-combobox__9el4Wy__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__9el4Wy__input-container__clear-button.sc-ds-combobox:has(button:focus){box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 2)}.ds-combobox__9el4Wy__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__9el4Wy__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__9el4Wy__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__9el4Wy__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-default);background-color:var(--ds-bgColor-white)}.ds-combobox__9el4Wy__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__9el4Wy__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__9el4Wy__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__9el4Wy__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__9el4Wy__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__9el4Wy__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__9el4Wy__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__9el4Wy__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__9el4Wy__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__9el4Wy__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 DsCombobox = class extends index.Mixin(componentFactory.componentFactory('ds-combobox', { stopRootTracking: true }), multipleValueFactory.multipleValueFactory, disableEventsFactory.disableEventsFactory) {
     constructor(hostRef) {
@@ -128,7 +127,7 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     }
     get noResultsText() {
         if (!this.dsNoResults && !this.noResults)
-            return;
+            return undefined;
         return this.dsNoResultsText || controlUtils.tryADifferentSearchTerm();
     }
     get isMultiple() {
@@ -163,8 +162,11 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
         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 (oldValue)
+            for (const opt of oldValue)
+                opt.dsSelected = false;
+        for (const opt of newValue)
+            opt.dsSelected = true;
         const shouldEmit = this.getShouldEmit([hasChanged]);
         this._setDisableEventEmits(true);
         if (shouldEmit) {
@@ -189,18 +191,14 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
         this.dsFilterChange.emit(newValue);
     }
     hasFocusObserver(newValue) {
-        if (newValue) {
-            this.dsFocus.emit();
-        }
-        else {
-            this.dsBlur.emit();
-        }
+        const eventEmitter = newValue ? this.dsFocus : this.dsBlur;
+        eventEmitter.emit();
     }
     resetFeedback = () => {
         this.feedback = [];
         index.forceUpdate(this);
     };
-    debouncedResetFeedback = utils.debounce(this.resetFeedback, constants.FEEDBACK_RESET_TIMEOUT);
+    debouncedResetFeedback = utils.debounce(this.resetFeedback, utils.FEEDBACK_RESET_TIMEOUT);
     appendFeedback = (key, message) => {
         this.removeFeedback(key);
         this.feedback = [...this.feedback, { key, message }];
@@ -209,9 +207,9 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     removeFeedback = (key) => {
         this.feedback = this.feedback.filter(item => item.key !== key);
     };
-    debouncedAppendFeedback = utils.debounce(this.appendFeedback, constants.FEEDBACK_SET_TIMEOUT);
+    debouncedAppendFeedback = utils.debounce(this.appendFeedback, utils.FEEDBACK_SET_TIMEOUT);
     getFeedbackMessage = () => {
-        return this.feedback.length > 0 ? this.feedback[this.feedback.length - 1]?.message : '';
+        return this.feedback.length > 0 ? this.feedback.at(-1)?.message : '';
     };
     statusPropertyObserver(newValue, _oldValue, propName) {
         if (!newValue) {
@@ -232,7 +230,6 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
         }
         if ((propName === 'dsNoResults' && (newValue || this.noResults)) || (propName === 'noResults' && (newValue || this.dsNoResults))) {
             this.appendFeedback(propName, [this.getNoResultsTitle(this.inputValue), this.noResultsText].filter(Boolean).join(' '));
-            return;
         }
     }
     ariaAttributeObserver(newValue, _oldValue, propName) {
@@ -312,9 +309,9 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
             ...attributes.inheritAttributes(this, this.el),
         };
         const groups = this.getAllGroups();
-        groups.forEach(group => {
+        for (const group of groups) {
             group.dsMouseDownPreventDefault = true;
-        });
+        }
         this.hasTopScrimDark = groups.length > 0;
     }
     componentDidLoad() {
@@ -323,6 +320,8 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
         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);
+        if (!this.optionsListRef)
+            return;
         this.observer = new MutationObserver(mutations => {
             for (const mutation of mutations) {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -391,19 +390,18 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
         this.activeOption = null;
     };
     scrollToActiveOption = () => {
-        if (!this.activeOption)
+        if (!this.activeOption || !this.optionsListInnerRef)
             return;
-        const optionsListInnerRect = this.optionsListInnerRef?.getBoundingClientRect();
+        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);
+        if (this.hasBottomScrim && optionRect.bottom > optionsListInnerRect.bottom - utils.SCRIM_HEIGHT) {
+            this.optionsListInnerRef.scrollTop += optionRect.bottom - (optionsListInnerRect.bottom - utils.SCRIM_HEIGHT);
             return;
         }
-        if (this.hasTopScrim && optionRect.top < optionsListInnerRect.top + constants.SCRIM_HEIGHT) {
-            this.optionsListInnerRef.scrollTop -= optionsListInnerRect.top + constants.SCRIM_HEIGHT - optionRect.top;
-            return;
+        if (this.hasTopScrim && optionRect.top < optionsListInnerRect.top + utils.SCRIM_HEIGHT) {
+            this.optionsListInnerRef.scrollTop -= optionsListInnerRect.top + utils.SCRIM_HEIGHT - optionRect.top;
         }
     };
     setActiveOption = (option) => {
@@ -436,7 +434,7 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     findFirstSelectableOptionInGroup = (element, selector) => {
         const options = Array.from(element.querySelectorAll(this.DsOptionTag)).filter(this.isSelectableOption);
         if (options?.length) {
-            return selector === 'nextElementSibling' ? options[0] : options[options.length - 1];
+            return selector === 'nextElementSibling' ? options[0] : options.at(-1);
         }
     };
     getOption = (selector, wrapFn) => async (option = this.activeOption) => {
@@ -481,7 +479,7 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     };
     getLastOption = async () => {
         const options = this.getSelectableOptions();
-        return options?.[options.length - 1] || null;
+        return options?.at(-1) || null;
     };
     getNextOption = this.getOption('nextElementSibling', this.getFirstOption);
     getPreviousOption = this.getOption('previousElementSibling', this.getLastOption);
@@ -573,13 +571,13 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
             return;
         let hiddenOptionsCount = 0;
         const allOptions = this.getAllOptions();
-        allOptions.forEach(option => {
+        for (const option of allOptions) {
             option.dsHidden = [option.textContent, option.dsLabel, option.dsDescription].every(text => !text?.toLowerCase().includes(this.inputValue.toLowerCase()));
             if (option.dsHidden) {
                 hiddenOptionsCount++;
             }
             this.updateGroupVisibility(option);
-        });
+        }
         this.noResults = hiddenOptionsCount === allOptions.length;
     };
     openCombobox = async (nextInputValue) => {
@@ -594,13 +592,13 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     closeCombobox = async (event, nextInputValue) => {
         if (!this.isOpen)
             return;
-        this.getAllGroups().forEach(group => {
+        for (const group of this.getAllGroups()) {
             group.dsHidden = false;
-        });
-        this.getAllOptions().forEach(option => {
+        }
+        for (const option of this.getAllOptions()) {
             option.dsHidden = false;
             option.dsActive = false;
-        });
+        }
         this.unsetActiveOption();
         await this.setInputValue(nextInputValue);
         this.isOpen = false;
@@ -669,10 +667,12 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
         const DsInputValidity = utils.transformTagName('ds-input-validity', 'ds-combobox', this.el);
         const DsControlLabel = utils.transformTagName('ds-control-label', 'ds-combobox', this.el);
         const baseClass = cx.cx('ds-combobox');
+        const hostClass = `${baseClass}__host`;
         const inputContainerClass = `${baseClass}__input-container`;
         const optionsContainerClass = `${baseClass}__options-container`;
-        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,
+        return (index.h(index.Host, { class: index$1.classNames(hostClass, {
+                [`${hostClass}--full-width`]: this.dsFullWidth,
+            }) }, 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}--open`]: this.isOpen,
             }) }, index.h("div", { class: index$1.classNames(inputContainerClass, {
                 [`${inputContainerClass}--disabled`]: this.dsDisabled,
@@ -686,9 +686,9 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
                 if (this.dsDisabled)
                     return;
                 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-invalid": this.dsErrorText ? '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`, {
+            } }, 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-invalid": this.dsErrorText ? 'true' : 'false', "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": this.dsLabel ? undefined : ariaLabel, "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, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: this.dsId, dsInInput: true, dsNoFocusRing: true })), 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, {
+            }) }, 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, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: this.dsId, dsInInput: true, dsNoFocusRing: true })), index.h("div", { id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabIndex: -1, "aria-label": this.dsLabel ? undefined : ariaLabel, "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", { 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,