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

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-native/ds-datepicker-native.css

@@ -14,7 +14,7 @@
   position: relative;
 }
 
-.ds-datepicker-native__izAhxK__input-container .ds-datepicker-native__izAhxK__input {
+.ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input {
   flex: 1;
   border: none;
   outline: none;
@@ -26,22 +26,22 @@
   min-width: 0;
   width: 100%;
 }
-.ds-datepicker-native__izAhxK__input-container .ds-datepicker-native__izAhxK__input:disabled {
+.ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-datepicker-native__izAhxK__input-container .ds-datepicker-native__izAhxK__input::-webkit-calendar-picker-indicator {
+.ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input::-webkit-calendar-picker-indicator {
   display: none;
 }
-.ds-datepicker-native__izAhxK__input-container .ds-datepicker-native__izAhxK__input::-webkit-clear-button {
+.ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input::-webkit-clear-button {
   display: none;
 }
 
-.ds-datepicker-native__izAhxK__calendar-icon {
+.ds-datepicker-native__WN0Emr__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-native__izAhxK {
+.ds-datepicker-native__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -57,58 +57,58 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-datepicker-native__izAhxK--disabled {
+.ds-datepicker-native__WN0Emr--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-datepicker-native__izAhxK--readonly {
+.ds-datepicker-native__WN0Emr--readonly {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-datepicker-native__izAhxK--invalid {
+.ds-datepicker-native__WN0Emr--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__izAhxK--invalid:active {
+.ds-datepicker-native__WN0Emr--invalid:active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__izAhxK--invalid:hover:not(.ds-datepicker-native__izAhxK--invalid:focus-within) {
+.ds-datepicker-native__WN0Emr--invalid:hover:not(.ds-datepicker-native__WN0Emr--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__izAhxK:hover:not(.ds-datepicker-native__izAhxK--disabled, .ds-datepicker-native__izAhxK--readonly, .ds-datepicker-native__izAhxK--invalid, .ds-datepicker-native__izAhxK:focus-within) {
+.ds-datepicker-native__WN0Emr:hover:not(.ds-datepicker-native__WN0Emr--disabled, .ds-datepicker-native__WN0Emr--readonly, .ds-datepicker-native__WN0Emr--invalid, .ds-datepicker-native__WN0Emr:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-native__izAhxK:focus-within:not(.ds-datepicker-native__izAhxK--invalid, .ds-datepicker-native__izAhxK--disabled, .ds-datepicker-native__izAhxK--readonly) {
+.ds-datepicker-native__WN0Emr:focus-within:not(.ds-datepicker-native__WN0Emr--invalid, .ds-datepicker-native__WN0Emr--disabled, .ds-datepicker-native__WN0Emr--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-datepicker-native__izAhxK:focus-visible {
+.ds-datepicker-native__WN0Emr: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-datepicker-native__izAhxK:focus-within {
+.ds-datepicker-native__WN0Emr:focus-within {
   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-datepicker-native__izAhxK {
+.ds-datepicker-native__WN0Emr {
   justify-content: space-between;
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-native__izAhxK__calendar-icon {
+  .ds-datepicker-native__WN0Emr__calendar-icon {
     display: none !important;
   }
 }
-.ds-datepicker-native__izAhxK__input-container {
+.ds-datepicker-native__WN0Emr__input-container {
   width: 100% !important;
 }
 @supports (-webkit-touch-callout: none) {
-  .ds-datepicker-native__izAhxK__input-container .ds-datepicker-native__izAhxK__input {
+  .ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input {
     position: absolute;
     inset: 0;
     line-height: var(--ds-fontSize-36);

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

@@ -147,11 +147,11 @@ export class DsDatepickerNative {
         const assistiveTextId = this.dsAssistiveText ? `${this.dsId}-assistive` : undefined;
         const hiddenAssistiveTextId = this.dsHiddenAssistiveText ? `${this.dsId}-hidden-assistive` : undefined;
         const ariaDescribedbyValue = [this.dsAriaDescribedby, assistiveTextId, hiddenAssistiveTextId, this.dsErrorText ? this.inputValidityId : null].filter(Boolean).join(' ') || undefined;
-        return (h("div", { key: 'd33638642ebbac4cb45b2abf71d752035a283692' }, h(DsControlLabel, { key: 'de88719f244fbde0b4c9414a90caaaa208d6f937', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: '21291470896f76f1b3d6298e01744b106d93ffbb', name: "label" })), h("div", { key: '264304186d3c2dfa2839b70db45ce0de4721fd09', class: classNames(`${baseClass}`, {
+        return (h("div", { key: '64547375f3f38953341f08abcac3f88818308e6d' }, h(DsControlLabel, { key: '56b0513bc7f859e7f2ee9c9285444af70688ec29', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: '5cce8836ef66ce7500952ddb240bcf8196f890f6', name: "label" })), h("div", { key: '5eb2ea20b1452f9e9a814c06ad8e6906871968c6', class: classNames(`${baseClass}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: '01720ca8960311269d35aa3a82fc645cbb68f92b', class: inputContainerClass }, h("input", { key: 'e475c5ee7c26d754f97fade516192ed11ce95b94', ref: el => {
+            }) }, h("div", { key: 'e0fc6ed13c20ee5b134c8d439c2266d53b654a74', class: inputContainerClass }, h("input", { key: '0efc0702b90470ce367bc03ed6b2812421538e3b', ref: el => {
                 this.nativeDateInputRef = el;
                 if (el)
                     el.value = this.value;
@@ -160,7 +160,7 @@ export class DsDatepickerNative {
                 this.value = target.value;
                 this.isOpen = false;
                 this.dsChange.emit(target.value);
-            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls })), this.dsShowCalendarIcon && (h(this.DsButtonTag, { key: 'a74aeb5f476af943743ab854aa60579fbc10cd8d', class: `${baseClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.openDatePicker, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: openDatePicker(), dsInInput: true }, h(this.DsIconTag, { key: '0c5c00215180de833e1a22d1f426f6573a241724', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), h(this.DsInputValidityTag, { key: '049fe49bef2605255f2e58e92b456e5f82af4a28', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls })), this.dsShowCalendarIcon && (h(this.DsButtonTag, { key: '5cd4723dc8f4cd4c0e7136ceaf4af00b36dc42a4', class: `${baseClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.openDatePicker, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: openDatePicker(), dsInInput: true }, h(this.DsIconTag, { key: 'aa3a6f734b716d43ca8b2c9f1abbe7e0baa55f5d', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), h(this.DsInputValidityTag, { key: 'f8aace43f6471b7e43826b50a3f666087b802bbd', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-native"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-simple/ds-datepicker-simple.css

@@ -14,7 +14,7 @@
   position: relative;
 }
 
-.ds-datepicker-simple__izAhxK {
+.ds-datepicker-simple__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-simple/ds-datepicker-simple.js

@@ -210,7 +210,7 @@ export class DsDatepickerSimple {
         const hiddenAssistiveTextId = this.dsHiddenAssistiveText ? `${this.dsId}-hidden-assistive` : undefined;
         const validityId = this.validityText ? `${this.dsId}-validity` : undefined;
         const ariaDescribedbyValue = this.dsAriaDescribedby || undefined;
-        return (h("div", { key: '2d8789b5b5d7fe5c92f4c2ebdd3598269e9f3acc' }, h(this.DsControlLabel, { key: '4e9b9db6fa8700b0cf4d8ed0ccccc64f6346191c', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: '96b1af36aad9ddb277382b1e46830b3ff4033f8f', name: "label" })), h("div", { key: '905765654158cbc48807b570c5b941f99138c430', class: simpleClass }, h(this.DsTextInputTag, { key: '010688f3e00a368023cdc4ca4211bb5bebd31aa7', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? formatDisplayDate(this.selectedDate), dsPlaceholder: this.dsPlaceholder, dsInvalid: !!this.validityText, dsFullWidth: true, dsAriaDescribedby: [ariaDescribedbyValue, assistiveTextId, hiddenAssistiveTextId, validityId].filter(Boolean).join(' ') || undefined, onDsInput: this.handleInputChange, onDsChange: (e) => e.stopPropagation(), onDsValidity: this.handleValidityEvent(this.dsValidity), onDsSubmitInvalid: this.handleValidityEvent(this.dsSubmitInvalid) })), this.validityText && h(this.DsInputValidityTag, { key: 'd29dbb2744d7228f68550da44ba79e136c116513', id: validityId, dsText: this.validityText, dsType: "error" })));
+        return (h("div", { key: '373c32690d8fee31f5ab6e51ae3031eb62eaf2a3' }, h(this.DsControlLabel, { key: '3b4955ab73606e5256f09d20d0fb749d2fdbe7f7', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: '4b21ccaa7cf52648136b9208e0324b0d796cbc8c', name: "label" })), h("div", { key: 'e9607a5c7383087743f81b49dde499b83732ff17', class: simpleClass }, h(this.DsTextInputTag, { key: '6a470db20b702027069db2844ee549ce78dee81b', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? formatDisplayDate(this.selectedDate), dsPlaceholder: this.dsPlaceholder, dsInvalid: !!this.validityText, dsFullWidth: true, dsAriaDescribedby: [ariaDescribedbyValue, assistiveTextId, hiddenAssistiveTextId, validityId].filter(Boolean).join(' ') || undefined, onDsInput: this.handleInputChange, onDsChange: (e) => e.stopPropagation(), onDsValidity: this.handleValidityEvent(this.dsValidity), onDsSubmitInvalid: this.handleValidityEvent(this.dsSubmitInvalid) })), this.validityText && h(this.DsInputValidityTag, { key: '8f2e9e843812b3cc86c1e52373b7d27642e742ba', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-simple"; }
     static get encapsulation() { return "scoped"; }

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

@@ -569,7 +569,7 @@ export class DsDatepicker extends Mixin(componentFactory('ds-datepicker', { stop
                     "references": {
                         "DsDatepickerChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-datepicker/ds-datepicker.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-datepicker/ds-datepicker.tsx",
                             "id": "src/components/01-base-components/ds-datepicker/ds-datepicker.tsx::DsDatepickerChangeEvent"
                         }
                     }
@@ -634,7 +634,7 @@ export class DsDatepicker extends Mixin(componentFactory('ds-datepicker', { stop
                     "references": {
                         "DsDatepickerBlurEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-datepicker/ds-datepicker.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-datepicker/ds-datepicker.tsx",
                             "id": "src/components/01-base-components/ds-datepicker/ds-datepicker.tsx::DsDatepickerBlurEvent"
                         }
                     }
@@ -655,7 +655,7 @@ export class DsDatepicker extends Mixin(componentFactory('ds-datepicker', { stop
                     "references": {
                         "DsDatepickerFocusEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-datepicker/ds-datepicker.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-datepicker/ds-datepicker.tsx",
                             "id": "src/components/01-base-components/ds-datepicker/ds-datepicker.tsx::DsDatepickerFocusEvent"
                         }
                     }

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

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-divider__izAhxK {
+.ds-divider__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -13,12 +13,12 @@
   border: none;
   display: block;
 }
-.ds-divider__izAhxK--horizontal {
+.ds-divider__WN0Emr--horizontal {
   border-top: var(--ds-borderWidth-hairline) solid;
   margin: var(--ds-divider-spacing-before, var(--ds-spacing-2xSmall)) 0 var(--ds-divider-spacing-after, var(--ds-spacing-2xSmall));
   width: 100%;
 }
-.ds-divider__izAhxK--vertical {
+.ds-divider__WN0Emr--vertical {
   display: inline-flex;
   flex-direction: column;
   align-self: stretch;
@@ -28,9 +28,9 @@
   flex: 1;
   width: 0;
 }
-.ds-divider__izAhxK--decorative {
+.ds-divider__WN0Emr--decorative {
   border-color: var(--ds-borderColor-light);
 }
-.ds-divider__izAhxK--accessible {
+.ds-divider__WN0Emr--accessible {
   border-color: var(--ds-borderColor-default);
 }

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

@@ -16,7 +16,7 @@ export class DsDivider {
             '--ds-divider-spacing-before': this.dsCustomPaddingBefore ?? this.toSpacingValue(this.dsPadding),
             '--ds-divider-spacing-after': this.dsCustomPaddingAfter ?? this.toSpacingValue(this.dsPadding),
         };
-        return (h(Host, { key: 'bbdd3113e65cb634f6723e72cde9cc4e8b9c240a', style: hostStyle }, h("hr", { key: 'e1fa912f0e35d0da479087e160628ee79b25da41', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
+        return (h(Host, { key: 'c32b42d11ec24625a6d3718a64c4f3c58bf1a07e', style: hostStyle }, h("hr", { key: '123356c89917b559636f32027ad4e12d72aaaac5', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
     }
     static get is() { return "ds-divider"; }
     static get encapsulation() { return "scoped"; }

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

@@ -24,7 +24,7 @@ export class DsFeedback {
     render() {
         const Elem = this.dsSrOnly ? this.DsVisuallyHidden : Fragment;
         const elemProps = this.dsSrOnly ? { dsTag: this.dsSrOnlyTag } : {};
-        return (h(this.dsTag, { key: '8b2903da943825162a5290feb7b9887f3dc7d9c4', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: 'd067502390fecfe53d1c7923a0cd7a24b25fb61d', ...elemProps }, h("slot", { key: '8f15e17861817e811e5960c995080e0382eaca7a' }))));
+        return (h(this.dsTag, { key: '794338430f0e0e5341c1eee25eadf098d059eff3', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: '15285f38ad7a6439ecbd1515010c0eb608bdebcc', ...elemProps }, h("slot", { key: '933b521fd4434e65a69f10d8a1a8f6edc28a58d3' }))));
     }
     static get is() { return "ds-feedback"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,18 +1,18 @@
-.ds-grid__izAhxK.ds-grid__izAhxK--container {
+.ds-grid__WN0Emr.ds-grid__WN0Emr--container {
   max-width: calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));
   margin: 0 var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK--container {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK--container {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr--container {
     margin: 0 auto;
   }
 }
-.ds-grid__izAhxK.ds-grid__izAhxK__flex {
+.ds-grid__WN0Emr.ds-grid__WN0Emr__flex {
   display: flex;
   flex-flow: wrap;
   min-width: 0;
@@ -20,91 +20,91 @@
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__flex {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__flex {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
+.ds-grid__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
   width: calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile));
 }
 @media (min-width: 30rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
     width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-tablet));
   }
 }
 @media (min-width: 45rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
     width: calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet));
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container) {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
     width: calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop));
   }
 }
-.ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
+.ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
   display: grid;
   grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
     grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__izAhxK.ds-grid__izAhxK__grid {
+.ds-grid__WN0Emr.ds-grid__WN0Emr__grid {
   grid-column: span var(--ds-size-mobile);
   grid-row: span var(--ds-row-span-mobile, 1);
 }
 @supports (grid-column: span var(--ds-size-mobile)) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-mobile: -1"] {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid[style*="--ds-size-mobile: -1"] {
     grid-column: 1/-1;
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__grid {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid {
     grid-column: span var(--ds-size-tablet);
     grid-row: span var(--ds-row-span-tablet, 1);
   }
   @supports (grid-column: span var(--ds-size-tablet)) {
-    .ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__WN0Emr.ds-grid__WN0Emr__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__izAhxK.ds-grid__izAhxK__grid:not([style*="--ds-size-tablet: -1"]) {
+    .ds-grid__WN0Emr.ds-grid__WN0Emr__grid:not([style*="--ds-size-tablet: -1"]) {
       grid-column: span var(--ds-size-tablet);
     }
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__izAhxK.ds-grid__izAhxK__grid {
+  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid {
     grid-column: span var(--ds-size-desktop);
     grid-row: span var(--ds-row-span-desktop, 1);
   }
   @supports (grid-column: span var(--ds-size-desktop)) {
-    .ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__WN0Emr.ds-grid__WN0Emr__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__izAhxK.ds-grid__izAhxK__grid:not([style*="--ds-size-desktop: -1"]) {
+    .ds-grid__WN0Emr.ds-grid__WN0Emr__grid:not([style*="--ds-size-desktop: -1"]) {
       grid-column: span var(--ds-size-desktop);
     }
   }

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

@@ -55,7 +55,7 @@ export class DsGrid extends Mixin(componentFactory('ds-grid', { transparentForRo
             [`${baseClass}--container`]: this.dsContainer,
             [`${baseClass}__${this.dsType}`]: this.dsType,
         });
-        return (h(Host, { key: 'd57b350c30ff2b0326a7498219823c27932dd0a6', class: classes, style: {
+        return (h(Host, { key: '1968d1901faaa000283eca19c576ac785eae700f', class: classes, style: {
                 ...(this.dsType === 'flex'
                     ? {
                         '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
@@ -84,7 +84,7 @@ export class DsGrid extends Mixin(componentFactory('ds-grid', { transparentForRo
                         '--ds-row-span-tablet': this.dsRowSpanTablet ? `${this.dsRowSpanTablet}` : undefined,
                         '--ds-row-span-desktop': this.dsRowSpanDesktop ? `${this.dsRowSpanDesktop}` : undefined,
                     }),
-            } }, h("slot", { key: '05e2fce65904e04e52f6a0588ddff823b78b34a5' })));
+            } }, h("slot", { key: 'e7351f15cc350c4a5480ccb8585a24b6c784741e' })));
     }
     static get is() { return "ds-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/01-base-components/ds-group-label/ds-group-label.css

@@ -1,4 +1,4 @@
-.ds-group-label__izAhxK__label {
+.ds-group-label__WN0Emr__label {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -8,10 +8,10 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-group-label__izAhxK {
+.ds-group-label__WN0Emr {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__izAhxK:empty {
+.ds-group-label__WN0Emr:empty {
   display: none;
 }

package/dist/collection/components/01-base-components/ds-group-label/ds-group-label.js

@@ -18,7 +18,7 @@ export class DsGroupLabel extends Mixin(componentFactory('ds-group-label')) {
     }
     render() {
         const baseClass = cx('ds-group-label');
-        return (h("div", { key: '464d44f204db2ad4856afdbd42c88fb37946c821', class: baseClass }, h("slot", { key: '84b0c2aed1cb714ec1c9b18a20aab875c8a53b26', name: "label" }, this.dsLabel && h("div", { key: '657a67c761189e370209ad4e91b59e85b88588c3', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: '5c2c0a22ce3590701544d6f125f95d431b2c644f', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'eed3766a7fa01b160330e44ea8c83938c9f9e7f7', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
+        return (h("div", { key: 'e8f93293f6a727f48caec49f4d5ed79a59ef966f', class: baseClass }, h("slot", { key: '7a2a3f11325941b136e59e891351f572e6cee145', name: "label" }, this.dsLabel && h("div", { key: '436b0347291d6519f4a0cbb031c4bf07334c5818', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: 'f617e417b3804a909a17c86a0d0795a7b8176434', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '12593203f2d23b735f4b5e4714e8ca6888487cda', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
     }
     static get is() { return "ds-group-label"; }
     static get originalStyleUrls() {

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

@@ -2,9 +2,9 @@
   display: flex;
 }
 
-.ds-icon__izAhxK--container {
+.ds-icon__WN0Emr--container {
   display: flex;
 }
-.ds-icon__izAhxK--hidden {
+.ds-icon__WN0Emr--hidden {
   display: none;
 }

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

@@ -61,9 +61,9 @@ export class DsIcon extends Mixin(componentFactory('ds-icon'), ariaDeprecationFa
         const iconRole = this.dsRole ?? this.inheritedAttributes['role'];
         const iconAriaHidden = String(this.dsAriaHidden ?? true);
         const restAttributes = omit(this.inheritedAttributes, ['aria-label', 'aria-labelledby', 'role', 'aria-hidden']);
-        return (h("span", { key: '503eb77e868a946cf24b91a577b7eb3385be8580', class: classNames(`${baseClass}--container`, {
+        return (h("span", { key: '9219f065a5c16bf9b76fc8894c0827e2b974cac3', class: classNames(`${baseClass}--container`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: 'c5fe1a86dc27ed61d870f607a4f04671a697f53f', dsSize: this.dsCustomSize ? this.dsCustomSize : remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: iconRole, dsTitle: this.dsTitle, dsAriaLabel: iconAriaLabel, dsAriaLabelledby: iconAriaLabelledby, ...restAttributes })));
+            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: 'b1718820fc5298eb93c6f96fae6a6dff76554e9a', dsSize: this.dsCustomSize ? this.dsCustomSize : remToPx(this.dsSize), dsColour: this.getIconColour(), dsRole: iconRole, dsTitle: this.dsTitle, dsAriaLabel: iconAriaLabel, dsAriaLabelledby: iconAriaLabelledby, ...restAttributes })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css

@@ -1,20 +1,20 @@
-.ds-input-validity__izAhxK {
+.ds-input-validity__WN0Emr {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-input-validity__izAhxK--error {
+.ds-input-validity__WN0Emr--error {
   color: var(--ds-textColor-danger);
 }
-.ds-input-validity__izAhxK--success {
+.ds-input-validity__WN0Emr--success {
   color: var(--ds-textColor-success);
 }
-.ds-input-validity__izAhxK__icon {
+.ds-input-validity__WN0Emr__icon {
   display: block;
   height: 1.5rem;
 }
-.ds-input-validity__izAhxK small {
+.ds-input-validity__WN0Emr small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js

@@ -62,7 +62,7 @@ export class DsInputValidity extends Mixin(componentFactory('ds-input-validity')
             : {
                 role: resolvedRole,
             };
-        return (h(Elem, { key: 'bc86c1c36ce83a4e79eda5772c1792cba8842d63', ...elemProps, ...restAttributes }, h("slot", { key: '1ef33d724df9955b1f88ed166aab5b82006e8637' }), this.dsText && (h("div", { key: '7f3382c8e093c42ac5486eb46361a7dc3f14bfe9', class: classes }, h(this.DsIcon, { key: 'b51969dd04dd66fabcead6e39cf8fdf00a6bd8fc', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: 'b4be918b322bbc27e3e8c09ef55a33b0d4d39f80', id: this.identifier }, this.dsText)))));
+        return (h(Elem, { key: '324c032b1302ca15d78d5f1078b0b15f68498b09', ...elemProps, ...restAttributes }, h("slot", { key: '3b1ae8081527981c53e4e267efc9794a65a3a720' }), this.dsText && (h("div", { key: '8112419cd909a3d02aaf93d8087d4a5902ec1951', class: classes }, h(this.DsIcon, { key: 'bdd1c7c63358cdbf2d247d027a680e1bd43e7548', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: '42f695c48d23755d49bd3e69596855e6b9c45487', id: this.identifier }, this.dsText)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {

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

@@ -4,19 +4,19 @@
   display: block;
 }
 
-.ds-link__izAhxK {
+.ds-link__WN0Emr {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__izAhxK:focus-visible {
+.ds-link__WN0Emr: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-link__izAhxK {
+.ds-link__WN0Emr {
   box-sizing: border-box;
   display: inline;
   vertical-align: var(--ds-link-vertical-align, baseline);
@@ -34,86 +34,86 @@
   text-underline-offset: 12%;
   text-underline-position: from-font;
 }
-.ds-link__izAhxK--semibold {
+.ds-link__WN0Emr--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-link__izAhxK--bold {
+.ds-link__WN0Emr--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-link__izAhxK--2xLarge {
+.ds-link__WN0Emr--2xLarge {
   font-size: var(--ds-fontSize-22);
 }
-.ds-link__izAhxK--xLarge {
+.ds-link__WN0Emr--xLarge {
   font-size: var(--ds-fontSize-20);
 }
-.ds-link__izAhxK--large {
+.ds-link__WN0Emr--large {
   font-size: var(--ds-fontSize-18);
 }
-.ds-link__izAhxK--medium {
+.ds-link__WN0Emr--medium {
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__izAhxK--small {
+.ds-link__WN0Emr--small {
   font-size: var(--ds-fontSize-14);
 }
-.ds-link__izAhxK--xSmall {
+.ds-link__WN0Emr--xSmall {
   font-size: var(--ds-fontSize-12);
 }
-.ds-link__izAhxK__icon {
+.ds-link__WN0Emr__icon {
   display: inline-block;
   vertical-align: -0.125em;
 }
-.ds-link__izAhxK__icon--start-inline {
+.ds-link__WN0Emr__icon--start-inline {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link__izAhxK__icon--start-standalone {
+.ds-link__WN0Emr__icon--start-standalone {
   margin-right: var(--ds-spacing-2xSmall);
 }
-.ds-link__izAhxK__icon--end-inline {
+.ds-link__WN0Emr__icon--end-inline {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link__izAhxK__icon--end-standalone {
+.ds-link__WN0Emr__icon--end-standalone {
   margin-left: var(--ds-spacing-2xSmall);
 }
-.ds-link__izAhxK:hover, .ds-link__izAhxK:active {
+.ds-link__WN0Emr:hover, .ds-link__WN0Emr:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-link__izAhxK:hover {
+.ds-link__WN0Emr:hover {
   color: var(--ds-textColor-link-hover);
   cursor: pointer;
 }
-.ds-link__izAhxK:active {
+.ds-link__WN0Emr:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__izAhxK:visited {
+.ds-link__WN0Emr:visited {
   color: var(--ds-textColor-link-visited);
 }
-.ds-link__izAhxK--standalone {
+.ds-link__WN0Emr--standalone {
   display: inline-block;
   color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
-.ds-link__izAhxK--standalone:hover, .ds-link__izAhxK--standalone:active {
+.ds-link__WN0Emr--standalone:hover, .ds-link__WN0Emr--standalone:active {
   text-decoration-line: underline;
 }
-.ds-link__izAhxK--standalone:focus-visible, .ds-link__izAhxK--standalone:visited {
+.ds-link__WN0Emr--standalone:focus-visible, .ds-link__WN0Emr--standalone:visited {
   color: var(--ds-textColor-link);
 }
-.ds-link__izAhxK--standalone:active {
+.ds-link__WN0Emr--standalone:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__izAhxK--standalone:hover {
+.ds-link__WN0Emr--standalone:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__izAhxK--colour-white {
+.ds-link__WN0Emr--colour-white {
   color: var(--ds-textColor-white);
 }
-.ds-link__izAhxK--colour-white:hover, .ds-link__izAhxK--colour-white:active, .ds-link__izAhxK--colour-white:visited, .ds-link__izAhxK--colour-white:focus-visible {
+.ds-link__WN0Emr--colour-white:hover, .ds-link__WN0Emr--colour-white:active, .ds-link__WN0Emr--colour-white:visited, .ds-link__WN0Emr--colour-white:focus-visible {
   color: var(--ds-textColor-white);
 }
-.ds-link__izAhxK--colour-black {
+.ds-link__WN0Emr--colour-black {
   color: var(--ds-textColor-default);
 }
-.ds-link__izAhxK--colour-black:hover, .ds-link__izAhxK--colour-black:active, .ds-link__izAhxK--colour-black:visited, .ds-link__izAhxK--colour-black:focus-visible {
+.ds-link__WN0Emr--colour-black:hover, .ds-link__WN0Emr--colour-black:active, .ds-link__WN0Emr--colour-black:visited, .ds-link__WN0Emr--colour-black:focus-visible {
   color: var(--ds-textColor-default);
 }