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

package/dist/cjs/ds-datepicker-custom_3.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-XzwtvLbQ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-DK6WJuOa.js');
-var cx = require('./cx-Ddclbzw3.js');
-var controlUtils = require('./controlUtils-UVPS1EQ_.js');
-var datepickerUtils = require('./datepickerUtils-D7-FQExS.js');
-require('./store-DT9Wk6N2.js');
+var utils = require('./utils-D94MuKO1.js');
+var cx = require('./cx-yVgUu3SD.js');
+var controlUtils = require('./controlUtils-xuxa_eD3.js');
+var datepickerUtils = require('./datepickerUtils-BB9UB1bR.js');
+require('./store-CP1xzuJD.js');
 
-const dsDatepickerCustomCss = () => `.ds-no-style-leak.sc-ds-datepicker-custom *.sc-ds-datepicker-custom{all:unset;box-sizing:border-box;display:block}.sc-ds-datepicker-custom-h{display:inline-block;width:18rem}.sc-ds-datepicker-custom-h>div.sc-ds-datepicker-custom{display:flex;flex-direction:column;position:relative}.ds-datepicker-custom__MsKlb0__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__MsKlb0.sc-ds-datepicker-custom{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-datepicker-custom__MsKlb0__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__MsKlb0__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__MsKlb0__picker.sc-ds-datepicker-custom{position:absolute;top:100%;width:100%;height:22.5rem;display:flex;flex-direction:column;background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);box-shadow:var(--ds-shadow-overlay);z-index:1000;padding:var(--ds-spacing-xSmall) var(--ds-spacing-small)}.ds-datepicker-custom__MsKlb0__header.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-spacing-small);margin-bottom:var(--ds-spacing-xSmall)}.ds-datepicker-custom__MsKlb0__selects.sc-ds-datepicker-custom{--ds-select-borderWidth:0;--ds-select-narrow-width:auto;--ds-select-wide-width:auto;--ds-select-height:var(--ds-spacing-large);--ds-select-dropdown-icon-border-left:none;--ds-select-selected-option-color:var(--ds-textColor-default);--ds-select-selected-option-font-size:var(--ds-fontSize-14);--ds-select-selected-option-font-weight:var(--ds-fontWeight-semibold);--ds-select-selected-option-padding:0;--ds-select-dropdown-icon-padding:0 var(--ds-spacing-4xSmall);--ds-select-selected-text-margin-right:var(--ds-spacing-3xSmall);display:flex;gap:var(--ds-spacing-xSmall);flex:1}.ds-datepicker-custom__MsKlb0__navigation.sc-ds-datepicker-custom{--ds-button-min-height:2rem;--ds-button-min-width:2rem;display:flex;gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__MsKlb0__calendar.sc-ds-datepicker-custom{--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__MsKlb0__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__MsKlb0__calendar--next.sc-ds-datepicker-custom{animation:slide-in-from-right 250ms ease-out}@keyframes slide-in-from-left{from{opacity:0;transform:translateX(-0.75rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-in-from-right{from{opacity:0;transform:translateX(0.75rem)}to{opacity:1;transform:translateX(0)}}.ds-datepicker-custom__MsKlb0__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__MsKlb0__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__MsKlb0__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__MsKlb0__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__MsKlb0__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__MsKlb0__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__MsKlb0__weekday.sc-ds-datepicker-custom{font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-12);color:var(--ds-textColor-secondary)}.ds-datepicker-custom__MsKlb0__day.sc-ds-datepicker-custom{background:none;border:none;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-datepicker-custom__MsKlb0__day.sc-ds-datepicker-custom:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-datepicker-custom__MsKlb0__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__MsKlb0__day--disabled,.ds-datepicker-custom__MsKlb0__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__MsKlb0__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__MsKlb0__day--disabled,.ds-datepicker-custom__MsKlb0__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__MsKlb0__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__MsKlb0__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__MsKlb0__day--today.sc-ds-datepicker-custom{font-weight:var(--ds-fontWeight-bold);text-decoration:underline;text-decoration-thickness:13%;text-underline-offset:12%}.ds-datepicker-custom__MsKlb0__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__MsKlb0__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__MsKlb0__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__MsKlb0__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__MsKlb0__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__MsKlb0__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__MsKlb0__day--disabled.sc-ds-datepicker-custom{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-datepicker-custom__MsKlb0__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__MsKlb0__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__MsKlb0__footer-button--right.sc-ds-datepicker-custom{margin-left:auto}`;
+const dsDatepickerCustomCss = () => `.ds-no-style-leak.sc-ds-datepicker-custom *.sc-ds-datepicker-custom{all:unset;box-sizing:border-box;display:block}.sc-ds-datepicker-custom-h{display:inline-block;width:18rem}.sc-ds-datepicker-custom-h>div.sc-ds-datepicker-custom{display:flex;flex-direction:column;position:relative}.ds-datepicker-custom__izAhxK__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__izAhxK.sc-ds-datepicker-custom{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}.ds-datepicker-custom__izAhxK__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__izAhxK__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__izAhxK__picker.sc-ds-datepicker-custom{position:absolute;top:100%;width:100%;height:22.5rem;display:flex;flex-direction:column;background-color:var(--ds-bgColor-white);border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);box-shadow:var(--ds-shadow-overlay);z-index:1000;padding:var(--ds-spacing-xSmall) var(--ds-spacing-small)}.ds-datepicker-custom__izAhxK__header.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;gap:var(--ds-spacing-small);margin-bottom:var(--ds-spacing-xSmall)}.ds-datepicker-custom__izAhxK__selects.sc-ds-datepicker-custom{--ds-select-borderWidth:0;--ds-select-narrow-width:auto;--ds-select-wide-width:auto;--ds-select-height:var(--ds-spacing-large);--ds-select-dropdown-icon-border-left:none;--ds-select-selected-option-color:var(--ds-textColor-default);--ds-select-selected-option-font-size:var(--ds-fontSize-14);--ds-select-selected-option-font-weight:var(--ds-fontWeight-semibold);--ds-select-selected-option-padding:0;--ds-select-dropdown-icon-padding:0 var(--ds-spacing-4xSmall);--ds-select-selected-text-margin-right:var(--ds-spacing-3xSmall);display:flex;gap:var(--ds-spacing-xSmall);flex:1}.ds-datepicker-custom__izAhxK__navigation.sc-ds-datepicker-custom{--ds-button-min-height:2rem;--ds-button-min-width:2rem;display:flex;gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__izAhxK__calendar.sc-ds-datepicker-custom{--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__izAhxK__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__izAhxK__calendar--next.sc-ds-datepicker-custom{animation:slide-in-from-right 250ms ease-out}@keyframes slide-in-from-left{from{opacity:0;transform:translateX(-0.75rem)}to{opacity:1;transform:translateX(0)}}@keyframes slide-in-from-right{from{opacity:0;transform:translateX(0.75rem)}to{opacity:1;transform:translateX(0)}}.ds-datepicker-custom__izAhxK__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__izAhxK__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__izAhxK__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__izAhxK__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__izAhxK__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__izAhxK__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__izAhxK__weekday.sc-ds-datepicker-custom{font-weight:var(--ds-fontWeight-semibold);font-size:var(--ds-fontSize-12);color:var(--ds-textColor-secondary)}.ds-datepicker-custom__izAhxK__day.sc-ds-datepicker-custom{background:none;border:none;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-datepicker-custom__izAhxK__day.sc-ds-datepicker-custom:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-datepicker-custom__izAhxK__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__izAhxK__day--disabled,.ds-datepicker-custom__izAhxK__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__izAhxK__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__izAhxK__day--disabled,.ds-datepicker-custom__izAhxK__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__izAhxK__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__izAhxK__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__izAhxK__day--today.sc-ds-datepicker-custom{font-weight:var(--ds-fontWeight-bold);text-decoration:underline;text-decoration-thickness:13%;text-underline-offset:12%}.ds-datepicker-custom__izAhxK__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__izAhxK__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__izAhxK__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__izAhxK__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__izAhxK__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__izAhxK__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__izAhxK__day--disabled.sc-ds-datepicker-custom{background-color:var(--ds-bgColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-datepicker-custom__izAhxK__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__izAhxK__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__izAhxK__footer-button--right.sc-ds-datepicker-custom{margin-left:auto}`;
 
 const ANNOUNCER_RESET_TIMEOUT = 2000;
 const INPUT_DEBOUNCE_TIMEOUT = 500;
