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

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

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

@@ -36,6 +36,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     dsDisabled = false;
     dsErrorText = '';
     dsIcon;
+    dsIconSize;
     dsValue = null;
     dsLoading = false;
     dsLoadingText;
@@ -44,6 +45,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     dsOptionsErrorText;
     dsFullWidth = false;
     dsRequired = false;
+    dsAriaLabel;
     activeOption = null;
     selectedOptions = [];
     selectedOptionsLabel;
@@ -350,7 +352,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, dsName: this.dsName || this.dsId, dsDisabled: this.dsDisabled, dsErrorText: this.dsErrorText, dsRequired: this.dsRequired, dsFullWidth: this.dsFullWidth, dsValue: this.getValueItem(0) || '', onDsChange: (e) => {
+        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) => {
                 this.value = this.toValue(e.detail);
             }, onDsValidity: (e) => {
                 this.dsValidity.emit(e.detail);
@@ -384,7 +386,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                 [`${customSelectClass}--disabled`]: this.dsDisabled,
                 [`${customSelectClass}--invalid`]: !!this.dsErrorText,
                 [`${customSelectClass}--has-icon`]: !!this.dsIcon,
-            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${labelId} ${badgeId}` : labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${this.dsId}-option-${this.activeIndex}` : undefined, onClick: () => {
+            }), tabIndex: this.dsDisabled ? -1 : 0, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-disabled": String(this.dsDisabled), "aria-label": this.dsAriaLabel, "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${labelId} ${badgeId}` : labelId, "aria-describedby": ariaDescribedBy, "aria-controls": optionsContainerId, "aria-activedescendant": this.activeIndex !== null ? `${this.dsId}-option-${this.activeIndex}` : undefined, onClick: () => {
                 if (!this.dsDisabled) {
                     this.toggleDropdown();
                 }
@@ -392,7 +394,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                 if (!this.dsDisabled) {
                     this.handleKeyDown(event);
                 }
-            } }, h("div", { class: `${customSelectClass}__selected-option` }, this.dsIcon && h(this.DsIcon, { class: `${customSelectClass}__selected-option__placeholder-icon`, dsName: this.dsIcon }), h("span", { id: selectedOptionId, class: classNames(`${customSelectClass}__selected-option__text`, {
+            } }, 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 => {
@@ -427,7 +429,7 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
     }
     render() {
         const baseClass = cx('ds-select');
-        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))));
+        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))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "scoped"; }
@@ -640,6 +642,25 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                 "reflect": false,
                 "attribute": "ds-icon"
             },
+            "dsIconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the icon to display inside the select component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-icon-size"
+            },
             "dsValue": {
                 "type": "string",
                 "mutable": false,
@@ -796,6 +817,25 @@ export class DsSelect extends Mixin(multipleValueFactory, disableEventsFactory)
                 "reflect": false,
                 "attribute": "ds-required",
                 "defaultValue": "false"
+            },
+            "dsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the select element, used for accessibility when there is no visible label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-aria-label"
             }
         };
     }

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

@@ -169,47 +169,47 @@
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__SPFJ1E {
+.ds-spinner__QIDqOT {
   display: inline-block;
 }
-.ds-spinner__SPFJ1E:has(.ds-spinner__SPFJ1E__text) {
+.ds-spinner__QIDqOT:has(.ds-spinner__QIDqOT__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__SPFJ1E {
+.ds-spinner__QIDqOT {
   /* Size */
 }
-.ds-spinner__SPFJ1E--small {
+.ds-spinner__QIDqOT--small {
   padding: 1.5px;
 }
-.ds-spinner__SPFJ1E--medium {
+.ds-spinner__QIDqOT--medium {
   padding: 3px;
 }
-.ds-spinner__SPFJ1E--large {
+.ds-spinner__QIDqOT--large {
   padding: 3px;
 }
-.ds-spinner__SPFJ1E--xLarge {
+.ds-spinner__QIDqOT--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__SPFJ1E--2xLarge {
+.ds-spinner__QIDqOT--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__SPFJ1E--custom {
+.ds-spinner__QIDqOT--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__SPFJ1E {
+.ds-spinner__QIDqOT {
   /* Position */
 }
-.ds-spinner__SPFJ1E--below {
+.ds-spinner__QIDqOT--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__SPFJ1E--right {
+.ds-spinner__QIDqOT--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__SPFJ1E__spinner {
+.ds-spinner__QIDqOT__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__SPFJ1E__text {
+.ds-spinner__QIDqOT__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__SPFJ1E__text--white {
+.ds-spinner__QIDqOT__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__SPFJ1E__segment {
+.ds-spinner__QIDqOT__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__SPFJ1E__segment--1 {
+.ds-spinner__QIDqOT__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__SPFJ1E__segment--2 {
+.ds-spinner__QIDqOT__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__SPFJ1E__segment--3 {
+.ds-spinner__QIDqOT__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -256,17 +256,17 @@
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__SPFJ1E__segment {
+  .ds-spinner__QIDqOT__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__SPFJ1E__segment--1 {
+  .ds-spinner__QIDqOT__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__SPFJ1E__segment--2 {
+  .ds-spinner__QIDqOT__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__SPFJ1E__segment--3 {
+  .ds-spinner__QIDqOT__segment--3 {
     animation-delay: -0.2s;
   }
 }

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

@@ -1,8 +1,9 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import classNames from "classnames";
 import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
 const SPINNER_SIZES = {
     'small': 10,
     'medium': 14,
@@ -23,7 +24,10 @@ const SPINNER_COLORS = {
     white: 'var(--ds-palette-white)',
     danger: 'var(--ds-palette-red-70)',
 };
-export class DsSpinner {
+export class DsSpinner extends Mixin(componentFactory('ds-spinner')) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     el;
     dsText;
@@ -41,6 +45,9 @@ export class DsSpinner {
             ...inheritAriaAttributes(this.el, ['role', 'aria-live']),
         };
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
         const sizeInPixels = SPINNER_SIZES[this.dsSize];
         const textSizeClass = this.dsCustomSize ? '' : SPINNER_TEXT_SIZES[this.dsSize];
@@ -55,11 +62,11 @@ export class DsSpinner {
         const segmentClasses = (index) => classNames(`${baseClass}__segment`, `${baseClass}__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
         const spinnerSizeValue = this.dsCustomSize ? `calc(${this.dsCustomSize} / 1.5833333333)` : `${sizeInPixels}px`;
-        return (h("div", { key: 'a5ab8628d31cd11157442ad55162b29d37816965', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: 'e005009f0d7ae9e2b65ea914b4d34121d549367c', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
                 '--spinner-size': spinnerSizeValue,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsColour == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '25ed96e729bb88c416b32d0f21880c5f2ab3951b', class: `${baseClass}__spinner` }, h("div", { key: 'b13b4a14ecc2c8c4c641eb86e4fdd74ebffad129', class: segmentClasses(1) }), h("div", { key: '318d9bb4f5a5d3f9fffba1becaee1e26e69b2be3', class: segmentClasses(2) }), h("div", { key: 'a30386defb94ac94812a7af7a997b0cd152282bc', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '3527ed4476c41989409a1b8211ae24e2a0b47094' }, h("span", { key: 'a04b0e8b08d801b76795989b0c65172e58935dd7' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '408add07c149d808d2907810fc10e0e8d5a43838', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: '7320d4ecad564b0fe273db837f8788df9779695b', class: `${baseClass}__spinner` }, h("div", { key: 'c48f5415839d7c6877aea23b0ce417083b1a3e68', class: segmentClasses(1) }), h("div", { key: '5493eb9032096b6d4465956f7464f0f1645f9b10', class: segmentClasses(2) }), h("div", { key: '21e06cea11eac46b75fa0c16e416ccce0ea7446a', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'a63fa57152c2a4521c8f046648d8b17aa48b6ebd' }, h("span", { key: '918c987794b085f3f2949154816e438482652399' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '43fdbe3aca2fd375f61d70b48266b7cd533c5dbe', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -84,7 +91,7 @@ export class DsSpinner {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Text to display alongside spinner"
@@ -256,7 +263,7 @@ export class DsSpinner {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Visually hidden information for screen readers"

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

@@ -106,21 +106,15 @@ export class DsStore {
             },
             "getLanguage": {
                 "complexType": {
-                    "signature": "() => Promise<Language>",
+                    "signature": "() => Promise<\"fi\" | \"sv\" | \"en\">",
                     "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "Language": {
-                            "location": "import",
-                            "path": "../../../store",
-                            "id": "src/store.ts::Language",
-                            "referenceLocation": "Language"
                         }
                     },
-                    "return": "Promise<Language>"
+                    "return": "Promise<\"fi\" | \"sv\" | \"en\">"
                 },
                 "docs": {
                     "text": "",

package/dist/collection/components/01-base-components/ds-tabs/ds-tab/ds-tab.css

@@ -8,7 +8,7 @@
   display: contents;
 }
 
-.ds-tab__SPFJ1E {
+.ds-tab__QIDqOT {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -33,22 +33,22 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-tab__SPFJ1E {
+  .ds-tab__QIDqOT {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-tab__SPFJ1E--selected, .ds-tab__SPFJ1E:hover:not(.ds-tab__SPFJ1E--selected), .ds-tab__SPFJ1E:active:not(.ds-tab__SPFJ1E--selected) {
+.ds-tab__QIDqOT--selected, .ds-tab__QIDqOT:hover:not(.ds-tab__QIDqOT--selected), .ds-tab__QIDqOT:active:not(.ds-tab__QIDqOT--selected) {
   color: var(--ds-textColor-default);
 }
-.ds-tab__SPFJ1E--container:focus-visible {
+.ds-tab__QIDqOT--container:focus-visible {
   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 * 1);
 }
-.ds-tab__SPFJ1E--container.ds-tab__SPFJ1E--selected {
+.ds-tab__QIDqOT--container.ds-tab__QIDqOT--selected {
   background-color: var(--ds-bgColor-white);
 }
-.ds-tab__SPFJ1E--container.ds-tab__SPFJ1E--selected::after {
+.ds-tab__QIDqOT--container.ds-tab__QIDqOT--selected::after {
   content: "";
   position: absolute;
   top: 0;
@@ -56,24 +56,24 @@
   right: 0;
   border-block-start: var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary);
 }
-.ds-tab__SPFJ1E--container.ds-tab__SPFJ1E--selected:not(:focus-visible)::before {
+.ds-tab__QIDqOT--container.ds-tab__QIDqOT--selected:not(:focus-visible)::before {
   content: "";
   position: absolute;
   inset: 0;
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tab__SPFJ1E--container:hover:not(.ds-tab__SPFJ1E--selected) {
+.ds-tab__QIDqOT--container:hover:not(.ds-tab__QIDqOT--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-tab__SPFJ1E--container:active:not(.ds-tab__SPFJ1E--selected) {
+.ds-tab__QIDqOT--container:active:not(.ds-tab__QIDqOT--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-tab__SPFJ1E--line:focus-visible .ds-tab__SPFJ1E__content {
+.ds-tab__QIDqOT--line:focus-visible .ds-tab__QIDqOT__content {
   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-tab__SPFJ1E--line.ds-tab__SPFJ1E--selected::after {
+.ds-tab__QIDqOT--line.ds-tab__QIDqOT--selected::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -81,7 +81,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-primary);
 }
-.ds-tab__SPFJ1E--line:hover:not(.ds-tab__SPFJ1E--selected)::after {
+.ds-tab__QIDqOT--line:hover:not(.ds-tab__QIDqOT--selected)::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -89,7 +89,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-default);
 }
-.ds-tab__SPFJ1E--line:active:not(.ds-tab__SPFJ1E--selected)::after {
+.ds-tab__QIDqOT--line:active:not(.ds-tab__QIDqOT--selected)::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -97,7 +97,7 @@
   right: 0;
   border-block-end: var(--ds-borderWidth-thick) solid var(--ds-borderColor-black);
 }
-.ds-tab__SPFJ1E .ds-tab__SPFJ1E__content {
+.ds-tab__QIDqOT .ds-tab__QIDqOT__content {
   position: relative;
   display: flex;
   flex-direction: row;