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

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

@@ -126,10 +126,10 @@ export class DsDatepickerCustom {
             this.focusDayButton();
         }
     }
-    onFocusIn() {
+    handleFocusIn() {
         this.hasFocus = true;
     }
-    onFocusOut(e) {
+    handleFocusOut(e) {
         const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
         const lostFocus = !nextFocused || !this.el.contains(nextFocused);
         if (lostFocus) {
@@ -590,11 +590,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: '69cadc9c7d50b820fb3c34a4703e08e0bd5f7c45' }, h(this.DsControlLabel, { key: 'cf476515a6c9a69c37a19bb353284e2afa5c0ca7', 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: '1ff27a22333bedf503dd841c199ebe406162e8a4', name: "label" }), h("slot", { key: '28f1cf72a81c381596904d5ef0426641ecd5e1be', name: "assistiveText" })), h("div", { key: '8beaa3459ef8b3167029575ac40f275348e940a4', class: customDatepickerClass }, h(this.DsTextInputTag, { key: '06d05b008d0c37b755bfc5f68a103da351a7a576', 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 !== null ? 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: 'aa5a74227bcd893bd7e9daaeac8240faf70686a6', 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: 'b9368dc0bc38ae1423eced9b582d6623a1e38df6', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: 'b4bdda1fe20b897af082f9e437afd04b8532ec01', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: '49c816903bfc42bd59de291186db2f5cd239b312', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: '90ea515e369feae5b3c0da23f6bdab7e711e23c9', class: `${customDatepickerClass}__header` }, h("div", { key: 'f8b3c89a37b4a95f2d407fff61e98c9931c507a5', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '640c620120693aaacbbe6e5ce0363279a91deef8', 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", { slot: "native", value: index.toString() }, monthName)))), h(this.DsSelectTag, { key: '0b28bbd3eb40420510b5923012b45e0bbf13180a', 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", { slot: "native", value: year.toString() }, year))))), h("div", { key: '37208635fca239b0cad7479c564f12e8691201d4', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: '7fc174620743bf23a22f2108581351133571f51a', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: 'c1cabd3eeb83cc8f552e465359e07f91e718c738', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: '21a1f12a0e24ea62390abb6b2c11546c6fe08750', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: 'c196c2a7be96068e0ec47ae79452bff321aceac2', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), h("div", { class: classNames(`${customDatepickerClass}__calendar`, {
+        return (h("div", { key: '77350ee4df5e680b21f50de58f4894703e8bdd74' }, h(this.DsControlLabel, { key: '901519cde4668655faddd44153f4853a0eef22b8', 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: 'd6e10af4bd8e8e2c6ca1029fd07cd7681eae2234', name: "label" }), h("slot", { key: '412ca25a543a5d8ad14fa23e0bdf27e45687ead5', name: "assistiveText" })), h("div", { key: 'ee91c7fa7c5dd236ea748dff785e3b3a6c30c60a', class: customDatepickerClass }, h(this.DsTextInputTag, { key: '73201d6e9777c1bacbe317a1815747ad19439ba2', 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 !== null ? 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: 'e28ac7b40a4d56371319a5a92d4efc380af6bae2', 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: '18a1655a2d3b4f4874f4bdde19aa7358027be26f', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: '123fcc3b1845f92e2a02384bddfa43ba78797cec', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: '34721218d75aca559c8e6b1243ebafe0ae61d948', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: '000ac41263a8395f38b8f20620e7e36d545602bf', class: `${customDatepickerClass}__header` }, h("div", { key: '734e949edf5c6aeb4099192ad0e149d1a034386d', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '0bed5ddbafd758a8211b0b38d9a9489bc0c5c301', 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", { slot: "native", value: index.toString() }, monthName)))), h(this.DsSelectTag, { key: 'df222c0fb842a150b13092351fd0eb8663446246', 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", { slot: "native", value: year.toString() }, year))))), h("div", { key: '512c56f683a379097b9d8aa4c8d7ef4cd6531f73', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: 'f4fc6f5dd2a88010b92909d87f024caab03656d4', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: '0174b1aa004106f43f3caf3b3187755453b65d48', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: '9ab1b63f4479ae62f2dfa6b3ab5bff65781e7d51', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: '17d748028457f93c15a6d540744b15d7c43d4935', 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: '9d3a3d46475f6c55a8ff078e41ca261c97a86073', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (h("div", { 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: 'e60eba2d9f35ff5a65f0605c46f976559ea646d3', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (h("div", { 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", { role: "row", class: `${customDatepickerClass}__day-row` }, rowDays.map(({ day, isCurrentMonth, isToday, date }) => {
                 const isDisabled = isDateDisabled(date, this.dateConstraints);
@@ -614,7 +614,7 @@ export class DsDatepickerCustom {
                         [`${customDatepickerClass}__day--disabled`]: isDisabled,
                     }) }, day)));
             })));
-        })), h("div", { key: '2bf24f1c2a157e09e090dac16bc053a47e3b32c8', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: '653f532fedf1dcb4a3dbfd692f028fe68ed16248', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: 'fb8d2b9e1efcd3a82a518ef9cb796d589cf9465d', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: '427f5d4c0ae24e8c35a68d72478e5cfb4e419da6', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), h("div", { key: 'f46765ef24681173df2a4976e65ddc146e6d780e', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: 'cedbf94726d361cf23e6b8420e7b08c0785754d8', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: 'f445f77565f9fed8b59ba594e22ed14345345cf8', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: 'c443a6acb114fe71cf91e6e2672479075be32cf4', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-custom"; }
     static get encapsulation() { return "scoped"; }
@@ -1162,13 +1162,13 @@ export class DsDatepickerCustom {
     static get listeners() {
         return [{
                 "name": "focusin",
-                "method": "onFocusIn",
+                "method": "handleFocusIn",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "focusout",
-                "method": "onFocusOut",
+                "method": "handleFocusOut",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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__GqWYnG__input-container .ds-datepicker-native__GqWYnG__input {
+.ds-datepicker-native__0Yjiso__input-container .ds-datepicker-native__0Yjiso__input {
   flex: 1;
   border: none;
   outline: none;
@@ -26,22 +26,22 @@
   min-width: 0;
   width: 100%;
 }
-.ds-datepicker-native__GqWYnG__input-container .ds-datepicker-native__GqWYnG__input:disabled {
+.ds-datepicker-native__0Yjiso__input-container .ds-datepicker-native__0Yjiso__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-datepicker-native__GqWYnG__input-container .ds-datepicker-native__GqWYnG__input::-webkit-calendar-picker-indicator {
+.ds-datepicker-native__0Yjiso__input-container .ds-datepicker-native__0Yjiso__input::-webkit-calendar-picker-indicator {
   display: none;
 }
-.ds-datepicker-native__GqWYnG__input-container .ds-datepicker-native__GqWYnG__input::-webkit-clear-button {
+.ds-datepicker-native__0Yjiso__input-container .ds-datepicker-native__0Yjiso__input::-webkit-clear-button {
   display: none;
 }
 
-.ds-datepicker-native__GqWYnG__calendar-icon {
+.ds-datepicker-native__0Yjiso__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-native__GqWYnG {
+.ds-datepicker-native__0Yjiso {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -57,58 +57,58 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-datepicker-native__GqWYnG--disabled {
+.ds-datepicker-native__0Yjiso--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__GqWYnG--readonly {
+.ds-datepicker-native__0Yjiso--readonly {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-datepicker-native__GqWYnG--invalid {
+.ds-datepicker-native__0Yjiso--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__GqWYnG--invalid:active {
+.ds-datepicker-native__0Yjiso--invalid:active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__GqWYnG--invalid:hover:not(.ds-datepicker-native__GqWYnG--invalid:focus-within) {
+.ds-datepicker-native__0Yjiso--invalid:hover:not(.ds-datepicker-native__0Yjiso--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__GqWYnG:hover:not(.ds-datepicker-native__GqWYnG--disabled, .ds-datepicker-native__GqWYnG--readonly, .ds-datepicker-native__GqWYnG--invalid, .ds-datepicker-native__GqWYnG:focus-within) {
+.ds-datepicker-native__0Yjiso:hover:not(.ds-datepicker-native__0Yjiso--disabled, .ds-datepicker-native__0Yjiso--readonly, .ds-datepicker-native__0Yjiso--invalid, .ds-datepicker-native__0Yjiso:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-native__GqWYnG:focus-within:not(.ds-datepicker-native__GqWYnG--invalid, .ds-datepicker-native__GqWYnG--disabled, .ds-datepicker-native__GqWYnG--readonly) {
+.ds-datepicker-native__0Yjiso:focus-within:not(.ds-datepicker-native__0Yjiso--invalid, .ds-datepicker-native__0Yjiso--disabled, .ds-datepicker-native__0Yjiso--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-datepicker-native__GqWYnG:focus-visible {
+.ds-datepicker-native__0Yjiso: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__GqWYnG:focus-within {
+.ds-datepicker-native__0Yjiso: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__GqWYnG {
+.ds-datepicker-native__0Yjiso {
   justify-content: space-between;
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-native__GqWYnG__calendar-icon {
+  .ds-datepicker-native__0Yjiso__calendar-icon {
     display: none !important;
   }
 }
-.ds-datepicker-native__GqWYnG__input-container {
+.ds-datepicker-native__0Yjiso__input-container {
   width: 100% !important;
 }
 @supports (-webkit-touch-callout: none) {
-  .ds-datepicker-native__GqWYnG__input-container .ds-datepicker-native__GqWYnG__input {
+  .ds-datepicker-native__0Yjiso__input-container .ds-datepicker-native__0Yjiso__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

@@ -69,10 +69,10 @@ export class DsDatepickerNative {
             });
         });
     }
-    onFocusIn() {
+    handleFocusIn() {
         this.hasFocus = true;
     }
-    onFocusOut(e) {
+    handleFocusOut(e) {
         const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
         const lostFocus = !nextFocused || !this.el.contains(nextFocused);
         if (lostFocus) {
@@ -151,11 +151,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: 'aef242ce7e01b7a9b489a53c174f95b9372e1e28' }, h(DsControlLabel, { key: '5c2b11d5afcfb7fc2acf4dc99d65084824d783c1', 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: '286d51713e9c2bc538933b3a08f934a4fb0d9d77', name: "label" })), h("div", { key: '4e705295d541cb7fe631792b4f2cd93534c0a99f', class: classNames(`${baseClass}`, {
+        return (h("div", { key: '93dc5c91906322f89a6078014fc93d2afd1fa03e' }, h(DsControlLabel, { key: '64434a20a0cd26315a117dd9c7a12b67fda3bc27', 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: 'b3cd0ae09319e564ca7fa34eb64eccdf04b494dd', name: "label" })), h("div", { key: '87a2ec2238718655a498fc6f7ed67f92e635f76c', class: classNames(`${baseClass}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, h("div", { key: 'ddf4f5d4890e542a96728d96569ece3dbd007d7b', class: inputContainerClass }, h("input", { key: '129c71787107705e9380ed866429f48449cca3e9', ref: el => {
+            }) }, h("div", { key: 'd2997c0bad482d1f4750cc1c731164734741c83f', class: inputContainerClass }, h("input", { key: '75bd81b52476f8b9331e1d7edf720d310b13a4cc', ref: el => {
                 this.nativeDateInputRef = el;
                 if (el)
                     el.value = this.value;
@@ -164,7 +164,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: '6d676c5b8e1abac9ec9ef10a667e799e4302ac2e', 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: 'f39c450347c45db54733e31765c37046a03e3163', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), h(this.DsInputValidityTag, { key: 'cf230aa173eda76973d7d40de7c6e4029cf26d0a', 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: 'b5962fb59a3e29a33370b33a044a7ba28b07897e', 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: 'a8bb8c1b6c9e4b3cc88ba19f64979943ae2bea08', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), h(this.DsInputValidityTag, { key: '3770add0a57216681c7e877452b30ac9051c103b', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-native"; }
     static get encapsulation() { return "scoped"; }
@@ -644,13 +644,13 @@ export class DsDatepickerNative {
     static get listeners() {
         return [{
                 "name": "focusin",
-                "method": "onFocusIn",
+                "method": "handleFocusIn",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "focusout",
-                "method": "onFocusOut",
+                "method": "handleFocusOut",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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__GqWYnG {
+.ds-datepicker-simple__0Yjiso {
   all: initial;
   display: revert;
   box-sizing: border-box;

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

@@ -55,10 +55,10 @@ export class DsDatepickerSimple {
         this.inputRef = this.textInputRef?.querySelector('input');
         this.inputRef?.addEventListener('keydown', handleDateInputKeyDown);
     }
-    onFocusIn() {
+    handleFocusIn() {
         this.hasFocus = true;
     }
-    onFocusOut(e) {
+    handleFocusOut(e) {
         const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
         const lostFocus = !nextFocused || !this.el.contains(nextFocused);
         if (lostFocus) {
@@ -216,7 +216,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: '37517ef0948578b47523c615a1610267c0b3eed2' }, h(this.DsControlLabel, { key: 'e540ae04855df68ddeefa95b4bbaf277ecbf3bed', 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: 'e737e924d4977b03647177b5caf701b3109b83ec', name: "label" })), h("div", { key: '198930fe2c56e7b92d36d400ac7d1a59639eb954', class: simpleClass }, h(this.DsTextInputTag, { key: '4f8b10de5074e7c5ca3171e3ce9c4e52a2ec8005', 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 !== null ? 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: '904433cb6469d0024b30cdb2bcbdb2b07164fe68', id: validityId, dsText: this.validityText, dsType: "error" })));
+        return (h("div", { key: '78f1184fc69c01ee42ac33ff5b5f99a62e84fad5' }, h(this.DsControlLabel, { key: 'dbccc40ec2f5d30a9791e82ba9e40bc78b3aa853', 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: '72533d868b8104a14f9db43fc0f2beac6277e2dc', name: "label" })), h("div", { key: '4bc776b9fb15513b863dfb6e05709d7e881c05a1', class: simpleClass }, h(this.DsTextInputTag, { key: '3dd46357359e0fa9ab705ae4c37297a80dcc4f5c', 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 !== null ? 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: '36623fafa377fd9c8596d52fa327b40ecc3e6e88', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-simple"; }
     static get encapsulation() { return "scoped"; }
@@ -711,13 +711,13 @@ export class DsDatepickerSimple {
     static get listeners() {
         return [{
                 "name": "focusin",
-                "method": "onFocusIn",
+                "method": "handleFocusIn",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "focusout",
-                "method": "onFocusOut",
+                "method": "handleFocusOut",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1,9 +1,12 @@
-import { h, Host } from "@stencil/core";
-import { declareComponentDependencies, idGenerator, transformTagName } from "../../../utils/utils";
+import { h, Host, Mixin } from "@stencil/core";
+import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
 import { cx } from "../../../utils/cx";
 import { dateFormatHint } from "../../../utils/datepicker/datepickerUtils";
-const datepickerIdGenerator = idGenerator('ds-datepicker');
-export class DsDatepicker {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsDatepicker extends Mixin(componentFactory('ds-datepicker', { stopRootTracking: true })) {
+    constructor() {
+        super();
+    }
     el;
     dsChange;
     dsSubmitInvalid;
@@ -11,7 +14,7 @@ export class DsDatepicker {
     dsBlur;
     dsFocus;
     dsForm;
-    dsId = datepickerIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsName = this.dsId;
     dsLabel = '';
     dsPlaceholder;
@@ -39,6 +42,9 @@ export class DsDatepicker {
     get isSimple() {
         return this.dsVariant === 'simple';
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     handleChange = (event) => {
         event.stopPropagation();
         this.dsChange.emit(event.detail);
@@ -142,7 +148,7 @@ export class DsDatepicker {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The unique ID for the datepicker component."
@@ -151,7 +157,7 @@ export class DsDatepicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "ds-id",
-                "defaultValue": "datepickerIdGenerator.next().value as string"
+                "defaultValue": "this.getUniqueId()"
             },
             "dsName": {
                 "type": "string",

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

@@ -25,7 +25,7 @@ export class DsFeedback {
     render() {
         const Elem = this.dsSrOnly ? this.DsVisuallyHidden : Fragment;
         const elemProps = this.dsSrOnly ? { dsTag: this.dsSrOnlyTag } : {};
-        return (h(this.dsTag, { key: 'b02fd991b367850d177d30dfa7cf1f0c70f65ce9', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: '9e2433a937a4ca9534fc5df21fd4d73a171cb7be', ...elemProps }, h("slot", { key: '76e333cee98f1dfe2a14059c8ea6d559ee83e468' }))));
+        return (h(this.dsTag, { key: '497f819b1680697bd1bb961ce5437e57fff1a1c0', ...ifDefined('role', this.dsRole), ...ifDefined('aria-live', this.dsAriaLive), ...ifDefined('aria-atomic', this.dsAriaAtomic ? 'true' : undefined) }, h(Elem, { key: 'e250d489a186701d2af3e3c643d6282721e30cfd', ...elemProps }, h("slot", { key: 'abca085a9e20f4861a8cf31cffd72ed3f6a10702' }))));
     }
     static get is() { return "ds-feedback"; }
     static get encapsulation() { return "scoped"; }
@@ -50,7 +50,7 @@ export class DsFeedback {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Specifies the HTML tag to render for the feedback component."

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

@@ -1,18 +1,18 @@
-.ds-grid__GqWYnG.ds-grid__GqWYnG--container {
+.ds-grid__0Yjiso.ds-grid__0Yjiso--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__GqWYnG.ds-grid__GqWYnG--container {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso--container {
     margin: 0 var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 90rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG--container {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso--container {
     margin: 0 auto;
   }
 }
-.ds-grid__GqWYnG.ds-grid__GqWYnG__flex {
+.ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__flex {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__flex {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG__flex {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__flex {
     gap: var(--ds-spacing-layout-small);
   }
 }
-.ds-grid__GqWYnG.ds-grid__GqWYnG__flex:not(.ds-grid__GqWYnG.ds-grid__GqWYnG__flex--container) {
+.ds-grid__0Yjiso.ds-grid__0Yjiso__flex:not(.ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__flex:not(.ds-grid__GqWYnG.ds-grid__GqWYnG__flex--container) {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__flex:not(.ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__flex:not(.ds-grid__GqWYnG.ds-grid__GqWYnG__flex--container) {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__flex:not(.ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__flex:not(.ds-grid__GqWYnG.ds-grid__GqWYnG__flex--container) {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__flex:not(.ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__grid.ds-grid__GqWYnG--container {
+.ds-grid__0Yjiso.ds-grid__0Yjiso__grid.ds-grid__0Yjiso--container {
   display: grid;
   grid-template-columns: repeat(var(--ds-columns-mobile), 1fr);
   gap: var(--ds-spacing-layout-2xSmall);
 }
 @media (min-width: 45rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG__grid.ds-grid__GqWYnG--container {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__grid.ds-grid__0Yjiso--container {
     gap: var(--ds-spacing-layout-xSmall);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG__grid.ds-grid__GqWYnG--container {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__grid.ds-grid__0Yjiso--container {
     gap: var(--ds-spacing-layout-small);
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG__grid.ds-grid__GqWYnG--container {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__grid.ds-grid__0Yjiso--container {
     grid-template-columns: repeat(var(--ds-columns-tablet), 1fr);
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG__grid.ds-grid__GqWYnG--container {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__grid.ds-grid__0Yjiso--container {
     grid-template-columns: repeat(var(--ds-columns-desktop), 1fr);
   }
 }
-.ds-grid__GqWYnG.ds-grid__GqWYnG__grid {
+.ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__grid[style*="--ds-size-mobile: -1"] {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__grid[style*="--ds-size-mobile: -1"] {
     grid-column: 1/-1;
   }
 }
 @media (min-width: 30rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG__grid {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__grid[style*="--ds-size-tablet: -1"] {
+    .ds-grid__0Yjiso.ds-grid__0Yjiso__grid[style*="--ds-size-tablet: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__GqWYnG.ds-grid__GqWYnG__grid:not([style*="--ds-size-tablet: -1"]) {
+    .ds-grid__0Yjiso.ds-grid__0Yjiso__grid:not([style*="--ds-size-tablet: -1"]) {
       grid-column: span var(--ds-size-tablet);
     }
   }
 }
 @media (min-width: 75rem) {
-  .ds-grid__GqWYnG.ds-grid__GqWYnG__grid {
+  .ds-grid__0Yjiso.ds-grid__0Yjiso__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__GqWYnG.ds-grid__GqWYnG__grid[style*="--ds-size-desktop: -1"] {
+    .ds-grid__0Yjiso.ds-grid__0Yjiso__grid[style*="--ds-size-desktop: -1"] {
       grid-column: 1/-1;
     }
-    .ds-grid__GqWYnG.ds-grid__GqWYnG__grid:not([style*="--ds-size-desktop: -1"]) {
+    .ds-grid__0Yjiso.ds-grid__0Yjiso__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

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { cx } from "../../../utils/cx";
 import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
-export class DsGrid extends Mixin(componentFactory('ds-grid')) {
+export class DsGrid extends Mixin(componentFactory('ds-grid', { transparentForRootTracking: true })) {
     constructor() {
         super();
     }
@@ -55,7 +55,7 @@ export class DsGrid extends Mixin(componentFactory('ds-grid')) {
             [`${baseClass}--container`]: this.dsContainer,
             [`${baseClass}__${this.dsType}`]: this.dsType,
         });
-        return (h(Host, { key: 'ce1aa216e24358760a1513bac2e370f6cbf38805', class: classes, style: {
+        return (h(Host, { key: '7adc0df22b107ba3146aa2c75f44da3b3d461032', class: classes, style: {
                 ...(this.dsType === 'flex'
                     ? {
                         '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
@@ -84,7 +84,7 @@ export class DsGrid extends Mixin(componentFactory('ds-grid')) {
                         '--ds-row-span-tablet': this.dsRowSpanTablet ? `${this.dsRowSpanTablet}` : undefined,
                         '--ds-row-span-desktop': this.dsRowSpanDesktop ? `${this.dsRowSpanDesktop}` : undefined,
                     }),
-            } }, h("slot", { key: '0cda7bb1d94e2b6211eee2775872d23d806ccfa9' })));
+            } }, h("slot", { key: '2a03a39994a07f0e22611e0fa59c580022ac339d' })));
     }
     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__GqWYnG__label {
+.ds-group-label__0Yjiso__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__GqWYnG {
+.ds-group-label__0Yjiso {
   display: flex;
   flex-direction: column;
 }
-.ds-group-label__GqWYnG:empty {
+.ds-group-label__0Yjiso:empty {
   display: none;
 }

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

@@ -1,7 +1,11 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import { cx } from "../../../utils/cx";
 import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
-export class DsGroupLabel {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsGroupLabel extends Mixin(componentFactory('ds-group-label')) {
+    constructor() {
+        super();
+    }
     el;
     dsLabel;
     dsAssistiveText;
@@ -9,9 +13,12 @@ export class DsGroupLabel {
     get DsAssistiveText() {
         return transformTagName('ds-assistive-text', 'ds-group-label', this.el);
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
         const baseClass = cx('ds-group-label');
-        return (h("div", { key: 'c69731351638f83fc38d3265a5e828de09c9b95a', class: baseClass }, h("slot", { key: 'd39c8d458f8757cd24ef6ca8207b9780c141fad9', name: "label" }, this.dsLabel && h("div", { key: 'b7b4a5fae34570fe2c8d91972e8debfb846bb9ed', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: '3fb3a244d6bb403302803eee35ad03a26d64ab91', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '621238b6a447bb8b4aa8665bdae120c691e0c177', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
+        return (h("div", { key: '1bfffa0fd3604e6190596fd7b04663f28d54e7d4', class: baseClass }, h("slot", { key: '99f4ed52b13edc604e021fd6ea5aec9935e09212', name: "label" }, this.dsLabel && h("div", { key: 'a75e5fd584a2e5e446d3152819cf07fef2f0d627', class: `${baseClass}__label` }, this.dsLabel)), h("slot", { key: '4594140fd422c65c2ab882c5dc615c9134000521', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'a38d19a19394b73956e998e84b08e79e043e2e57', 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__GqWYnG--container {
+.ds-icon__0Yjiso--container {
   display: flex;
 }
-.ds-icon__GqWYnG--hidden {
+.ds-icon__0Yjiso--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(Fragment, { key: '57571019027d015fe4e9896790774700dbba0c2d' }, h("span", { key: '4f7f93453adb70bf42dfe080a5e72ea58bad1d72', class: classNames(`${baseClass}--container`, {
+        return (h(Fragment, { key: '1b1a0992f993fa4becba7de919f3e0af2a0c4a0c' }, h("span", { key: '2aa51e19fd6d4eafd22a112bbb688228e9965127', class: classNames(`${baseClass}--container`, {
                 [`${baseClass}--hidden`]: this.dsHidden,
-            }), "aria-hidden": iconAriaHidden }, h(IconTag, { key: '804fa63db5d51a79cbbf21ed79a0b6fada4af8ad', 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: '7d503e013eac2c7c73c68dbc3c3bf197b8cce329', 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__GqWYnG {
+.ds-input-validity__0Yjiso {
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-2xSmall);
   gap: var(--ds-spacing-2xSmall);
 }
-.ds-input-validity__GqWYnG--error {
+.ds-input-validity__0Yjiso--error {
   color: var(--ds-textColor-danger);
 }
-.ds-input-validity__GqWYnG--success {
+.ds-input-validity__0Yjiso--success {
   color: var(--ds-textColor-success);
 }
-.ds-input-validity__GqWYnG__icon {
+.ds-input-validity__0Yjiso__icon {
   display: block;
   height: 1.5rem;
 }
-.ds-input-validity__GqWYnG small {
+.ds-input-validity__0Yjiso small {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   font-weight: var(--ds-fontWeight-regular);