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

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

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

@@ -30,6 +30,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     dsId = selectIdGenerator.next().value;
     dsName = this.dsId;
     dsLabel;
+    dsAssistiveText;
     dsPlaceholder;
     dsVariant = 'default';
     dsClearable = true;
@@ -56,27 +57,21 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     iconRef;
     badgeRef;
     badgeContainerOffset = null;
-    texts = {
-        dsPlaceholder: selectAnOption(),
-    };
     feedback = [];
-    inputValidityId;
     get isNative() {
         return this.dsVariant === 'native';
     }
     get isMultiple() {
         return this.dsVariant === 'multiple';
     }
-    getInputValidityId() {
-        if (!this.inputValidityId) {
-            this.inputValidityId = `${this.dsId}-validity`;
-        }
-        return this.inputValidityId;
+    get inputValidityId() {
+        return `${this.dsId}-validity`;
     }
-    setTexts() {
-        this.texts = {
-            dsPlaceholder: getTextValue('dsPlaceholder', this.dsPlaceholder),
-        };
+    get assistiveTextId() {
+        return `${this.dsId}-assistive-text`;
+    }
+    get placeholder() {
+        return getTextValue('dsPlaceholder', this.dsPlaceholder);
     }
     handleInvalid = (e) => {
         e.preventDefault();
@@ -108,7 +103,6 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     }
     componentWillLoad() {
         this.setDisableEventEmits(true);
-        this.setTexts();
         this.inheritedAttributes = {
             ...inheritAttributes(this, this.el),
             ...inheritAriaAttributes(this.el, this.isNative
@@ -127,7 +121,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     }
     disconnectedCallback() {
         if (this.internals?.form && !this.isNative) {
-            this.el.addEventListener('invalid', this.handleInvalid);
+            this.el.removeEventListener('invalid', this.handleInvalid);
         }
         this.debouncedResetFeedback.cancel();
     }
@@ -153,9 +147,6 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
             this.customSelectRef?.focus();
         }
     }
-    handleLanguageChange() {
-        this.setTexts();
-    }
     onFocusIn() {
         this.hasFocus = true;
     }
@@ -256,12 +247,6 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     clearButtonRefObserver() {
         this.getBadgeContainerWidthOffset();
     }
-    textPropObserver(newValue, _oldValue, propName) {
-        this.texts = {
-            ...this.texts,
-            [propName]: getTextValue(propName, newValue),
-        };
-    }
     valueObserver(newValue) {
         if (this.isNative)
             return;
@@ -352,7 +337,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     };
     renderNativeSelect() {
         const DsSelectNative = transformTagName('ds-select-native', 'ds-select', this.el);
-        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.texts.dsPlaceholder, dsIcon: this.dsIcon, dsIconSize: this.dsIconSize, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsAriaLabel: this.dsAriaLabel, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
+        return (h(DsSelectNative, { dsId: this.dsId, dsLabel: this.dsLabel, dsPlaceholder: this.placeholder, dsIcon: this.dsIcon, dsIconSize: this.dsIconSize, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsAriaLabel: this.dsAriaLabel, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
                 this.value = this.toValue(e.detail);
             }, onDsValidity: (e) => {
                 this.dsValidity.emit(e.detail);
@@ -365,7 +350,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
         const labelId = `${this.dsId}-label`;
         const badgeId = `${this.dsId}-badge`;
         const selectedOptionId = `${this.dsId}-selected-option`;
-        const ariaDescribedBy = this.dsErrorText ? this.getInputValidityId() : undefined;
+        const ariaDescribedBy = [!!this.dsAssistiveText && this.assistiveTextId, !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ') || undefined;
         const optionsContainerId = `ds-select-options-${this.dsId}`;
         const customSelectClass = `${baseClass}-custom`;
         const DsBadge = transformTagName('ds-badge', 'ds-select', this.el);
@@ -376,7 +361,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
         const clearButtonAriaLabel = removeSelection(true);
         return (h("div", { style: {
                 '--badge-container-offset': this.badgeContainerOffset ? `${this.badgeContainerOffset}px` : undefined,
-            } }, h(DsControlLabel, { dsId: labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, onClick: () => {
+            } }, h(DsControlLabel, { dsId: labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId, onClick: () => {
                 this.customSelectRef?.focus();
                 this.toggleDropdown();
             } }, h("slot", { name: "label" })), h("div", { class: `${customSelectClass}-wrapper` }, h("div", { class: `${customSelectClass}-input-container` }, h("div", { id: this.dsId, ref: el => (this.customSelectRef = el), class: classNames(`${customSelectClass}`, {
@@ -397,12 +382,11 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
             } }, h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && h(this.DsIcon, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon, dsSize: this.dsIconSize }), h("span", { id: selectedOptionId, class: classNames(`${customSelectClass}__selected-option__text`, {
                 [`${customSelectClass}__selected-option__text--none-selected`]: noneSelected,
                 [`${customSelectClass}__selected-option__text--disabled`]: this.dsDisabled,
-            }) }, this.selectedOptionsLabel || this.texts.dsPlaceholder)), h(this.DsIcon, { ref: el => {
+            }) }, this.selectedOptionsLabel || this.placeholder)), h(this.DsIcon, { ref: el => {
                 this.iconRef = el;
-            }, class: {
-                [`${customSelectClass}__dropdown-icon`]: true,
+            }, class: classNames(`${customSelectClass}__dropdown-icon`, {
                 [`${customSelectClass}__dropdown-icon--has-clear-button`]: this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled,
-            }, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: `${customSelectClass}__badge-container` }, h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (h(DsButton, { ref: el => {
+            }), dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' })), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: `${customSelectClass}__badge-container` }, h(DsBadge, { ref: el => (this.badgeRef = el), dsId: badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections() }))), this.dsClearable && this.selectedOptionsLabel && !this.dsDisabled && (h(DsButton, { ref: el => {
                 this.clearButtonRef = el;
             }, class: `${customSelectClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: event => {
                 event.stopPropagation();
@@ -419,17 +403,17 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
             }, onClick: e => {
                 const option = e.target.closest(this.DsOption);
                 this.handleOptionClick(option);
-            } }, h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText }), h(DsOptions, { dsActiveIndex: this.activeIndex, onDsActiveIndexChange: e => {
+            } }, h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText }), h(DsOptions, { dsActiveIndex: this.activeIndex ?? undefined, onDsActiveIndexChange: e => {
                 this.activeIndex = e.detail;
             }, onDsEsc: () => {
                 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 })), 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.inputValidityId, dsText: this.dsErrorText, dsType: "error" }), h(this.DsFeedback, { dsSrOnly: true, dsSrOnlyTag: "span" }, this.getFeedbackMessage())));
     }
     render() {
         const baseClass = cx('ds-select');
-        return (h(Host, { key: 'eec6752a7181803dd8426932913d6a715b8b6358', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'c6c0fdc8f765ade1fc605a2f03cc2c0cb177daca', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        return (h(Host, { key: '9baecfe636acf17e0281a7d948183e368ef84d39', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '4505bc36839629445cf84167c8eb24676f87c8ee', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "scoped"; }
@@ -474,7 +458,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The unique ID for the select component."
@@ -514,7 +498,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The label for the select component."
@@ -524,6 +508,25 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                 "reflect": false,
                 "attribute": "ds-label"
             },
+            "dsAssistiveText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text for additional information shown below label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-assistive-text"
+            },
             "dsPlaceholder": {
                 "type": "string",
                 "mutable": false,
@@ -851,7 +854,6 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
             "iconRef": {},
             "badgeRef": {},
             "badgeContainerOffset": {},
-            "texts": {},
             "feedback": {}
         };
     }
@@ -1052,9 +1054,6 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
             }, {
                 "propName": "badgeRef",
                 "methodName": "clearButtonRefObserver"
-            }, {
-                "propName": "dsPlaceholder",
-                "methodName": "textPropObserver"
             }, {
                 "propName": "value",
                 "methodName": "valueObserver"
@@ -1082,12 +1081,6 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                 "target": undefined,
                 "capture": false,
                 "passive": false
-            }, {
-                "name": "dsLanguageChange",
-                "method": "handleLanguageChange",
-                "target": "body",
-                "capture": false,
-                "passive": false
             }, {
                 "name": "focusin",
                 "method": "onFocusIn",

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

@@ -26,6 +26,7 @@ const renderSelect = (args) => {
         render(html `
         <ds-select
           ds-label=${args.dsLabel}
+          ds-assistive-text=${args.dsAssistiveText}
           ds-placeholder=${args.dsPlaceholder}
           ds-variant=${args.dsVariant}
           ?ds-clearable=${args.dsClearable}
@@ -51,6 +52,7 @@ const renderSelect = (args) => {
 export const Default = {
     args: {
         dsLabel: 'Default Select',
+        dsAssistiveText: '',
         dsPlaceholder: 'Select an option',
         dsVariant: 'default',
         dsClearable: true,
@@ -447,6 +449,7 @@ export const NativeEvents = {
 export const Playground = {
     args: {
         dsLabel: 'Playground',
+        dsAssistiveText: 'Assistive text',
         dsPlaceholder: 'playground-placeholder',
         dsId: 'playground-id',
         dsName: 'playground-name',

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

@@ -169,47 +169,47 @@
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__QIDqOT {
+.ds-spinner__GqWYnG {
   display: inline-block;
 }
-.ds-spinner__QIDqOT:has(.ds-spinner__QIDqOT__text) {
+.ds-spinner__GqWYnG:has(.ds-spinner__GqWYnG__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__QIDqOT {
+.ds-spinner__GqWYnG {
   /* Size */
 }
-.ds-spinner__QIDqOT--small {
+.ds-spinner__GqWYnG--small {
   padding: 1.5px;
 }
-.ds-spinner__QIDqOT--medium {
+.ds-spinner__GqWYnG--medium {
   padding: 3px;
 }
-.ds-spinner__QIDqOT--large {
+.ds-spinner__GqWYnG--large {
   padding: 3px;
 }
-.ds-spinner__QIDqOT--xLarge {
+.ds-spinner__GqWYnG--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__QIDqOT--2xLarge {
+.ds-spinner__GqWYnG--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__QIDqOT--custom {
+.ds-spinner__GqWYnG--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__QIDqOT {
+.ds-spinner__GqWYnG {
   /* Position */
 }
-.ds-spinner__QIDqOT--below {
+.ds-spinner__GqWYnG--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__QIDqOT--right {
+.ds-spinner__GqWYnG--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__QIDqOT__spinner {
+.ds-spinner__GqWYnG__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -219,14 +219,14 @@
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__QIDqOT__text {
+.ds-spinner__GqWYnG__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__QIDqOT__text--white {
+.ds-spinner__GqWYnG__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__QIDqOT__segment {
+.ds-spinner__GqWYnG__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -236,13 +236,13 @@
   animation: ds-spinner-rotate 1.1s cubic-bezier(0.7, 0.15, 0.3, 0.8) infinite;
   border-color: var(--spinner-color, #005a94) var(--spinner-border-color) var(--spinner-border-color) var(--spinner-border-color);
 }
-.ds-spinner__QIDqOT__segment--1 {
+.ds-spinner__GqWYnG__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__QIDqOT__segment--2 {
+.ds-spinner__GqWYnG__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__QIDqOT__segment--3 {
+.ds-spinner__GqWYnG__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -256,17 +256,17 @@
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__QIDqOT__segment {
+  .ds-spinner__GqWYnG__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__QIDqOT__segment--1 {
+  .ds-spinner__GqWYnG__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__QIDqOT__segment--2 {
+  .ds-spinner__GqWYnG__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__QIDqOT__segment--3 {
+  .ds-spinner__GqWYnG__segment--3 {
     animation-delay: -0.2s;
   }
 }