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

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.css

@@ -3,7 +3,7 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :not(:has(.ds-select__oSBnIJ--full-width)):host {
+  :not(:has(.ds-select__SPFJ1E--full-width)):host {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-select__oSBnIJ-native, .ds-select__oSBnIJ-custom {
+.ds-select__SPFJ1E-native, .ds-select__SPFJ1E-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -26,7 +26,7 @@
   width: 100%;
 }
 
-.ds-select__oSBnIJ-native__dropdown-icon, .ds-select__oSBnIJ-custom__dropdown-icon {
+.ds-select__SPFJ1E-native__dropdown-icon, .ds-select__SPFJ1E-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -37,60 +37,60 @@
   padding: 0 var(--ds-spacing-2xSmall);
 }
 
-.ds-select__oSBnIJ-custom-wrapper {
+.ds-select__SPFJ1E-custom-wrapper {
   position: relative;
 }
 
-.ds-select__oSBnIJ-custom .ds-options__oSBnIJ {
+.ds-select__SPFJ1E-custom .ds-options__SPFJ1E {
   display: block;
 }
-.ds-select__oSBnIJ-custom-input-container {
+.ds-select__SPFJ1E-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__oSBnIJ-custom-input-container:has(.ds-select__oSBnIJ-custom__clear-button:hover) .ds-select__oSBnIJ-custom {
+.ds-select__SPFJ1E-custom-input-container:has(.ds-select__SPFJ1E-custom__clear-button:hover) .ds-select__SPFJ1E-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__oSBnIJ-custom:not(.ds-select__oSBnIJ-custom--open, .ds-select__oSBnIJ-custom--invalid, .ds-select__oSBnIJ-custom--disabled):hover {
+.ds-select__SPFJ1E-custom:not(.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom--invalid, .ds-select__SPFJ1E-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__oSBnIJ-custom:active:not(.ds-select__oSBnIJ-custom--open, .ds-select__oSBnIJ-custom--invalid, .ds-select__oSBnIJ-custom--disabled) {
+.ds-select__SPFJ1E-custom:active:not(.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom--invalid, .ds-select__SPFJ1E-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__oSBnIJ-custom--open, .ds-select__oSBnIJ-custom:focus-visible {
+.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom: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__oSBnIJ-custom--open:not(.ds-select__oSBnIJ-custom--open--invalid, .ds-select__oSBnIJ-custom:focus-visible--invalid), .ds-select__oSBnIJ-custom:focus-visible:not(.ds-select__oSBnIJ-custom--open--invalid, .ds-select__oSBnIJ-custom:focus-visible--invalid) {
+.ds-select__SPFJ1E-custom--open:not(.ds-select__SPFJ1E-custom--open--invalid, .ds-select__SPFJ1E-custom:focus-visible--invalid), .ds-select__SPFJ1E-custom:focus-visible:not(.ds-select__SPFJ1E-custom--open--invalid, .ds-select__SPFJ1E-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__oSBnIJ-custom--disabled {
+.ds-select__SPFJ1E-custom--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-select__oSBnIJ-custom--disabled .ds-select__oSBnIJ-custom__dropdown-icon {
+.ds-select__SPFJ1E-custom--disabled .ds-select__SPFJ1E-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__oSBnIJ-custom--invalid {
+.ds-select__SPFJ1E-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__oSBnIJ-custom--invalid:not(.ds-select__oSBnIJ-custom--invalid--open, .ds-select__oSBnIJ-custom--invalid--disabled):active {
+.ds-select__SPFJ1E-custom--invalid:not(.ds-select__SPFJ1E-custom--invalid--open, .ds-select__SPFJ1E-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__oSBnIJ-custom--invalid:not(.ds-select__oSBnIJ-custom--invalid--disabled):hover {
+.ds-select__SPFJ1E-custom--invalid:not(.ds-select__SPFJ1E-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__oSBnIJ-custom__dropdown-icon--has-clear-button {
+.ds-select__SPFJ1E-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__oSBnIJ-custom__selected-option {
+.ds-select__SPFJ1E-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -104,27 +104,27 @@
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-xSmall);
 }
-.ds-select__oSBnIJ-custom--has-icon .ds-select__oSBnIJ-custom__selected-option {
+.ds-select__SPFJ1E-custom--has-icon .ds-select__SPFJ1E-custom__selected-option {
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__oSBnIJ-custom__selected-option__placeholder-icon {
+.ds-select__SPFJ1E-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__oSBnIJ-custom__selected-option__text {
+.ds-select__SPFJ1E-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 2px;
   color: var(--ds-textColor-default);
 }
-.ds-select__oSBnIJ-custom__selected-option__text--none-selected {
+.ds-select__SPFJ1E-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__oSBnIJ-custom__selected-option__text--disabled {
+.ds-select__SPFJ1E-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__oSBnIJ-custom input {
+.ds-select__SPFJ1E-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -138,32 +138,32 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__oSBnIJ-custom input::placeholder {
+.ds-select__SPFJ1E-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__oSBnIJ-custom input:disabled {
+.ds-select__SPFJ1E-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__oSBnIJ-custom input:disabled::placeholder {
+.ds-select__SPFJ1E-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__oSBnIJ-custom input:focus {
+.ds-select__SPFJ1E-custom input:focus {
   outline: none;
 }
-.ds-select__oSBnIJ-custom__clear-button {
+.ds-select__SPFJ1E-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
   cursor: pointer;
 }
-.ds-select__oSBnIJ-custom__badge-container {
+.ds-select__SPFJ1E-custom__badge-container {
   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__oSBnIJ-custom__options-container {
+.ds-select__SPFJ1E-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -173,11 +173,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__oSBnIJ-custom__options-container--open {
+.ds-select__SPFJ1E-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__oSBnIJ-custom__options-container__options {
+.ds-select__SPFJ1E-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -186,7 +186,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner {
+.ds-select__SPFJ1E-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -197,7 +197,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim, .ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim {
+.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim, .ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -207,58 +207,58 @@
   z-index: 1;
   display: none;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim--visible, .ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--visible, .ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim {
+.ds-select__SPFJ1E-custom__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-select__oSBnIJ-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__SPFJ1E-custom__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: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim {
+.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
 
-.ds-select__oSBnIJ-native:not(.ds-select__oSBnIJ-native--invalid, .ds-select__oSBnIJ-native--disabled):hover {
+.ds-select__SPFJ1E-native:not(.ds-select__SPFJ1E-native--invalid, .ds-select__SPFJ1E-native--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__oSBnIJ-native:has(.ds-select__oSBnIJ-native__select:active):not(.ds-select__oSBnIJ-native--invalid, .ds-select__oSBnIJ-native--disabled) {
+.ds-select__SPFJ1E-native:has(.ds-select__SPFJ1E-native__select:active):not(.ds-select__SPFJ1E-native--invalid, .ds-select__SPFJ1E-native--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__oSBnIJ-native:focus-within {
+.ds-select__SPFJ1E-native:focus-within {
   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__oSBnIJ-native--disabled {
+.ds-select__SPFJ1E-native--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-select__oSBnIJ-native--disabled .ds-select__oSBnIJ-native__dropdown-icon {
+.ds-select__SPFJ1E-native--disabled .ds-select__SPFJ1E-native__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__oSBnIJ-native--invalid {
+.ds-select__SPFJ1E-native--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__oSBnIJ-native--invalid:not(.ds-select__oSBnIJ-native--invalid--disabled):has(.ds-select__oSBnIJ-native__select:active) {
+.ds-select__SPFJ1E-native--invalid:not(.ds-select__SPFJ1E-native--invalid--disabled):has(.ds-select__SPFJ1E-native__select:active) {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__oSBnIJ-native--invalid:not(.ds-select__oSBnIJ-native--invalid--disabled):hover {
+.ds-select__SPFJ1E-native--invalid:not(.ds-select__SPFJ1E-native--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__oSBnIJ-native__selected-text {
+.ds-select__SPFJ1E-native__selected-text {
   flex: 1;
   padding: 0 var(--ds-spacing-xSmall);
   font-family: var(--ds-fontFamily-body);
@@ -268,7 +268,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.ds-select__oSBnIJ-native__select {
+.ds-select__SPFJ1E-native__select {
   position: absolute;
   top: 0;
   left: 0;
@@ -287,10 +287,10 @@
   color: inherit;
   flex: 1;
 }
-.ds-select__oSBnIJ-native__select::placeholder {
+.ds-select__SPFJ1E-native__select::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__oSBnIJ-native__select:disabled {
+.ds-select__SPFJ1E-native__select:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;

package/dist/collection/components/01-base-components/ds-select/ds-select-native/ds-select-native.js

@@ -96,11 +96,11 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
         const { ['aria-controls']: attrAriaControls, ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const ariaControls = this.dsAriaControls ?? attrAriaControls ?? `${this.dsId}-listbox`;
-        return (h("div", { key: '4637c1eb5ab582681c3affe8040bc6b733cbc63b' }, h(DsControlLabel, { key: 'fc095058829c5170d6817c6052ca89fc6def102b', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '6a3c47fbd90a3223329eb3d40f52235f41bec56c', name: "label" })), h("div", { key: '8e2cac7bd238e2a5d32f78acc03e33340162d395', class: classNames(`${nativeSelectClass}`, {
+        return (h("div", { key: 'a6151f2eb05db8596f5b2bf905bd3c86c6f037e2' }, h(DsControlLabel, { key: 'c7d3f6154dcefdb2bb6da5c1bf099b535aab047f', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '3f23a69479ea9ecdb75779de2578c58ace1e0976', name: "label" })), h("div", { key: 'bde07705b0a3746c8651d1836ed3d1340eee5dc8', class: classNames(`${nativeSelectClass}`, {
                 [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: '873bcb57f1de28b382a556b0ed604fce5cd77966', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '093f2fbd7b03b94dd6990a0f76438bf7f02b2c17', ref: el => {
+            }) }, h("div", { key: '9e0006fb87aee8a6d7137570262c1c23abbe2a4e', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: 'd9f2b83a5d31d2411af500955dd18af5ab242702', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
@@ -108,7 +108,7 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, h("option", { key: '6e26e0cf8129c40178eb53234fd77046ef896302', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: 'f56335457c6131faf6415cee729a7a5679763a02', name: "native" })), h(this.DsIconTag, { key: 'e744b4a109ff61203bda35fd58bf3d606a0566fb', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), !!this.dsErrorText && h(this.DsInputValidityTag, { key: 'e297ed9573d0ba53ea599482edc1a3bc22515ce7', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, "aria-controls": ariaControls, ...restAttributes }, h("option", { key: '9b1a4055f338a9c3640b0810c805afb21c48875b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: 'fb773442e20b07260b3418aa714591bbf4df3875', name: "native" })), h(this.DsIconTag, { key: 'd9cdf30eae2de4eb38796a4f8ffeb0e4f770a614', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down" })), h(this.DsInputValidityTag, { key: '779101ea5d70873be46cde2d86a5e578224493e8', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-select-native"; }
     static get encapsulation() { return "scoped"; }
@@ -414,7 +414,8 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }
@@ -435,7 +436,8 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }

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

@@ -3,7 +3,7 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :not(:has(.ds-select__oSBnIJ--full-width)):host {
+  :not(:has(.ds-select__SPFJ1E--full-width)):host {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
 
-.ds-select__oSBnIJ-custom {
+.ds-select__SPFJ1E-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -26,7 +26,7 @@
   width: 100%;
 }
 
-.ds-select__oSBnIJ-custom__dropdown-icon {
+.ds-select__SPFJ1E-custom__dropdown-icon {
   cursor: pointer;
   align-items: center;
   align-self: stretch;
@@ -37,60 +37,60 @@
   padding: 0 var(--ds-spacing-2xSmall);
 }
 
-.ds-select__oSBnIJ-custom-wrapper {
+.ds-select__SPFJ1E-custom-wrapper {
   position: relative;
 }
 
-.ds-select__oSBnIJ-custom .ds-options__oSBnIJ {
+.ds-select__SPFJ1E-custom .ds-options__SPFJ1E {
   display: block;
 }
-.ds-select__oSBnIJ-custom-input-container {
+.ds-select__SPFJ1E-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__oSBnIJ-custom-input-container:has(.ds-select__oSBnIJ-custom__clear-button:hover) .ds-select__oSBnIJ-custom {
+.ds-select__SPFJ1E-custom-input-container:has(.ds-select__SPFJ1E-custom__clear-button:hover) .ds-select__SPFJ1E-custom {
   background-color: var(--ds-bgColor-white-hover) !important;
 }
-.ds-select__oSBnIJ-custom:not(.ds-select__oSBnIJ-custom--open, .ds-select__oSBnIJ-custom--invalid, .ds-select__oSBnIJ-custom--disabled):hover {
+.ds-select__SPFJ1E-custom:not(.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom--invalid, .ds-select__SPFJ1E-custom--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-select__oSBnIJ-custom:active:not(.ds-select__oSBnIJ-custom--open, .ds-select__oSBnIJ-custom--invalid, .ds-select__oSBnIJ-custom--disabled) {
+.ds-select__SPFJ1E-custom:active:not(.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom--invalid, .ds-select__SPFJ1E-custom--disabled) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-select__oSBnIJ-custom--open, .ds-select__oSBnIJ-custom:focus-visible {
+.ds-select__SPFJ1E-custom--open, .ds-select__SPFJ1E-custom: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__oSBnIJ-custom--open:not(.ds-select__oSBnIJ-custom--open--invalid, .ds-select__oSBnIJ-custom:focus-visible--invalid), .ds-select__oSBnIJ-custom:focus-visible:not(.ds-select__oSBnIJ-custom--open--invalid, .ds-select__oSBnIJ-custom:focus-visible--invalid) {
+.ds-select__SPFJ1E-custom--open:not(.ds-select__SPFJ1E-custom--open--invalid, .ds-select__SPFJ1E-custom:focus-visible--invalid), .ds-select__SPFJ1E-custom:focus-visible:not(.ds-select__SPFJ1E-custom--open--invalid, .ds-select__SPFJ1E-custom:focus-visible--invalid) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-select__oSBnIJ-custom--disabled {
+.ds-select__SPFJ1E-custom--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-select__oSBnIJ-custom--disabled .ds-select__oSBnIJ-custom__dropdown-icon {
+.ds-select__SPFJ1E-custom--disabled .ds-select__SPFJ1E-custom__dropdown-icon {
   color: var(--ds-textColor-disabled-onLight);
   border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-select__oSBnIJ-custom--invalid {
+.ds-select__SPFJ1E-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__oSBnIJ-custom--invalid:not(.ds-select__oSBnIJ-custom--invalid--open, .ds-select__oSBnIJ-custom--invalid--disabled):active {
+.ds-select__SPFJ1E-custom--invalid:not(.ds-select__SPFJ1E-custom--invalid--open, .ds-select__SPFJ1E-custom--invalid--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__oSBnIJ-custom--invalid:not(.ds-select__oSBnIJ-custom--invalid--disabled):hover {
+.ds-select__SPFJ1E-custom--invalid:not(.ds-select__SPFJ1E-custom--invalid--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-select__oSBnIJ-custom__dropdown-icon--has-clear-button {
+.ds-select__SPFJ1E-custom__dropdown-icon--has-clear-button {
   margin-left: var(--badge-container-offset, calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px));
 }
-.ds-select__oSBnIJ-custom__selected-option {
+.ds-select__SPFJ1E-custom__selected-option {
   display: flex;
   align-items: center;
   gap: var(--ds-spacing-2xSmall);
@@ -104,27 +104,27 @@
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-xSmall);
 }
-.ds-select__oSBnIJ-custom--has-icon .ds-select__oSBnIJ-custom__selected-option {
+.ds-select__SPFJ1E-custom--has-icon .ds-select__SPFJ1E-custom__selected-option {
   padding-left: var(--ds-select-selected-option-padding, calc(var(--ds-spacing-xSmall) - 2px));
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-select__oSBnIJ-custom__selected-option__placeholder-icon {
+.ds-select__SPFJ1E-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__oSBnIJ-custom__selected-option__text {
+.ds-select__SPFJ1E-custom__selected-option__text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   padding-left: 2px;
   color: var(--ds-textColor-default);
 }
-.ds-select__oSBnIJ-custom__selected-option__text--none-selected {
+.ds-select__SPFJ1E-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__oSBnIJ-custom__selected-option__text--disabled {
+.ds-select__SPFJ1E-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__oSBnIJ-custom input {
+.ds-select__SPFJ1E-custom input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -138,32 +138,32 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-select__oSBnIJ-custom input::placeholder {
+.ds-select__SPFJ1E-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__oSBnIJ-custom input:disabled {
+.ds-select__SPFJ1E-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__oSBnIJ-custom input:disabled::placeholder {
+.ds-select__SPFJ1E-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__oSBnIJ-custom input:focus {
+.ds-select__SPFJ1E-custom input:focus {
   outline: none;
 }
-.ds-select__oSBnIJ-custom__clear-button {
+.ds-select__SPFJ1E-custom__clear-button {
   position: absolute;
   right: calc(24px + var(--ds-spacing-2xSmall) * 2 + 2px + 1px);
   cursor: pointer;
 }
-.ds-select__oSBnIJ-custom__badge-container {
+.ds-select__SPFJ1E-custom__badge-container {
   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__oSBnIJ-custom__options-container {
+.ds-select__SPFJ1E-custom__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -173,11 +173,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-select__oSBnIJ-custom__options-container--open {
+.ds-select__SPFJ1E-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__oSBnIJ-custom__options-container__options {
+.ds-select__SPFJ1E-custom__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -186,7 +186,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner {
+.ds-select__SPFJ1E-custom__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -197,7 +197,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim, .ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim {
+.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim, .ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -207,20 +207,20 @@
   z-index: 1;
   display: none;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim--visible, .ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim--visible {
+.ds-select__SPFJ1E-custom__options-container__options__inner__top-scrim--visible, .ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__top-scrim {
+.ds-select__SPFJ1E-custom__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-select__oSBnIJ-custom__options-container__options__inner__top-scrim--dark {
+.ds-select__SPFJ1E-custom__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: 0 -2px 7px var(--ds-overlay-black-50);
 }
-.ds-select__oSBnIJ-custom__options-container__options__inner__bottom-scrim {
+.ds-select__SPFJ1E-custom__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }

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

@@ -211,28 +211,12 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
             event.preventDefault();
             this.isOpen = true;
             this.updateActiveIndex();
-            this.scrollToActiveOption();
             window.requestAnimationFrame(() => {
                 const optionsList = this.el.querySelector(`.${cx('ds-options')}`);
                 optionsList?.focus();
             });
         }
     }
-    scrollToActiveOption() {
-        if (this.activeIndex === null)
-            return;
-        const optionsList = this.el.querySelector(`.${cx('ds-options')}`);
-        const allOptions = optionsList?.querySelectorAll(`.${cx('ds-option')}`);
-        if (!allOptions || this.activeIndex >= allOptions.length)
-            return;
-        const activeOption = allOptions[this.activeIndex];
-        if (activeOption) {
-            window.requestAnimationFrame(() => {
-                activeOption.focus();
-                activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
-            });
-        }
-    }
     getBadgeContainerWidthOffset = async () => {
         await componentOnReady(this.clearButtonRef);
         await componentOnReady(this.badgeRef);
@@ -439,11 +423,11 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                 this.isOpen = false;
             }, 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())));
+            this.selectedOptions.map(option => h("input", { type: "hidden", name: this.dsName, value: option.dsValue, key: option.dsValue })), 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: '9fcca0b6884e5e3af688877d5cd922cd63da2e0a', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'f412bab458ed1029a85133848f0117ffca0ff304', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (h(Host, { key: '3d3b24db037bfcc1799c04694dd66226cbf7db51', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '3ee46f44fb1489380eb1759a1ada5f8f7493f678', tabIndex: -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "scoped"; }
@@ -891,7 +875,8 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                         "DsSubmitInvalidEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsSubmitInvalidEvent",
+                            "referenceLocation": "DsSubmitInvalidEvent"
                         }
                     }
                 }
@@ -912,7 +897,8 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                         "DsValidityEvent": {
                             "location": "import",
                             "path": "../../../utils/controls/controlUtils",
-                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent"
+                            "id": "src/utils/controls/controlUtils.ts::DsValidityEvent",
+                            "referenceLocation": "DsValidityEvent"
                         }
                     }
                 }