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

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

@@ -14,11 +14,11 @@
   position: relative;
 }
 
-.ds-datepicker-custom__WN0Emr__calendar-icon {
+.ds-datepicker-custom__pA2cRq__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-custom__WN0Emr {
+.ds-datepicker-custom__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -26,15 +26,15 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-datepicker-custom__WN0Emr__calendar-icon {
+.ds-datepicker-custom__pA2cRq__calendar-icon {
   margin-right: calc(-1 * var(--ds-spacing-xSmall));
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-custom__WN0Emr__calendar-icon {
+  .ds-datepicker-custom__pA2cRq__calendar-icon {
     display: inline-flex;
   }
 }
-.ds-datepicker-custom__WN0Emr__picker {
+.ds-datepicker-custom__pA2cRq__picker {
   position: absolute;
   top: 100%;
   width: 100%;
@@ -47,14 +47,14 @@
   z-index: 1000;
   padding: var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-datepicker-custom__WN0Emr__header {
+.ds-datepicker-custom__pA2cRq__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--ds-spacing-small);
   margin-bottom: var(--ds-spacing-xSmall);
 }
-.ds-datepicker-custom__WN0Emr__selects {
+.ds-datepicker-custom__pA2cRq__selects {
   --ds-select-borderWidth: 0;
   --ds-select-narrow-width: auto;
   --ds-select-wide-width: auto;
@@ -70,23 +70,23 @@
   gap: var(--ds-spacing-xSmall);
   flex: 1;
 }
-.ds-datepicker-custom__WN0Emr__navigation {
+.ds-datepicker-custom__pA2cRq__navigation {
   --ds-button-min-height: 2rem;
   --ds-button-min-width: 2rem;
   display: flex;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__WN0Emr__calendar {
+.ds-datepicker-custom__pA2cRq__calendar {
   --ds-button-min-height: var(--ds-spacing-large);
   --ds-button-min-width: var(--ds-spacing-large);
   display: flex;
   flex-direction: column;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__WN0Emr__calendar--prev {
+.ds-datepicker-custom__pA2cRq__calendar--prev {
   animation: slide-in-from-left 250ms ease-out;
 }
-.ds-datepicker-custom__WN0Emr__calendar--next {
+.ds-datepicker-custom__pA2cRq__calendar--next {
   animation: slide-in-from-right 250ms ease-out;
 }
 @keyframes slide-in-from-left {
@@ -109,25 +109,25 @@
     transform: translateX(0);
   }
 }
-.ds-datepicker-custom__WN0Emr__weekday-row, .ds-datepicker-custom__WN0Emr__day-row {
+.ds-datepicker-custom__pA2cRq__weekday-row, .ds-datepicker-custom__pA2cRq__day-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__WN0Emr__weekday-row [role=gridcell], .ds-datepicker-custom__WN0Emr__day-row [role=gridcell] {
+.ds-datepicker-custom__pA2cRq__weekday-row [role=gridcell], .ds-datepicker-custom__pA2cRq__day-row [role=gridcell] {
   display: contents;
 }
-.ds-datepicker-custom__WN0Emr__weekday, .ds-datepicker-custom__WN0Emr__day {
+.ds-datepicker-custom__pA2cRq__weekday, .ds-datepicker-custom__pA2cRq__day {
   aspect-ratio: 1;
   line-height: var(--ds-button-min-height);
   text-align: center;
 }
-.ds-datepicker-custom__WN0Emr__weekday {
+.ds-datepicker-custom__pA2cRq__weekday {
   font-weight: var(--ds-fontWeight-semibold);
   font-size: var(--ds-fontSize-12);
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__WN0Emr__day {
+.ds-datepicker-custom__pA2cRq__day {
   background: none;
   border: none;
   font-family: var(--ds-fontFamily-body);
@@ -136,51 +136,51 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-datepicker-custom__WN0Emr__day:focus-visible {
+.ds-datepicker-custom__pA2cRq__day: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-custom__WN0Emr__day:hover:not(.ds-datepicker-custom__WN0Emr__day--disabled, .ds-datepicker-custom__WN0Emr__day--selected) {
+.ds-datepicker-custom__pA2cRq__day:hover:not(.ds-datepicker-custom__pA2cRq__day--disabled, .ds-datepicker-custom__pA2cRq__day--selected) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-custom__WN0Emr__day:active:not(.ds-datepicker-custom__WN0Emr__day--disabled, .ds-datepicker-custom__WN0Emr__day--selected) {
+.ds-datepicker-custom__pA2cRq__day:active:not(.ds-datepicker-custom__pA2cRq__day--disabled, .ds-datepicker-custom__pA2cRq__day--selected) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-datepicker-custom__WN0Emr__day--other-month:not(.ds-datepicker-custom__WN0Emr__day--disabled) {
+.ds-datepicker-custom__pA2cRq__day--other-month:not(.ds-datepicker-custom__pA2cRq__day--disabled) {
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__WN0Emr__day--today {
+.ds-datepicker-custom__pA2cRq__day--today {
   font-weight: var(--ds-fontWeight-bold);
   text-decoration: underline;
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-datepicker-custom__WN0Emr__day--selected:not(.ds-datepicker-custom__WN0Emr__day--disabled) {
+.ds-datepicker-custom__pA2cRq__day--selected:not(.ds-datepicker-custom__pA2cRq__day--disabled) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-datepicker-custom__WN0Emr__day--selected:not(.ds-datepicker-custom__WN0Emr__day--disabled):hover {
+.ds-datepicker-custom__pA2cRq__day--selected:not(.ds-datepicker-custom__pA2cRq__day--disabled):hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-datepicker-custom__WN0Emr__day--selected:not(.ds-datepicker-custom__WN0Emr__day--disabled):active {
+.ds-datepicker-custom__pA2cRq__day--selected:not(.ds-datepicker-custom__pA2cRq__day--disabled):active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-datepicker-custom__WN0Emr__day--disabled {
+.ds-datepicker-custom__pA2cRq__day--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-datepicker-custom__WN0Emr__footer {
+.ds-datepicker-custom__pA2cRq__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }
-.ds-datepicker-custom__WN0Emr__footer-button--left {
+.ds-datepicker-custom__pA2cRq__footer-button--left {
   margin-right: auto;
 }
-.ds-datepicker-custom__WN0Emr__footer-button--right {
+.ds-datepicker-custom__pA2cRq__footer-button--right {
   margin-left: auto;
 }

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

@@ -587,11 +587,11 @@ export class DsDatepickerCustom {
         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: 'f50a54b4a75be645e9ec4170d78d355e687854aa' }, h(this.DsControlLabel, { key: '02d53ca7184f69f926da21312f1f37d9cfcca1a8', 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: 'c8df34b031c4cc2788782a2e60ef5196fd2e33e2', name: "label" }), h("slot", { key: '1eafd8431a6194526e887a481d0b9d6bef4e2a2c', name: "assistiveText" })), h("div", { key: '775ab129c975921cc3e4037fa78309d33dcf9c16', class: customDatepickerClass }, h(this.DsTextInputTag, { key: '545df59b00c7d360fad87b7fb9cf935fcd550dc9', 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) }, h(this.DsButtonTag, { key: 'df19e3f5a3393cb03dac916477aefce760c2956d', ref: el => (this.calendarButtonRef = el), slot: "suffix", class: `${customDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.handleCalendarButtonClick, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: this.calendarButtonAriaLabel, dsInInput: true, tabindex: this.dsDisabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false' }, h(this.DsIconTag, { key: 'daa9f84beefcc3d749da4f74194e86cb4d470fd8', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: '565f183552fa4e1a19818781fab3af3eb6ea4e81', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: 'd7ac342060ead1022a6a9745dee33d26bbd01d5f', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: '8767bce23f72bb8f3628738f09ac691e835eed30', class: `${customDatepickerClass}__header` }, h("div", { key: '619d9638b98a6a97a6663745dee6d6061d3464da', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '3a88064bdd9e07968620f4a232c1a5fe62e3badf', dsId: `${this.dsId}-month`, dsValue: this.currentMonth.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: monthLabel(), dsAriaLabel: `${selectMonth()}, ${months[this.currentMonth]}`, onDsChange: this.handleMonthChange }, months.map((monthName, index) => (h("option", { key: monthName, slot: "native", value: index.toString() }, monthName)))), h(this.DsSelectTag, { key: '1fa63a0d54a567014198d019c0d97e2029447b46', dsId: `${this.dsId}-year`, dsValue: this.currentYear.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: yearLabel(), dsAriaLabel: `${selectYear()}, ${this.currentYear}`, onDsChange: this.handleYearChange }, yearOptions.map(year => (h("option", { key: year, slot: "native", value: year.toString() }, year))))), h("div", { key: 'd1930fcfcf54ff13ee21884e2d4a468993c7d1d0', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: '608d0d4bede655fa638502315b9abc4c85a94eb5', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: '024a3684755799dff974def9dbd48f9212df47db', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: 'c33384d1a14519377e6cd2005c4b9eb94ad64c24', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: 'c6e5c82f8df387ff482b66302bded85b25ea914d', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), h("div", { class: classNames(`${customDatepickerClass}__calendar`, {
+        return (h("div", { key: '1a2bbdff99ee602a19e699a7fcb28b1b95d501db' }, h(this.DsControlLabel, { key: '7c83542adee3dd1b0c7d9ec19db8418428fa6f58', 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: 'b52f403b9135f80ccff3be99115deb049e21d920', name: "label" }), h("slot", { key: 'dfa38760670974f2811888c4d0198e4f5e8c8238', name: "assistiveText" })), h("div", { key: '50896b1dba1cabfc398ea89d53294e897724442b', class: customDatepickerClass }, h(this.DsTextInputTag, { key: '8180e6e879f38cce4a6ec5939fd34be775773ed4', 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) }, h(this.DsButtonTag, { key: '56b88a8b9641cfb54c11606882ecb22017d05268', ref: el => (this.calendarButtonRef = el), slot: "suffix", class: `${customDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.handleCalendarButtonClick, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: this.calendarButtonAriaLabel, dsInInput: true, tabindex: this.dsDisabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false' }, h(this.DsIconTag, { key: 'c6ede8147d9e530c591cd83559a776afc9451dad', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: 'b0f0580e17f1af38e67f15c8c44eccc19cd97224', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: '07da0878e9fe3c16d3a4c356d31748b29c703ce6', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: 'a0d510d92d3f1262d1a9c24b2d5a53c6d231c473', class: `${customDatepickerClass}__header` }, h("div", { key: '661fffe696b124d062bf663f98189817445a320b', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '2a9a14ce6784c0cc954096c2da073727233e7bf6', dsId: `${this.dsId}-month`, dsValue: this.currentMonth.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: monthLabel(), dsAriaLabel: `${selectMonth()}, ${months[this.currentMonth]}`, onDsChange: this.handleMonthChange }, months.map((monthName, index) => (h("option", { key: monthName, slot: "native", value: index.toString() }, monthName)))), h(this.DsSelectTag, { key: 'd2e79e4700d998884f7b4efb02bd0ad3a056c920', dsId: `${this.dsId}-year`, dsValue: this.currentYear.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: yearLabel(), dsAriaLabel: `${selectYear()}, ${this.currentYear}`, onDsChange: this.handleYearChange }, yearOptions.map(year => (h("option", { key: year, slot: "native", value: year.toString() }, year))))), h("div", { key: 'fa814f285637e2bb66f21a3c9e8749f60d64f75c', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: '86f2196079697201a1bdcf03630d5e8160f45ffc', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: 'd5361b0f1e91b57a6c565ed2f0b1291a972d7ea7', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: '77a0cbff46f25b88a6fcbadddf25e69f0851271c', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: 'f10f1a8aa39b1800c88c2d00f11d063205129e40', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), h("div", { class: classNames(`${customDatepickerClass}__calendar`, {
                 [`${customDatepickerClass}__calendar--transitioning`]: this.transitionDirection !== null,
                 [`${customDatepickerClass}__calendar--prev`]: this.transitionDirection === 'prev',
                 [`${customDatepickerClass}__calendar--next`]: this.transitionDirection === 'next',
-            }), key: this.transitionKey, role: "grid", "aria-label": `${months[this.currentMonth]} ${this.currentYear}`, onAnimationEnd: () => (this.transitionDirection = null) }, h("div", { key: '68fbd73bf8bb6b48876e17b050033906b9f12e8e', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (h("div", { key: weekday, class: `${customDatepickerClass}__weekday`, role: "columnheader" }, weekday)))), Array.from({ length: Math.ceil(calendarDays.length / 7) }, (_, rowIndex) => {
+            }), key: this.transitionKey, role: "grid", "aria-label": `${months[this.currentMonth]} ${this.currentYear}`, onAnimationEnd: () => (this.transitionDirection = null) }, h("div", { key: 'd89f6ad4d7b38bde0fd4f1a8bacc11df77b2d891', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (h("div", { key: weekday, class: `${customDatepickerClass}__weekday`, role: "columnheader" }, weekday)))), Array.from({ length: Math.ceil(calendarDays.length / 7) }, (_, rowIndex) => {
             const rowDays = calendarDays.slice(rowIndex * 7, (rowIndex + 1) * 7);
             return (h("div", { key: rowIndex, role: "row", class: `${customDatepickerClass}__day-row` }, rowDays.map(({ day, isCurrentMonth, isToday, date }) => {
                 const isDisabled = isDateDisabled(date, this.dateConstraints);
@@ -610,7 +610,7 @@ export class DsDatepickerCustom {
                         [`${customDatepickerClass}__day--disabled`]: isDisabled,
                     }) }, day)));
             })));
-        })), h("div", { key: '4e17847ce9974195e29ce614bf577f88187bb459', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: '459d40a68e064e37c09201e97c6dcc96298fb98b', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: '43cfd6c39c2e7158d8ba33133ed469dd8d2cb9a3', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: '9a8c56751eede8868cdf94ebce9ab508f3db5237', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), h("div", { key: '02201c7514f49545f4d93b4f26fe2a6da856bde7', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: 'ca7abb6b9371d6188304f3dff0f385b889c6eb95', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: 'b0cf45060fea0ec0453fb98607f665848278c934', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: '8642724e0dddafddd0c8706d26e265e245c0036b', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-custom"; }
     static get encapsulation() { return "scoped"; }

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__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input {
+.ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input {
   flex: 1;
   border: none;
   outline: none;
@@ -26,22 +26,22 @@
   min-width: 0;
   width: 100%;
 }
-.ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input:disabled {
+.ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input::-webkit-calendar-picker-indicator {
+.ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input::-webkit-calendar-picker-indicator {
   display: none;
 }
-.ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input::-webkit-clear-button {
+.ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__input::-webkit-clear-button {
   display: none;
 }
 
-.ds-datepicker-native__WN0Emr__calendar-icon {
+.ds-datepicker-native__pA2cRq__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-native__WN0Emr {
+.ds-datepicker-native__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -57,58 +57,58 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-datepicker-native__WN0Emr--disabled {
+.ds-datepicker-native__pA2cRq--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__WN0Emr--readonly {
+.ds-datepicker-native__pA2cRq--readonly {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-datepicker-native__WN0Emr--invalid {
+.ds-datepicker-native__pA2cRq--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__WN0Emr--invalid:active {
+.ds-datepicker-native__pA2cRq--invalid:active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__WN0Emr--invalid:hover:not(.ds-datepicker-native__WN0Emr--invalid:focus-within) {
+.ds-datepicker-native__pA2cRq--invalid:hover:not(.ds-datepicker-native__pA2cRq--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.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) {
+.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) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-native__WN0Emr:focus-within:not(.ds-datepicker-native__WN0Emr--invalid, .ds-datepicker-native__WN0Emr--disabled, .ds-datepicker-native__WN0Emr--readonly) {
+.ds-datepicker-native__pA2cRq:focus-within:not(.ds-datepicker-native__pA2cRq--invalid, .ds-datepicker-native__pA2cRq--disabled, .ds-datepicker-native__pA2cRq--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-datepicker-native__WN0Emr:focus-visible {
+.ds-datepicker-native__pA2cRq: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__WN0Emr:focus-within {
+.ds-datepicker-native__pA2cRq: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__WN0Emr {
+.ds-datepicker-native__pA2cRq {
   justify-content: space-between;
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-native__WN0Emr__calendar-icon {
+  .ds-datepicker-native__pA2cRq__calendar-icon {
     display: none !important;
   }
 }
-.ds-datepicker-native__WN0Emr__input-container {
+.ds-datepicker-native__pA2cRq__input-container {
   width: 100% !important;
 }
 @supports (-webkit-touch-callout: none) {
-  .ds-datepicker-native__WN0Emr__input-container .ds-datepicker-native__WN0Emr__input {
+  .ds-datepicker-native__pA2cRq__input-container .ds-datepicker-native__pA2cRq__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: '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}`, {
+        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}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: 'e0fc6ed13c20ee5b134c8d439c2266d53b654a74', class: inputContainerClass }, h("input", { key: '0efc0702b90470ce367bc03ed6b2812421538e3b', ref: el => {
+            }) }, h("div", { key: 'a61e796b2ec2838200475b47059ee18a5f2196da', class: inputContainerClass }, h("input", { key: 'd5ceceb10138ebc2c02949e52c122a38201fd240', 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: '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" })));
+            }, "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" })));
     }
     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__WN0Emr {
+.ds-datepicker-simple__pA2cRq {
   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: '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" })));
+        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" })));
     }
     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__WN0Emr {
+.ds-divider__pA2cRq {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -13,12 +13,12 @@
   border: none;
   display: block;
 }
-.ds-divider__WN0Emr--horizontal {
+.ds-divider__pA2cRq--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__WN0Emr--vertical {
+.ds-divider__pA2cRq--vertical {
   display: inline-flex;
   flex-direction: column;
   align-self: stretch;
@@ -28,9 +28,9 @@
   flex: 1;
   width: 0;
 }
-.ds-divider__WN0Emr--decorative {
+.ds-divider__pA2cRq--decorative {
   border-color: var(--ds-borderColor-light);
 }
-.ds-divider__WN0Emr--accessible {
+.ds-divider__pA2cRq--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: 'c32b42d11ec24625a6d3718a64c4f3c58bf1a07e', style: hostStyle }, h("hr", { key: '123356c89917b559636f32027ad4e12d72aaaac5', class: classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
+        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 })));
     }
     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: '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' }))));
+        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' }))));
     }
     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__WN0Emr.ds-grid__WN0Emr--container {
+.ds-grid__pA2cRq.ds-grid__pA2cRq--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__WN0Emr.ds-grid__WN0Emr--container {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr--container {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq--container {
     margin: 0 auto;
   }
 }
-.ds-grid__WN0Emr.ds-grid__WN0Emr__flex {
+.ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__flex {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr__flex {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
+.ds-grid__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__flex:not(.ds-grid__WN0Emr.ds-grid__WN0Emr__flex--container) {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__flex:not(.ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
+.ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
   display: grid;
   grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
     grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid.ds-grid__WN0Emr--container {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid.ds-grid__pA2cRq--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__WN0Emr.ds-grid__WN0Emr__grid {
+.ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__grid[style*="--ds-size-mobile: -1"] {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__grid[style*="--ds-size-mobile: -1"] {
     grid-column: 1/-1;
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__pA2cRq.ds-grid__pA2cRq__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__WN0Emr.ds-grid__WN0Emr__grid:not([style*="--ds-size-tablet: -1"]) {
+    .ds-grid__pA2cRq.ds-grid__pA2cRq__grid:not([style*="--ds-size-tablet: -1"]) {
       grid-column: span var(--ds-size-tablet);
     }
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__WN0Emr.ds-grid__WN0Emr__grid {
+  .ds-grid__pA2cRq.ds-grid__pA2cRq__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__WN0Emr.ds-grid__WN0Emr__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__pA2cRq.ds-grid__pA2cRq__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__WN0Emr.ds-grid__WN0Emr__grid:not([style*="--ds-size-desktop: -1"]) {
+    .ds-grid__pA2cRq.ds-grid__pA2cRq__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: '1968d1901faaa000283eca19c576ac785eae700f', class: classes, style: {
+        return (h(Host, { key: '5a7344f82286b6a074003c96c6cd0542341abb7e', 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: 'e7351f15cc350c4a5480ccb8585a24b6c784741e' })));
+            } }, h("slot", { key: '87f19783c5395703efdb643a83c322549714381a' })));
     }
     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__WN0Emr__label {
+.ds-group-label__pA2cRq__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__WN0Emr {
+.ds-group-label__pA2cRq {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__WN0Emr:empty {
+.ds-group-label__pA2cRq: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: '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 }))));
+        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 }))));
     }
     static get is() { return "ds-group-label"; }
     static get originalStyleUrls() {