@uh-design-system/component-library 0.7.1 → 0.7.2-rc.1

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

@@ -1,3 +1,75 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 :root,
 :host {
   --ds-breakpoint-xSmall: 20rem;
@@ -26,35 +98,35 @@
   position: relative;
   display: flex;
   align-items: center;
-  border: var(--ds-borderWidth-thin) solid var(--ds-palette-black-50);
-  background-color: var(--ds-palette-white);
-  color: var(--ds-palette-black-70);
+  border: 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;
   width: 100%;
 }
 .disabled.native-select-wrapper, .disabled.custom-select {
-  background-color: var(--ds-overlay-black-10);
-  border-color: var(--ds-overlay-black-15);
-  color: var(--ds-palette-black-40);
+  background-color: var(--ds-bgColor-disabled-onLight);
+  border-color: var(--ds-borderColor-disabled-onLight);
+  color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
 .disabled.native-select-wrapper .dropdown-icon, .disabled.custom-select .dropdown-icon {
-  color: var(--ds-palette-black-40);
-  border-left-color: var(--ds-overlay-black-15);
+  color: var(--ds-textColor-disabled-onLight);
+  border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
 .invalid.native-select-wrapper, .invalid.custom-select {
-  background-color: var(--ds-palette-red-05);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger);
+  border-color: var(--ds-borderColor-danger);
 }
 .invalid.native-select-wrapper:not(.open):not(.disabled):active, .invalid.custom-select:not(.open):not(.disabled):active {
-  background-color: var(--ds-palette-red-20);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger-active);
+  border-color: var(--ds-borderColor-danger);
 }
 .native-select-wrapper:not(.open):not(.invalid):not(.disabled):hover, .custom-select:not(.open):not(.invalid):not(.disabled):hover {
-  background-color: var(--ds-palette-black-10);
+  background-color: var(--ds-bgColor-white-hover);
 }
 
 .custom-select .selected-option {
@@ -73,37 +145,37 @@
   display: block;
 }
 .custom-select:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled):hover {
-  background-color: var(--ds-palette-black-10);
+  background-color: var(--ds-bgColor-white-hover);
 }
 .custom-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled) {
-  background-color: var(--ds-palette-black-20);
+  background-color: var(--ds-bgColor-white-active);
 }
 .custom-select--open, .custom-select:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  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);
 }
 .custom-select--open:not(.custom-select--open--invalid, .custom-select:focus-visible--invalid), .custom-select:focus-visible:not(.custom-select--open--invalid, .custom-select:focus-visible--invalid) {
-  border-color: var(--ds-palette-mainBlue-70);
+  border-color: var(--ds-borderColor-primary);
 }
 .custom-select--disabled {
-  background-color: var(--ds-overlay-black-10);
-  border-color: var(--ds-overlay-black-15);
-  color: var(--ds-palette-black-40);
+  background-color: var(--ds-bgColor-disabled-onLight);
+  border-color: var(--ds-borderColor-disabled-onLight);
+  color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
 .custom-select--disabled .dropdown-icon {
-  color: var(--ds-palette-black-40);
-  border-left-color: var(--ds-overlay-black-15);
+  color: var(--ds-textColor-disabled-onLight);
+  border-left-color: var(--ds-borderColor-disabled-onLight);
   cursor: not-allowed;
 }
 .custom-select--invalid {
-  background-color: var(--ds-palette-red-05);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger);
+  border-color: var(--ds-borderColor-danger);
 }
 .custom-select--invalid:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active {
-  background-color: var(--ds-palette-red-20);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger-active);
+  border-color: var(--ds-borderColor-danger);
 }
 
 .selected-option {
@@ -124,8 +196,8 @@
 .dropdown-icon {
   align-items: center;
   align-self: stretch;
-  border-left: var(--ds-borderWidth-hairline) solid var(--ds-overlay-black-15);
-  color: var(--ds-palette-black-70);
+  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);
@@ -140,7 +212,7 @@
   display: inline-block;
   font-weight: var(--ds-fontWeight-semibold);
   margin-bottom: var(--ds-spacing-2xSmall);
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 
 .selected-text {
@@ -160,8 +232,8 @@
   left: 0;
   right: 0;
   z-index: 10;
-  border: var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);
-  background-color: var(--ds-palette-white);
+  border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
+  background-color: var(--ds-bgColor-white);
 }
 
 .native-select {
@@ -186,29 +258,29 @@
   flex: 1;
 }
 .native-select::placeholder {
-  color: var(--ds-palette-black-70);
+  color: var(--ds-textColor-secondary);
 }
 .native-select:disabled {
-  background-color: var(--ds-overlay-black-10);
-  color: var(--ds-palette-black-40);
+  background-color: var(--ds-bgColor-disabled-onLight);
+  color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
 
 .native-select-wrapper:hover {
-  background-color: var(--ds-palette-black-10);
+  background-color: var(--ds-bgColor-white-hover);
 }
 .native-select-wrapper:focus-within {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
-  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  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);
 }
 .native-select-wrapper--disabled {
-  background-color: var(--ds-overlay-black-10);
-  border-color: var(--ds-overlay-black-15);
-  color: var(--ds-palette-black-40);
+  background-color: var(--ds-bgColor-disabled-onLight);
+  border-color: var(--ds-borderColor-disabled-onLight);
+  color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
 .native-select-wrapper--invalid {
-  background-color: var(--ds-palette-red-05);
-  border-color: var(--ds-palette-red-50);
+  background-color: var(--ds-bgColor-danger);
+  border-color: var(--ds-borderColor-danger);
 }

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

@@ -27,6 +27,9 @@ export class DsSelect {
     connectedCallback() {
         this.el.addEventListener('focusout', this.handleFocusOut);
     }
+    componentDidLoad() {
+        this.updateSelectedOptionFromValue(this.dsValue);
+    }
     disconnectedCallback() {
         this.el.removeEventListener('focusout', this.handleFocusOut);
     }
@@ -197,14 +200,20 @@ export class DsSelect {
         const activeOption = allOptions[this.activeIndex];
         if (activeOption) {
             activeOption.focus();
-            activeOption.scrollIntoView({ block: 'nearest' });
+            activeOption.scrollIntoView({ behavior: 'instant', block: 'center' });
         }
     }
     getAllOptions() {
         return Array.from(this.el.querySelectorAll(this.DsOptionTag));
     }
-    handleStateChange() {
+    handleActiveIndexChange() {
+        this.updateOptionStates();
+    }
+    handleDsValueChange(newValue) {
         this.updateOptionStates();
+        setTimeout(() => {
+            this.updateSelectedOptionFromValue(newValue);
+        }, 0);
     }
     updateOptionStates() {
         const options = this.getAllOptions();
@@ -225,6 +234,38 @@ export class DsSelect {
             }
         });
     }
+    updateSelectedOptionFromValue(value) {
+        if (value === null) {
+            this.selectedOption = null;
+            return;
+        }
+        const options = this.getAllOptions();
+        const matchingOption = options.find(opt => String(opt.dsValue) === String(value));
+        if (matchingOption) {
+            const labelEl = matchingOption.querySelector('.option-label');
+            let label = '';
+            if (labelEl) {
+                const descEl = labelEl.querySelector('.option-description');
+                if (descEl) {
+                    label = labelEl.textContent?.replace(descEl.textContent || '', '').trim() || '';
+                }
+                else {
+                    label = labelEl.textContent?.trim() || '';
+                }
+            }
+            else {
+                label = matchingOption.textContent?.trim() || '';
+            }
+            this.selectedOption = label;
+            const idx = options.findIndex(opt => String(opt.dsValue) === String(value));
+            if (idx !== -1) {
+                this.activeIndex = idx;
+            }
+        }
+        else {
+            this.selectedOption = null;
+        }
+    }
     renderNativeSelect() {
         const ariaDescribedBy = this.dsErrorText ? this.inputValidityId : undefined;
         const selectId = this.dsId || `${this.inputValidityId}-select`;
@@ -291,7 +332,7 @@ export class DsSelect {
             } }, h(DsOptions, { dsActiveIndex: this.activeIndex, onDsOptionsActiveIndexChange: e => this.activeIndex = e.detail, onDsOptionsEsc: () => { this.isOpen = false; }, dsLabelId: labelId, dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsOptionsError: this.dsOptionsError, dsOptionsErrorTitle: this.dsOptionsErrorTitle, dsOptionsErrorText: this.dsOptionsErrorText }, h("slot", null)))), !!this.dsErrorText && (h(this.DsInputValidityTag, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     render() {
-        return (h("div", { key: '4716b1f759f34fd18f9f776fec0c21dcb6f62c00', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
+        return (h("div", { key: 'ea977586362c2f69257e0bb0fcdb8bfacd0d8ac8', tabIndex: -1, onFocusout: this.handleFocusOut }, this.dsVariant === 'native'
             ? this.renderNativeSelect()
             : this.renderCustomSelect()));
     }
@@ -374,7 +415,7 @@ export class DsSelect {
                 "attribute": "ds-variant",
                 "mutable": false,
                 "complexType": {
-                    "original": "'native' | 'default'",
+                    "original": "'default' | 'native'",
                     "resolved": "\"default\" | \"native\"",
                     "references": {}
                 },
@@ -382,7 +423,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the variant of the select component. \"native\" uses the browser\u2019s default select, while \"default\" uses a custom implementation."
+                    "text": "Defines the variant of the select component:\n- \"default\" uses a custom implementation\n- \"native\" uses the browser\u2019s default select"
                 },
                 "getter": false,
                 "setter": false,
@@ -561,7 +602,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If true, shows an options error."
                 },
                 "getter": false,
                 "setter": false,
@@ -581,7 +622,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Title to display when there is an error loading options."
                 },
                 "getter": false,
                 "setter": false,
@@ -601,7 +642,7 @@ export class DsSelect {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text to display when there is an error loading options."
                 },
                 "getter": false,
                 "setter": false,
@@ -639,10 +680,10 @@ export class DsSelect {
     static get watchers() {
         return [{
                 "propName": "activeIndex",
-                "methodName": "handleStateChange"
+                "methodName": "handleActiveIndexChange"
             }, {
                 "propName": "dsValue",
-                "methodName": "handleStateChange"
+                "methodName": "handleDsValueChange"
             }];
     }
 }

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

@@ -39,6 +39,9 @@ const meta = {
         dsIcon: {
             control: 'text',
         },
+        dsValue: {
+            control: 'text',
+        },
     },
 };
 export default meta;
@@ -51,6 +54,7 @@ export const Default = {
         dsDisabled: false,
         dsErrorText: '',
         dsIcon: '',
+        dsValue: '',
     },
     render: (args) => html `
     <ds-select
@@ -61,6 +65,7 @@ export const Default = {
       ?ds-disabled=${args.dsDisabled}
       ds-error-text=${args.dsErrorText}
       ds-icon=${args.dsIcon}
+      ds-value=${args.dsValue}
     >
       <ds-option ds-value="option1">Option 1</ds-option>
       <ds-option ds-value="option2">Option 2</ds-option>
@@ -77,6 +82,7 @@ export const Playground = {
         dsDisabled: false,
         dsErrorText: '',
         dsIcon: 'language',
+        dsValue: '',
         options: [
             { dsValue: 'option1', dsLabel: 'Option 1', dsDisabled: false },
             { dsValue: 'option2', dsLabel: 'Option 2', dsDisabled: false },
@@ -104,6 +110,7 @@ export const Playground = {
       ?ds-disabled=${args.dsDisabled}
       ds-error-text=${args.dsErrorText}
       ds-icon=${args.dsIcon}
+      ds-value=${args.dsValue}
       key=${JSON.stringify(args.options)}
     >
       ${args.options.map(renderDynamicOption)}

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

@@ -1,3 +1,75 @@
+:root,
+:host {
+  --ds-textColor-default: var(--ds-palette-black-95);
+  --ds-textColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-textColor-secondary: var(--ds-palette-black-70);
+  --ds-textColor-white: var(--ds-palette-white);
+  --ds-textColor-danger: var(--ds-palette-red-70);
+  --ds-textColor-success: var(--ds-palette-green-70);
+  --ds-textColor-disabled-onLight: var(--ds-palette-black-40);
+  --ds-textColor-disabled-onDark: var(--ds-overlay-white-40);
+  --ds-textColor-link: var(--ds-palette-mainBlue-70);
+  --ds-textColor-link-hover: var(--ds-palette-mainBlue-80);
+  --ds-textColor-link-active: var(--ds-palette-mainBlue-90);
+  --ds-textColor-link-visited: #551a8b;
+  --ds-textColor-link-standalone: var(--ds-palette-black-70);
+  --ds-textColor-link-standalone-hover: var(--ds-palette-black-80);
+  --ds-textColor-link-standalone-active: var(--ds-palette-black-95);
+  --ds-textColor-link-standalone-focus: var(--ds-palette-black-70);
+  --ds-textColor-info: var(--ds-palette-blue-70);
+  --ds-textColor-attention: var(--ds-palette-yellow-70);
+  --ds-bgColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-bgColor-primary-hover: var(--ds-palette-mainBlue-80);
+  --ds-bgColor-primary-active: var(--ds-palette-mainBlue-90);
+  --ds-bgColor-secondary: var(--ds-palette-white);
+  --ds-bgColor-secondary-hover: var(--ds-palette-mainBlue-05);
+  --ds-bgColor-secondary-active: var(--ds-palette-mainBlue-10);
+  --ds-bgColor-white: var(--ds-palette-white);
+  --ds-bgColor-white-hover: var(--ds-palette-black-10);
+  --ds-bgColor-white-active: var(--ds-palette-black-20);
+  --ds-bgColor-black: var(--ds-palette-black-95);
+  --ds-bgColor-black-hover: var(--ds-palette-black-80);
+  --ds-bgColor-black-active: var(--ds-palette-black-70);
+  --ds-bgColor-danger: var(--ds-palette-red-05);
+  --ds-bgColor-danger-hover: var(--ds-palette-red-10);
+  --ds-bgColor-danger-active: var(--ds-palette-red-20);
+  --ds-bgColor-success: var(--ds-palette-green-05);
+  --ds-bgColor-success-hover: var(--ds-palette-green-10);
+  --ds-bgColor-success-active: var(--ds-palette-green-20);
+  --ds-bgColor-transparent-onLight: var(--ds-overlay-black-00);
+  --ds-bgColor-transparent-onLight-hover: var(--ds-overlay-black-10);
+  --ds-bgColor-transparent-onLight-active: var(--ds-overlay-black-15);
+  --ds-bgColor-transparent-onDark: var(--ds-overlay-white-00);
+  --ds-bgColor-transparent-onDark-hover: var(--ds-overlay-white-30);
+  --ds-bgColor-transparent-onDark-active: var(--ds-overlay-white-40);
+  --ds-bgColor-disabled-onLight: var(--ds-overlay-black-10);
+  --ds-bgColor-disabled-onDark: var(--ds-overlay-white-10);
+  --ds-bgColor-info: var(--ds-palette-blue-05);
+  --ds-bgColor-info-hover: var(--ds-palette-blue-10);
+  --ds-bgColor-info-active: var(--ds-palette-blue-20);
+  --ds-bgColor-neutral: var(--ds-palette-black-05);
+  --ds-bgColor-neutral-hover: var(--ds-palette-black-10);
+  --ds-bgColor-neutral-active: var(--ds-palette-black-20);
+  --ds-bgColor-neutralLight: var(--ds-palette-black-03);
+  --ds-bgColor-neutralLight-hover: var(--ds-palette-black-05);
+  --ds-bgColor-neutralLight-active: var(--ds-palette-black-10);
+  --ds-bgColor-attention: var(--ds-palette-yellow-05);
+  --ds-bgColor-attention-hover: var(--ds-palette-yellow-10);
+  --ds-bgColor-attention-active: var(--ds-palette-yellow-20);
+  --ds-borderColor-default: var(--ds-palette-black-50);
+  --ds-borderColor-primary: var(--ds-palette-mainBlue-70);
+  --ds-borderColor-black: var(--ds-palette-black-95);
+  --ds-borderColor-white: var(--ds-palette-white);
+  --ds-borderColor-danger: var(--ds-palette-red-50);
+  --ds-borderColor-success: var(--ds-palette-green-50);
+  --ds-borderColor-transparent: var(--ds-overlay-black-00);
+  --ds-borderColor-disabled-onLight: var(--ds-overlay-black-15);
+  --ds-borderColor-disabled-onDark: var(--ds-overlay-white-15);
+  --ds-borderColor-light: var(--ds-palette-black-20);
+  --ds-borderColor-info: var(--ds-palette-blue-50);
+  --ds-borderColor-attention: var(--ds-palette-yellow-50);
+}
+
 html {
   font-size: 100%;
 }
@@ -89,7 +161,7 @@ body {
 
 /* Text colors */
 .ds-text-color--default {
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 
 /* Text Sizes */
@@ -220,7 +292,7 @@ body {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
-  border: calc(var(--spinner-size, 24px) / 6) solid var(--ds-overlay-black-15);
+  border: calc(var(--spinner-size, 24px) / 6) solid var(--ds-borderColor-disabled-onLight);
   position: relative;
   display: flex;
   align-items: center;
@@ -228,10 +300,10 @@ body {
 }
 .ds-spinner__text {
   font-family: var(--ds-fontFamily-body);
-  color: var(--ds-palette-black-95);
+  color: var(--ds-textColor-default);
 }
 .ds-spinner__text--white {
-  color: var(--ds-palette-white);
+  color: var(--ds-textColor-white);
 }
 .ds-spinner__segment {
   display: block;

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

@@ -44,11 +44,11 @@ export class DsSpinner {
         const textClasses = classNames('ds-spinner__text', textSizeClass, `ds-spinner__text--${this.dsSpinnerColor}`);
         const segmentClasses = (index) => classNames('ds-spinner__segment', `ds-spinner__segment--${index}`);
         const DsVisuallyHidden = transformTagName('ds-visually-hidden', 'ds-spinner', this.el);
-        return (h("div", { key: '41ac2e9d4a4d47ba260cf0573c625c4cc3285772', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
+        return (h("div", { key: '717b10fb2a73640df5c104205af85f119129ad99', role: this.dsUseRoleAlert ? 'alert' : null, "aria-live": this.dsUseAriaLive ? 'polite' : null, class: classes, style: {
                 '--spinner-size': `${sizeInPixels}px`,
                 '--spinner-color': `${spinnerColorVariable}`,
                 '--spinner-border-color': this.dsSpinnerColor == 'white' ? 'var(--ds-overlay-white-15)' : 'transparent',
-            }, ...this.inheritedAttributes }, h("div", { key: '8f275e0bdbdd5ace7ad4c9cf3c7ce367ba5882ee', class: "ds-spinner__spinner" }, h("div", { key: '2ae06bbf92492d0f6c63054c360257da685a2310', class: segmentClasses(1) }), h("div", { key: 'c5a12fd927eee963657c2a82d91ecfa81eb88a2d', class: segmentClasses(2) }), h("div", { key: '80c36207963e53a3ca4041d993e60854f74dccae', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'aea851246b5b233128c94b4dc49eee409d19cc15' }, h("span", { key: '6ffda5a7cc47eb4842dc8cf945ae7a2dbb4f49c7' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '020b3ccab3864a19ce3939661183731ae4db1d08', class: textClasses }, this.dsText)));
+            }, ...this.inheritedAttributes }, h("div", { key: '0ef5e3de363770fc1b15b4c20b78246f4c11eb03', class: "ds-spinner__spinner" }, h("div", { key: '65f925540b6fd8c0214d6392e3c6fe8751fc7de4', class: segmentClasses(1) }), h("div", { key: '1e062bc0fc9e78b9cd6d2413a61428d710f621b7', class: segmentClasses(2) }), h("div", { key: '520be4f4915f2c455ba58c009f12853b651f2f1b', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'b26675a2f64cc5833cbeeed1f7874b833352fa9f' }, h("span", { key: 'aedee4d1d142804207bb0764d212c0c7a9075a56' }, this.dsHiddenAssistiveText))), this.dsText && h("span", { key: '681c87db1c71a74461e68ba6702f3e766a7c4674', class: textClasses }, this.dsText)));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,11 +1,29 @@
 import { html } from "lit";
 import { litTemplateResultToString } from "../../../../utils/utils";
-import { toggleSpinnerLoad } from "../../../../utils/spinner/spinnerUtils";
 const meta = {
     title: 'Base Components/Spinner/Examples',
     component: 'ds-spinner',
 };
 export default meta;
+function toggleSpinnerLoad(buttonElement, spinnerElement, results, buttonOriginalValue, loadValue, loadingDuration = 3000) {
+    if (buttonElement.getAttribute('ds-is-loading') === 'true')
+        return;
+    const originalIsLoading = buttonElement.getAttribute('ds-is-loading') || 'false';
+    const originalAriaDisabled = buttonElement.getAttribute('ds-aria-disabled') || 'false';
+    buttonElement.setAttribute('ds-value', loadValue);
+    buttonElement.setAttribute('ds-is-loading', 'true');
+    buttonElement.setAttribute('ds-aria-disabled', 'true');
+    results.classList.add('ds-sb-hidden');
+    spinnerElement.classList.remove('ds-sb-hidden');
+    setTimeout(() => {
+        buttonElement.setAttribute('ds-value', buttonOriginalValue);
+        buttonElement.setAttribute('ds-is-loading', originalIsLoading);
+        buttonElement.setAttribute('ds-aria-disabled', originalAriaDisabled);
+        results.innerHTML = 'Sent';
+        results.classList.remove('ds-sb-hidden');
+        spinnerElement.classList.add('ds-sb-hidden');
+    }, loadingDuration);
+}
 const spinnerTextExamplesDom = html `
   <div>
     <div class="ds-sp-container">