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

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__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input {
+.ds-datepicker-native__0apwgA__input-container .ds-datepicker-native__0apwgA__input {
   flex: 1;
   border: none;
   outline: none;
@@ -26,22 +26,22 @@
   min-width: 0;
   width: 100%;
 }
-.ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input:disabled {
+.ds-datepicker-native__0apwgA__input-container .ds-datepicker-native__0apwgA__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input::-webkit-calendar-picker-indicator {
+.ds-datepicker-native__0apwgA__input-container .ds-datepicker-native__0apwgA__input::-webkit-calendar-picker-indicator {
   display: none;
 }
-.ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input::-webkit-clear-button {
+.ds-datepicker-native__0apwgA__input-container .ds-datepicker-native__0apwgA__input::-webkit-clear-button {
   display: none;
 }
 
-.ds-datepicker-native__pA2cRq__calendar-icon {
+.ds-datepicker-native__0apwgA__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-native__pA2cRq {
+.ds-datepicker-native__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -57,58 +57,58 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-datepicker-native__pA2cRq--disabled {
+.ds-datepicker-native__0apwgA--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__pA2cRq--readonly {
+.ds-datepicker-native__0apwgA--readonly {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-datepicker-native__pA2cRq--invalid {
+.ds-datepicker-native__0apwgA--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__pA2cRq--invalid:active {
+.ds-datepicker-native__0apwgA--invalid:active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__pA2cRq--invalid:hover:not(.ds-datepicker-native__pA2cRq--invalid:focus-within) {
+.ds-datepicker-native__0apwgA--invalid:hover:not(.ds-datepicker-native__0apwgA--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__pA2cRq:hover:not(.ds-datepicker-native__pA2cRq--disabled, .ds-datepicker-native__pA2cRq--readonly, .ds-datepicker-native__pA2cRq--invalid, .ds-datepicker-native__pA2cRq:focus-within) {
+.ds-datepicker-native__0apwgA:hover:not(.ds-datepicker-native__0apwgA--disabled, .ds-datepicker-native__0apwgA--readonly, .ds-datepicker-native__0apwgA--invalid, .ds-datepicker-native__0apwgA:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-native__pA2cRq:focus-within:not(.ds-datepicker-native__pA2cRq--invalid, .ds-datepicker-native__pA2cRq--disabled, .ds-datepicker-native__pA2cRq--readonly) {
+.ds-datepicker-native__0apwgA:focus-within:not(.ds-datepicker-native__0apwgA--invalid, .ds-datepicker-native__0apwgA--disabled, .ds-datepicker-native__0apwgA--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-datepicker-native__pA2cRq:focus-visible {
+.ds-datepicker-native__0apwgA: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__pA2cRq:focus-within {
+.ds-datepicker-native__0apwgA: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__pA2cRq {
+.ds-datepicker-native__0apwgA {
   justify-content: space-between;
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-native__pA2cRq__calendar-icon {
+  .ds-datepicker-native__0apwgA__calendar-icon {
     display: none !important;
   }
 }
-.ds-datepicker-native__pA2cRq__input-container {
+.ds-datepicker-native__0apwgA__input-container {
   width: 100% !important;
 }
 @supports (-webkit-touch-callout: none) {
-  .ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input {
+  .ds-datepicker-native__0apwgA__input-container .ds-datepicker-native__0apwgA__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: '05d5822e45b9483fa8453b149687016c5fc7b9a0' }, h(DsControlLabel, { key: '331667e4fe063a8871c8d87ae0fc06a4896e2c93', 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: '43100d094082c33b8bd72775be2273d6d9c8f6dc', name: "label" })), h("div", { key: 'af5695adaff23db930a8b1791c28f71a2fb8d21d', class: classNames(`${baseClass}`, {
+        return (h("div", { key: 'ed6a8bbb174a2a8564d16639bff4b534d9f4176b' }, h(DsControlLabel, { key: '60254c2a1a7d35de9afed225f9f47aa378e6e5dc', 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: '7b4dad9eb682584df4f7011936d2a1239c041e72', name: "label" })), h("div", { key: '98cbbd71a0e24dfadfc3669af0fbbbaf5a1dec13', class: classNames(`${baseClass}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: 'a61e796b2ec2838200475b47059ee18a5f2196da', class: inputContainerClass }, h("input", { key: 'd5ceceb10138ebc2c02949e52c122a38201fd240', ref: el => {
+            }) }, h("div", { key: '33d89a049f818a120c371ff23ae40a06e0190523', class: inputContainerClass }, h("input", { key: '7113b3b2de5774d7cb344a008b5cf6e8ab3f90aa', 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: 'c9396eed1674c9a23eac0101d94ad142676a6d54', 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: '352e6905ddf04ed6c4a0ee7264bd18ed1a013d7b', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), h(this.DsInputValidityTag, { key: 'b000fb8c30203752b113218fed941810f4d3775b', 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: '8fd49dcd5d1b5be3262e6197b730a0070cca6cf5', 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: 'baf506ddfd0ba5eb141f913b6205763d4343c1cc', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), h(this.DsInputValidityTag, { key: '803bf5f1aae5a891459d1922fef16dbebc78c380', 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__pA2cRq {
+.ds-datepicker-simple__0apwgA {
   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: '315c67afd479a7d88ab774950712e31c5b2dd777' }, h(this.DsControlLabel, { key: '1e7e57ec3cc6244b00593d88c70d3f41de75ec75', 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: 'cbaeee87017f493f0149f5b40d095db096e74063', name: "label" })), h("div", { key: 'bba1a4bab77e99441e96f56e140ae6f5bb6d86e5', class: simpleClass }, h(this.DsTextInputTag, { key: 'f9d15cca46d9123aff6069762d1d3ae2b4cccf31', 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: '951480e65d20eef2ff62f82ea73bfc5baab01da3', id: validityId, dsText: this.validityText, dsType: "error" })));
+        return (h("div", { key: '7dc2427c91737f02119af169aeb6b8116cee7cbf' }, h(this.DsControlLabel, { key: '4d6a5c2f37a0ce6385969519d10ba506b91aee39', 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: 'a14b07013bc60e5b120b73f71770dc4279b74b11', name: "label" })), h("div", { key: '0a080aa69517b842d14c46d56539aee2dee8546b', class: simpleClass }, h(this.DsTextInputTag, { key: '0afdd46a1fbd380b76827035fc7afcb3e5690cc7', 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: '7d59b9a478f1eabce050f7c8df1870bf520e281d', 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-divider/ds-divider.css

@@ -4,7 +4,7 @@
   display: block;
 }
 
-.ds-divider__pA2cRq {
+.ds-divider__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -13,12 +13,12 @@
   border: none;
   display: block;
 }
-.ds-divider__pA2cRq--horizontal {
+.ds-divider__0apwgA--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__pA2cRq--vertical {
+.ds-divider__0apwgA--vertical {
   display: inline-flex;
   flex-direction: column;
   align-self: stretch;
@@ -28,9 +28,9 @@
   flex: 1;
   width: 0;
 }
-.ds-divider__pA2cRq--decorative {
+.ds-divider__0apwgA--decorative {
   border-color: var(--ds-borderColor-light);
 }
-.ds-divider__pA2cRq--accessible {
+.ds-divider__0apwgA--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: '3c8cf29d56294503961838e078d30af609f6ef8b', style: hostStyle }, h("hr", { key: '575eb47fa5b5a102fd8ddcfd69c319b39502d7dd', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
+        return (h(Host, { key: '6f8595a51b98196d03be69eed929f03c281f8e16', style: hostStyle }, h("hr", { key: '54750a6aea57622700ce46876058eb7d4951143d', 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: '3e12c5599e7cae524b6089fd63364e8ef5173605', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: '13a0fe6e9be620b09e704f089859ef1322301bd4', ...elemProps }, h("slot", { key: '2a9c1458c092543436ad93329af035318e1603f6' }))));
+        return (h(this.dsTag, { key: '855703f46317fafbaa15103ebf0a1e234727e288', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: '0134ff67315daf99c3ee70bfca4181b4a61484e0', ...elemProps }, h("slot", { key: '821bf09096a35c987c3c49f8d8fe024bfe750c10' }))));
     }
     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__pA2cRq.ds-grid__pA2cRq--container {
+.ds-grid__0apwgA.ds-grid__0apwgA--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__pA2cRq.ds-grid__pA2cRq--container {
+  .ds-grid__0apwgA.ds-grid__0apwgA--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq--container {
+  .ds-grid__0apwgA.ds-grid__0apwgA--container {
     margin: 0 auto;
   }
 }
-.ds-grid__pA2cRq.ds-grid__pA2cRq__flex {
+.ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__flex {
+  .ds-grid__0apwgA.ds-grid__0apwgA__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq__flex {
+  .ds-grid__0apwgA.ds-grid__0apwgA__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__flex--container) {
+.ds-grid__0apwgA.ds-grid__0apwgA__flex:not(.ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__flex--container) {
+  .ds-grid__0apwgA.ds-grid__0apwgA__flex:not(.ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__flex--container) {
+  .ds-grid__0apwgA.ds-grid__0apwgA__flex:not(.ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__flex--container) {
+  .ds-grid__0apwgA.ds-grid__0apwgA__flex:not(.ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
+.ds-grid__0apwgA.ds-grid__0apwgA__grid.ds-grid__0apwgA--container {
   display: grid;
   grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
+  .ds-grid__0apwgA.ds-grid__0apwgA__grid.ds-grid__0apwgA--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
+  .ds-grid__0apwgA.ds-grid__0apwgA__grid.ds-grid__0apwgA--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
+  .ds-grid__0apwgA.ds-grid__0apwgA__grid.ds-grid__0apwgA--container {
     grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
+  .ds-grid__0apwgA.ds-grid__0apwgA__grid.ds-grid__0apwgA--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__pA2cRq.ds-grid__pA2cRq__grid {
+.ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__grid[style*="--ds-size-mobile: -1"] {
+  .ds-grid__0apwgA.ds-grid__0apwgA__grid[style*="--ds-size-mobile: -1"] {
     grid-column: 1/-1;
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid {
+  .ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__0apwgA.ds-grid__0apwgA__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__pA2cRq.ds-grid__pA2cRq__grid:not([style*="--ds-size-tablet: -1"]) {
+    .ds-grid__0apwgA.ds-grid__0apwgA__grid:not([style*="--ds-size-tablet: -1"]) {
       grid-column: span var(--ds-size-tablet);
     }
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid {
+  .ds-grid__0apwgA.ds-grid__0apwgA__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__pA2cRq.ds-grid__pA2cRq__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__0apwgA.ds-grid__0apwgA__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__pA2cRq.ds-grid__pA2cRq__grid:not([style*="--ds-size-desktop: -1"]) {
+    .ds-grid__0apwgA.ds-grid__0apwgA__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: '5a7344f82286b6a074003c96c6cd0542341abb7e', class: classes, style: {
+        return (h(Host, { key: '0a6fcdfad6002f462311812e5c12a3e1212833d7', 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: '87f19783c5395703efdb643a83c322549714381a' })));
+            } }, h("slot", { key: 'd19a62488ece16f113f471960629bb587e4e5999' })));
     }
     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__pA2cRq__label {
+.ds-group-label__0apwgA__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__pA2cRq {
+.ds-group-label__0apwgA {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__pA2cRq:empty {
+.ds-group-label__0apwgA: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: '21237093f39019b5894e66b3a6a4d109967f1865', class: baseClass }, h("slot", { key: '0ae72c87fc309a7d1e50c9c9e8b8a1736007befd', name: "label" }, this.dsLabel && h("div", { key: 'b46d7b074ed1379f93d6eb24037f4059c2209a71', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: 'ee2a46d2192caef1c74e14cdd05a7a6a36e08bb6', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '347a940c394e9ea3f84697e253690472c82c485d', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
+        return (h("div", { key: '4e43254ad1d254cc25874eea800efc06e68dc173', class: baseClass }, h("slot", { key: '3a012d1f0c465116c33df1442a464b7475e4781b', name: "label" }, this.dsLabel && h("div", { key: 'c99413007f638867eed94a89d74a6fd382235c56', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: '3860e81fc381ec82c1d1087f8b96f8ca2e6931b6', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '370a28bc5124efac739ddd46104b014d95c63d61', 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__pA2cRq--container {
+.ds-icon__0apwgA--container {
   display: flex;
 }
-.ds-icon__pA2cRq--hidden {
+.ds-icon__0apwgA--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: '237948a19b4de15c5e025e2979b8302cb08151c8', class: classNames(`${baseClass}--container`, {
+        return (h("span", { key: '59f0b0a3841d0b2868b12780b15011b6ba658a5a', class: classNames(`${baseClass}--container`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: 'a0f204499f5b66687464cd66c4478f7616ab27ea', 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: '3f18c6a42459e192398c6db02fac7abd118dadd4', 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__pA2cRq {
+.ds-input-validity__0apwgA {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-input-validity__pA2cRq--error {
+.ds-input-validity__0apwgA--error {
   color: var(--ds-textColor-danger);
 }
-.ds-input-validity__pA2cRq--success {
+.ds-input-validity__0apwgA--success {
   color: var(--ds-textColor-success);
 }
-.ds-input-validity__pA2cRq__icon {
+.ds-input-validity__0apwgA__icon {
   display: block;
   height: 1.5rem;
 }
-.ds-input-validity__pA2cRq small {
+.ds-input-validity__0apwgA 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: '9827cb6709d553d7e61366c11dcab7ed16ae6344', ...elemProps, ...restAttributes }, h("slot", { key: '9625b4a5a3e1e45d0e6fce3ca87f3a7ca1a5d758' }), this.dsText && (h("div", { key: 'a40aa807e92ebd74c93220849ec6930aba797f50', class: classes }, h(this.DsIcon, { key: '250aa9b89370844a4ac679684a39d4a1364bd5f7', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: '86ff3c53358aa2956f0c95bf42ca16a33a0cef34', id: this.identifier }, this.dsText)))));
+        return (h(Elem, { key: '2a98fef05668230d65b97d7151e1412a33b2ea11', ...elemProps, ...restAttributes }, h("slot", { key: 'a603b99140c3682d09e065c7792da60bcd5f0232' }), this.dsText && (h("div", { key: 'bc989a29480bc364a9c954c6ed832fa359879184', class: classes }, h(this.DsIcon, { key: '57c7ce3e541733fb3461aa9456eabebcacb9ea61', class: "ds-input-validity__icon", dsColour: iconColour, dsName: icon }), h("small", { key: 'e6052d4a7273ab1e80d6a51bf791dd40c570f9ad', 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__pA2cRq {
+.ds-link__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__pA2cRq:focus-visible {
+.ds-link__0apwgA: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__pA2cRq {
+.ds-link__0apwgA {
   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__pA2cRq--semibold {
+.ds-link__0apwgA--semibold {
   font-weight: var(--ds-fontWeight-semibold);
 }
-.ds-link__pA2cRq--bold {
+.ds-link__0apwgA--bold {
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-link__pA2cRq--2xLarge {
+.ds-link__0apwgA--2xLarge {
   font-size: var(--ds-fontSize-22);
 }
-.ds-link__pA2cRq--xLarge {
+.ds-link__0apwgA--xLarge {
   font-size: var(--ds-fontSize-20);
 }
-.ds-link__pA2cRq--large {
+.ds-link__0apwgA--large {
   font-size: var(--ds-fontSize-18);
 }
-.ds-link__pA2cRq--medium {
+.ds-link__0apwgA--medium {
   font-size: var(--ds-fontSize-16);
 }
-.ds-link__pA2cRq--small {
+.ds-link__0apwgA--small {
   font-size: var(--ds-fontSize-14);
 }
-.ds-link__pA2cRq--xSmall {
+.ds-link__0apwgA--xSmall {
   font-size: var(--ds-fontSize-12);
 }
-.ds-link__pA2cRq__icon {
+.ds-link__0apwgA__icon {
   display: inline-block;
   vertical-align: -0.125em;
 }
-.ds-link__pA2cRq__icon--start-inline {
+.ds-link__0apwgA__icon--start-inline {
   margin-right: var(--ds-spacing-3xSmall);
 }
-.ds-link__pA2cRq__icon--start-standalone {
+.ds-link__0apwgA__icon--start-standalone {
   margin-right: var(--ds-spacing-2xSmall);
 }
-.ds-link__pA2cRq__icon--end-inline {
+.ds-link__0apwgA__icon--end-inline {
   margin-left: var(--ds-spacing-3xSmall);
 }
-.ds-link__pA2cRq__icon--end-standalone {
+.ds-link__0apwgA__icon--end-standalone {
   margin-left: var(--ds-spacing-2xSmall);
 }
-.ds-link__pA2cRq:hover, .ds-link__pA2cRq:active {
+.ds-link__0apwgA:hover, .ds-link__0apwgA:active {
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-link__pA2cRq:hover {
+.ds-link__0apwgA:hover {
   color: var(--ds-textColor-link-hover);
   cursor: pointer;
 }
-.ds-link__pA2cRq:active {
+.ds-link__0apwgA:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__pA2cRq:visited {
+.ds-link__0apwgA:visited {
   color: var(--ds-textColor-link-visited);
 }
-.ds-link__pA2cRq--standalone {
+.ds-link__0apwgA--standalone {
   display: inline-block;
   color: var(--ds-textColor-link);
   text-decoration-line: none;
 }
-.ds-link__pA2cRq--standalone:hover, .ds-link__pA2cRq--standalone:active {
+.ds-link__0apwgA--standalone:hover, .ds-link__0apwgA--standalone:active {
   text-decoration-line: underline;
 }
-.ds-link__pA2cRq--standalone:focus-visible, .ds-link__pA2cRq--standalone:visited {
+.ds-link__0apwgA--standalone:focus-visible, .ds-link__0apwgA--standalone:visited {
   color: var(--ds-textColor-link);
 }
-.ds-link__pA2cRq--standalone:active {
+.ds-link__0apwgA--standalone:active {
   color: var(--ds-textColor-link-active);
 }
-.ds-link__pA2cRq--standalone:hover {
+.ds-link__0apwgA--standalone:hover {
   color: var(--ds-textColor-link-hover);
 }
-.ds-link__pA2cRq--colour-white {
+.ds-link__0apwgA--colour-white {
   color: var(--ds-textColor-white);
 }
-.ds-link__pA2cRq--colour-white:hover, .ds-link__pA2cRq--colour-white:active, .ds-link__pA2cRq--colour-white:visited, .ds-link__pA2cRq--colour-white:focus-visible {
+.ds-link__0apwgA--colour-white:hover, .ds-link__0apwgA--colour-white:active, .ds-link__0apwgA--colour-white:visited, .ds-link__0apwgA--colour-white:focus-visible {
   color: var(--ds-textColor-white);
 }
-.ds-link__pA2cRq--colour-black {
+.ds-link__0apwgA--colour-black {
   color: var(--ds-textColor-default);
 }
-.ds-link__pA2cRq--colour-black:hover, .ds-link__pA2cRq--colour-black:active, .ds-link__pA2cRq--colour-black:visited, .ds-link__pA2cRq--colour-black:focus-visible {
+.ds-link__0apwgA--colour-black:hover, .ds-link__0apwgA--colour-black:active, .ds-link__0apwgA--colour-black:visited, .ds-link__0apwgA--colour-black:focus-visible {
   color: var(--ds-textColor-default);
 }