@uh-design-system/component-library 1.4.0 → 1.5.0-rc.0

package/dist/collection/components/01-base-components/ds-chip/ds-chip.css

@@ -1,9 +1,9 @@
-.ds-chip__SPFJ1E:focus-visible {
+.ds-chip__QIDqOT: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__SPFJ1E {
+.ds-chip__QIDqOT {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -18,12 +18,12 @@
   border: var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);
   border-radius: 1rem;
 }
-.ds-chip__SPFJ1E:hover {
+.ds-chip__QIDqOT:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__SPFJ1E:active {
+.ds-chip__QIDqOT:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__SPFJ1E__text {
+.ds-chip__QIDqOT__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -1,48 +1,51 @@
 import { Fragment, h, Mixin, forceUpdate } from "@stencil/core";
 import { removeSelection } from "../../../utils/controls/controlUtils";
-import { declareComponentDependencies, idGenerator, transformTagName, omit } from "../../../utils/utils";
+import { declareComponentDependencies, transformTagName, omit } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { ariaDeprecationFactory } from "../../00-foundations/factories/ariaDeprecationFactory";
-const chipIdGenerator = idGenerator('ds-chip');
-export class DsChip extends Mixin(ariaDeprecationFactory) {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+const parseName = (newValue, currValue) => {
+    return newValue || currValue;
+};
+export class DsChip extends Mixin(componentFactory('ds-chip'), ariaDeprecationFactory) {
     constructor() {
         super();
     }
-    dsRole;
-    dsAriaLabel;
-    chipGroup;
     buttonEl;
     inheritedAttributes = {};
     el;
     dsClick;
     dsForm;
-    dsId = chipIdGenerator.next().value;
-    dsName = this.dsId;
+    dsId = this.getUniqueId();
+    _dsName = this.dsId;
+    set dsName(newValue) {
+        this._dsName = parseName(newValue, this._dsName);
+    }
+    get dsName() {
+        return this._dsName;
+    }
     dsValue = 0;
     dsText;
     dsIcon;
     dsType = 'button';
-    name = this.dsName;
+    dsRole;
+    dsAriaLabel;
+    name = this._dsName;
     async setFocus() {
         this.buttonEl?.focus();
     }
-    async setName(newName) {
-        if (newName) {
-            this.name = newName;
-            return;
-        }
-        this.name = this.dsName;
-    }
     get DsChipGroupTag() {
         return transformTagName('ds-chip-group', 'ds-chip', this.el);
     }
     connectedCallback() {
-        this.chipGroup = this.el.closest(this.DsChipGroupTag);
-        this.chipGroup?.childConnected();
+        const chipGroup = this.el.closest(this.DsChipGroupTag);
+        this.name = parseName(chipGroup?.dsName, this.name);
+        chipGroup?.childConnected();
     }
     disconnectedCallback() {
-        this.chipGroup?.childDisconnected();
+        const chipGroup = this.el.closest(this.DsChipGroupTag);
+        chipGroup?.childDisconnected();
     }
     componentWillLoad() {
         this.getDeprecationWarningsForAriaAttributes(this.el);
@@ -50,7 +53,12 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
             ...inheritAttributes(this, this.el),
             ...inheritAriaAttributes(this.el),
         };
-        this.setName(this.el.closest(this.DsChipGroupTag)?.dsName);
+    }
+    componentDidLoad() {
+        this.componentMounted();
+    }
+    dsNameObserver(newValue) {
+        this.name = newValue;
     }
     ariaAttributeObserver(newValue, _oldValue, propName) {
         this.inheritedAttributes = {
@@ -70,7 +78,7 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
         const ariaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'];
         const Elem = resolvedRole ? 'div' : Fragment;
         const restAttributes = omit(this.inheritedAttributes, ['role', 'aria-label']);
-        return (h(Elem, { key: '5e8fac24a20ef512b186789fb1c7884b01d4a134', role: resolvedRole }, h("button", { key: '2ca4745f784e31dea050d4bf3f5b726a90635707', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: '7b5cd3d4e3adaeb8e155f2a010a40af90d778dbe', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '8b77eaa9122d68572ed39a707e795d408dbdc5d2', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '70e7f1a4235e8f427a18bdae863c93b4d48490ce', class: `${baseClass}__text` }, h("slot", { key: 'ccc96fdcb6b8576b0a56539ce0e219b0a65c0d17' }, this.dsText), h(DsVisuallyHidden, { key: '797a97d887309696dffa97a06fa9f315ee8413e9', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: 'dc664f8b8afbdc823605a6c36455152ddccf1a66', dsName: "close", dsSize: "1rem" }))));
+        return (h(Elem, { key: '78aa1823f1fb9176f63c14d6f1955b83fa7115f2', role: resolvedRole }, h("button", { key: '25ee0ae57d1a4d7540d7f58520dc2f6a38e8052e', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: '6a4be2105331431f86b71703eecdc8d0e6e8f93c', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '672bf282ea5a9bd7757156192f467399d47a141f', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: 'd5c793cb0dc19f2e8c6c1427fdb92050d702f082', class: `${baseClass}__text` }, h("slot", { key: 'ad4a14352e961465fd721c5ed269f4d20950934d' }, this.dsText), h(DsVisuallyHidden, { key: '8d3458b2c19349cc06310f81b583919a338b5723', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: 'ffa0ecae1ccf261abc1c3bbd342e048e680b49e1', dsName: "close", dsSize: "1rem" }))));
     }
     static get is() { return "ds-chip"; }
     static get originalStyleUrls() {
@@ -85,44 +93,6 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
     }
     static get properties() {
         return {
-            "dsRole": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `role` attribute of the container element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-role"
-            },
-            "dsAriaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Passed to the `aria-label` attribute of the `button` element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "ds-aria-label"
-            },
             "dsForm": {
                 "type": "string",
                 "mutable": false,
@@ -151,7 +121,7 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `id` attribute of the `button` element."
@@ -160,7 +130,7 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "chipIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsName": {
                 "type": "string",
@@ -171,13 +141,13 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `name` attribute of the `button` element."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": false,
                 "attribute": "ds-name",
                 "defaultValue": "this.dsId"
@@ -270,6 +240,44 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
                 "reflect": false,
                 "attribute": "ds-type",
                 "defaultValue": "'button'"
+            },
+            "dsRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `role` attribute of the container element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-role"
+            },
+            "dsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `aria-label` attribute of the `button` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-label"
             }
         };
     }
@@ -320,36 +328,15 @@ export class DsChip extends Mixin(ariaDeprecationFactory) {
                     "text": "Sets focus to the button element rendered inside `ds-chip` component.",
                     "tags": []
                 }
-            },
-            "setName": {
-                "complexType": {
-                    "signature": "(newName?: string | undefined) => Promise<void>",
-                    "parameters": [{
-                            "name": "newName",
-                            "type": "string",
-                            "docs": "new name to set."
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets the `name` attribute of the button element rendered inside `ds-chip` component.\nUsed internally to inherit `ds-chip-group` component `name` attribute.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "newName new name to set."
-                        }]
-                }
             }
         };
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "dsName",
+                "methodName": "dsNameObserver"
+            }, {
                 "propName": "role",
                 "methodName": "ariaAttributeObserver"
             }, {

package/dist/collection/components/01-base-components/ds-chip-group/ds-chip-group.css

@@ -1,4 +1,4 @@
-.ds-chip-group__SPFJ1E__chips {
+.ds-chip-group__QIDqOT__chips {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);

package/dist/collection/components/01-base-components/ds-chip-group/ds-chip-group.js

@@ -1,11 +1,11 @@
 import { forceUpdate, h, Mixin } from "@stencil/core";
-import { declareComponentDependencies, idGenerator, ifDefined, transformTagName } from "../../../utils/utils";
+import { declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { itemsShortage, itemsOverage } from "../../../utils/controls/controlUtils";
 import { ariaDeprecationFactory } from "../../00-foundations/factories/ariaDeprecationFactory";
-const chipGroupIdGenerator = idGenerator('ds-chip-group');
-export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsChipGroup extends Mixin(componentFactory('ds-chip-group'), ariaDeprecationFactory) {
     constructor() {
         super();
     }
@@ -15,7 +15,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
     dsChipClick;
     dsSubmitInvalid;
     dsValidity;
-    dsId = chipGroupIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsName = this.dsId;
     dsLabel;
     dsAriaLabel;
@@ -80,7 +80,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
         e.preventDefault();
         this.dsSubmitInvalid.emit({
             flag: 'customError',
-            message: this.internals?.validationMessage,
+            message: this.internals?.validationMessage ?? '',
         });
     };
     connectedCallback() {
@@ -95,13 +95,13 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
     }
     setValidity({ childCount = this.childCount, dsMinItems = this.dsMinItems, dsMaxItems = this.dsMaxItems, } = {}) {
         if (dsMinItems !== undefined && childCount < dsMinItems) {
-            this.internals.setValidity({ customError: true }, itemsShortage(dsMinItems - childCount));
+            this.internals?.setValidity({ customError: true }, itemsShortage(dsMinItems - childCount));
         }
         else if (dsMaxItems !== undefined && childCount > dsMaxItems) {
-            this.internals.setValidity({ customError: true }, itemsOverage(childCount - dsMaxItems));
+            this.internals?.setValidity({ customError: true }, itemsOverage(childCount - dsMaxItems));
         }
         else {
-            this.internals.setValidity({});
+            this.internals?.setValidity({});
         }
     }
     componentWillLoad() {
@@ -112,6 +112,9 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
         };
         this.setValidity();
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     onAriaChanged(newValue, _oldValue, propName) {
         this.inheritedAttributes = {
             ...this.inheritedAttributes,
@@ -120,7 +123,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
         forceUpdate(this);
     }
     dsNameObserver(newValue) {
-        this.childChips.forEach(chip => chip.setName(newValue));
+        this.childChips.forEach(chip => (chip.dsName = newValue));
     }
     childCountObserver(newValue) {
         this.setValidity({ childCount: newValue });
@@ -147,7 +150,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
         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 (h("div", { key: '3d997105e24947a53a36e592319a44ebc722f9f5', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: '23b0f596dc6ab52eeb6f5a5672438e3b1480c51a', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: 'de5b26bea865bae644051c906246429f13311f5c', name: "label" }), h("slot", { key: '73e8e3fce131d9425363e1923f9c5d5edb32c889', name: "assistiveText" })), h("div", { key: '10fa94cd28f8a7ea592129acbd3469beaf642ff2', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '2f464bd8dabc4f00a83e4ec33fc3a13da70663e0' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), h(this.DsInputValidity, { key: '961f85dd4e0458cfbc991e280ab69158480209a4', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
+        return (h("div", { key: '3e891ff4382e82c7096f0e7b70c47c4fb7b4ae20', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: 'ef0a1805c2d3d8be2d341b5b1629f60a3677cf84', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '62d5fd1b14df8854ff51974e806000429f99d437', name: "label" }), h("slot", { key: 'f1382d4ab634117707406118272c55809b9d33ba', name: "assistiveText" })), h("div", { key: '10dadc52350f45ec04e50e2df8e2f407ea7be26b', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '34d15e6790db57713e82b192e1317dee32919191' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), h(this.DsInputValidity, { key: '23959e8f0520f686d1dfb6e285490d31303bf1ed', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }
@@ -173,7 +176,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `id` of the `button` element."
@@ -182,7 +185,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "chipGroupIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsName": {
                 "type": "string",
@@ -193,7 +196,7 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Passed to the `name` attribute of all child `ds-chip` elements."
@@ -402,8 +405,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                     "references": {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
-                            "path": "../../..",
-                            "id": "src/index.ts::DsSubmitInvalidEvent",
+                            "path": "../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
                             "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
@@ -424,8 +427,8 @@ export class DsChipGroup extends Mixin(ariaDeprecationFactory) {
                     "references": {
                         "DsValidityEvent": {
                             "location": "import",
-                            "path": "../../..",
-                            "id": "src/index.ts::DsValidityEvent",
+                            "path": "../../../utils/controls/controlUtils",
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
                             "referenceLocation": "DsValidityEvent"
                         }
                     }

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

@@ -3,7 +3,7 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host:not(:has(.ds-combobox__SPFJ1E--full-width)) {
+  :host:not(:has(.ds-combobox__QIDqOT--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-combobox__SPFJ1E__input-container {
+.ds-combobox__QIDqOT__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +25,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__SPFJ1E__input-container--disabled {
+.ds-combobox__QIDqOT__input-container--disabled {
   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__SPFJ1E__input-container--disabled .ds-combobox__SPFJ1E__input-container__toggle-button {
+.ds-combobox__QIDqOT__input-container--disabled .ds-combobox__QIDqOT__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__SPFJ1E__input-container--invalid {
+.ds-combobox__QIDqOT__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__SPFJ1E__input-container--invalid:not(.ds-combobox__SPFJ1E__input-container--open):not(.ds-combobox__SPFJ1E__input-container--disabled):hover {
+.ds-combobox__QIDqOT__input-container--invalid:not(.ds-combobox__QIDqOT__input-container--open):not(.ds-combobox__QIDqOT__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__SPFJ1E__input-container--invalid:not(.ds-combobox__SPFJ1E__input-container--open):not(.ds-combobox__SPFJ1E__input-container--disabled):active {
+.ds-combobox__QIDqOT__input-container--invalid:not(.ds-combobox__QIDqOT__input-container--open):not(.ds-combobox__QIDqOT__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__SPFJ1E__input-container:active:not(.ds-combobox__SPFJ1E__input-container--invalid, .ds-combobox__SPFJ1E__input-container--disabled, .ds-combobox__SPFJ1E__input-container--open) {
+.ds-combobox__QIDqOT__input-container:active:not(.ds-combobox__QIDqOT__input-container--invalid, .ds-combobox__QIDqOT__input-container--disabled, .ds-combobox__QIDqOT__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__SPFJ1E__input-container:not(.ds-combobox__SPFJ1E__input-container--open, .ds-combobox__SPFJ1E__input-container:has(> .ds-combobox__SPFJ1E__input-container__clear-button > button:focus), .ds-combobox__SPFJ1E__input-container--invalid, .ds-combobox__SPFJ1E__input-container--disabled):hover {
+.ds-combobox__QIDqOT__input-container:not(.ds-combobox__QIDqOT__input-container--open, .ds-combobox__QIDqOT__input-container:has(> .ds-combobox__QIDqOT__input-container__clear-button > button:focus), .ds-combobox__QIDqOT__input-container--invalid, .ds-combobox__QIDqOT__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__SPFJ1E__input-container:has(> .ds-combobox__SPFJ1E__input-container__input:focus), .ds-combobox__SPFJ1E__input-container:has(> .ds-combobox__SPFJ1E__input-container__clear-button > button:focus) {
+.ds-combobox__QIDqOT__input-container:has(> .ds-combobox__QIDqOT__input-container__input:focus), .ds-combobox__QIDqOT__input-container:has(> .ds-combobox__QIDqOT__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__SPFJ1E__input-container__input {
+.ds-combobox__QIDqOT__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,47 +69,47 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__SPFJ1E__input-container__input::placeholder {
+.ds-combobox__QIDqOT__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__SPFJ1E__input-container__input:disabled {
+.ds-combobox__QIDqOT__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__SPFJ1E__input-container__input:disabled::placeholder {
+.ds-combobox__QIDqOT__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__SPFJ1E__input-container__input:focus {
+.ds-combobox__QIDqOT__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__SPFJ1E__input-container__icon {
+.ds-combobox__QIDqOT__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__SPFJ1E__input-container__icon + .ds-combobox__SPFJ1E__input-container__input {
+.ds-combobox__QIDqOT__input-container__icon + .ds-combobox__QIDqOT__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__SPFJ1E__input-container__badge-container {
+.ds-combobox__QIDqOT__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__SPFJ1E__input-container__badge-container--padded {
+.ds-combobox__QIDqOT__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__SPFJ1E__input-container__clear-button, .ds-combobox__SPFJ1E__input-container__toggle-button {
+.ds-combobox__QIDqOT__input-container__clear-button, .ds-combobox__QIDqOT__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__SPFJ1E__input-container__toggle-button {
+.ds-combobox__QIDqOT__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__SPFJ1E__input-container__toggle-button:focus {
+.ds-combobox__QIDqOT__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__SPFJ1E__input-container__toggle-button__icon {
+.ds-combobox__QIDqOT__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -118,7 +118,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__SPFJ1E__options-container {
+.ds-combobox__QIDqOT__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -128,11 +128,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__SPFJ1E__options-container--open {
+.ds-combobox__QIDqOT__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__SPFJ1E__options-container__options {
+.ds-combobox__QIDqOT__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -141,7 +141,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__SPFJ1E__options-container__options__inner {
+.ds-combobox__QIDqOT__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -152,7 +152,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim, .ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim {
+.ds-combobox__QIDqOT__options-container__options__inner__top-scrim, .ds-combobox__QIDqOT__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -162,20 +162,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim--visible, .ds-combobox__SPFJ1E__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__QIDqOT__options-container__options__inner__top-scrim--visible, .ds-combobox__QIDqOT__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim {
+.ds-combobox__QIDqOT__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-combobox__SPFJ1E__options-container__options__inner__top-scrim--dark {
+.ds-combobox__QIDqOT__options-container__options__inner__top-scrim--dark {
   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__SPFJ1E__options-container__options__inner__bottom-scrim {
+.ds-combobox__QIDqOT__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }