@uh-design-system/component-library 1.5.0 → 1.5.1

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

@@ -1,20 +1,20 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DMgbvnde.js');
-var controlUtils = require('./controlUtils-CcUudA6Q.js');
-var cx = require('./cx-Bz5Mpvyi.js');
+var controlUtils = require('./controlUtils-CoQTII1L.js');
+var cx = require('./cx-Cz3_rrTb.js');
 var attributes = require('./attributes-5eBKMo1N.js');
 var constants = require('./constants-DQ8n-aJY.js');
-var multipleValueFactory = require('./multipleValueFactory-Cpbuo1aI.js');
+var multipleValueFactory = require('./multipleValueFactory-roIlyl4_.js');
 var disableEventsFactory = require('./disableEventsFactory-B1wvz4el.js');
-var componentFactory = require('./componentFactory-BmBVCz8f.js');
-require('./store-DNuNXgOq.js');
+var componentFactory = require('./componentFactory-CZKUWyB_.js');
+require('./store-ChbNbns4.js');
 
-const dsComboboxCss = () => `.sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h:not(:has(.ds-combobox__GqWYnG--full-width)){width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__GqWYnG__input-container.sc-ds-combobox{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);cursor:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__GqWYnG__input-container--disabled.sc-ds-combobox{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-combobox__GqWYnG__input-container--disabled.sc-ds-combobox .ds-combobox__GqWYnG__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__GqWYnG__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__GqWYnG__input-container--invalid.sc-ds-combobox:not(.ds-combobox__GqWYnG__input-container--open):not(.ds-combobox__GqWYnG__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__GqWYnG__input-container--invalid.sc-ds-combobox:not(.ds-combobox__GqWYnG__input-container--open):not(.ds-combobox__GqWYnG__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__GqWYnG__input-container.sc-ds-combobox:active:not(.ds-combobox__GqWYnG__input-container--invalid,.ds-combobox__GqWYnG__input-container--disabled.sc-ds-combobox,.ds-combobox__GqWYnG__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__GqWYnG__input-container.sc-ds-combobox:not(.ds-combobox__GqWYnG__input-container--open,.ds-combobox__GqWYnG__input-container.sc-ds-combobox:has(>.ds-combobox__GqWYnG__input-container__clear-button>button:focus),.ds-combobox__GqWYnG__input-container--invalid.sc-ds-combobox,.ds-combobox__GqWYnG__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__GqWYnG__input-container.sc-ds-combobox:has(>.ds-combobox__GqWYnG__input-container__input:focus),.ds-combobox__GqWYnG__input-container.sc-ds-combobox:has(>.ds-combobox__GqWYnG__input-container__clear-button>button:focus){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-combobox__GqWYnG__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-combobox__GqWYnG__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__GqWYnG__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__GqWYnG__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__GqWYnG__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__GqWYnG__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__GqWYnG__input-container__icon.sc-ds-combobox+.ds-combobox__GqWYnG__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__GqWYnG__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__GqWYnG__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__GqWYnG__input-container__clear-button.sc-ds-combobox,.ds-combobox__GqWYnG__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__GqWYnG__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__GqWYnG__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__GqWYnG__input-container__toggle-button__icon.sc-ds-combobox{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:inherit;z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-combobox__GqWYnG__options-container.sc-ds-combobox{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-combobox__GqWYnG__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__GqWYnG__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__GqWYnG__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__GqWYnG__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__GqWYnG__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__GqWYnG__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__GqWYnG__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__GqWYnG__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__GqWYnG__options-container__options__inner__top-scrim--dark.sc-ds-combobox{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:var(--ds-shadow-overflow)}.ds-combobox__GqWYnG__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}`;
+const dsComboboxCss = () => `.sc-ds-combobox-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-combobox-h:not(:has(.ds-combobox__bQiYWO--full-width)){width:20rem}}.sc-ds-combobox-h>div.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__bQiYWO__input-container.sc-ds-combobox{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);cursor:default;box-sizing:border-box;height:2.75rem;width:100%}.ds-combobox__bQiYWO__input-container--disabled.sc-ds-combobox{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight);cursor:not-allowed}.ds-combobox__bQiYWO__input-container--disabled.sc-ds-combobox .ds-combobox__bQiYWO__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__bQiYWO__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__bQiYWO__input-container--invalid.sc-ds-combobox:not(.ds-combobox__bQiYWO__input-container--open):not(.ds-combobox__bQiYWO__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__bQiYWO__input-container--invalid.sc-ds-combobox:not(.ds-combobox__bQiYWO__input-container--open):not(.ds-combobox__bQiYWO__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__bQiYWO__input-container.sc-ds-combobox:active:not(.ds-combobox__bQiYWO__input-container--invalid,.ds-combobox__bQiYWO__input-container--disabled.sc-ds-combobox,.ds-combobox__bQiYWO__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__bQiYWO__input-container.sc-ds-combobox:not(.ds-combobox__bQiYWO__input-container--open,.ds-combobox__bQiYWO__input-container.sc-ds-combobox:has(>.ds-combobox__bQiYWO__input-container__clear-button>button:focus),.ds-combobox__bQiYWO__input-container--invalid.sc-ds-combobox,.ds-combobox__bQiYWO__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__bQiYWO__input-container.sc-ds-combobox:has(>.ds-combobox__bQiYWO__input-container__input:focus),.ds-combobox__bQiYWO__input-container.sc-ds-combobox:has(>.ds-combobox__bQiYWO__input-container__clear-button>button:focus){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-combobox__bQiYWO__input-container__input.sc-ds-combobox{width:100%;height:100%;border:0;background:none;color:var(--ds-textColor-default);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);font-family:var(--ds-fontFamily-body);line-height:var(--ds-lineHeight-large);padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall);text-overflow:ellipsis}.ds-combobox__bQiYWO__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__bQiYWO__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__bQiYWO__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__bQiYWO__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__bQiYWO__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__bQiYWO__input-container__icon.sc-ds-combobox+.ds-combobox__bQiYWO__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__bQiYWO__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__bQiYWO__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__bQiYWO__input-container__clear-button.sc-ds-combobox,.ds-combobox__bQiYWO__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__bQiYWO__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__bQiYWO__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__bQiYWO__input-container__toggle-button__icon.sc-ds-combobox{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);color:inherit;z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.ds-combobox__bQiYWO__options-container.sc-ds-combobox{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);background-color:var(--ds-bgColor-white)}.ds-combobox__bQiYWO__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__bQiYWO__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__bQiYWO__options-container__options__inner.sc-ds-combobox{position:relative;width:100%;max-height:20rem;display:flex;flex-direction:column;box-sizing:border-box;overflow-y:auto;padding:0;margin:0}.ds-combobox__bQiYWO__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__bQiYWO__options-container__options__inner__bottom-scrim.sc-ds-combobox{pointer-events:none;width:100%;height:2.75rem;margin-top:-2.75rem;flex:0 0 auto;position:sticky;z-index:1;display:none}.ds-combobox__bQiYWO__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__bQiYWO__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__bQiYWO__options-container__options__inner__top-scrim.sc-ds-combobox{top:0;background:linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}.ds-combobox__bQiYWO__options-container__options__inner__top-scrim--dark.sc-ds-combobox{height:calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));background:none;margin-top:calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));box-shadow:var(--ds-shadow-overflow)}.ds-combobox__bQiYWO__options-container__options__inner__bottom-scrim.sc-ds-combobox{bottom:0;background:linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%)}`;
 
