@uh-design-system/component-library 1.6.0 → 1.7.0

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

@@ -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

@@ -1,25 +1,25 @@
-:host(.ds-select__WN0Emr__host) {
+:host(.ds-select__pA2cRq__host) {
   display: inline-block;
   width: var(--ds-select-narrow-width, 100%);
 }
 @media (min-width: 30rem) {
-  :host(.ds-select__WN0Emr__host) {
+  :host(.ds-select__pA2cRq__host) {
     width: var(--ds-select-wide-width, 20rem);
   }
 }
-:host(.ds-select__WN0Emr__host) > div {
+:host(.ds-select__pA2cRq__host) > div {
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
 @media (min-width: 30rem) {
-  :host(.ds-select__WN0Emr__host--full-width) {
+  :host(.ds-select__pA2cRq__host--full-width) {
     width: var(--ds-select-narrow-width, 100%);
   }
 }
 
-.ds-select__WN0Emr-custom {
+.ds-select__pA2cRq-custom {
   position: relative;
   display: flex;
   align-items: center;
@@ -32,7 +32,7 @@
   width: 100%;
 }
 
-.ds-select__WN0Emr-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__WN0Emr-custom-wrapper {
+.ds-select__pA2cRq-custom-wrapper {
   position: relative;
 }
 
-.ds-select__WN0Emr-custom .ds-options__WN0Emr {
+.ds-select__pA2cRq-custom .ds-options__pA2cRq {
   display: block;
 }
-.ds-select__WN0Emr-custom-input-container {
+.ds-select__pA2cRq-custom-input-container {
   display: flex;
   position: relative;
 }
-.ds-select__WN0Emr-custom-input-container:has(.ds-select__WN0Emr-custom__clear-button:hover) .ds-select__WN0Emr-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__WN0Emr-custom:not(.ds-select__WN0Emr-custom--open, .ds-select__WN0Emr-custom--invalid, .ds-select__WN0Emr-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__WN0Emr-custom:active:not(.ds-select__WN0Emr-custom--open, .ds-select__WN0Emr-custom--invalid, .ds-select__WN0Emr-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__WN0Emr-custom--open, .ds-select__WN0Emr-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__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) {
+.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__WN0Emr-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__WN0Emr-custom--disabled .ds-select__WN0Emr-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__WN0Emr-custom--invalid {
+.ds-select__pA2cRq-custom--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-select__WN0Emr-custom--invalid:not(.ds-select__WN0Emr-custom--invalid--open, .ds-select__WN0Emr-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__WN0Emr-custom--invalid:not(.ds-select__WN0Emr-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__WN0Emr-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__WN0Emr-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__WN0Emr-custom--has-icon .ds-select__WN0Emr-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__WN0Emr-custom__selected-option__placeholder-icon {
+.ds-select__pA2cRq-custom__selected-option__placeholder-icon {
   font-size: var(--ds-fontSize-16);
 }
-.ds-select__WN0Emr-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__WN0Emr-custom__selected-option__text--none-selected {
+.ds-select__pA2cRq-custom__selected-option__text--none-selected {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__WN0Emr-custom__selected-option__text--disabled {
+.ds-select__pA2cRq-custom__selected-option__text--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__WN0Emr-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__WN0Emr-custom input::placeholder {
+.ds-select__pA2cRq-custom input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-select__WN0Emr-custom input:disabled {
+.ds-select__pA2cRq-custom input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__WN0Emr-custom input:disabled::placeholder {
+.ds-select__pA2cRq-custom input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-select__WN0Emr-custom input:focus {
+.ds-select__pA2cRq-custom input:focus {
   outline: none;
 }
-.ds-select__WN0Emr-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__WN0Emr-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__WN0Emr-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__WN0Emr-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__WN0Emr-custom__options-container--open {
+.ds-select__pA2cRq-custom__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-select__WN0Emr-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__WN0Emr-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__WN0Emr-custom__options-container__options__inner__top-scrim, .ds-select__WN0Emr-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__WN0Emr-custom__options-container__options__inner__top-scrim--visible, .ds-select__WN0Emr-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__WN0Emr-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__WN0Emr-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__WN0Emr-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

@@ -215,8 +215,8 @@ export class DsSelect extends Mixin(componentFactory('ds-select', { stopRootTrac
             return;
         await componentOnReady(this.clearButtonRef);
         await componentOnReady(this.badgeRef);
-        const clearButtonWidth = this.clearButtonRef.getBoundingClientRect().width || 0;
-        const badgeContainerWidth = this.badgeRef.getBoundingClientRect().width || 0;
+        const clearButtonWidth = this.clearButtonRef.getBoundingClientRect()?.width || 0;
+        const badgeContainerWidth = this.badgeRef.getBoundingClientRect()?.width || 0;
         this.badgeContainerOffset = clearButtonWidth && badgeContainerWidth ? clearButtonWidth + badgeContainerWidth : null;
     };
     getAllOptions() {
@@ -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: '35e1b9c4f7ea428b4f3ca1c80c8946c7632d6585', 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: '0461f70215a1adeca24e139a4033b538090c8c73', 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

@@ -174,47 +174,47 @@
   font-weight: var(--ds-fontWeight-bold);
 }
 
-.ds-spinner__WN0Emr {
+.ds-spinner__pA2cRq {
   display: inline-block;
 }
-.ds-spinner__WN0Emr:has(.ds-spinner__WN0Emr__text) {
+.ds-spinner__pA2cRq:has(.ds-spinner__pA2cRq__text) {
   display: inline-flex;
   align-items: center;
   gap: calc(var(--spinner-size) / 2);
 }
-.ds-spinner__WN0Emr {
+.ds-spinner__pA2cRq {
   /* Size */
 }
-.ds-spinner__WN0Emr--small {
+.ds-spinner__pA2cRq--small {
   padding: 1.5px;
 }
-.ds-spinner__WN0Emr--medium {
+.ds-spinner__pA2cRq--medium {
   padding: 3px;
 }
-.ds-spinner__WN0Emr--large {
+.ds-spinner__pA2cRq--large {
   padding: 3px;
 }
-.ds-spinner__WN0Emr--xLarge {
+.ds-spinner__pA2cRq--xLarge {
   padding: 5.5px;
 }
-.ds-spinner__WN0Emr--2xLarge {
+.ds-spinner__pA2cRq--2xLarge {
   padding: 5.5px;
 }
-.ds-spinner__WN0Emr--custom {
+.ds-spinner__pA2cRq--custom {
   padding: calc(var(--spinner-size) / 8);
 }
-.ds-spinner__WN0Emr {
+.ds-spinner__pA2cRq {
   /* Position */
 }
-.ds-spinner__WN0Emr--below {
+.ds-spinner__pA2cRq--below {
   flex-direction: column;
   align-items: center;
 }
-.ds-spinner__WN0Emr--right {
+.ds-spinner__pA2cRq--right {
   flex-direction: row;
   align-items: center;
 }
-.ds-spinner__WN0Emr__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__WN0Emr__text {
+.ds-spinner__pA2cRq__text {
   color: var(--ds-textColor-default);
   font-family: var(--ds-fontFamily-body);
 }
-.ds-spinner__WN0Emr__text--white {
+.ds-spinner__pA2cRq__text--white {
   color: var(--ds-textColor-white);
 }
-.ds-spinner__WN0Emr__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__WN0Emr__segment--1 {
+.ds-spinner__pA2cRq__segment--1 {
   animation-delay: -0.3s;
 }
-.ds-spinner__WN0Emr__segment--2 {
+.ds-spinner__pA2cRq__segment--2 {
   animation-delay: -0.2s;
 }
-.ds-spinner__WN0Emr__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__WN0Emr__segment {
+  .ds-spinner__pA2cRq__segment {
     animation-duration: 2.2s; /* Double the original duration (slower) */
     animation-timing-function: linear; /* More predictable motion */
   }
-  .ds-spinner__WN0Emr__segment--1 {
+  .ds-spinner__pA2cRq__segment--1 {
     animation-delay: -0.6s;
   }
-  .ds-spinner__WN0Emr__segment--2 {
+  .ds-spinner__pA2cRq__segment--2 {
     animation-delay: -0.4s;
   }
-  .ds-spinner__WN0Emr__segment--3 {
+  .ds-spinner__pA2cRq__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: '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.css

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}

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

@@ -0,0 +1,173 @@
+import { h, Mixin } from "@stencil/core";
+import { componentFactory } from "../../../../00-foundations/factories/componentFactory";
+import { stepFactory } from "../../../../00-foundations/factories/stepFactory";
+import { declareComponentDependencies, transformTagName } from "../../../../../utils/utils";
+export class DsStepBullet extends Mixin(componentFactory('ds-step-bullet'), stepFactory) {
+    constructor() {
+        super();
+    }
+    el;
+    dsSize = 'medium';
+    dsShowLine = true;
+    get DsStep() {
+        return transformTagName('ds-step', 'ds-step-bullet', this.el);
+    }
+    get DsStepBulletBase() {
+        return transformTagName('ds-step-bullet-base', 'ds-step-bullet', this.el);
+    }
+    get ordinal() {
+        return this.context?.ordinal ?? 1;
+    }
+    get orientation() {
+        return this.context?.orientation ?? 'vertical';
+    }
+    get phase() {
+        return this.context?.phase ?? 'static';
+    }
+    get isSmall() {
+        return this.dsSize === 'small';
+    }
+    get text() {
+        return this.ordinal.toString();
+    }
+    get sharedProps() {
+        return {
+            dsOrientation: this.orientation,
+            dsSize: this.dsSize,
+        };
+    }
+    get lineProps() {
+        const baseLineProps = this.dsShowLine ? { dsLineWidth: 'hairline' } : { dsLineWidth: 'none' };
+        switch (this.phase) {
+            case 'incomplete':
+            case 'current':
+                return {
+                    ...baseLineProps,
+                    ...(this.dsShowLine && { dsLineColour: 'var(--ds-borderColor-light)' }),
+                };
+            case 'complete':
+            case 'static':
+            default:
+                return {
+                    ...baseLineProps,
+                    ...(this.dsShowLine && { dsLineColour: 'var(--ds-borderColor-primary)' }),
+                    ...(this.dsShowLine && { dsLineWidth: 'thin' }),
+                };
+        }
+    }
+    get sizeProps() {
+        switch (this.phase) {
+            case 'incomplete':
+                return this.isSmall
+                    ? {
+                        dsIcon: 'fiber_manual_record',
+                        dsIconColour: 'neutral',
+                        dsBorderWidth: 'none',
+                    }
+                    : {
+                        dsText: this.text,
+                        dsTextColour: 'var(--ds-textColor-secondary)',
+                        dsFillColour: 'var(--ds-bgColor-white)',
+                        dsBorderColour: 'var(--ds-borderColor-default)',
+                        dsBorderWidth: 'thin',
+                    };
+            case 'complete':
+                return this.isSmall
+                    ? {
+                        dsIcon: 'check_circle_fill',
+                        dsIconColour: 'primary',
+                        dsBorderWidth: 'none',
+                    }
+                    : {
+                        dsIcon: 'check',
+                        dsIconColour: 'primary',
+                        dsFillColour: 'var(--ds-bgColor-secondary-hover)',
+                        dsBorderColour: 'var(--ds-borderColor-primary)',
+                        dsBorderWidth: 'thin',
+                    };
+            case 'current':
+            case 'static':
+            default:
+                return this.isSmall
+                    ? {
+                        dsIcon: 'fiber_manual_record_fill',
+                        dsIconColour: 'primary',
+                        dsBorderWidth: 'none',
+                    }
+                    : {
+                        dsText: this.text,
+                        dsTextColour: 'var(--ds-textColor-white)',
+                        dsFillColour: 'var(--ds-bgColor-primary)',
+                        dsBorderWidth: 'none',
+                    };
+        }
+    }
+    get bulletProps() {
+        return {
+            ...this.sharedProps,
+            ...this.lineProps,
+            ...this.sizeProps,
+        };
+    }
+    render() {
+        return h(this.DsStepBulletBase, { key: 'a62501301642df7c2aed85a005db622ad8bb226a', ...this.bulletProps });
+    }
+    static get is() { return "ds-step-bullet"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-step-bullet.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-step-bullet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dsSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium'",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `dsSize` property of the `ds-step-bullet-base` element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-size",
+                "defaultValue": "'medium'"
+            },
+            "dsShowLine": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, a line will be shown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ds-show-line",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+declareComponentDependencies([h("ds-step-bullet-base", null)]);

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

@@ -0,0 +1,3 @@
+:host {
+  display: contents;
+}