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

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

@@ -1,4 +1,4 @@
-import { h, Mixin } from "@stencil/core";
+import { h, Mixin, Host } from "@stencil/core";
 import classNames from "classnames";
 import { declareComponentDependencies, transformTagName } from "../../../../utils/utils";
 import { inheritAttributes } from "../../../../utils/attributes/attributes";
@@ -95,16 +95,18 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
     }
     render() {
         const baseClass = cx('ds-select');
+        const hostClass = `${baseClass}__host`;
         const nativeSelectClass = `${baseClass}-native`;
         const DsControlLabel = transformTagName('ds-control-label', 'ds-select-native', this.el);
         const { ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const hasLabelSlot = !!this.el.querySelector('[slot="label"]');
-        return (h("div", { key: 'bb84d1226bcd6ca1d2a2bc9a90f24aa7f8b85028' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: '336584784e899636fff4a1dfe484de2eb545fe93', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '9b223b1e69eaffb33296979bf4818ffbbb841d30', name: "label" }))), h("div", { key: '08fedae5f5e0f2beb1ad36e8347ef0659f6a4580', class: classNames(`${nativeSelectClass}`, {
-                [`${baseClass}--full-width`]: this.dsFullWidth,
+        return (h(Host, { key: 'f62dd4fa39eb73ee49ecb646a8c64019f3506bb9', class: classNames(hostClass, {
+                [`${hostClass}--full-width`]: this.dsFullWidth,
+            }) }, h("div", { key: '89bca77b098f8e7af606900fb12443c6c93ee3e6' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: 'cde4f34d8fe52e7a31c38de56e412b93ce144878', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: 'b2b44a5ee7704fb8241fc2fc8d2e3ef90c6a8949', name: "label" }))), h("div", { key: '31976c1287cb9bcf71a617de303d9a0751882e65', class: classNames(`${nativeSelectClass}`, {
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: 'de078718856e707ae1f7a5cb5e56591394242a28', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '423ab1212be718463ff78b40eb117b72998d8ea7', ref: el => {
+            }) }, h("div", { key: '48576fbf4ca45c2af99687ebabaa574897a8670e', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: '22cb4d33c218f4d528a0de51dd83e54d47d068ea', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
@@ -112,7 +114,7 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
                 const target = event.target;
                 this.value = target.value;
                 this.dsChange.emit(target.value);
-            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: '70b3d13e85c80bea19a18764a4e145056795a0de', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: '203918dab70206937187cfd7b5a999910a04c7b8', name: "native" })), h(this.DsIconTag, { key: '8b0cfb98f2ac7609b423955e16bdb4b5cd216a0b', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: '9b3e28907294abbb731fad33e2185930082426b9', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: 'abfb86795397dc5e11ec4af32f18fe5045b7cc4b', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: '97f39c189efa89e0143a5541e76c57980f2d57b8', name: "native" })), h(this.DsIconTag, { key: '6a70540a731cbe7033b18b1d834e761c211c58d7', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: '050e82eec5b8364468db771bd1008a751bec64f9', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     static get is() { return "ds-select-native"; }
     static get encapsulation() { return "scoped"; }

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

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

@@ -365,7 +365,6 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
                 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}`, {
-                [`${baseClass}--full-width`]: this.dsFullWidth,
                 [`${customSelectClass}--open`]: this.isOpen,
                 [`${customSelectClass}--none-selected`]: noneSelected,
                 [`${customSelectClass}--disabled`]: this.dsDisabled,
@@ -409,7 +408,10 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
     }
     render() {
         const baseClass = cx('ds-select');
-        return (h(Host, { key: '8aea54cbb8dfa36ea92510ea35de4a3f0a7f53e4', ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'f4ce8d85fe9c6644c9506a0cc75c62f8507fec4d', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+        const hostClass = `${baseClass}__host`;
+        return (h(Host, { key: '35e1b9c4f7ea428b4f3ca1c80c8946c7632d6585', class: classNames(hostClass, {
+                [`${hostClass}--full-width`]: this.dsFullWidth,
+            }), ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '0461f70215a1adeca24e139a4033b538090c8c73', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "scoped"; }
@@ -870,7 +872,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
                     "references": {
                         "DsSelectMultipleChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
                             "id": "src/components/01-base-components/ds-select/ds-select.tsx::DsSelectMultipleChangeEvent"
                         }
                     }
@@ -891,7 +893,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
                     "references": {
                         "DsSelectChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
                             "id": "src/components/01-base-components/ds-select/ds-select.tsx::DsSelectChangeEvent"
                         }
                     }
@@ -956,7 +958,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
                     "references": {
                         "DsSelectBlurEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
                             "id": "src/components/01-base-components/ds-select/ds-select.tsx::DsSelectBlurEvent"
                         }
                     }
@@ -977,7 +979,7 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
                     "references": {
                         "DsSelectFocusEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-select/ds-select.tsx",
                             "id": "src/components/01-base-components/ds-select/ds-select.tsx::DsSelectFocusEvent"
                         }
                     }

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

@@ -76,6 +76,11 @@
   margin-bottom: var(--ds-marginBottom, 20px);
 }
 
+/* Paragraph Width */
+.ds-paragraph-width-optimal {
+  max-width: var(--ds-paragraphWidth-optimal);
+}
+
 /* List */
 .ds-list-spacing {
   gap: 4px;
@@ -169,47 +174,47 @@
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__izAhxK {
+.ds-spinner__WN0Emr {
   display: inline-block;
 }
-.ds-spinner__izAhxK:has(.ds-spinner__izAhxK__text) {
+.ds-spinner__WN0Emr:has(.ds-spinner__WN0Emr__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__izAhxK {
+.ds-spinner__WN0Emr {
   /* Size */
 }
-.ds-spinner__izAhxK--small {
+.ds-spinner__WN0Emr--small {
   padding: 1.5px;
 }
-.ds-spinner__izAhxK--medium {
+.ds-spinner__WN0Emr--medium {
   padding: 3px;
 }
-.ds-spinner__izAhxK--large {
+.ds-spinner__WN0Emr--large {
   padding: 3px;
 }
-.ds-spinner__izAhxK--xLarge {
+.ds-spinner__WN0Emr--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__izAhxK--2xLarge {
+.ds-spinner__WN0Emr--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__izAhxK--custom {
+.ds-spinner__WN0Emr--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__izAhxK {
+.ds-spinner__WN0Emr {
   /* Position */
 }
-.ds-spinner__izAhxK--below {
+.ds-spinner__WN0Emr--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__izAhxK--right {
+.ds-spinner__WN0Emr--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__izAhxK__spinner {
+.ds-spinner__WN0Emr__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -219,14 +224,14 @@
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__izAhxK__text {
+.ds-spinner__WN0Emr__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__izAhxK__text--white {
+.ds-spinner__WN0Emr__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__izAhxK__segment {
+.ds-spinner__WN0Emr__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -236,13 +241,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__izAhxK__segment--1 {
+.ds-spinner__WN0Emr__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__izAhxK__segment--2 {
+.ds-spinner__WN0Emr__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__izAhxK__segment--3 {
+.ds-spinner__WN0Emr__segment--3 {
   animation-delay: -0.1s;
 }
 
@@ -256,17 +261,17 @@
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__izAhxK__segment {
+  .ds-spinner__WN0Emr__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__izAhxK__segment--1 {
+  .ds-spinner__WN0Emr__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__izAhxK__segment--2 {
+  .ds-spinner__WN0Emr__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__izAhxK__segment--3 {
+  .ds-spinner__WN0Emr__segment--3 {
     animation-delay: -0.2s;
   }
 }

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

@@ -62,11 +62,11 @@ export class DsSpinner extends Mixin(componentFactory('ds-spinner')) {
         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: '00f8cc502a49c2edbd23e2bca562172cc9eef5ea', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
+        return (h("div", { key: '22d731a3381debe084f5caabf7f4f62f50c4caf4', 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: 'ce03a9c46ae442d2de87d8e9adbeb32b741f5590', class: `${baseClass}__spinner` }, h("div", { key: 'c5a54ce5550c40f539fbcb3167dd5545cb99ad3e', class: segmentClasses(1) }), h("div", { key: '2608d3abb3f953d0733647d532a37b183729d0c0', class: segmentClasses(2) }), h("div", { key: '7c19a0a67f16865b346f727b00bf5191fbf03150', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: 'ebdb999701b6d9ffd140c4a9c517f4d5c9a33fdd' }, h("span", { key: '0826320f1913aa63b04b189b7d98bd1762e936fc' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'e007ee82b54699de8a01d9c3aa2ce758e12c76d2', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
+            }, ...this.inheritedAttributes }, h("div", { key: '0e415eeb1da1e4cce51c5fe6c8e212d6b4c3fe7f', class: `${baseClass}__spinner` }, h("div", { key: 'f427fc3b0ee1a7f00014bc8f720710392bd1ffda', class: segmentClasses(1) }), h("div", { key: '796c7e0d493f524df33dd2995c7cd0b863a98499', class: segmentClasses(2) }), h("div", { key: 'e2959d5b0d51e0463fcf9659e6d4090bba44f2ac', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '3fdb1904b5edfc746ae25e7d2dcb4dd5cd9d6b7a' }, h("span", { key: '458410c6e7d5ef61f206993f44a842210de48838' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: 'e6f7214438611d6d944882c39d3ff7687331bb53', class: textClasses, style: { fontSize: this.dsCustomTextSize } }, this.dsText))));
     }
     static get is() { return "ds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@
   display: contents;
 }
 
-.ds-tab__izAhxK {
+.ds-tab__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -33,22 +33,22 @@
   cursor: default;
 }
 @media (min-width: 60rem) {
-  .ds-tab__izAhxK {
+  .ds-tab__WN0Emr {
     font-size: var(--ds-fontSize-18);
   }
 }
-.ds-tab__izAhxK--selected, .ds-tab__izAhxK:hover:not(.ds-tab__izAhxK--selected), .ds-tab__izAhxK:active:not(.ds-tab__izAhxK--selected) {
+.ds-tab__WN0Emr--selected, .ds-tab__WN0Emr:hover:not(.ds-tab__WN0Emr--selected), .ds-tab__WN0Emr:active:not(.ds-tab__WN0Emr--selected) {
   color: var(--ds-textColor-default);
 }
-.ds-tab__izAhxK--container:focus-visible {
+.ds-tab__WN0Emr--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__izAhxK--container.ds-tab__izAhxK--selected {
+.ds-tab__WN0Emr--container.ds-tab__WN0Emr--selected {
   background-color: var(--ds-bgColor-white);
 }
-.ds-tab__izAhxK--container.ds-tab__izAhxK--selected::after {
+.ds-tab__WN0Emr--container.ds-tab__WN0Emr--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__izAhxK--container.ds-tab__izAhxK--selected:not(:focus-visible)::before {
+.ds-tab__WN0Emr--container.ds-tab__WN0Emr--selected:not(:focus-visible)::before {
   content: "";
   position: absolute;
   inset: 0;
   border-inline: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
 }
-.ds-tab__izAhxK--container:hover:not(.ds-tab__izAhxK--selected) {
+.ds-tab__WN0Emr--container:hover:not(.ds-tab__WN0Emr--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-tab__izAhxK--container:active:not(.ds-tab__izAhxK--selected) {
+.ds-tab__WN0Emr--container:active:not(.ds-tab__WN0Emr--selected) {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-tab__izAhxK--line:focus-visible .ds-tab__izAhxK__content {
+.ds-tab__WN0Emr--line:focus-visible .ds-tab__WN0Emr__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__izAhxK--line.ds-tab__izAhxK--selected::after {
+.ds-tab__WN0Emr--line.ds-tab__WN0Emr--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__izAhxK--line:hover:not(.ds-tab__izAhxK--selected)::after {
+.ds-tab__WN0Emr--line:hover:not(.ds-tab__WN0Emr--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__izAhxK--line:active:not(.ds-tab__izAhxK--selected)::after {
+.ds-tab__WN0Emr--line:active:not(.ds-tab__WN0Emr--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__izAhxK .ds-tab__izAhxK__content {
+.ds-tab__WN0Emr .ds-tab__WN0Emr__content {
   position: relative;
   display: flex;
   flex-direction: row;

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

@@ -256,7 +256,7 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
                     "references": {
                         "DsTabClickEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
                             "id": "src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx::DsTabClickEvent"
                         }
                     }
@@ -277,7 +277,7 @@ export class DsTab extends Mixin(componentFactory('ds-tab'), tabsFactory) {
                     "references": {
                         "DsTabFocusEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx",
                             "id": "src/components/01-base-components/ds-tabs/ds-tab/ds-tab.tsx::DsTabFocusEvent"
                         }
                     }