-const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('ds-combobox'), multipleValueFactory.multipleValueFactory, disableEventsFactory.disableEventsFactory) {
+const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('ds-combobox', { stopRootTracking: true }), multipleValueFactory.multipleValueFactory, disableEventsFactory.disableEventsFactory) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -270,29 +270,29 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
             return;
         this.closeCombobox('select');
     }
-    onDsClick(event) {
+    handleDsClick(event) {
         this.handleOptionClick(event.target);
     }
-    onDsMounted(event) {
+    handleDsMounted(event) {
         const option = event.target;
         option.dsFocusOnActiveChange = false;
         option.dsMouseDownPreventDefault = true;
     }
-    onDsValueChange(event) {
+    handleDsValueChange(event) {
         if (this.selectedOptions.some(opt => opt.dsValue === event.detail.oldValue)) {
             const valueWithoutOld = this.withoutValue(event.detail.oldValue);
             this.value = event.detail.newValue ? [...(valueWithoutOld || []), event.detail.newValue] : valueWithoutOld;
         }
     }
-    onDsLabelChange(event) {
+    handleDsLabelChange(event) {
         if (this.selectedOptions.some(opt => opt.dsValue === event.detail.value)) {
             this.setInputValue(this.inputValue.replace(event.detail.oldLabel, event.detail.newLabel));
         }
     }
-    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) {

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DMgbvnde.js');
-var cx = require('./cx-Bz5Mpvyi.js');
-var controlUtils = require('./controlUtils-CcUudA6Q.js');
-var datepickerUtils = require('./datepickerUtils-DcHiLzRn.js');
-require('./store-DNuNXgOq.js');
+var cx = require('./cx-Cz3_rrTb.js');
+var controlUtils = require('./controlUtils-CoQTII1L.js');
+var datepickerUtils = require('./datepickerUtils-BngHWPFy.js');
+require('./store-ChbNbns4.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__GqWYnG__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__GqWYnG.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__GqWYnG__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__GqWYnG__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__GqWYnG__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__GqWYnG__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__GqWYnG__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__GqWYnG__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__GqWYnG__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__GqWYnG__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__GqWYnG__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__GqWYnG__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__GqWYnG__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__GqWYnG__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__GqWYnG__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__GqWYnG__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__GqWYnG__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__GqWYnG__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__GqWYnG__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__GqWYnG__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__GqWYnG__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__GqWYnG__day--disabled,.ds-datepicker-custom__GqWYnG__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__GqWYnG__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__GqWYnG__day--disabled,.ds-datepicker-custom__GqWYnG__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__GqWYnG__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__GqWYnG__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__GqWYnG__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__GqWYnG__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__GqWYnG__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__GqWYnG__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__GqWYnG__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__GqWYnG__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__GqWYnG__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__GqWYnG__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__GqWYnG__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__GqWYnG__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__GqWYnG__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__bQiYWO__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__bQiYWO.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__bQiYWO__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__bQiYWO__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__bQiYWO__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__bQiYWO__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__bQiYWO__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__bQiYWO__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__bQiYWO__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__bQiYWO__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__bQiYWO__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__bQiYWO__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__bQiYWO__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__bQiYWO__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__bQiYWO__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__bQiYWO__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__bQiYWO__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__bQiYWO__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__bQiYWO__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__bQiYWO__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__bQiYWO__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__bQiYWO__day--disabled,.ds-datepicker-custom__bQiYWO__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__bQiYWO__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__bQiYWO__day--disabled,.ds-datepicker-custom__bQiYWO__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__bQiYWO__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__bQiYWO__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__bQiYWO__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__bQiYWO__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__bQiYWO__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__bQiYWO__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__bQiYWO__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__bQiYWO__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__bQiYWO__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__bQiYWO__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__bQiYWO__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__bQiYWO__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__bQiYWO__footer-button--right.sc-ds-datepicker-custom{margin-left:auto}`;
 
 const ANNOUNCER_RESET_TIMEOUT = 2000;
 const INPUT_DEBOUNCE_TIMEOUT = 500;
@@ -140,10 +140,10 @@ const DsDatepickerCustom = class {
             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) {
@@ -604,11 +604,11 @@ 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: '69cadc9c7d50b820fb3c34a4703e08e0bd5f7c45' }, index.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 }, index.h("slot", { key: '1ff27a22333bedf503dd841c199ebe406162e8a4', name: "label" }), index.h("slot", { key: '28f1cf72a81c381596904d5ef0426641ecd5e1be', name: "assistiveText" })), index.h("div", { key: '8beaa3459ef8b3167029575ac40f275348e940a4', class: customDatepickerClass }, index.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 : 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: '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' }, index.h(this.DsIconTag, { key: 'b9368dc0bc38ae1423eced9b582d6623a1e38df6', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (index.h("div", { key: 'b4bdda1fe20b897af082f9e437afd04b8532ec01', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, index.h(this.DsFeedbackTag, { key: '49c816903bfc42bd59de291186db2f5cd239b312', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), index.h("div", { key: '90ea515e369feae5b3c0da23f6bdab7e711e23c9', class: `${customDatepickerClass}__header` }, index.h("div", { key: 'f8b3c89a37b4a95f2d407fff61e98c9931c507a5', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, index.h(this.DsSelectTag, { key: '640c620120693aaacbbe6e5ce0363279a91deef8', 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: '0b28bbd3eb40420510b5923012b45e0bbf13180a', 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: '37208635fca239b0cad7479c564f12e8691201d4', class: `${customDatepickerClass}__navigation` }, index.h(this.DsButtonTag, { key: '7fc174620743bf23a22f2108581351133571f51a', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, index.h(this.DsIconTag, { key: 'c1cabd3eeb83cc8f552e465359e07f91e718c738', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), index.h(this.DsButtonTag, { key: '21a1f12a0e24ea62390abb6b2c11546c6fe08750', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, index.h(this.DsIconTag, { key: 'c196c2a7be96068e0ec47ae79452bff321aceac2', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), index.h("div", { class: index$1.classNames(`${customDatepickerClass}__calendar`, {
+        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`, {
                 [`${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: '9d3a3d46475f6c55a8ff078e41ca261c97a86073', 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: '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) => {
             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 }) => {
                 const isDisabled = datepickerUtils.isDateDisabled(date, this.dateConstraints);
@@ -628,7 +628,7 @@ const DsDatepickerCustom = class {
                         [`${customDatepickerClass}__day--disabled`]: isDisabled,
                     }) }, day)));
             })));
-        })), index.h("div", { key: '2bf24f1c2a157e09e090dac16bc053a47e3b32c8', class: `${customDatepickerClass}__footer` }, index.h(this.DsButtonTag, { key: '653f532fedf1dcb4a3dbfd692f028fe68ed16248', dsVariant: "supplementary", dsText: datepickerUtils.showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), index.h(this.DsButtonTag, { key: 'fb8d2b9e1efcd3a82a518ef9cb796d589cf9465d', dsVariant: "supplementary", dsText: datepickerUtils.clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && index.h(this.DsInputValidityTag, { key: '427f5d4c0ae24e8c35a68d72478e5cfb4e419da6', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), 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" })));
     }
     static get watchers() { return {
         "hasFocus": [{
@@ -657,7 +657,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__GqWYnG__input-container.sc-ds-datepicker-native .ds-datepicker-native__GqWYnG__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__GqWYnG__input-container.sc-ds-datepicker-native .ds-datepicker-native__GqWYnG__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__GqWYnG__input-container.sc-ds-datepicker-native .ds-datepicker-native__GqWYnG__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__GqWYnG__input-container.sc-ds-datepicker-native .ds-datepicker-native__GqWYnG__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__GqWYnG__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__GqWYnG.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__GqWYnG--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__GqWYnG--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__GqWYnG--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__GqWYnG--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__GqWYnG--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__GqWYnG--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__GqWYnG.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__GqWYnG--disabled,.ds-datepicker-native__GqWYnG--readonly.sc-ds-datepicker-native,.ds-datepicker-native__GqWYnG--invalid.sc-ds-datepicker-native,.ds-datepicker-native__GqWYnG.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__GqWYnG.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__GqWYnG--invalid,.ds-datepicker-native__GqWYnG--disabled.sc-ds-datepicker-native,.ds-datepicker-native__GqWYnG--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__GqWYnG.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__GqWYnG.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__GqWYnG.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__GqWYnG__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__GqWYnG__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__GqWYnG__input-container.sc-ds-datepicker-native .ds-datepicker-native__GqWYnG__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__bQiYWO__input-container.sc-ds-datepicker-native .ds-datepicker-native__bQiYWO__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__bQiYWO__input-container.sc-ds-datepicker-native .ds-datepicker-native__bQiYWO__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__bQiYWO__input-container.sc-ds-datepicker-native .ds-datepicker-native__bQiYWO__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__bQiYWO__input-container.sc-ds-datepicker-native .ds-datepicker-native__bQiYWO__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__bQiYWO__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__bQiYWO.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__bQiYWO--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__bQiYWO--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__bQiYWO--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__bQiYWO--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__bQiYWO--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__bQiYWO--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__bQiYWO.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__bQiYWO--disabled,.ds-datepicker-native__bQiYWO--readonly.sc-ds-datepicker-native,.ds-datepicker-native__bQiYWO--invalid.sc-ds-datepicker-native,.ds-datepicker-native__bQiYWO.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__bQiYWO.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__bQiYWO--invalid,.ds-datepicker-native__bQiYWO--disabled.sc-ds-datepicker-native,.ds-datepicker-native__bQiYWO--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__bQiYWO.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__bQiYWO.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__bQiYWO.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__bQiYWO__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__bQiYWO__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__bQiYWO__input-container.sc-ds-datepicker-native .ds-datepicker-native__bQiYWO__input.sc-ds-datepicker-native{position:absolute;inset:0;line-height:var(--ds-fontSize-36);z-index:1}}`;
 
 const DsDatepickerNative = class {
     constructor(hostRef) {
@@ -732,10 +732,10 @@ const DsDatepickerNative = class {
             });
         });
     }
-    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) {
@@ -814,11 +814,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: 'aef242ce7e01b7a9b489a53c174f95b9372e1e28' }, index.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 }, index.h("slot", { key: '286d51713e9c2bc538933b3a08f934a4fb0d9d77', name: "label" })), index.h("div", { key: '4e705295d541cb7fe631792b4f2cd93534c0a99f', class: index$1.classNames(`${baseClass}`, {
+        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}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, index.h("div", { key: 'ddf4f5d4890e542a96728d96569ece3dbd007d7b', class: inputContainerClass }, index.h("input", { key: '129c71787107705e9380ed866429f48449cca3e9', ref: el => {
+            }) }, index.h("div", { key: 'd2997c0bad482d1f4750cc1c731164734741c83f', class: inputContainerClass }, index.h("input", { key: '75bd81b52476f8b9331e1d7edf720d310b13a4cc', ref: el => {
                 this.nativeDateInputRef = el;
                 if (el)
                     el.value = this.value;
@@ -827,7 +827,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: '6d676c5b8e1abac9ec9ef10a667e799e4302ac2e', 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: 'f39c450347c45db54733e31765c37046a03e3163', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), index.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 && (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" })));
     }
     static get watchers() { return {
         "hasFocus": [{
@@ -844,7 +844,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__GqWYnG.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__bQiYWO.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) {
@@ -906,10 +906,10 @@ const DsDatepickerSimple = class {
         this.inputRef = this.textInputRef?.querySelector('input');
         this.inputRef?.addEventListener('keydown', datepickerUtils.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) {
@@ -1067,7 +1067,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: '37517ef0948578b47523c615a1610267c0b3eed2' }, index.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 }, index.h("slot", { key: 'e737e924d4977b03647177b5caf701b3109b83ec', name: "label" })), index.h("div", { key: '198930fe2c56e7b92d36d400ac7d1a59639eb954', class: simpleClass }, index.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 : 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: '904433cb6469d0024b30cdb2bcbdb2b07164fe68', id: validityId, dsText: this.validityText, dsType: "error" })));
+        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" })));
     }
     static get watchers() { return {
         "hasFocus": [{

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

@@ -1,16 +1,17 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 var utils = require('./utils-DMgbvnde.js');
-var cx = require('./cx-Bz5Mpvyi.js');
-var datepickerUtils = require('./datepickerUtils-DcHiLzRn.js');
-require('./store-DNuNXgOq.js');
+var cx = require('./cx-Cz3_rrTb.js');
+var datepickerUtils = require('./datepickerUtils-BngHWPFy.js');
+var componentFactory = require('./componentFactory-CZKUWyB_.js');
+require('./store-ChbNbns4.js');
 
 const dsDatepickerCss = () => ``;
 
-const datepickerIdGenerator = utils.idGenerator('ds-datepicker');
-const DsDatepicker = class {
+const DsDatepicker = class extends index.Mixin(componentFactory.componentFactory('ds-datepicker', { stopRootTracking: true })) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
         this.dsChange = index.createEvent(this, "dsChange", 7);
         this.dsSubmitInvalid = index.createEvent(this, "dsSubmitInvalid", 7);
@@ -25,7 +26,7 @@ const DsDatepicker = class {
     dsBlur;
     dsFocus;
     dsForm;
-    dsId = datepickerIdGenerator.next().value;
+    dsId = this.getUniqueId();
     dsName = this.dsId;
     dsLabel = '';
     dsPlaceholder;
@@ -53,6 +54,9 @@ const DsDatepicker = class {
     get isSimple() {
         return this.dsVariant === 'simple';
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     handleChange = (event) => {
         event.stopPropagation();
         this.dsChange.emit(event.detail);

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

@@ -1,14 +1,15 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-Bz5Mpvyi.js');
+var cx = require('./cx-Cz3_rrTb.js');
 var utils = require('./utils-DMgbvnde.js');
-var componentFactory = require('./componentFactory-BmBVCz8f.js');
+var componentFactory = require('./componentFactory-CZKUWyB_.js');
+require('./store-ChbNbns4.js');
 
-const dsGridCss = () => `.ds-grid__GqWYnG.ds-grid__GqWYnG--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{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid__GqWYnG.ds-grid__GqWYnG--container{margin:0 auto}}.ds-grid__GqWYnG.ds-grid__GqWYnG__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__GqWYnG.ds-grid__GqWYnG__flex{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__GqWYnG.ds-grid__GqWYnG__flex{gap:var(--ds-spacing-layout-small)}}.ds-grid__GqWYnG.ds-grid__GqWYnG__flex:not(.ds-grid__GqWYnG.ds-grid__GqWYnG__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){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){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){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{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{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__GqWYnG.ds-grid__GqWYnG__grid.ds-grid__GqWYnG--container{gap:var(--ds-spacing-layout-small)}}@media (min-width: 30rem){.ds-grid__GqWYnG.ds-grid__GqWYnG__grid.ds-grid__GqWYnG--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{grid-template-columns:repeat(var(--ds-columns-desktop), 1fr)}}.ds-grid__GqWYnG.ds-grid__GqWYnG__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"]{grid-column:1/-1}}@media (min-width: 30rem){.ds-grid__GqWYnG.ds-grid__GqWYnG__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"]{grid-column:1/-1}.ds-grid__GqWYnG.ds-grid__GqWYnG__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{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"]{grid-column:1/-1}.ds-grid__GqWYnG.ds-grid__GqWYnG__grid:not([style*="--ds-size-desktop: -1"]){grid-column:span var(--ds-size-desktop)}}}`;
+const dsGridCss = () => `.ds-grid__bQiYWO.ds-grid__bQiYWO--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__bQiYWO.ds-grid__bQiYWO--container{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid__bQiYWO.ds-grid__bQiYWO--container{margin:0 auto}}.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__flex{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__bQiYWO.ds-grid__bQiYWO__flex{gap:var(--ds-spacing-layout-small)}}.ds-grid__bQiYWO.ds-grid__bQiYWO__flex:not(.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__flex:not(.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__flex:not(.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__flex:not(.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__grid.ds-grid__bQiYWO--container{display:grid;grid-template-columns:repeat(var(--ds-columns-mobile), 1fr);gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__bQiYWO.ds-grid__bQiYWO__grid.ds-grid__bQiYWO--container{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__bQiYWO.ds-grid__bQiYWO__grid.ds-grid__bQiYWO--container{gap:var(--ds-spacing-layout-small)}}@media (min-width: 30rem){.ds-grid__bQiYWO.ds-grid__bQiYWO__grid.ds-grid__bQiYWO--container{grid-template-columns:repeat(var(--ds-columns-tablet), 1fr)}}@media (min-width: 75rem){.ds-grid__bQiYWO.ds-grid__bQiYWO__grid.ds-grid__bQiYWO--container{grid-template-columns:repeat(var(--ds-columns-desktop), 1fr)}}.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__grid[style*="--ds-size-mobile: -1"]{grid-column:1/-1}}@media (min-width: 30rem){.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__grid[style*="--ds-size-tablet: -1"]{grid-column:1/-1}.ds-grid__bQiYWO.ds-grid__bQiYWO__grid:not([style*="--ds-size-tablet: -1"]){grid-column:span var(--ds-size-tablet)}}}@media (min-width: 75rem){.ds-grid__bQiYWO.ds-grid__bQiYWO__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__bQiYWO.ds-grid__bQiYWO__grid[style*="--ds-size-desktop: -1"]{grid-column:1/-1}.ds-grid__bQiYWO.ds-grid__bQiYWO__grid:not([style*="--ds-size-desktop: -1"]){grid-column:span var(--ds-size-desktop)}}}`;
 
-const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-grid')) {
+const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-grid', { transparentForRootTracking: true })) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -61,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: 'ce1aa216e24358760a1513bac2e370f6cbf38805', class: classes, style: {
+        return (index.h(index.Host, { key: '7adc0df22b107ba3146aa2c75f44da3b3d461032', class: classes, style: {
                 ...(this.dsType === 'flex'
                     ? {
                         '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
@@ -90,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: '0cda7bb1d94e2b6211eee2775872d23d806ccfa9' })));
+            } }, index.h("slot", { key: '2a03a39994a07f0e22611e0fa59c580022ac339d' })));
     }
 };
 utils.declareComponentDependencies([index.h("ds-grid", null)]);

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

@@ -1,13 +1,16 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
-var cx = require('./cx-Bz5Mpvyi.js');
+var index = require('./index-D6M-AWTV.js');
+var cx = require('./cx-Cz3_rrTb.js');
 var utils = require('./utils-DMgbvnde.js');
+var componentFactory = require('./componentFactory-CZKUWyB_.js');
+require('./store-ChbNbns4.js');
 
-const dsGroupLabelCss = () => `.ds-group-label__GqWYnG__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__GqWYnG{display:flex;flex-direction:column}.ds-group-label__GqWYnG:empty{display:none}`;
+const dsGroupLabelCss = () => `.ds-group-label__bQiYWO__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__bQiYWO{display:flex;flex-direction:column}.ds-group-label__bQiYWO:empty{display:none}`;
 
-const DsGroupLabel = class {
+const DsGroupLabel = class extends index.Mixin(componentFactory.componentFactory('ds-group-label')) {
     constructor(hostRef) {
+        super();
         index.registerInstance(this, hostRef);
     }
     get el() { return index.getElement(this); }
@@ -17,9 +20,12 @@ const DsGroupLabel = class {
     get DsAssistiveText() {
         return utils.transformTagName('ds-assistive-text', 'ds-group-label', this.el);
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     render() {
         const baseClass = cx.cx('ds-group-label');
-        return (index.h("div", { key: 'c69731351638f83fc38d3265a5e828de09c9b95a', class: baseClass }, index.h("slot", { key: 'd39c8d458f8757cd24ef6ca8207b9780c141fad9', name: "label" }, this.dsLabel && index.h("div", { key: 'b7b4a5fae34570fe2c8d91972e8debfb846bb9ed', class: `${baseClass}__label` }, this.dsLabel)), index.h("slot", { key: '3fb3a244d6bb403302803eee35ad03a26d64ab91', name: "assistiveText" }, this.dsAssistiveText && index.h(this.DsAssistiveText, { key: '621238b6a447bb8b4aa8665bdae120c691e0c177', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }))));
+        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 }))));
     }
 };
 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-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIcon360 = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconAccountBalanceFill = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconAccountBalance = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconAccountCircleFill = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconAccountCircle = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconAdd = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-archive-fill.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArchiveFill = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArchive = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-back.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowBack = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-downward.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowDownward = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-drop-down-circle-fill.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowDropDownCircleFill = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-drop-down-circle.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowDropDownCircle = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-drop-down.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowDropDown = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-drop-up.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowDropUp = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-forward.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowForward = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-insert.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowInsert = class {
     constructor(hostRef) {

package/dist/cjs/ds-icon-arrow-outward.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BNOD57K-.js');
+var index = require('./index-D6M-AWTV.js');
 
 const DsIconArrowOutward = class {
     constructor(hostRef) {