npm - @uh-design-system/component-library - Versions diffs - 1.7.0-rc.0 → 1.7.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2395) hide show

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

@@ -101,12 +101,12 @@ export class DsSelectNative extends Mixin(ariaDeprecationFactory) {
         const { ['aria-describedby']: attrAriaDescribedby, ...restAttributes } = this.inheritedAttributes;
         const ariaDescribedby = this.dsAriaDescribedby ?? attrAriaDescribedby;
         const hasLabelSlot = !!this.el.querySelector('[slot="label"]');
-        return (h(Host, { key: 'f62dd4fa39eb73ee49ecb646a8c64019f3506bb9', class: classNames(hostClass, {
+        return (h(Host, { key: '66fceef3d800cb9b293feaf93fb9ff0fa9c1bcb7', 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}`, {
+            }) }, h("div", { key: '631d73d6b6066078e7650c4ffe5b9ed76047d867' }, (this.dsLabel || hasLabelSlot) && (h(DsControlLabel, { key: '36ce77f3c258a61f9e95ec9bb1920a0dea27b611', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired }, h("slot", { key: '8e05ce78abf733dca07705f8abdae35824c77987', name: "label" }))), h("div", { key: '2705aec0958a80bfb85be7c6e650181f7a224fe5', class: classNames(`${nativeSelectClass}`, {
                 [`${nativeSelectClass}--disabled`]: this.dsDisabled,
                 [`${nativeSelectClass}--invalid`]: !!this.dsErrorText,
-            }) }, 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 => {
+            }) }, h("div", { key: '53ff980d818fdf98d51f0782deae270b6e922b52', class: `${nativeSelectClass}__selected-text`, "aria-hidden": "true" }, this.value ? this.nativeSelectRef?.selectedOptions[0]?.textContent || this.dsPlaceholder : this.dsPlaceholder), h("select", { key: 'a7c2b545e02acc8e37f562c694f8b5ab088cf3ed', ref: el => {
                 this.nativeSelectRef = el;
                 if (el)
                     el.value = this.value;
@@ -114,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: '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" }))));
+            }, "aria-describedby": ariaDescribedby, ...restAttributes }, h("option", { key: 'b2d8ead4f38777e1a64f9c6cd396e1879c0578b3', value: "", disabled: true, style: { display: this.dsRequired ? 'none' : undefined }, selected: !this.value }, this.dsPlaceholder), h("slot", { key: 'cc2e1fce18a273278fd59caf667a5b0928439994', name: "native" })), h(this.DsIconTag, { key: 'c32c5a77803169f86f4d71a401bd11656cb9afe8', class: `${nativeSelectClass}__dropdown-icon`, dsName: "keyboard_arrow_down", dsSize: this.dsIconSize })), h(this.DsInputValidityTag, { key: '9d10ae99506bca21eb2ae76048e9c7d92eb939ec', 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 CHANGED Viewed

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

@@ -409,9 +409,9 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
     render() {
         const baseClass = cx('ds-select');
         const hostClass = `${baseClass}__host`;
-        return (h(Host, { key: '2624a7f37b46fd6a6ef78ffb991655016147b859', class: classNames(hostClass, {
+        return (h(Host, { key: 'fdf64b4849b4ed8d75417b950a1a587581568ce9', class: classNames(hostClass, {
                 [`${hostClass}--full-width`]: this.dsFullWidth,
-            }), ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: '440fcd71c5ac1752e4fdabba4299d22c02d58c48', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
+            }), ...ifDefined('name', this.isNative ? undefined : this.dsName) }, h("div", { key: 'bf94f34776d87fbb7d036ec8bc3365c5f71e0f99', tabIndex: this.isNative ? undefined : -1 }, this.isNative ? this.renderNativeSelect() : this.renderCustomSelect(baseClass))));
     }
     static get is() { return "ds-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -174,47 +174,47 @@
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-spinner__oJU1eo {
+.ds-spinner__pA2cRq {
   display: inline-block;
 }
-.ds-spinner__oJU1eo:has(.ds-spinner__oJU1eo__text) {
+.ds-spinner__pA2cRq:has(.ds-spinner__pA2cRq__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__oJU1eo {
+.ds-spinner__pA2cRq {
   /* Size */
 }
-.ds-spinner__oJU1eo--small {
+.ds-spinner__pA2cRq--small {
   padding: 1.5px;
 }
-.ds-spinner__oJU1eo--medium {
+.ds-spinner__pA2cRq--medium {
   padding: 3px;
 }
-.ds-spinner__oJU1eo--large {
+.ds-spinner__pA2cRq--large {
   padding: 3px;
 }
-.ds-spinner__oJU1eo--xLarge {
+.ds-spinner__pA2cRq--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__oJU1eo--2xLarge {
+.ds-spinner__pA2cRq--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__oJU1eo--custom {
+.ds-spinner__pA2cRq--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__oJU1eo {
+.ds-spinner__pA2cRq {
   /* Position */
 }
-.ds-spinner__oJU1eo--below {
+.ds-spinner__pA2cRq--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__oJU1eo--right {
+.ds-spinner__pA2cRq--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__oJU1eo__spinner {
+.ds-spinner__pA2cRq__spinner {
   width: var(--spinner-size, 24px);
   height: var(--spinner-size, 24px);
   border-radius: 50%;
@@ -224,14 +224,14 @@
   align-items: center;
   justify-content: center;
 }
-.ds-spinner__oJU1eo__text {
+.ds-spinner__pA2cRq__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__oJU1eo__text--white {
+.ds-spinner__pA2cRq__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__oJU1eo__segment {
+.ds-spinner__pA2cRq__segment {
   display: block;
   position: absolute;
   width: var(--spinner-size, 24px);
@@ -241,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__oJU1eo__segment--1 {
+.ds-spinner__pA2cRq__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__oJU1eo__segment--2 {
+.ds-spinner__pA2cRq__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__oJU1eo__segment--3 {
+.ds-spinner__pA2cRq__segment--3 {
   animation-delay: -0.1s;
 }
@@ -261,17 +261,17 @@
 }
 /* Reduced Motion Support */
 @media (prefers-reduced-motion: reduce) {
-  .ds-spinner__oJU1eo__segment {
+  .ds-spinner__pA2cRq__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__oJU1eo__segment--1 {
+  .ds-spinner__pA2cRq__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__oJU1eo__segment--2 {
+  .ds-spinner__pA2cRq__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__oJU1eo__segment--3 {
+  .ds-spinner__pA2cRq__segment--3 {
     animation-delay: -0.2s;
   }
 }

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

@@ -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: '22d731a3381debe084f5caabf7f4f62f50c4caf4', role: this.dsUseRoleAlert ? 'alert' : undefined, "aria-live": this.dsUseAriaLive ? 'polite' : undefined, class: classes, style: {
+        return (h("div", { key: 'a33343e541291ea9ba854634c3f26a1853cfa64f', 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: '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))));
+            }, ...this.inheritedAttributes }, h("div", { key: '116bbf9107b66da116f2d6fdcf9568338c8766af', class: `${baseClass}__spinner` }, h("div", { key: '3db7345f09d73f86c46bb61c8e2e70f3d8f4faed', class: segmentClasses(1) }), h("div", { key: 'b4248b82e5b6fe49ac4731c0b1cd56e7a75979b1', class: segmentClasses(2) }), h("div", { key: '4cd59a8e7f375d4dde962b8f15db1177bf2239c6', class: segmentClasses(3) })), this.dsHiddenAssistiveText && (h(DsVisuallyHidden, { key: '6fbc62de59ebad538ab4ab260eee616c2f467337' }, h("span", { key: '721d8c643f286893bfee85d77c520ed381bad5a1' }, this.dsHiddenAssistiveText))), this.dsText && (h("span", { key: '161af4dc48584b93618f3032882b6d015ccad5b1', 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-steps/ds-step/ds-step-bullet/ds-step-bullet.js CHANGED Viewed

@@ -110,7 +110,7 @@ export class DsStepBullet extends Mixin(componentFactory('ds-step-bullet'), step
         };
     }
     render() {
-        return h(this.DsStepBulletBase, { key: '10dbf01b6c20369865b1ff0e7b50bfdc0ceac609', ...this.bulletProps });
+        return h(this.DsStepBulletBase, { key: 'a62501301642df7c2aed85a005db622ad8bb226a', ...this.bulletProps });
     }
     static get is() { return "ds-step-bullet"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step/ds-step-content/ds-step-content.js CHANGED Viewed

@@ -50,7 +50,7 @@ export class DsStepContent extends Mixin(componentFactory('ds-step-content'), st
         }
     }
     render() {
-        return (h(this.DsStepContentBase, { key: '307466ac884abff2e2860aae11e6ce236d5344b0', dsOrientation: this.orientation, dsHeading: this.dsHeading, dsHeadingColour: this.headingColour, dsOrdinal: this.ordinal, dsFullWidth: this.dsFullWidth, dsHiddenAssistiveText: this.isCompleted ? this.stepCompleted : undefined, dsAriaCurrent: this.phase === 'current' ? 'step' : undefined }, h("slot", { key: '8cb2226ff31aad295d0cc7499b75e1bd43149f1d', name: "heading", slot: "heading" }), h("slot", { key: '4f2d80c4ddfe7879079f007d052a71aad7f2cedb', name: "content", slot: "content" })));
+        return (h(this.DsStepContentBase, { key: '63a95baa13529efd8c142391031ffc31c8ca98f5', dsOrientation: this.orientation, dsHeading: this.dsHeading, dsHeadingColour: this.headingColour, dsOrdinal: this.ordinal, dsFullWidth: this.dsFullWidth, dsHiddenAssistiveText: this.isCompleted ? this.stepCompleted : undefined, dsAriaCurrent: this.phase === 'current' ? 'step' : undefined }, h("slot", { key: '6b29a2e935c1c65d113c271cbff9c40bbfb2cbca', name: "heading", slot: "heading" }), h("slot", { key: '010976cdcd833565366d481779c38d502d1b8929', name: "content", slot: "content" })));
     }
     static get is() { return "ds-step-content"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step/ds-step.js CHANGED Viewed

@@ -38,7 +38,7 @@ export class DsStep extends Mixin(componentFactory('ds-step'), stepsFactory) {
         this.updateContext();
     }
     render() {
-        return (h(Host, { key: '9343852bcdb6f739259ad61ba394db7cad2462f7', role: "listitem" }, h(this.DsStepBase, { key: '7f0691a155739762fd9a798024946b7ed7023b6c', dsOrientation: this.resolvedOrientation, dsFullWidth: this.dsFullWidth }, h("slot", { key: 'f5014bd51c19af8eb9e57600dcf8bd814e4c33ff', name: "bullet" }), h("slot", { key: '4f87280400f455f724d2cc6dddffefe9aa5ccf53', name: "content" }))));
+        return (h(Host, { key: '7ba999e8c0a6f9cedb672f457f57633d0b1ebeff', role: "listitem" }, h(this.DsStepBase, { key: '200457cf7373dda8ef2627406f93b4b50f52fe6c', dsOrientation: this.resolvedOrientation, dsFullWidth: this.dsFullWidth }, h("slot", { key: '3f7f1eb4203012b24853fc2757155d13d6e7af1e', name: "bullet" }), h("slot", { key: '5043a5b700da51ce0ae919d157252c7e37a3f39d', name: "content" }))));
     }
     static get is() { return "ds-step"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-base.css CHANGED Viewed

@@ -4,11 +4,11 @@
   display: block;
 }
-:host(.ds-step-base__oJU1eo__host--full-width) {
+:host(.ds-step-base__pA2cRq__host--full-width) {
   flex: 1;
 }
-.ds-step-base__oJU1eo {
+.ds-step-base__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -19,6 +19,6 @@
   align-items: stretch;
   gap: var(--ds-spacing-xSmall);
 }
-.ds-step-base__oJU1eo--vertical {
+.ds-step-base__pA2cRq--vertical {
   flex-direction: row;
 }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-base.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class DsStepBase extends Mixin(componentFactory('ds-step-base')) {
         const classes = classNames(baseClass, {
             [`${baseClass}--vertical`]: this.dsOrientation === 'vertical',
         });
-        return (h(Host, { key: '702427499d88dc226b042bf108784317d44fec82', class: hostClasses }, h("div", { key: 'bff29411a1d598a0379ed46505d2ae1f067a8087', class: classes }, h("slot", { key: '1c41190c0002d2c56acef366611ef641f9f83da3', name: "bullet" }), h("slot", { key: '671405e298b9cbb25915c4d084fcac48ada22dc7', name: "content" }))));
+        return (h(Host, { key: '3cc4f0a49914d0d143fd786aae3d1e403e1f84c2', class: hostClasses }, h("div", { key: 'dd719ba02ec99f0c74aa785f4b5b5c9181a0c184', class: classes }, h("slot", { key: 'efe43588e563c4bf7a54c0abfa1fefe296f5d3b2', name: "bullet" }), h("slot", { key: 'bce9e362a7d400c87f23217aea6da514b030f60e', name: "content" }))));
     }
     static get is() { return "ds-step-base"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-bullet-base/ds-step-bullet-base.css CHANGED Viewed

@@ -4,7 +4,7 @@
   display: block;
 }
-.ds-step-bullet-base__oJU1eo {
+.ds-step-bullet-base__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -14,14 +14,14 @@
   align-items: center;
   height: 100%;
 }
-.ds-step-bullet-base__oJU1eo--vertical {
+.ds-step-bullet-base__pA2cRq--vertical {
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   width: auto;
   height: 100%;
 }
-.ds-step-bullet-base__oJU1eo__bullet {
+.ds-step-bullet-base__pA2cRq__bullet {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -34,33 +34,33 @@
   font-size: var(--ds-fontSize-14);
   flex: 0 0 auto;
 }
-.ds-step-bullet-base__oJU1eo__bullet--small {
+.ds-step-bullet-base__pA2cRq__bullet--small {
   width: 2rem;
   height: 1.5rem;
 }
-.ds-step-bullet-base__oJU1eo__bullet--small.ds-step-bullet-base__oJU1eo__bullet--vertical {
+.ds-step-bullet-base__pA2cRq__bullet--small.ds-step-bullet-base__pA2cRq__bullet--vertical {
   width: 1.5rem;
   height: 2rem;
 }
-.ds-step-bullet-base__oJU1eo__line {
+.ds-step-bullet-base__pA2cRq__line {
   flex: 1 1 auto;
   min-width: 0;
   align-self: center;
   margin-inline: var(--ds-spacing-2xSmall);
 }
-.ds-step-bullet-base__oJU1eo__line--small {
+.ds-step-bullet-base__pA2cRq__line--small {
   margin-inline: 0;
 }
-.ds-step-bullet-base__oJU1eo__line--vertical {
+.ds-step-bullet-base__pA2cRq__line--vertical {
   margin-inline: 0;
   margin-block: var(--ds-spacing-2xSmall);
   height: auto;
   min-height: 2rem;
   flex: 1 1 auto;
 }
-.ds-step-bullet-base__oJU1eo__line--no-line.ds-step-bullet-base__oJU1eo__line--vertical {
+.ds-step-bullet-base__pA2cRq__line--no-line.ds-step-bullet-base__pA2cRq__line--vertical {
   min-height: 0;
 }
-.ds-step-bullet-base__oJU1eo__line--small.ds-step-bullet-base__oJU1eo__line--vertical {
+.ds-step-bullet-base__pA2cRq__line--small.ds-step-bullet-base__pA2cRq__line--vertical {
   margin-block: 0;
 }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-bullet-base/ds-step-bullet-base.js CHANGED Viewed

@@ -83,7 +83,7 @@ export class DsStepBulletBase extends Mixin(componentFactory('ds-step-bullet-bas
             backgroundColor: this.dsLineColour,
             [this.isVertical ? 'width' : 'height']: this.lineWidthVar,
         };
-        return (h("div", { key: 'ab693e813640c737467eeec36915bb942480b266', class: classes, "aria-hidden": "true" }, h("div", { key: 'dfb3bc6a41186ed711b43390b06124a2161ff8c4', class: bulletClass, style: bulletStyle }, this.dsText, this.dsIcon && h(this.DsIcon, { key: '2ce405fc278a00d0015c0519da4023c6bfeb769a', dsSize: this.iconSize, dsName: this.dsIcon, dsColour: this.dsIconColour })), this.dsLineWidth !== 'none' && h("div", { key: '16d995f7424b4c3076885da142dd2915c5755ba5', class: lineClass, style: lineStyle })));
+        return (h("div", { key: 'be602b6df86662390f411363e62734ac706f675f', class: classes, "aria-hidden": "true" }, h("div", { key: 'a28492717b621d882114d6e6ed905729aaffae14', class: bulletClass, style: bulletStyle }, this.dsText, this.dsIcon && h(this.DsIcon, { key: '9b20fb80675c77bec29a5c0b93071abab6ade575', dsSize: this.iconSize, dsName: this.dsIcon, dsColour: this.dsIconColour })), this.dsLineWidth !== 'none' && h("div", { key: '2e8d6b5d14839aa52b690fcd901239938d5de484', class: lineClass, style: lineStyle })));
     }
     static get is() { return "ds-step-bullet-base"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-content-base/ds-step-content-base.css CHANGED Viewed

@@ -4,11 +4,11 @@
   display: block;
 }
-:host(.ds-step-content-base__oJU1eo__host--full-width) {
+:host(.ds-step-content-base__pA2cRq__host--full-width) {
   width: 100%;
 }
-.ds-step-content-base__oJU1eo {
+.ds-step-content-base__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -20,22 +20,22 @@
   padding-block-end: 0;
   padding-inline: var(--ds-spacing-2xSmall) var(--ds-spacing-medium);
 }
-.ds-step-content-base__oJU1eo--full-width {
+.ds-step-content-base__pA2cRq--full-width {
   width: 100%;
 }
-.ds-step-content-base__oJU1eo--vertical {
+.ds-step-content-base__pA2cRq--vertical {
   padding-block-end: var(--ds-spacing-medium);
   padding-inline: 0;
 }
-.ds-step-content-base__oJU1eo__heading {
+.ds-step-content-base__pA2cRq__heading {
   margin: 0;
 }
-.ds-step-content-base__oJU1eo__heading--vertical {
+.ds-step-content-base__pA2cRq__heading--vertical {
   padding: calc(var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall)) 0 0;
 }
-.ds-step-content-base__oJU1eo__content {
+.ds-step-content-base__pA2cRq__content {
   color: var(--ds-textColor-secondary);
 }
-.ds-step-content-base__oJU1eo__visually-hidden {
+.ds-step-content-base__pA2cRq__visually-hidden {
   display: contents;
 }

package/dist/collection/components/01-base-components/ds-steps/ds-step-base/ds-step-content-base/ds-step-content-base.js CHANGED Viewed

@@ -44,7 +44,7 @@ export class DsStepContentBase extends Mixin(componentFactory('ds-step-content-b
         const headingAriaAttributes = {
             ['aria-current']: this.dsAriaCurrent,
         };
-        return (h(Host, { key: 'a4b578452c6444484dbb2326663d59d6fec4756f', class: hostClasses }, h("div", { key: '6b542f4eb6467fc80c2c4cbea46916d44c5f59d5', class: classes }, h("slot", { key: 'fd2996c183ef30c17232da6eb957b19135a3fe32', name: "heading" }), !!this.dsHeading && (h("span", { key: '405501ecc67437587c9019a778a67c47b2f3f072', class: headingClasses, style: headingStyles, ...headingAriaAttributes }, this.dsOrdinal !== undefined && (h(this.DsVisuallyHidden, { key: '39a4ed9be7972e255d3b5d77b15ace717b9c9c0b', class: visuallyHiddenClasses, dsTag: "span" }, this.dsOrdinal, ".\u00A0")), this.dsHeading, this.dsHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '3763f20e05886bc920bbda5d015267d8d14f9488', class: visuallyHiddenClasses, dsTag: "span" }, "\u00A0", this.dsHiddenAssistiveText)))), h("div", { key: '5fa8d2cdaa1cb9a8594ca71916124f5e767e7aeb', class: contentClasses }, h("slot", { key: '5d4f89328a536aff75a628f60d94a5ab1d7e0d21', name: "content" })))));
+        return (h(Host, { key: '25ce47b304faf4d7f6c9266c666f6376c5e72ad5', class: hostClasses }, h("div", { key: 'cb46fb4984542d73958ef306367fbd2d5d2ae406', class: classes }, h("slot", { key: '5f43dc10d7bb320060221a3699d0ff51f3475fef', name: "heading" }), !!this.dsHeading && (h("span", { key: 'a1b7a1632f1d219b03b849da5b024976090fa7bd', class: headingClasses, style: headingStyles, ...headingAriaAttributes }, this.dsOrdinal !== undefined && (h(this.DsVisuallyHidden, { key: 'a1615288101594e4bc1a64b680d507a7b1bc97b2', class: visuallyHiddenClasses, dsTag: "span" }, this.dsOrdinal, ".\u00A0")), this.dsHeading, this.dsHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '2b1712946c341c141403790d54c7f458e0c5b1b4', class: visuallyHiddenClasses, dsTag: "span" }, "\u00A0", this.dsHiddenAssistiveText)))), h("div", { key: '5002686b0a706fe6275509c2f7242b9f955e3ef2', class: contentClasses }, h("slot", { key: 'f2b25c27fabf39b9e8adff2da33f24c508947a82', name: "content" })))));
     }
     static get is() { return "ds-step-content-base"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-steps/ds-steps.css CHANGED Viewed

@@ -8,7 +8,7 @@
   display: contents;
 }
-.ds-steps__oJU1eo {
+.ds-steps__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -18,6 +18,6 @@
   list-style: none;
   flex-direction: row;
 }
-.ds-steps__oJU1eo--vertical {
+.ds-steps__pA2cRq--vertical {
   flex-direction: column;
 }