@@ -91,7 +91,7 @@ const DsDatepickerCustom = class {
         };
     }
     textInputRef;
-    inputRef;
+    inputRef = null;
     get validityText() {
         return this.dsErrorText || this.internalErrorText || '';
     }
@@ -131,7 +131,7 @@ const DsDatepickerCustom = class {
         this.cachedYearOptions = datepickerUtils.generateYearOptions(this.dsYearRangeStart, this.dsYearRangeEnd);
     }
     componentDidLoad() {
-        this.inputRef = this.textInputRef?.querySelector('input');
+        this.inputRef = this.textInputRef?.querySelector('input') || null;
         this.inputRef?.addEventListener('keydown', datepickerUtils.handleDateInputKeyDown);
     }
     componentDidRender() {
@@ -167,12 +167,8 @@ const DsDatepickerCustom = class {
         }
     }
     hasFocusObserver(newValue) {
-        if (newValue) {
-            this.dsFocus.emit();
-        }
-        else {
-            this.dsBlur.emit();
-        }
+        const eventEmitter = newValue ? this.dsFocus : this.dsBlur;
+        eventEmitter.emit();
     }
     dsValueObserver(newValue) {
         this.selectedDate = newValue || '';
@@ -204,12 +200,12 @@ const DsDatepickerCustom = class {
             if (focusableElements.length === 0)
                 return;
             const firstElement = focusableElements[0];
-            const lastElement = focusableElements[focusableElements.length - 1];
-            if (!event.shiftKey && (document.activeElement === lastElement || lastElement.contains(document.activeElement))) {
+            const lastElement = focusableElements.at(-1);
+            if (!event.shiftKey && firstElement && (document.activeElement === lastElement || lastElement?.contains(document.activeElement))) {
                 event.preventDefault();
                 firstElement.focus();
             }
-            else if (event.shiftKey && (document.activeElement === firstElement || firstElement.contains(document.activeElement))) {
+            else if (event.shiftKey && lastElement && (document.activeElement === firstElement || firstElement.contains(document.activeElement))) {
                 event.preventDefault();
                 lastElement.focus();
             }
@@ -230,7 +226,8 @@ const DsDatepickerCustom = class {
             const inputText = this.inputValue.trim();
             if (inputText) {
                 const parsedDateString = datepickerUtils.parseInputDate(inputText);
-                if (parsedDateString && !datepickerUtils.isDateDisabled(datepickerUtils.parseISODate(parsedDateString), this.dateConstraints)) {
+                const parsedDate = parsedDateString ? datepickerUtils.parseISODate(parsedDateString) : null;
+                if (parsedDateString && parsedDate && !datepickerUtils.isDateDisabled(parsedDate, this.dateConstraints)) {
                     this.selectedDate = parsedDateString;
                     this.inputValue = null;
                 }
@@ -281,7 +278,7 @@ const DsDatepickerCustom = class {
         const allDayButtons = this.pickerRef.querySelectorAll('[role="gridcell"] > button');
         const focusedDay = this.focusedDate.getDate();
         for (const button of Array.from(allDayButtons)) {
-            const buttonDay = parseInt(button.textContent?.trim() || '0');
+            const buttonDay = Number.parseInt(button.textContent?.trim() || '0');
             const isOtherMonth = button.className.includes('other-month');
             const isDisabled = button.disabled;
             if (buttonDay === focusedDay && !isOtherMonth && !isDisabled) {
@@ -406,7 +403,7 @@ const DsDatepickerCustom = class {
         this.dsChange.emit(parsedDateString);
     }
     validateInputValue = () => {
-        const inputValue = (this.inputValue !== null ? this.inputValue : datepickerUtils.formatDisplayDate(this.selectedDate)).trim();
+        const inputValue = (this.inputValue ?? datepickerUtils.formatDisplayDate(this.selectedDate)).trim();
         if (!inputValue && this.dsRequired) {
             return { isValid: false, flag: 'valueMissing', message: controlUtils.valueMissing() };
         }
@@ -445,7 +442,7 @@ const DsDatepickerCustom = class {
             clearTimeout(this.debounceTimeout);
         }
         this.debounceTimeout = setTimeout(() => {
-            this.debouncedInputValue = newInputValue !== null ? newInputValue : '';
+            this.debouncedInputValue = newInputValue ?? '';
         }, INPUT_DEBOUNCE_TIMEOUT);
         if (!newInputValue.trim()) {
             if (!this.dsRequired) {
@@ -505,8 +502,8 @@ const DsDatepickerCustom = class {
     };
     handleMonthChange = (event) => {
         event.stopPropagation();
-        const value = parseInt(event.detail, 10);
-        if (!isNaN(value) && value >= 0 && value <= 11) {
+        const value = Number.parseInt(event.detail, 10);
+        if (!Number.isNaN(value) && value >= 0 && value <= 11) {
             const direction = value > this.currentMonth ? 'next' : 'prev';
             this.setMonthWithTransition(value, this.currentYear, direction);
             const firstSelectable = datepickerUtils.findFirstSelectableDateInMonth(this.currentYear, value, this.dateConstraints);
@@ -516,8 +513,8 @@ const DsDatepickerCustom = class {
     };
     handleYearChange = (event) => {
         event.stopPropagation();
-        const value = parseInt(event.detail, 10);
-        if (!isNaN(value)) {
+        const value = Number.parseInt(event.detail, 10);
+        if (!Number.isNaN(value)) {
             const direction = value > this.currentYear ? 'next' : 'prev';
             this.setMonthWithTransition(this.currentMonth, value, direction);
             const firstSelectable = datepickerUtils.findFirstSelectableDateInMonth(value, this.currentMonth, this.dateConstraints);
@@ -553,7 +550,7 @@ const DsDatepickerCustom = class {
             this.togglePicker();
         }
     };
-    getValidityMessage() {
+    getValidityMessage = () => {
         if (!this.inputRef)
             return '';
         if (this.selectedDate) {
@@ -583,7 +580,7 @@ const DsDatepickerCustom = class {
             }
         }
         return '';
-    }
+    };
     handleValidityEvent(emitter) {
         return (e) => {
             e.stopPropagation();
@@ -604,31 +601,30 @@ const DsDatepickerCustom = class {
         const hiddenAssistiveTextId = this.dsHiddenAssistiveText ? `${this.dsId}-hidden-assistive` : undefined;
         const validityId = this.validityText ? `${this.dsId}-validity` : undefined;
         const ariaDescribedbyValue = this.dsAriaDescribedby || undefined;
-        return (index.h("div", { key: '77350ee4df5e680b21f50de58f4894703e8bdd74' }, index.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 }, index.h("slot", { key: 'd6e10af4bd8e8e2c6ca1029fd07cd7681eae2234', name: "label" }), index.h("slot", { key: '412ca25a543a5d8ad14fa23e0bdf27e45687ead5', name: "assistiveText" })), index.h("div", { key: 'ee91c7fa7c5dd236ea748dff785e3b3a6c30c60a', class: customDatepickerClass }, index.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 : datepickerUtils.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) }, index.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' }, index.h(this.DsIconTag, { key: '18a1655a2d3b4f4874f4bdde19aa7358027be26f', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (index.h("div", { key: '123fcc3b1845f92e2a02384bddfa43ba78797cec', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, index.h(this.DsFeedbackTag, { key: '34721218d75aca559c8e6b1243ebafe0ae61d948', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), index.h("div", { key: '000ac41263a8395f38b8f20620e7e36d545602bf', class: `${customDatepickerClass}__header` }, index.h("div", { key: '734e949edf5c6aeb4099192ad0e149d1a034386d', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, index.h(this.DsSelectTag, { key: '0bed5ddbafd758a8211b0b38d9a9489bc0c5c301', dsId: `${this.dsId}-month`, dsValue: this.currentMonth.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: datepickerUtils.monthLabel(), dsAriaLabel: `${datepickerUtils.selectMonth()}, ${months[this.currentMonth]}`, onDsChange: this.handleMonthChange }, months.map((monthName, index$1) => (index.h("option", { slot: "native", value: index$1.toString() }, monthName)))), index.h(this.DsSelectTag, { key: 'df222c0fb842a150b13092351fd0eb8663446246', dsId: `${this.dsId}-year`, dsValue: this.currentYear.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: datepickerUtils.yearLabel(), dsAriaLabel: `${datepickerUtils.selectYear()}, ${this.currentYear}`, onDsChange: this.handleYearChange }, yearOptions.map(year => (index.h("option", { slot: "native", value: year.toString() }, year))))), index.h("div", { key: '512c56f683a379097b9d8aa4c8d7ef4cd6531f73', class: `${customDatepickerClass}__navigation` }, index.h(this.DsButtonTag, { key: 'f4fc6f5dd2a88010b92909d87f024caab03656d4', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, index.h(this.DsIconTag, { key: '0174b1aa004106f43f3caf3b3187755453b65d48', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), index.h(this.DsButtonTag, { key: '9ab1b63f4479ae62f2dfa6b3ab5bff65781e7d51', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, index.h(this.DsIconTag, { key: '17d748028457f93c15a6d540744b15d7c43d4935', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), index.h("div", { class: index$1.classNames(`${customDatepickerClass}__calendar`, {
+        return (index.h("div", { key: '36fcd5c8412002f3bbf5837d8a66b475b6e588ab' }, index.h(this.DsControlLabel, { key: '7e19a728468dbd41ff162a68acf694e964c71565', 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 }, index.h("slot", { key: '28a783c8c02c86d25448b13cee06e9180e29fc5c', name: "label" }), index.h("slot", { key: 'dfb4ab27189fe899b7ac8e13bc442c670db4f3a8', name: "assistiveText" })), index.h("div", { key: '02bb2e1ffe902a6003ceab75932be733a0bc97b0', class: customDatepickerClass }, index.h(this.DsTextInputTag, { key: '9b379fc4ccc2a8aa729e727af3cf6d89cd6bc98d', 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 ?? datepickerUtils.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) }, index.h(this.DsButtonTag, { key: '949b14cf0836f350e6230e8a4ed01aebc85f930f', 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' }, index.h(this.DsIconTag, { key: 'c00a87c3ff158a280326802209694d80ca1c347a', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (index.h("div", { key: '66aa7339fcd083ced79db74ae687c679c2f1d408', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, index.h(this.DsFeedbackTag, { key: 'd7a3b7d5247964dda877ce4176466690e595292b', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), index.h("div", { key: '0df676197d2f3f2d0f7065cb63ff63daab73dc64', class: `${customDatepickerClass}__header` }, index.h("div", { key: 'c03cc6f1318eb9ea4dc2283eab8a3e37a15e1b54', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, index.h(this.DsSelectTag, { key: 'f47ebec65b269d28d238dbe8d0b91507f1513219', dsId: `${this.dsId}-month`, dsValue: this.currentMonth.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: datepickerUtils.monthLabel(), dsAriaLabel: `${datepickerUtils.selectMonth()}, ${months[this.currentMonth]}`, onDsChange: this.handleMonthChange }, months.map((monthName, index$1) => (index.h("option", { key: monthName, slot: "native", value: index$1.toString() }, monthName)))), index.h(this.DsSelectTag, { key: '97e7861bea111869e61e69004f09857c1bfd347e', dsId: `${this.dsId}-year`, dsValue: this.currentYear.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: datepickerUtils.yearLabel(), dsAriaLabel: `${datepickerUtils.selectYear()}, ${this.currentYear}`, onDsChange: this.handleYearChange }, yearOptions.map(year => (index.h("option", { key: year, slot: "native", value: year.toString() }, year))))), index.h("div", { key: 'f66c363cb852aecc4ab391fb9d1731dbbb5e9f7d', class: `${customDatepickerClass}__navigation` }, index.h(this.DsButtonTag, { key: 'b7abfb45d5d25aedfaf1eaa065b962b8bca36227', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, index.h(this.DsIconTag, { key: '1501214afb47f434cc7ef4cd6c355483c3c891b3', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), index.h(this.DsButtonTag, { key: '7ef7fa2cd2258ba2b4e8abed9eee38035950fd4f', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, index.h(this.DsIconTag, { key: '82ea872f6302dead5ab4b267193d91639746f73a', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), index.h("div", { class: index$1.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) }, index.h("div", { key: 'e60eba2d9f35ff5a65f0605c46f976559ea646d3', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (index.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) }, index.h("div", { key: 'd301d732eb26250654241d795efd725f7d6af103', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (index.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 (index.h("div", { role: "row", class: `${customDatepickerClass}__day-row` }, rowDays.map(({ day, isCurrentMonth, isToday, date }) => {
+            return (index.h("div", { key: rowIndex, role: "row", class: `${customDatepickerClass}__day-row` }, rowDays.map(({ day, isCurrentMonth, isToday, date }) => {
                 const isDisabled = datepickerUtils.isDateDisabled(date, this.dateConstraints);
                 const isSelected = datepickerUtils.isDateSelected(date, this.selectedDate);
-                const isFocused = this.focusedDate &&
-                    date.getDate() === this.focusedDate.getDate() &&
-                    date.getMonth() === this.focusedDate.getMonth() &&
-                    date.getFullYear() === this.focusedDate.getFullYear();
+                const isFocused = date.getDate() === this.focusedDate?.getDate() &&
+                    date.getMonth() === this.focusedDate?.getMonth() &&
+                    date.getFullYear() === this.focusedDate?.getFullYear();
                 const genitiveMonths = datepickerUtils.monthNamesGenitive();
                 const fullWeekdays = datepickerUtils.weekdayNames();
                 const dayOfWeekIndex = (date.getDay() + 6) % 7;
                 const ariaLabel = `${date.getDate()} ${genitiveMonths[date.getMonth()]} ${fullWeekdays[dayOfWeekIndex]} ${date.getFullYear()}`;
-                return (index.h("div", { role: "gridcell", "aria-selected": isSelected ? 'true' : 'false' }, index.h("button", { type: "button", disabled: isDisabled, tabIndex: isFocused && isCurrentMonth && !isDisabled ? 0 : -1, "aria-current": isToday ? 'date' : undefined, "aria-label": ariaLabel, onClick: this.createDayClickHandler(date), onKeyDown: this.createDayKeyDownHandler(date), class: index$1.classNames(`${customDatepickerClass}__day`, {
+                return (index.h("div", { key: date.toISOString(), role: "gridcell", "aria-selected": isSelected ? 'true' : 'false' }, index.h("button", { type: "button", disabled: isDisabled, tabIndex: isFocused && isCurrentMonth && !isDisabled ? 0 : -1, "aria-current": isToday ? 'date' : undefined, "aria-label": ariaLabel, onClick: this.createDayClickHandler(date), onKeyDown: this.createDayKeyDownHandler(date), class: index$1.classNames(`${customDatepickerClass}__day`, {
                         [`${customDatepickerClass}__day--other-month`]: !isCurrentMonth,
                         [`${customDatepickerClass}__day--today`]: isToday,
                         [`${customDatepickerClass}__day--selected`]: isSelected,
                         [`${customDatepickerClass}__day--disabled`]: isDisabled,
                     }) }, day)));
             })));
-        })), index.h("div", { key: 'f46765ef24681173df2a4976e65ddc146e6d780e', class: `${customDatepickerClass}__footer` }, index.h(this.DsButtonTag, { key: 'cedbf94726d361cf23e6b8420e7b08c0785754d8', dsVariant: "supplementary", dsText: datepickerUtils.showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), index.h(this.DsButtonTag, { key: 'f445f77565f9fed8b59ba594e22ed14345345cf8', dsVariant: "supplementary", dsText: datepickerUtils.clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && index.h(this.DsInputValidityTag, { key: 'c443a6acb114fe71cf91e6e2672479075be32cf4', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), index.h("div", { key: '8227ce2a0d37d37700b4b7224d9ea5a79da6d080', class: `${customDatepickerClass}__footer` }, index.h(this.DsButtonTag, { key: 'f3fb962009e6cc354dde012157c653d05d2ace22', dsVariant: "supplementary", dsText: datepickerUtils.showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), index.h(this.DsButtonTag, { key: 'aa4dd130edd6fd2942e44f5c1a4a223d87bd5b9e', dsVariant: "supplementary", dsText: datepickerUtils.clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && index.h(this.DsInputValidityTag, { key: 'd7ebeb82e77cbe2245b05a5723499cad72e11a5c', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get watchers() { return {
         "hasFocus": [{
@@ -657,7 +653,7 @@ utils.declareComponentDependencies([
 ]);
 DsDatepickerCustom.style = dsDatepickerCustomCss();
 
-const dsDatepickerNativeCss = () => `.ds-no-style-leak.sc-ds-datepicker-native *.sc-ds-datepicker-native{all:unset;box-sizing:border-box;display:block}.sc-ds-datepicker-native-h{display:inline-block;width:18rem}.sc-ds-datepicker-native-h>div.sc-ds-datepicker-native{display:flex;flex-direction:column;position:relative}.ds-datepicker-native__MsKlb0__input-container.sc-ds-datepicker-native .ds-datepicker-native__MsKlb0__input.sc-ds-datepicker-native{flex:1;border:none;outline:none;background-color:transparent;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);padding:0 var(--ds-spacing-xSmall);min-width:0;width:100%}.ds-datepicker-native__MsKlb0__input-container.sc-ds-datepicker-native .ds-datepicker-native__MsKlb0__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__MsKlb0__input-container.sc-ds-datepicker-native .ds-datepicker-native__MsKlb0__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__MsKlb0__input-container.sc-ds-datepicker-native .ds-datepicker-native__MsKlb0__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__MsKlb0__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__MsKlb0.sc-ds-datepicker-native{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);box-sizing:border-box;height:2.75rem;width:100%}.ds-datepicker-native__MsKlb0--disabled.sc-ds-datepicker-native{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__MsKlb0--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__MsKlb0--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__MsKlb0--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__MsKlb0--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__MsKlb0--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__MsKlb0.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__MsKlb0--disabled,.ds-datepicker-native__MsKlb0--readonly.sc-ds-datepicker-native,.ds-datepicker-native__MsKlb0--invalid.sc-ds-datepicker-native,.ds-datepicker-native__MsKlb0.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__MsKlb0.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__MsKlb0--invalid,.ds-datepicker-native__MsKlb0--disabled.sc-ds-datepicker-native,.ds-datepicker-native__MsKlb0--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__MsKlb0.sc-ds-datepicker-native: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__MsKlb0.sc-ds-datepicker-native: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__MsKlb0.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__MsKlb0__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__MsKlb0__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__MsKlb0__input-container.sc-ds-datepicker-native .ds-datepicker-native__MsKlb0__input.sc-ds-datepicker-native{position:absolute;inset:0;line-height:var(--ds-fontSize-36);z-index:1}}`;
+const dsDatepickerNativeCss = () => `.ds-no-style-leak.sc-ds-datepicker-native *.sc-ds-datepicker-native{all:unset;box-sizing:border-box;display:block}.sc-ds-datepicker-native-h{display:inline-block;width:18rem}.sc-ds-datepicker-native-h>div.sc-ds-datepicker-native{display:flex;flex-direction:column;position:relative}.ds-datepicker-native__izAhxK__input-container.sc-ds-datepicker-native .ds-datepicker-native__izAhxK__input.sc-ds-datepicker-native{flex:1;border:none;outline:none;background-color:transparent;color:inherit;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);padding:0 var(--ds-spacing-xSmall);min-width:0;width:100%}.ds-datepicker-native__izAhxK__input-container.sc-ds-datepicker-native .ds-datepicker-native__izAhxK__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__izAhxK__input-container.sc-ds-datepicker-native .ds-datepicker-native__izAhxK__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__izAhxK__input-container.sc-ds-datepicker-native .ds-datepicker-native__izAhxK__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__izAhxK__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__izAhxK.sc-ds-datepicker-native{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-default);background-color:var(--ds-bgColor-white);color:var(--ds-textColor-secondary);box-sizing:border-box;height:2.75rem;width:100%}.ds-datepicker-native__izAhxK--disabled.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-datepicker-native__izAhxK--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__izAhxK--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__izAhxK--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__izAhxK--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__izAhxK--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__izAhxK.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__izAhxK--disabled,.ds-datepicker-native__izAhxK--readonly.sc-ds-datepicker-native,.ds-datepicker-native__izAhxK--invalid.sc-ds-datepicker-native,.ds-datepicker-native__izAhxK.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__izAhxK.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__izAhxK--invalid,.ds-datepicker-native__izAhxK--disabled.sc-ds-datepicker-native,.ds-datepicker-native__izAhxK--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__izAhxK.sc-ds-datepicker-native:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-datepicker-native__izAhxK.sc-ds-datepicker-native:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-datepicker-native__izAhxK.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__izAhxK__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__izAhxK__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__izAhxK__input-container.sc-ds-datepicker-native .ds-datepicker-native__izAhxK__input.sc-ds-datepicker-native{position:absolute;inset:0;line-height:var(--ds-fontSize-36);z-index:1}}`;
 
 const DsDatepickerNative = class {
     constructor(hostRef) {
@@ -751,12 +747,8 @@ const DsDatepickerNative = class {
         }
     }
     hasFocusObserver(newValue) {
-        if (newValue) {
-            this.dsFocus.emit();
-        }
-        else {
-            this.dsBlur.emit();
-        }
+        const eventEmitter = newValue ? this.dsFocus : this.dsBlur;
+        eventEmitter.emit();
     }
     dsValueObserver(newValue) {
         this.value = newValue || '';
@@ -814,11 +806,11 @@ const DsDatepickerNative = class {
         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 (index.h("div", { key: '93dc5c91906322f89a6078014fc93d2afd1fa03e' }, index.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 }, index.h("slot", { key: 'b3cd0ae09319e564ca7fa34eb64eccdf04b494dd', name: "label" })), index.h("div", { key: '87a2ec2238718655a498fc6f7ed67f92e635f76c', class: index$1.classNames(`${baseClass}`, {
+        return (index.h("div", { key: 'd33638642ebbac4cb45b2abf71d752035a283692' }, index.h(DsControlLabel, { key: 'de88719f244fbde0b4c9414a90caaaa208d6f937', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: '21291470896f76f1b3d6298e01744b106d93ffbb', name: "label" })), index.h("div", { key: '264304186d3c2dfa2839b70db45ce0de4721fd09', class: index$1.classNames(`${baseClass}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, index.h("div", { key: 'd2997c0bad482d1f4750cc1c731164734741c83f', class: inputContainerClass }, index.h("input", { key: '75bd81b52476f8b9331e1d7edf720d310b13a4cc', ref: el => {
+            }) }, index.h("div", { key: '01720ca8960311269d35aa3a82fc645cbb68f92b', class: inputContainerClass }, index.h("input", { key: 'e475c5ee7c26d754f97fade516192ed11ce95b94', ref: el => {
                 this.nativeDateInputRef = el;
                 if (el)
                     el.value = this.value;
@@ -827,7 +819,7 @@ const DsDatepickerNative = class {
                 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 && (index.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: datepickerUtils.openDatePicker(), dsInInput: true }, index.h(this.DsIconTag, { key: 'a8bb8c1b6c9e4b3cc88ba19f64979943ae2bea08', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), index.h(this.DsInputValidityTag, { key: '3770add0a57216681c7e877452b30ac9051c103b', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls })), this.dsShowCalendarIcon && (index.h(this.DsButtonTag, { key: 'a74aeb5f476af943743ab854aa60579fbc10cd8d', class: `${baseClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.openDatePicker, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: datepickerUtils.openDatePicker(), dsInInput: true }, index.h(this.DsIconTag, { key: '0c5c00215180de833e1a22d1f426f6573a241724', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), index.h(this.DsInputValidityTag, { key: '049fe49bef2605255f2e58e92b456e5f82af4a28', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get watchers() { return {
         "hasFocus": [{
@@ -844,7 +836,7 @@ const DsDatepickerNative = class {
 utils.declareComponentDependencies([index.h("ds-icon", { dsName: "" }), index.h("ds-control-label", null), index.h("ds-input-validity", null), index.h("ds-button", null)]);
 DsDatepickerNative.style = dsDatepickerNativeCss();
 
-const dsDatepickerSimpleCss = () => `.ds-no-style-leak.sc-ds-datepicker-simple *.sc-ds-datepicker-simple{all:unset;box-sizing:border-box;display:block}.sc-ds-datepicker-simple-h{display:inline-block;width:18rem}.sc-ds-datepicker-simple-h>div.sc-ds-datepicker-simple{display:flex;flex-direction:column;position:relative}.ds-datepicker-simple__MsKlb0.sc-ds-datepicker-simple{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}`;
+const dsDatepickerSimpleCss = () => `.ds-no-style-leak.sc-ds-datepicker-simple *.sc-ds-datepicker-simple{all:unset;box-sizing:border-box;display:block}.sc-ds-datepicker-simple-h{display:inline-block;width:18rem}.sc-ds-datepicker-simple-h>div.sc-ds-datepicker-simple{display:flex;flex-direction:column;position:relative}.ds-datepicker-simple__izAhxK.sc-ds-datepicker-simple{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);position:relative}`;
 
 const DsDatepickerSimple = class {
     constructor(hostRef) {
@@ -903,7 +895,7 @@ const DsDatepickerSimple = class {
         this.selectedDate = this.dsValue || '';
     }
     componentDidLoad() {
-        this.inputRef = this.textInputRef?.querySelector('input');
+        this.inputRef = this.textInputRef?.querySelector('input') ?? undefined;
         this.inputRef?.addEventListener('keydown', datepickerUtils.handleDateInputKeyDown);
     }
     handleFocusIn() {
@@ -925,11 +917,9 @@ const DsDatepickerSimple = class {
                         this.dsChange.emit(parsedDateString);
                     }
                 }
-                else {
-                    if (this.selectedDate) {
-                        this.selectedDate = '';
-                        this.dsChange.emit('');
-                    }
+                else if (this.selectedDate) {
+                    this.selectedDate = '';
+                    this.dsChange.emit('');
                 }
                 this.inputValue = null;
             }
@@ -941,12 +931,8 @@ const DsDatepickerSimple = class {
         }
     }
     hasFocusObserver(newValue) {
-        if (newValue) {
-            this.dsFocus.emit();
-        }
-        else {
-            this.dsBlur.emit();
-        }
+        const eventEmitter = newValue ? this.dsFocus : this.dsBlur;
+        eventEmitter.emit();
     }
     dsValueObserver(newValue) {
         this.selectedDate = newValue || '';
@@ -1067,7 +1053,7 @@ const DsDatepickerSimple = class {
         const hiddenAssistiveTextId = this.dsHiddenAssistiveText ? `${this.dsId}-hidden-assistive` : undefined;
         const validityId = this.validityText ? `${this.dsId}-validity` : undefined;
         const ariaDescribedbyValue = this.dsAriaDescribedby || undefined;
-        return (index.h("div", { key: '78f1184fc69c01ee42ac33ff5b5f99a62e84fad5' }, index.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 }, index.h("slot", { key: '72533d868b8104a14f9db43fc0f2beac6277e2dc', name: "label" })), index.h("div", { key: '4bc776b9fb15513b863dfb6e05709d7e881c05a1', class: simpleClass }, index.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 : datepickerUtils.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 && index.h(this.DsInputValidityTag, { key: '36623fafa377fd9c8596d52fa327b40ecc3e6e88', id: validityId, dsText: this.validityText, dsType: "error" })));
+        return (index.h("div", { key: '2d8789b5b5d7fe5c92f4c2ebdd3598269e9f3acc' }, index.h(this.DsControlLabel, { key: '4e9b9db6fa8700b0cf4d8ed0ccccc64f6346191c', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: '96b1af36aad9ddb277382b1e46830b3ff4033f8f', name: "label" })), index.h("div", { key: '905765654158cbc48807b570c5b941f99138c430', class: simpleClass }, index.h(this.DsTextInputTag, { key: '010688f3e00a368023cdc4ca4211bb5bebd31aa7', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? datepickerUtils.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 && index.h(this.DsInputValidityTag, { key: 'd29dbb2744d7228f68550da44ba79e136c116513', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get watchers() { return {
         "hasFocus": [{

package/dist/cjs/ds-datepicker.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
-var utils = require('./utils-DK6WJuOa.js');
-var cx = require('./cx-Ddclbzw3.js');
-var datepickerUtils = require('./datepickerUtils-D7-FQExS.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
-require('./store-DT9Wk6N2.js');
+var index = require('./index-XzwtvLbQ.js');
+var utils = require('./utils-D94MuKO1.js');
+var cx = require('./cx-yVgUu3SD.js');
+var datepickerUtils = require('./datepickerUtils-BB9UB1bR.js');
+var componentFactory = require('./componentFactory-CrlYxvlC.js');
+require('./store-CP1xzuJD.js');
 
 const dsDatepickerCss = () => ``;
 

package/dist/cjs/ds-divider.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-XzwtvLbQ.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var cx = require('./cx-yVgUu3SD.js');
+
+const dsDividerCss = () => `.ds-no-style-leak.sc-ds-divider *.sc-ds-divider{all:unset;box-sizing:border-box;display:block}.ds-divider__izAhxK.sc-ds-divider{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);border:none;display:block}.ds-divider__izAhxK--horizontal.sc-ds-divider{border-top:var(--ds-borderWidth-hairline) solid;margin:var(--ds-divider-spacing-before, var(--ds-spacing-2xSmall)) 0 var(--ds-divider-spacing-after, var(--ds-spacing-2xSmall));width:100%}.ds-divider__izAhxK--vertical.sc-ds-divider{display:inline-flex;flex-direction:column;align-self:stretch;height:100%;border-left:var(--ds-borderWidth-hairline) solid;margin:0 var(--ds-divider-spacing-after, var(--ds-spacing-2xSmall)) 0 var(--ds-divider-spacing-before, var(--ds-spacing-2xSmall));flex:1;width:0}.ds-divider__izAhxK--decorative.sc-ds-divider{border-color:var(--ds-borderColor-light)}.ds-divider__izAhxK--accessible.sc-ds-divider{border-color:var(--ds-borderColor-default)}`;
+
+const DsDivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    dsVariant = 'decorative';
+    dsOrientation = 'horizontal';
+    dsPadding = '2xSmall';
+    dsCustomPaddingBefore;
+    dsCustomPaddingAfter;
+    toSpacingValue(size) {
+        return size === 'none' ? '0' : `var(--ds-spacing-${size})`;
+    }
+    render() {
+        const baseClass = cx.cx('ds-divider');
+        const hostStyle = {
+            '--ds-divider-spacing-before': this.dsCustomPaddingBefore ?? this.toSpacingValue(this.dsPadding),
+            '--ds-divider-spacing-after': this.dsCustomPaddingAfter ?? this.toSpacingValue(this.dsPadding),
+        };
+        return (index.h(index.Host, { key: 'bbdd3113e65cb634f6723e72cde9cc4e8b9c240a', style: hostStyle }, index.h("hr", { key: 'e1fa912f0e35d0da479087e160628ee79b25da41', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
+    }
+};
+DsDivider.style = dsDividerCss();
+
+exports.ds_divider = DsDivider;

package/dist/cjs/ds-grid.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-XzwtvLbQ.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Ddclbzw3.js');
-var utils = require('./utils-DK6WJuOa.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
-require('./store-DT9Wk6N2.js');
+var cx = require('./cx-yVgUu3SD.js');
+var utils = require('./utils-D94MuKO1.js');
+var componentFactory = require('./componentFactory-CrlYxvlC.js');
+require('./store-CP1xzuJD.js');
 
-const dsGridCss = () => `.ds-grid__MsKlb0.ds-grid__MsKlb0--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__MsKlb0.ds-grid__MsKlb0--container{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid__MsKlb0.ds-grid__MsKlb0--container{margin:0 auto}}.ds-grid__MsKlb0.ds-grid__MsKlb0__flex{display:flex;flex-flow:wrap;min-width:0;box-sizing:border-box;gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__flex{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__flex{gap:var(--ds-spacing-layout-small)}}.ds-grid__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__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__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__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__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__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__MsKlb0.ds-grid__MsKlb0__flex:not(.ds-grid__MsKlb0.ds-grid__MsKlb0__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__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container{display:grid;grid-template-columns:repeat(var(--ds-columns-mobile), 1fr);gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container{gap:var(--ds-spacing-layout-small)}}@media (min-width: 30rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container{grid-template-columns:repeat(var(--ds-columns-tablet), 1fr)}}@media (min-width: 75rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__grid.ds-grid__MsKlb0--container{grid-template-columns:repeat(var(--ds-columns-desktop), 1fr)}}.ds-grid__MsKlb0.ds-grid__MsKlb0__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__MsKlb0.ds-grid__MsKlb0__grid[style*="--ds-size-mobile: -1"]{grid-column:1/-1}}@media (min-width: 30rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__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__MsKlb0.ds-grid__MsKlb0__grid[style*="--ds-size-tablet: -1"]{grid-column:1/-1}.ds-grid__MsKlb0.ds-grid__MsKlb0__grid:not([style*="--ds-size-tablet: -1"]){grid-column:span var(--ds-size-tablet)}}}@media (min-width: 75rem){.ds-grid__MsKlb0.ds-grid__MsKlb0__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__MsKlb0.ds-grid__MsKlb0__grid[style*="--ds-size-desktop: -1"]{grid-column:1/-1}.ds-grid__MsKlb0.ds-grid__MsKlb0__grid:not([style*="--ds-size-desktop: -1"]){grid-column:span var(--ds-size-desktop)}}}`;
+const dsGridCss = () => `.ds-grid__izAhxK.ds-grid__izAhxK--container{max-width:calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));margin:0 var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__izAhxK.ds-grid__izAhxK--container{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid__izAhxK.ds-grid__izAhxK--container{margin:0 auto}}.ds-grid__izAhxK.ds-grid__izAhxK__flex{display:flex;flex-flow:wrap;min-width:0;box-sizing:border-box;gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__izAhxK.ds-grid__izAhxK__flex{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__izAhxK.ds-grid__izAhxK__flex{gap:var(--ds-spacing-layout-small)}}.ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container){width:calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile))}@media (min-width: 30rem){.ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 45rem){.ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 75rem){.ds-grid__izAhxK.ds-grid__izAhxK__flex:not(.ds-grid__izAhxK.ds-grid__izAhxK__flex--container){width:calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop))}}.ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container{display:grid;grid-template-columns:repeat(var(--ds-columns-mobile), 1fr);gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container{gap:var(--ds-spacing-layout-small)}}@media (min-width: 30rem){.ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container{grid-template-columns:repeat(var(--ds-columns-tablet), 1fr)}}@media (min-width: 75rem){.ds-grid__izAhxK.ds-grid__izAhxK__grid.ds-grid__izAhxK--container{grid-template-columns:repeat(var(--ds-columns-desktop), 1fr)}}.ds-grid__izAhxK.ds-grid__izAhxK__grid{grid-column:span var(--ds-size-mobile);grid-row:span var(--ds-row-span-mobile, 1)}@supports (grid-column: span var(--ds-size-mobile)){.ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-mobile: -1"]{grid-column:1/-1}}@media (min-width: 30rem){.ds-grid__izAhxK.ds-grid__izAhxK__grid{grid-column:span var(--ds-size-tablet);grid-row:span var(--ds-row-span-tablet, 1)}@supports (grid-column: span var(--ds-size-tablet)){.ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-tablet: -1"]{grid-column:1/-1}.ds-grid__izAhxK.ds-grid__izAhxK__grid:not([style*="--ds-size-tablet: -1"]){grid-column:span var(--ds-size-tablet)}}}@media (min-width: 75rem){.ds-grid__izAhxK.ds-grid__izAhxK__grid{grid-column:span var(--ds-size-desktop);grid-row:span var(--ds-row-span-desktop, 1)}@supports (grid-column: span var(--ds-size-desktop)){.ds-grid__izAhxK.ds-grid__izAhxK__grid[style*="--ds-size-desktop: -1"]{grid-column:1/-1}.ds-grid__izAhxK.ds-grid__izAhxK__grid:not([style*="--ds-size-desktop: -1"]){grid-column:span var(--ds-size-desktop)}}}`;
 
 const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-grid', { transparentForRootTracking: true })) {
     constructor(hostRef) {
@@ -62,7 +62,7 @@ const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-g
             [`${baseClass}--container`]: this.dsContainer,
             [`${baseClass}__${this.dsType}`]: this.dsType,
         });
-        return (index.h(index.Host, { key: '7adc0df22b107ba3146aa2c75f44da3b3d461032', class: classes, style: {
+        return (index.h(index.Host, { key: 'd57b350c30ff2b0326a7498219823c27932dd0a6', class: classes, style: {
                 ...(this.dsType === 'flex'
                     ? {
                         '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
@@ -91,7 +91,7 @@ const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-g
                         '--ds-row-span-tablet': this.dsRowSpanTablet ? `${this.dsRowSpanTablet}` : undefined,
                         '--ds-row-span-desktop': this.dsRowSpanDesktop ? `${this.dsRowSpanDesktop}` : undefined,
                     }),
-            } }, index.h("slot", { key: '2a03a39994a07f0e22611e0fa59c580022ac339d' })));
+            } }, index.h("slot", { key: '05e2fce65904e04e52f6a0588ddff823b78b34a5' })));
     }
 };
 utils.declareComponentDependencies([index.h("ds-grid", null)]);

package/dist/cjs/ds-group-label.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
-var cx = require('./cx-Ddclbzw3.js');
-var utils = require('./utils-DK6WJuOa.js');
-var componentFactory = require('./componentFactory-BNqkQcfi.js');
-require('./store-DT9Wk6N2.js');
+var index = require('./index-XzwtvLbQ.js');
+var cx = require('./cx-yVgUu3SD.js');
+var utils = require('./utils-D94MuKO1.js');
+var componentFactory = require('./componentFactory-CrlYxvlC.js');
+require('./store-CP1xzuJD.js');
 
-const dsGroupLabelCss = () => `.ds-group-label__MsKlb0__label{padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-group-label__MsKlb0{display:flex;flex-direction:column}.ds-group-label__MsKlb0:empty{display:none}`;
+const dsGroupLabelCss = () => `.ds-group-label__izAhxK__label{padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large);color:var(--ds-textColor-default)}.ds-group-label__izAhxK{display:flex;flex-direction:column}.ds-group-label__izAhxK:empty{display:none}`;
 
 const DsGroupLabel = class extends index.Mixin(componentFactory.componentFactory('ds-group-label')) {
     constructor(hostRef) {
@@ -25,7 +25,7 @@ const DsGroupLabel = class extends index.Mixin(componentFactory.componentFactory
     }
     render() {
         const baseClass = cx.cx('ds-group-label');
-        return (index.h("div", { key: '1bfffa0fd3604e6190596fd7b04663f28d54e7d4', class: baseClass }, index.h("slot", { key: '99f4ed52b13edc604e021fd6ea5aec9935e09212', name: "label" }, this.dsLabel && index.h("div", { key: 'a75e5fd584a2e5e446d3152819cf07fef2f0d627', class: `${baseClass}__label` }, this.dsLabel)), index.h("slot", { key: '4594140fd422c65c2ab882c5dc615c9134000521', name: "assistiveText" }, this.dsAssistiveText && index.h(this.DsAssistiveText, { key: 'a38d19a19394b73956e998e84b08e79e043e2e57', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
+        return (index.h("div", { key: '464d44f204db2ad4856afdbd42c88fb37946c821', class: baseClass }, index.h("slot", { key: '84b0c2aed1cb714ec1c9b18a20aab875c8a53b26', name: "label" }, this.dsLabel && index.h("div", { key: '657a67c761189e370209ad4e91b59e85b88588c3', class: `${baseClass}__label` }, this.dsLabel)), index.h("slot", { key: '5c2c0a22ce3590701544d6f125f95d431b2c644f', name: "assistiveText" }, this.dsAssistiveText && index.h(this.DsAssistiveText, { key: 'eed3766a7fa01b160330e44ea8c83938c9f9e7f7', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
     }
 };
 utils.declareComponentDependencies([index.h("ds-assistive-text", null)]);

package/dist/cjs/ds-icon-360.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-XzwtvLbQ.js');
 
 const DsIcon360 = class {
     constructor(hostRef) {
@@ -12,7 +12,7 @@ const DsIcon360 = class {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (index.h(index.Host, { key: 'ada05b6285e6340ca57e1318ae16507d92678242', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '37f652f58b2fdc1da94708b5cddb7a9889775436', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: 'cfa5a939cb17d624b73e8fc318c9427b56b1b7e3', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
+        return (index.h(index.Host, { key: '092dcfefd09da1cc1c1f0d764323849376e36a9a', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '10a5c5e0ef5ccc6a9733d74e74992ff16061ef52', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: 'ae153daf51e46a5fd332866b65e262eac5d3f212', d: "m353-148-50-51 70-70q-150-17-234-72T55-486q0-100 123-158t302-58q179 0 302.5 57.5T906-486q0 75-71 127.5T646-287v-98q80-16 122.5-46t42.5-55q0-34-77.5-77.5T480-607q-175 0-253 43.5T149-486q0 45 48.5 73T388-358l-85-83 50-52 173 172-173 173Z" }))));
     }
 };
 

package/dist/cjs/ds-icon-account-balance-fill.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-XzwtvLbQ.js');
 
 const DsIconAccountBalanceFill = class {
     constructor(hostRef) {
@@ -12,7 +12,7 @@ const DsIconAccountBalanceFill = class {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (index.h(index.Host, { key: '36add0d23cd2620658b1d7f197a7dd3492d25bee', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '7f283dc7b0ec714cc2df1d95d546b997fdaea901', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: '436e574337ded8372e5beaf749e3ae616bef4a21', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
+        return (index.h(index.Host, { key: 'cf76d007cffea403c4232fc2f2709a386d3202bc', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '1abd38cf81777343344f4a1e48117d38cbe988fa', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: '3af577b980e0e02f29a4651f9a1d5cc3d1b86e7c', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Z" }))));
     }
 };
 

package/dist/cjs/ds-icon-account-balance.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-XzwtvLbQ.js');
 
 const DsIconAccountBalance = class {
     constructor(hostRef) {
@@ -12,7 +12,7 @@ const DsIconAccountBalance = class {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (index.h(index.Host, { key: '0dc8a793c6dc41cc758fa12756c9c614a4eaf3f1', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '1854313d53c063e0bc63fe9c42df8a45b8f5dff3', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: '8788deb072025a8fe036fe5b675582bfa887ff8c', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
+        return (index.h(index.Host, { key: '53806cc7df70e26b7720b1eaaab63ae73126774a', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '1d4dd47e3ea7e9e2d2ad3a2e7f5189f65a5278fc', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: '7f45a44b31b27deed129e754b2fab24d60d28beb', d: "M189-233v-339h83v339h-83Zm254 0v-339h82v339h-82ZM55-102v-94h851v94H55Zm633-131v-339h83v339h-83ZM55-609v-95l425-240 426 240v95H55Zm198-95h454-454Zm0 0h454L480-836 253-704Z" }))));
     }
 };
 

package/dist/cjs/ds-icon-account-circle-fill.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CPg45o9h.js');
+var index = require('./index-XzwtvLbQ.js');
 
 const DsIconAccountCircleFill = class {
     constructor(hostRef) {
@@ -12,7 +12,7 @@ const DsIconAccountCircleFill = class {
     dsColour;
     dsAriaLabel = 'Icon';
     render() {
-        return (index.h(index.Host, { key: 'f14fc21e5ef8c904c5122572fe0491d7c89ff383', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '6bf2ff4c74e1abdea8725eced32a44df571044de', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: 'ec0d168e8ff2a4d350d865d1ce71ff3d4392ea3d', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
+        return (index.h(index.Host, { key: '134eb5f8dd212b19ae36d31065fcd99b5bfd02c7', style: { display: 'flex' }, title: this.dsTitle }, index.h("svg", { key: '3aa375632af74e36cc355ac8f83174a9c02beb91', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", width: this.dsSize, height: this.dsSize, fill: this.dsColour, role: this.dsRole, "aria-label": this.dsAriaLabel }, index.h("path", { key: '7dfbc7fb5f3b524275b336a28621b97654b40cfd', d: "M226-266q62-39 122.5-58T480-343q71 0 133 20t122 57q42-55 59-105.46 17-50.45 17-108.54 0-140.25-95.33-235.62Q620.35-811 480.17-811 340-811 244.5-715.62 149-620.25 149-480q0 58 17.03 108.22Q183.05-321.57 226-266Zm253.81-177q-60.97 0-101.89-41.19Q337-525.37 337-585.69q0-60.31 41.11-101.81 41.1-41.5 102.08-41.5 60.97 0 101.89 41.69 40.92 41.68 40.92 102Q623-525 581.89-484q-41.1 41-102.08 41Zm-.21 388q-87.15 0-164.9-33.28-77.75-33.29-135.82-91.56-58.07-58.27-90.98-135.44Q55-392.46 55-480.39t33.5-165.27Q122-723 180-780.5T315.25-872q77.24-34 165.25-34t165.25 34Q723-838 780.5-780.5T872-645.59q34 77.4 34 165.32 0 87.93-34 165.1Q838-238 780.5-180 723-122 645.46-88.5 567.93-55 479.6-55Z" }))));
     }
 };