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

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
 var utils = require('./utils-DWrHry7C.js');
-var controlUtils = require('./controlUtils-CuHQwicz.js');
-var cx = require('./cx-B24n8vFf.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-var store = require('./store-BDEqiIFl.js');
+var controlUtils = require('./controlUtils-C1d8TGh2.js');
+var cx = require('./cx-D4_fhK_D.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+var store = require('./store-BDkw2fdF.js');
 
-const dsCheckboxGroupCss = () => `.ds-checkbox-group__pA2cRq.sc-ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__pA2cRq__legend.sc-ds-checkbox-group{color:var(--ds-textColor-default);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)}.ds-checkbox-group__pA2cRq__assistive-text.sc-ds-checkbox-group{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__pA2cRq__checkbox-container.sc-ds-checkbox-group{display:flex;gap:var(--ds-spacing-4xSmall)}.ds-checkbox-group__pA2cRq__checkbox-container__expand-button.sc-ds-checkbox-group{order:-1}.ds-checkbox-group__pA2cRq__error.sc-ds-checkbox-group{display:flex}.ds-checkbox-group__pA2cRq__error--visible.sc-ds-checkbox-group{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__pA2cRq.sc-ds-checkbox-group>.ds-checkbox-group__pA2cRq__checkboxes.sc-ds-checkbox-group{display:inline-flex;flex-direction:column}.ds-checkbox-group__pA2cRq--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall))}.ds-checkbox-group__pA2cRq--inset[hidden].sc-ds-checkbox-group{display:none}.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq__inset-reveal.sc-ds-checkbox-group{--ds-tree-overhang-base:calc(var(--ds-spacing-medium) + var(--ds-spacing-4xSmall));--ds-tree-focus-bleed:var(--ds-spacing-3xSmall);--ds-tree-overhang-left:calc(var(--ds-tree-overhang-base) + var(--ds-tree-focus-bleed));margin-left:calc(-1 * var(--ds-tree-overhang-left));padding-left:var(--ds-tree-overhang-left);overflow:hidden;max-height:0;opacity:0;transition-property:max-height, opacity;transition-timing-function:ease-in, ease-in;transition-duration:var(--tree-transition-out-duration, 100ms), var(--tree-transition-out-duration, 100ms);will-change:max-height, opacity}.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=opening].sc-ds-checkbox-group,.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=open].sc-ds-checkbox-group{opacity:1;transition-timing-function:ease-out, ease-out;transition-duration:var(--tree-transition-in-duration, 140ms), var(--tree-transition-in-duration, 140ms)}.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=closing].sc-ds-checkbox-group,.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=closed].sc-ds-checkbox-group{opacity:0}@media (prefers-reduced-motion: reduce){.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq__inset-reveal.sc-ds-checkbox-group{transition:none}}.ds-checkbox-group__pA2cRq--tree.sc-ds-checkbox-group .ds-checkbox-group__pA2cRq--has-parent.sc-ds-checkbox-group{margin-left:calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)))}.ds-checkbox-group__pA2cRq--horizontal.sc-ds-checkbox-group>.ds-checkbox-group__pA2cRq__checkboxes.sc-ds-checkbox-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}`;
+const dsCheckboxGroupCss = () => `.ds-checkbox-group__0apwgA.sc-ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__0apwgA__legend.sc-ds-checkbox-group{color:var(--ds-textColor-default);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)}.ds-checkbox-group__0apwgA__assistive-text.sc-ds-checkbox-group{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__0apwgA__checkbox-container.sc-ds-checkbox-group{display:flex;gap:var(--ds-spacing-4xSmall)}.ds-checkbox-group__0apwgA__checkbox-container__expand-button.sc-ds-checkbox-group{order:-1}.ds-checkbox-group__0apwgA__error.sc-ds-checkbox-group{display:flex}.ds-checkbox-group__0apwgA__error--visible.sc-ds-checkbox-group{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__0apwgA.sc-ds-checkbox-group>.ds-checkbox-group__0apwgA__checkboxes.sc-ds-checkbox-group{display:inline-flex;flex-direction:column}.ds-checkbox-group__0apwgA--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall))}.ds-checkbox-group__0apwgA--inset[hidden].sc-ds-checkbox-group{display:none}.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA__inset-reveal.sc-ds-checkbox-group{--ds-tree-overhang-base:calc(var(--ds-spacing-medium) + var(--ds-spacing-4xSmall));--ds-tree-focus-bleed:var(--ds-spacing-3xSmall);--ds-tree-overhang-left:calc(var(--ds-tree-overhang-base) + var(--ds-tree-focus-bleed));margin-left:calc(-1 * var(--ds-tree-overhang-left));padding-left:var(--ds-tree-overhang-left);overflow:hidden;max-height:0;opacity:0;transition-property:max-height, opacity;transition-timing-function:ease-in, ease-in;transition-duration:var(--tree-transition-out-duration, 100ms), var(--tree-transition-out-duration, 100ms);will-change:max-height, opacity}.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA__inset-reveal[data-phase=opening].sc-ds-checkbox-group,.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA__inset-reveal[data-phase=open].sc-ds-checkbox-group{opacity:1;transition-timing-function:ease-out, ease-out;transition-duration:var(--tree-transition-in-duration, 140ms), var(--tree-transition-in-duration, 140ms)}.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA__inset-reveal[data-phase=closing].sc-ds-checkbox-group,.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA__inset-reveal[data-phase=closed].sc-ds-checkbox-group{opacity:0}@media (prefers-reduced-motion: reduce){.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA__inset-reveal.sc-ds-checkbox-group{transition:none}}.ds-checkbox-group__0apwgA--tree.sc-ds-checkbox-group .ds-checkbox-group__0apwgA--has-parent.sc-ds-checkbox-group{margin-left:calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)))}.ds-checkbox-group__0apwgA--horizontal.sc-ds-checkbox-group>.ds-checkbox-group__0apwgA__checkboxes.sc-ds-checkbox-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}`;
 
 const DsCheckboxGroup = class extends index.Mixin(componentFactory.componentFactory('ds-checkbox-group', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -155,7 +155,11 @@ const DsCheckboxGroup = class extends index.Mixin(componentFactory.componentFact
         }
         this.getEnabledChildCheckboxElements()?.[0]?.setFocus();
     }
+    recalculateCheckedChildElementCount = () => {
+        this.checkedChildElementCount = this.getChildCheckboxElements().filter(checkbox => checkbox.dsChecked).length;
+    };
     async checkValidity() {
+        this.recalculateCheckedChildElementCount();
         return this.internals?.checkValidity();
     }
     async setChecked(newValue) {
@@ -306,6 +310,9 @@ const DsCheckboxGroup = class extends index.Mixin(componentFactory.componentFact
             this.checkedChildElementCount = newValue;
             this.updateChildElementsChecked(true);
         }
+        else {
+            this.recalculateCheckedChildElementCount();
+        }
     }
     checkedChildElementCountObserver() {
         this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
@@ -446,6 +453,7 @@ const DsCheckboxGroup = class extends index.Mixin(componentFactory.componentFact
     componentDidLoad() {
         this.componentMounted();
         this.childElementsCount = this.getChildElements().length;
+        this.recalculateCheckedChildElementCount();
         this.dsCheckboxGroupInvalidStateChange.emit(this.getEffectiveErrorText());
     }
     ariaAttributeObserver(newValue, _oldValue, propName) {
@@ -479,7 +487,7 @@ const DsCheckboxGroup = class extends index.Mixin(componentFactory.componentFact
         const { ['aria-describedby']: attrAriaDescribedBy, ...restInheritedAttributes } = this.inheritedAttributes;
         const ariaLabelledBy = [this.dsLabel && this.legendId, effectiveErrorText && effectiveErrorTextId].filter(Boolean).join(' ');
         const ariaDescribedBy = [attrAriaDescribedBy, this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
-        return (index.h("fieldset", { key: '44f32d4f3ec55cf7520d008d9aecf6956da6ad73', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, style: this.treeTransitionStyles, ...utils.ifDefined('aria-labelledby', ariaLabelledBy), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...restInheritedAttributes }, this.dsLabel && (index.h("legend", { key: '34d641d0aed5d5afe9e708ebc240fcac28309f9b', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (index.h("small", { key: '4c33a7717de0f2d86064189a0cae91171f1c97ed', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (index.h(index.Fragment, null, index.h("div", { class: index$1.classNames(checkboxContainerClasses) }, index.h(this.DsCheckbox, { ref: el => (this.checkboxElem = el), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: effectiveErrorText, dsErrorsDisabled: true }), this.dsVariant === 'tree' && (index.h(this.DsCheckboxGroupExpandButton, { class: index$1.classNames(`${checkboxContainerClasses}__expand-button`), dsOpen: this.dsOpen, dsAriaLabel: this.expandButtonLabel, dsActionable: ['closed', 'open'].includes(this.nestedPhase) }))), index.h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses, hidden: this.dsVariant === 'tree' && this.nestedPhase === 'closed' }, index.h("div", { ref: el => (this.nestedReveal = el), class: nestedRevealClasses, "data-phase": this.nestedPhase, style: revealStyle }, index.h("slot", null))))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), index.h("div", { key: '34c740b44002a36d7c22acab2cd41db5b7eaccfa', class: errorClasses }, index.h(this.DsInputValidity, { key: '57dace1b1491fbfe2685952dc37a825771e298ea', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
+        return (index.h("fieldset", { key: '576958f8411f79fc6976e2f84c6c965f329c2e9f', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, style: this.treeTransitionStyles, ...utils.ifDefined('aria-labelledby', ariaLabelledBy), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...restInheritedAttributes }, this.dsLabel && (index.h("legend", { key: '557176a2f4424e8e7560bb9ef923f4e98bf03ef1', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (index.h("small", { key: '39830bcb9b6abc81c9feff4aea850073e69c8764', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (index.h(index.Fragment, null, index.h("div", { class: index$1.classNames(checkboxContainerClasses) }, index.h(this.DsCheckbox, { ref: el => (this.checkboxElem = el), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: effectiveErrorText, dsErrorsDisabled: true }), this.dsVariant === 'tree' && (index.h(this.DsCheckboxGroupExpandButton, { class: index$1.classNames(`${checkboxContainerClasses}__expand-button`), dsOpen: this.dsOpen, dsAriaLabel: this.expandButtonLabel, dsActionable: ['closed', 'open'].includes(this.nestedPhase) }))), index.h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses, hidden: this.dsVariant === 'tree' && this.nestedPhase === 'closed' }, index.h("div", { ref: el => (this.nestedReveal = el), class: nestedRevealClasses, "data-phase": this.nestedPhase, style: revealStyle }, index.h("slot", null))))) : (index.h("div", { class: checkboxesClasses }, index.h("slot", null))), index.h("div", { key: 'add9f1b3da7b6d9e6eb7914739016615d30a08e9', class: errorClasses }, index.h(this.DsInputValidity, { key: '331f130104ec8a8b96570ce810635e74f71af900', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var controlUtils = require('./controlUtils-CuHQwicz.js');
+var controlUtils = require('./controlUtils-C1d8TGh2.js');
 var utils = require('./utils-DWrHry7C.js');
-var cx = require('./cx-B24n8vFf.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-aTPCMCOZ.js');
-var disableEventsFactory = require('./disableEventsFactory-B7ENc8ob.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var cx = require('./cx-D4_fhK_D.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-DI1JBS5D.js');
+var disableEventsFactory = require('./disableEventsFactory-B32g2LC3.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
 
-const dsCheckboxCss = () => `.ds-checkbox__pA2cRq-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__pA2cRq-fieldset__legend.sc-ds-checkbox{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)}.ds-checkbox__pA2cRq-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox__pA2cRq.sc-ds-checkbox{font-family:var(--ds-fontFamily-body);box-sizing:border-box;color:var(--ds-textColor-default);display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;user-select:none;width:auto;padding:var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-4xSmall);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox{appearance:none;background-color:var(--ds-bgColor-white);border-radius:var(--ds-borderRadius-none);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox: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-checkbox__pA2cRq__input.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:hover,.ds-checkbox__pA2cRq__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__pA2cRq__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__pA2cRq__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):checked,.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):checked:hover,.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):checked:active,.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):checked:disabled,.ds-checkbox__pA2cRq__input.sc-ds-checkbox:not(.ds-checkbox__pA2cRq__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__pA2cRq__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:checked::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>")}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:indeterminate::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>")}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:checked:disabled::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>")}.ds-checkbox__pA2cRq__input.sc-ds-checkbox:indeterminate:disabled::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>")}.ds-checkbox__pA2cRq--no-margin.sc-ds-checkbox .ds-checkbox__pA2cRq__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__pA2cRq--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__pA2cRq__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__pA2cRq.sc-ds-checkbox:has(.ds-checkbox__pA2cRq__input:disabled){cursor:not-allowed}.ds-checkbox__pA2cRq-error.sc-ds-checkbox{display:flex}.ds-checkbox__pA2cRq-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}`;
+const dsCheckboxCss = () => `.ds-checkbox__0apwgA-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__0apwgA-fieldset__legend.sc-ds-checkbox{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)}.ds-checkbox__0apwgA-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox__0apwgA.sc-ds-checkbox{font-family:var(--ds-fontFamily-body);box-sizing:border-box;color:var(--ds-textColor-default);display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;user-select:none;width:auto;padding:var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-4xSmall);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large)}.ds-checkbox__0apwgA__input.sc-ds-checkbox{appearance:none;background-color:var(--ds-bgColor-white);border-radius:var(--ds-borderRadius-none);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall)}.ds-checkbox__0apwgA__input.sc-ds-checkbox: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-checkbox__0apwgA__input.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:hover,.ds-checkbox__0apwgA__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight);background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__0apwgA__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__0apwgA__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):checked,.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):checked:hover,.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):checked:active,.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):checked:disabled,.ds-checkbox__0apwgA__input.sc-ds-checkbox:not(.ds-checkbox__0apwgA__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__0apwgA__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__0apwgA__input.sc-ds-checkbox:checked::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>")}.ds-checkbox__0apwgA__input.sc-ds-checkbox:indeterminate::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>")}.ds-checkbox__0apwgA__input.sc-ds-checkbox:checked:disabled::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>")}.ds-checkbox__0apwgA__input.sc-ds-checkbox:indeterminate:disabled::before{background-image:url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>")}.ds-checkbox__0apwgA--no-margin.sc-ds-checkbox .ds-checkbox__0apwgA__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__0apwgA--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__0apwgA__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__0apwgA.sc-ds-checkbox:has(.ds-checkbox__0apwgA__input:disabled){cursor:not-allowed}.ds-checkbox__0apwgA-error.sc-ds-checkbox{display:flex}.ds-checkbox__0apwgA-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}`;
 
 const DsCheckbox = class extends index.Mixin(componentFactory.componentFactory('ds-checkbox'), ariaDeprecationFactory.ariaDeprecationFactory, disableEventsFactory.disableEventsFactory) {
     constructor(hostRef) {

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var utils = require('./utils-DWrHry7C.js');
-var cx = require('./cx-B24n8vFf.js');
+var cx = require('./cx-D4_fhK_D.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var controlUtils = require('./controlUtils-CuHQwicz.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-aTPCMCOZ.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var controlUtils = require('./controlUtils-C1d8TGh2.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-DI1JBS5D.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
 
-const dsChipGroupCss = () => `.ds-chip-group__pA2cRq__chips.sc-ds-chip-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}`;
+const dsChipGroupCss = () => `.ds-chip-group__0apwgA__chips.sc-ds-chip-group{display:inline-flex;flex-flow:row wrap;gap:var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-xSmall);list-style:none;padding:0}`;
 
 const DsChipGroup = class extends index.Mixin(componentFactory.componentFactory('ds-chip-group', { stopRootTracking: true }), ariaDeprecationFactory.ariaDeprecationFactory) {
     constructor(hostRef) {
@@ -161,7 +161,7 @@ const DsChipGroup = class extends index.Mixin(componentFactory.componentFactory(
         const ariaDescribedBy = this.dsAriaDescribedby || attrAriaDescribedBy || [!!this.dsAssistiveText && assistiveTextId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel || this.dsLabel;
         const errorTextId = `${this.dsId}-error-text`;
-        return (index.h("div", { key: 'eb079e9adb2b23d675e08d6e1a840afc33f0bfae', class: baseClass, role: "group", ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', this.dsAriaLabelledby), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...utils.ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, index.h(this.DsGroupLabel, { key: '7ca24eefb56427514bdffafe5ef142f8e8ab7ef1', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, index.h("slot", { key: '86cfcee9f38438a41dca600c54a7f2a3bb5c4b73', name: "label" }), index.h("slot", { key: '8c03de831d4563f5c92529074cecc51741bae705', name: "assistiveText" })), index.h("div", { key: '3c391cc9acf8763e2bf8866d8761c2300c1dd4e7', role: "list", class: `${baseClass}__chips` }, index.h("slot", { key: 'e5b969afc5e2c7d8106cabef7a687f5f50eba522' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => index.h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), index.h(this.DsInputValidity, { key: 'e678f0b21b128cb2763c680cb6e025a67ff92015', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
+        return (index.h("div", { key: 'ad3709fbc34176e53e3f856615e3c0174967e571', class: baseClass, role: "group", ...utils.ifDefined('aria-label', ariaLabel), ...utils.ifDefined('aria-labelledby', this.dsAriaLabelledby), ...utils.ifDefined('aria-describedby', ariaDescribedBy), ...utils.ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, index.h(this.DsGroupLabel, { key: '603359bd7ec2f25118e5be1edfaa408445c34eab', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, index.h("slot", { key: '78522345bc322c38c2e5ee21e3f5686f38a7ce6c', name: "label" }), index.h("slot", { key: '2b2dd6706e35f336a8eecfee66c12074345fff32', name: "assistiveText" })), index.h("div", { key: 'bb6925219fdf24911011cc552d4ae94cae641761', role: "list", class: `${baseClass}__chips` }, index.h("slot", { key: '5aed60f027379d133b40c9e9822037826660e155' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => index.h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), index.h(this.DsInputValidity, { key: '189c22e46c3fb8dd6c9b4919a088cb0d7bed36b4', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-DNG8iA6h.js');
-var controlUtils = require('./controlUtils-CuHQwicz.js');
+var index = require('./index-7cLzA8W5.js');
+var controlUtils = require('./controlUtils-C1d8TGh2.js');
 var utils = require('./utils-DWrHry7C.js');
-var cx = require('./cx-B24n8vFf.js');
+var cx = require('./cx-D4_fhK_D.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-aTPCMCOZ.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-DI1JBS5D.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
 
-const dsChipCss = () => `.ds-chip__pA2cRq:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-chip__pA2cRq{box-sizing:border-box;display:inline-flex;align-items:center;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-primary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);padding:calc(var(--ds-spacing-3xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);border-radius:1rem}.ds-chip__pA2cRq:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__pA2cRq:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__pA2cRq__text{padding:0 var(--ds-spacing-3xSmall)}`;
+const dsChipCss = () => `.ds-chip__0apwgA:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-chip__0apwgA{box-sizing:border-box;display:inline-flex;align-items:center;background-color:var(--ds-bgColor-white);color:var(--ds-textColor-primary);font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold);line-height:var(--ds-lineHeight-large);letter-spacing:var(--ds-letterSpacing-wide);padding:calc(var(--ds-spacing-3xSmall) - 0.03125rem) var(--ds-spacing-2xSmall);border:var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);border-radius:1rem}.ds-chip__0apwgA:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__0apwgA:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__0apwgA__text{padding:0 var(--ds-spacing-3xSmall)}`;
 
 const parseName = (newValue, currValue) => {
     return newValue || currValue;
@@ -86,7 +86,7 @@ const DsChip = class extends index.Mixin(componentFactory.componentFactory('ds-c
         const ariaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'];
         const Elem = resolvedRole ? 'div' : index.Fragment;
         const restAttributes = utils.omit(this.inheritedAttributes, ['role', 'aria-label']);
-        return (index.h(Elem, { key: 'f983e1b4fe07f9eeed524dd5e4060f4c24b93699', role: resolvedRole }, index.h("button", { key: '978d753167b4473b9140856c7aaf5cff3e11f2fe', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, index.h("slot", { key: 'b12c9a1e7abf7ac8abf3f0d698f53950c9f59549', name: "prefix" }, this.dsIcon && index.h(DsIcon, { key: '351d5aa58c3f9329dfc4d5fd4d11b267ed9e5e0d', dsName: this.dsIcon, dsSize: "1rem" })), index.h("span", { key: '5356d617c2270322b8cafd633cd00eba13c38122', class: `${baseClass}__text` }, index.h("slot", { key: 'd3eb97ea2f6e803db178a7cc631483e36d2f8c9b' }, this.dsText), index.h(DsVisuallyHidden, { key: 'e21034448a8ad20dad12853ae59ce424f56d8e60', dsTag: "span" }, ", ", controlUtils.removeSelection())), index.h(DsIcon, { key: '3d1b5815acd5db98a8655241e05c704f7d47d1bf', dsName: "close", dsSize: "1rem" }))));
+        return (index.h(Elem, { key: 'ee95d0a55e8352a99ff0041aae9a46a7fff53459', role: resolvedRole }, index.h("button", { key: '143f70c6031f1b55d7d019edc8a84456c1574c00', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, index.h("slot", { key: '102dcbb34c8cb1eb27d7dc5af610f4e8d7fb358c', name: "prefix" }, this.dsIcon && index.h(DsIcon, { key: '42f9a70a1cb0f843768083e07fe93a2dff4e43b2', dsName: this.dsIcon, dsSize: "1rem" })), index.h("span", { key: 'b5318f73b9c25fe19012571302a5e60b56bcf95e', class: `${baseClass}__text` }, index.h("slot", { key: '75a3a0d6f5af796dd88a8cad760b83cffcb8c911' }, this.dsText), index.h(DsVisuallyHidden, { key: '30f24bc5e869cb322041ac54eec1e2af912641d6', dsTag: "span" }, ", ", controlUtils.removeSelection())), index.h(DsIcon, { key: '95bcdf6eb538b81e4f014e1e8e4856abac848d20', dsName: "close", dsSize: "1rem" }))));
     }
     static get watchers() { return {
         "dsName": [{

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DWrHry7C.js');
-var controlUtils = require('./controlUtils-CuHQwicz.js');
-var cx = require('./cx-B24n8vFf.js');
+var controlUtils = require('./controlUtils-C1d8TGh2.js');
+var cx = require('./cx-D4_fhK_D.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var multipleValueFactory = require('./multipleValueFactory-CHU-x3fv.js');
-var disableEventsFactory = require('./disableEventsFactory-B7ENc8ob.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var multipleValueFactory = require('./multipleValueFactory-DfOs_UhZ.js');
+var disableEventsFactory = require('./disableEventsFactory-B32g2LC3.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
 
-const dsComboboxCss = () => `.ds-no-style-leak.sc-ds-combobox *.sc-ds-combobox{all:unset;box-sizing:border-box;display:block}.sc-ds-combobox-h{display:inline-block}.ds-combobox__pA2cRq__host.sc-ds-combobox-h{width:100%}@media (min-width: 30rem){.ds-combobox__pA2cRq__host.sc-ds-combobox-h{width:20rem}}@media (min-width: 30rem){.ds-combobox__pA2cRq__host--full-width.sc-ds-combobox-h{width:100%}}.sc-ds-combobox-h>.ds-combobox__pA2cRq.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__pA2cRq.sc-ds-combobox{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-combobox__pA2cRq__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__pA2cRq__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__pA2cRq__input-container--disabled.sc-ds-combobox .ds-combobox__pA2cRq__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__pA2cRq__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__pA2cRq__input-container--invalid.sc-ds-combobox:not(.ds-combobox__pA2cRq__input-container--open):not(.ds-combobox__pA2cRq__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__pA2cRq__input-container--invalid.sc-ds-combobox:not(.ds-combobox__pA2cRq__input-container--open):not(.ds-combobox__pA2cRq__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__pA2cRq__input-container.sc-ds-combobox:active:not(.ds-combobox__pA2cRq__input-container--invalid,.ds-combobox__pA2cRq__input-container--disabled.sc-ds-combobox,.ds-combobox__pA2cRq__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__pA2cRq__input-container.sc-ds-combobox:not(.ds-combobox__pA2cRq__input-container--open,.ds-combobox__pA2cRq__input-container.sc-ds-combobox:has(>.ds-combobox__pA2cRq__input-container__clear-button>button:focus),.ds-combobox__pA2cRq__input-container--invalid.sc-ds-combobox,.ds-combobox__pA2cRq__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__pA2cRq__input-container.sc-ds-combobox:has(>.ds-combobox__pA2cRq__input-container__input: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__pA2cRq__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__pA2cRq__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__pA2cRq__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__pA2cRq__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__pA2cRq__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__pA2cRq__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__pA2cRq__input-container__icon.sc-ds-combobox+.ds-combobox__pA2cRq__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__pA2cRq__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__pA2cRq__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__pA2cRq__input-container__clear-button.sc-ds-combobox,.ds-combobox__pA2cRq__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__pA2cRq__input-container__clear-button.sc-ds-combobox:has(button:focus){box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 2)}.ds-combobox__pA2cRq__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__pA2cRq__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__pA2cRq__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__pA2cRq__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-default);background-color:var(--ds-bgColor-white)}.ds-combobox__pA2cRq__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__pA2cRq__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__pA2cRq__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__pA2cRq__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__pA2cRq__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__pA2cRq__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__pA2cRq__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__pA2cRq__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__pA2cRq__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__pA2cRq__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 = () => `.ds-no-style-leak.sc-ds-combobox *.sc-ds-combobox{all:unset;box-sizing:border-box;display:block}.sc-ds-combobox-h{display:inline-block}.ds-combobox__0apwgA__host.sc-ds-combobox-h{width:100%}@media (min-width: 30rem){.ds-combobox__0apwgA__host.sc-ds-combobox-h{width:20rem}}@media (min-width: 30rem){.ds-combobox__0apwgA__host--full-width.sc-ds-combobox-h{width:100%}}.sc-ds-combobox-h>.ds-combobox__0apwgA.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__0apwgA.sc-ds-combobox{all:initial;display:revert;box-sizing:border-box;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16)}.ds-combobox__0apwgA__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__0apwgA__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__0apwgA__input-container--disabled.sc-ds-combobox .ds-combobox__0apwgA__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__0apwgA__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__0apwgA__input-container--invalid.sc-ds-combobox:not(.ds-combobox__0apwgA__input-container--open):not(.ds-combobox__0apwgA__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__0apwgA__input-container--invalid.sc-ds-combobox:not(.ds-combobox__0apwgA__input-container--open):not(.ds-combobox__0apwgA__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__0apwgA__input-container.sc-ds-combobox:active:not(.ds-combobox__0apwgA__input-container--invalid,.ds-combobox__0apwgA__input-container--disabled.sc-ds-combobox,.ds-combobox__0apwgA__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__0apwgA__input-container.sc-ds-combobox:not(.ds-combobox__0apwgA__input-container--open,.ds-combobox__0apwgA__input-container.sc-ds-combobox:has(>.ds-combobox__0apwgA__input-container__clear-button>button:focus),.ds-combobox__0apwgA__input-container--invalid.sc-ds-combobox,.ds-combobox__0apwgA__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__0apwgA__input-container.sc-ds-combobox:has(>.ds-combobox__0apwgA__input-container__input: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__0apwgA__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__0apwgA__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__0apwgA__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__0apwgA__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__0apwgA__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__0apwgA__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__0apwgA__input-container__icon.sc-ds-combobox+.ds-combobox__0apwgA__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__0apwgA__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__0apwgA__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__0apwgA__input-container__clear-button.sc-ds-combobox,.ds-combobox__0apwgA__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__0apwgA__input-container__clear-button.sc-ds-combobox:has(button:focus){box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);outline:var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 2)}.ds-combobox__0apwgA__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__0apwgA__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__0apwgA__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__0apwgA__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-default);background-color:var(--ds-bgColor-white)}.ds-combobox__0apwgA__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__0apwgA__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__0apwgA__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__0apwgA__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__0apwgA__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__0apwgA__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__0apwgA__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__0apwgA__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__0apwgA__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__0apwgA__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', { stopRootTracking: true }), multipleValueFactory.multipleValueFactory, disableEventsFactory.disableEventsFactory) {
     constructor(hostRef) {
@@ -89,7 +89,6 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     hasFocus = false;
     feedback = [];
     forceUpdateInputValue = false;
-    preventImmediateOpen = false;
     get badgeId() {
         return `${this.dsId}-badge`;
     }
@@ -156,6 +155,19 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
             description: option.dsDescription || null,
         })));
     }
+    setValueMissingValidity = (condition) => {
+        this.internals?.setValidity({ valueMissing: condition }, controlUtils.atLeastOneOption(), this.inputRef);
+    };
+    emitValidity = () => requestAnimationFrame(() => {
+        this.dsValidity.emit({
+            flag: this.internals?.validity.valid ? 'valid' : 'customError',
+            message: this.internals?.validationMessage,
+        });
+    });
+    dsRequiredObserver(newValue) {
+        this.setValueMissingValidity(newValue && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)));
+        this.emitValidity();
+    }
     selectedOptionsObserver(newValue, oldValue) {
         const newValues = newValue.map(opt => opt.dsValue);
         const oldValues = oldValue?.map(opt => opt.dsValue) || [];
@@ -173,10 +185,7 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
             this.dsMultipleChange.emit({ values: newValues, added: addedValues, removed: removedValues });
             this.dsChange.emit(newValues[0] || null);
         }
-        this.dsValidity.emit({
-            flag: this.internals?.validity.valid ? 'valid' : 'customError',
-            message: this.internals?.validationMessage,
-        });
+        this.emitValidity();
         if (this.forceUpdateInputValue) {
             this.forceUpdateInputValue = false;
             this.setInputValue();
@@ -317,7 +326,7 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     componentDidLoad() {
         this.componentMounted();
         this.updateScrimClasses();
-        this.internals?.setValidity({ valueMissing: this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)) }, controlUtils.atLeastOneOption(), this.inputRef);
+        this.setValueMissingValidity(this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)));
         this.forceUpdateInputValue = Array.isArray(this.dsValue) ? this.dsValue.length > 0 : !!this.dsValue;
         this.value = this.toValue(this.dsValue);
         if (!this.optionsListRef)
@@ -380,7 +389,7 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
         if (!this.isMultiple) {
             this.unsetActiveOption();
         }
-        this.internals?.setValidity({ valueMissing: this.dsRequired && options.length === 0 }, controlUtils.atLeastOneOption(), this.inputRef);
+        this.setValueMissingValidity(this.dsRequired && options.length === 0);
         this.selectedOptions = options;
     };
     unsetActiveOption = () => {
@@ -528,7 +537,6 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
                 let closeEvent = undefined;
                 if (hadActiveOption && event.shiftKey) {
                     closeEvent = 'focus';
-                    this.preventImmediateOpen = this.isOpen;
                 }
                 this.closeCombobox(closeEvent);
                 break;
@@ -612,11 +620,6 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     handleFocus = () => {
         if (this.dsDisabled)
             return;
-        if (this.selectedOptions?.length === 0 && !this.preventImmediateOpen) {
-            this.openCombobox();
-            return;
-        }
-        this.preventImmediateOpen = false;
         this.inputRef?.select();
     };
     handleToggleButtonClick = async (event) => {
@@ -701,6 +704,9 @@ const DsCombobox = class extends index.Mixin(componentFactory.componentFactory('
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
+        "dsRequired": [{
+                "dsRequiredObserver": 0
+            }],
         "selectedOptions": [{
                 "selectedOptionsObserver": 0
             }],

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

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var utils = require('./utils-DWrHry7C.js');
-var cx = require('./cx-B24n8vFf.js');
-var controlUtils = require('./controlUtils-CuHQwicz.js');
-var datepickerUtils = require('./datepickerUtils-DWup3ede.js');
-require('./store-BDEqiIFl.js');
+var cx = require('./cx-D4_fhK_D.js');
+var controlUtils = require('./controlUtils-C1d8TGh2.js');
+var datepickerUtils = require('./datepickerUtils-BV_E6a8_.js');
+require('./store-BDkw2fdF.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__pA2cRq__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__pA2cRq.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__pA2cRq__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__pA2cRq__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__pA2cRq__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__pA2cRq__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__pA2cRq__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__pA2cRq__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__pA2cRq__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__pA2cRq__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__pA2cRq__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__pA2cRq__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__pA2cRq__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__pA2cRq__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__pA2cRq__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__pA2cRq__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__pA2cRq__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__pA2cRq__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__pA2cRq__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__pA2cRq__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__pA2cRq__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__pA2cRq__day--disabled,.ds-datepicker-custom__pA2cRq__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__pA2cRq__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__pA2cRq__day--disabled,.ds-datepicker-custom__pA2cRq__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__pA2cRq__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__pA2cRq__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__pA2cRq__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__pA2cRq__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__pA2cRq__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__pA2cRq__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__pA2cRq__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__pA2cRq__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__pA2cRq__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__pA2cRq__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__pA2cRq__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__pA2cRq__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__pA2cRq__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__0apwgA__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__0apwgA.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__0apwgA__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__0apwgA__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__0apwgA__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__0apwgA__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__0apwgA__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__0apwgA__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__0apwgA__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__0apwgA__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__0apwgA__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__0apwgA__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__0apwgA__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__0apwgA__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__0apwgA__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__0apwgA__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__0apwgA__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__0apwgA__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__0apwgA__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__0apwgA__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__0apwgA__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__0apwgA__day--disabled,.ds-datepicker-custom__0apwgA__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__0apwgA__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__0apwgA__day--disabled,.ds-datepicker-custom__0apwgA__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__0apwgA__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__0apwgA__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__0apwgA__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__0apwgA__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__0apwgA__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__0apwgA__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__0apwgA__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__0apwgA__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__0apwgA__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__0apwgA__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__0apwgA__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__0apwgA__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__0apwgA__footer-button--right.sc-ds-datepicker-custom{margin-left:auto}`;
 
 const ANNOUNCER_RESET_TIMEOUT = 2000;
 const INPUT_DEBOUNCE_TIMEOUT = 500;
@@ -601,11 +601,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: '1a2bbdff99ee602a19e699a7fcb28b1b95d501db' }, index.h(this.DsControlLabel, { key: '7c83542adee3dd1b0c7d9ec19db8418428fa6f58', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: 'b52f403b9135f80ccff3be99115deb049e21d920', name: "label" }), index.h("slot", { key: 'dfa38760670974f2811888c4d0198e4f5e8c8238', name: "assistiveText" })), index.h("div", { key: '50896b1dba1cabfc398ea89d53294e897724442b', class: customDatepickerClass }, index.h(this.DsTextInputTag, { key: '8180e6e879f38cce4a6ec5939fd34be775773ed4', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? 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: '56b88a8b9641cfb54c11606882ecb22017d05268', ref: el => (this.calendarButtonRef = el), slot: "suffix", class: `${customDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.handleCalendarButtonClick, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: this.calendarButtonAriaLabel, dsInInput: true, tabindex: this.dsDisabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false' }, index.h(this.DsIconTag, { key: 'c6ede8147d9e530c591cd83559a776afc9451dad', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (index.h("div", { key: 'b0f0580e17f1af38e67f15c8c44eccc19cd97224', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, index.h(this.DsFeedbackTag, { key: '07da0878e9fe3c16d3a4c356d31748b29c703ce6', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), index.h("div", { key: 'a0d510d92d3f1262d1a9c24b2d5a53c6d231c473', class: `${customDatepickerClass}__header` }, index.h("div", { key: '661fffe696b124d062bf663f98189817445a320b', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, index.h(this.DsSelectTag, { key: '2a9a14ce6784c0cc954096c2da073727233e7bf6', 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: 'd2e79e4700d998884f7b4efb02bd0ad3a056c920', 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: 'fa814f285637e2bb66f21a3c9e8749f60d64f75c', class: `${customDatepickerClass}__navigation` }, index.h(this.DsButtonTag, { key: '86f2196079697201a1bdcf03630d5e8160f45ffc', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, index.h(this.DsIconTag, { key: 'd5361b0f1e91b57a6c565ed2f0b1291a972d7ea7', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), index.h(this.DsButtonTag, { key: '77a0cbff46f25b88a6fcbadddf25e69f0851271c', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, index.h(this.DsIconTag, { key: 'f10f1a8aa39b1800c88c2d00f11d063205129e40', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), index.h("div", { class: index$1.classNames(`${customDatepickerClass}__calendar`, {
+        return (index.h("div", { key: 'fd725336ea64eabae4d4a82884807ceede42e866' }, index.h(this.DsControlLabel, { key: 'f7a8c2b1e81d42766edad1d3859711d2fcbb141e', 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: 'c51702ba7b21d84db278282d6f374390ef9a488c', name: "label" }), index.h("slot", { key: 'c0f02119e6e90b846970515d97711a0c4dd537d0', name: "assistiveText" })), index.h("div", { key: '093fc08ac961719d16970f5949db17524ed1df34', class: customDatepickerClass }, index.h(this.DsTextInputTag, { key: '1bd6adbe76689a754d06ab0fcdf1421e884f92c7', 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: '652f3f177c9298c1941b628fba22c8ec0b42acf5', 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: '5f36e855192c85981930b97c1f8f7bb5e436e9a3', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (index.h("div", { key: '9a20ebdf46938ad214b6574d0c36370428d6fecb', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, index.h(this.DsFeedbackTag, { key: '44730edf4cf2e3f8a0062395fee0c2bded7ef88a', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), index.h("div", { key: 'cd04d51fcf4ddc0e3b389c1571bcd403f2ce4737', class: `${customDatepickerClass}__header` }, index.h("div", { key: 'eca4d410381d6747f0fd9dcfd06e411cad7ab9fe', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, index.h(this.DsSelectTag, { key: '0a13486544338818ce57369a2ead935af3d1f09d', 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: '70ba97df815fa27570e3ae08f10f0cdc8f904810', 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: 'c848ffe88a3513d0fad3907e07bd38b35dbf06cc', class: `${customDatepickerClass}__navigation` }, index.h(this.DsButtonTag, { key: '68c6c1d5ce2c3b1383f28525f0eca7b6925278a4', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, index.h(this.DsIconTag, { key: 'c57c4c17289265ebc2a78d23fb9ae6789daa8ecb', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), index.h(this.DsButtonTag, { key: '71806d8570162a8d98f56d681c295a2915a3b54a', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, index.h(this.DsIconTag, { key: '49d3fea4e81682107e1e41e946e71bdab4d56826', 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: 'd89f6ad4d7b38bde0fd4f1a8bacc11df77b2d891', 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) => {
+            }), key: this.transitionKey, role: "grid", "aria-label": `${months[this.currentMonth]} ${this.currentYear}`, onAnimationEnd: () => (this.transitionDirection = null) }, index.h("div", { key: 'd1595d73b77de795433d32179c03ac627c003835', 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", { key: rowIndex, role: "row", class: `${customDatepickerClass}__day-row` }, rowDays.map(({ day, isCurrentMonth, isToday, date }) => {
                 const isDisabled = datepickerUtils.isDateDisabled(date, this.dateConstraints);
@@ -624,7 +624,7 @@ const DsDatepickerCustom = class {
                         [`${customDatepickerClass}__day--disabled`]: isDisabled,
                     }) }, day)));
             })));
-        })), index.h("div", { key: '02201c7514f49545f4d93b4f26fe2a6da856bde7', class: `${customDatepickerClass}__footer` }, index.h(this.DsButtonTag, { key: 'ca7abb6b9371d6188304f3dff0f385b889c6eb95', dsVariant: "supplementary", dsText: datepickerUtils.showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), index.h(this.DsButtonTag, { key: 'b0cf45060fea0ec0453fb98607f665848278c934', dsVariant: "supplementary", dsText: datepickerUtils.clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && index.h(this.DsInputValidityTag, { key: '8642724e0dddafddd0c8706d26e265e245c0036b', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), index.h("div", { key: '9badb64a67cb9955ce6e08ccff1ac5e55277a312', class: `${customDatepickerClass}__footer` }, index.h(this.DsButtonTag, { key: '6774fbe4ce095159426d9736378ae2f74f3e7b81', dsVariant: "supplementary", dsText: datepickerUtils.showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), index.h(this.DsButtonTag, { key: 'c58cea183bb38798d8e477f1bbedc0e53d5fe50a', dsVariant: "supplementary", dsText: datepickerUtils.clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && index.h(this.DsInputValidityTag, { key: 'e0ac6550a76646fbc30e1ee57ccfca1ba243cea4', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get watchers() { return {
         "hasFocus": [{
@@ -653,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__pA2cRq__input-container.sc-ds-datepicker-native .ds-datepicker-native__pA2cRq__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__pA2cRq__input-container.sc-ds-datepicker-native .ds-datepicker-native__pA2cRq__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__pA2cRq__input-container.sc-ds-datepicker-native .ds-datepicker-native__pA2cRq__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__pA2cRq__input-container.sc-ds-datepicker-native .ds-datepicker-native__pA2cRq__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__pA2cRq__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__pA2cRq.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__pA2cRq--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__pA2cRq--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__pA2cRq--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__pA2cRq--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__pA2cRq--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__pA2cRq--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__pA2cRq.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__pA2cRq--disabled,.ds-datepicker-native__pA2cRq--readonly.sc-ds-datepicker-native,.ds-datepicker-native__pA2cRq--invalid.sc-ds-datepicker-native,.ds-datepicker-native__pA2cRq.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__pA2cRq.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__pA2cRq--invalid,.ds-datepicker-native__pA2cRq--disabled.sc-ds-datepicker-native,.ds-datepicker-native__pA2cRq--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__pA2cRq.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__pA2cRq.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__pA2cRq.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__pA2cRq__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__pA2cRq__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__pA2cRq__input-container.sc-ds-datepicker-native .ds-datepicker-native__pA2cRq__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__0apwgA__input-container.sc-ds-datepicker-native .ds-datepicker-native__0apwgA__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__0apwgA__input-container.sc-ds-datepicker-native .ds-datepicker-native__0apwgA__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__0apwgA__input-container.sc-ds-datepicker-native .ds-datepicker-native__0apwgA__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__0apwgA__input-container.sc-ds-datepicker-native .ds-datepicker-native__0apwgA__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__0apwgA__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__0apwgA.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__0apwgA--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__0apwgA--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__0apwgA--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__0apwgA--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__0apwgA--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__0apwgA--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__0apwgA.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__0apwgA--disabled,.ds-datepicker-native__0apwgA--readonly.sc-ds-datepicker-native,.ds-datepicker-native__0apwgA--invalid.sc-ds-datepicker-native,.ds-datepicker-native__0apwgA.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__0apwgA.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__0apwgA--invalid,.ds-datepicker-native__0apwgA--disabled.sc-ds-datepicker-native,.ds-datepicker-native__0apwgA--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__0apwgA.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__0apwgA.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__0apwgA.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__0apwgA__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__0apwgA__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__0apwgA__input-container.sc-ds-datepicker-native .ds-datepicker-native__0apwgA__input.sc-ds-datepicker-native{position:absolute;inset:0;line-height:var(--ds-fontSize-36);z-index:1}}`;
 
 const DsDatepickerNative = class {
     constructor(hostRef) {
@@ -806,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: '05d5822e45b9483fa8453b149687016c5fc7b9a0' }, index.h(DsControlLabel, { key: '331667e4fe063a8871c8d87ae0fc06a4896e2c93', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: '43100d094082c33b8bd72775be2273d6d9c8f6dc', name: "label" })), index.h("div", { key: 'af5695adaff23db930a8b1791c28f71a2fb8d21d', class: index$1.classNames(`${baseClass}`, {
+        return (index.h("div", { key: 'ed6a8bbb174a2a8564d16639bff4b534d9f4176b' }, index.h(DsControlLabel, { key: '60254c2a1a7d35de9afed225f9f47aa378e6e5dc', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: '7b4dad9eb682584df4f7011936d2a1239c041e72', name: "label" })), index.h("div", { key: '98cbbd71a0e24dfadfc3669af0fbbbaf5a1dec13', class: index$1.classNames(`${baseClass}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, index.h("div", { key: 'a61e796b2ec2838200475b47059ee18a5f2196da', class: inputContainerClass }, index.h("input", { key: 'd5ceceb10138ebc2c02949e52c122a38201fd240', ref: el => {
+            }) }, index.h("div", { key: '33d89a049f818a120c371ff23ae40a06e0190523', class: inputContainerClass }, index.h("input", { key: '7113b3b2de5774d7cb344a008b5cf6e8ab3f90aa', ref: el => {
                 this.nativeDateInputRef = el;
                 if (el)
                     el.value = this.value;
@@ -819,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: 'c9396eed1674c9a23eac0101d94ad142676a6d54', 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: '352e6905ddf04ed6c4a0ee7264bd18ed1a013d7b', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), index.h(this.DsInputValidityTag, { key: 'b000fb8c30203752b113218fed941810f4d3775b', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls })), this.dsShowCalendarIcon && (index.h(this.DsButtonTag, { key: '8fd49dcd5d1b5be3262e6197b730a0070cca6cf5', class: `${baseClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.openDatePicker, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: datepickerUtils.openDatePicker(), dsInInput: true }, index.h(this.DsIconTag, { key: 'baf506ddfd0ba5eb141f913b6205763d4343c1cc', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), index.h(this.DsInputValidityTag, { key: '803bf5f1aae5a891459d1922fef16dbebc78c380', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get watchers() { return {
         "hasFocus": [{
@@ -836,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__pA2cRq.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__0apwgA.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) {
@@ -1053,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: '315c67afd479a7d88ab774950712e31c5b2dd777' }, index.h(this.DsControlLabel, { key: '1e7e57ec3cc6244b00593d88c70d3f41de75ec75', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: 'cbaeee87017f493f0149f5b40d095db096e74063', name: "label" })), index.h("div", { key: 'bba1a4bab77e99441e96f56e140ae6f5bb6d86e5', class: simpleClass }, index.h(this.DsTextInputTag, { key: 'f9d15cca46d9123aff6069762d1d3ae2b4cccf31', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? 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: '951480e65d20eef2ff62f82ea73bfc5baab01da3', id: validityId, dsText: this.validityText, dsType: "error" })));
+        return (index.h("div", { key: '7dc2427c91737f02119af169aeb6b8116cee7cbf' }, index.h(this.DsControlLabel, { key: '4d6a5c2f37a0ce6385969519d10ba506b91aee39', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: 'a14b07013bc60e5b120b73f71770dc4279b74b11', name: "label" })), index.h("div", { key: '0a080aa69517b842d14c46d56539aee2dee8546b', class: simpleClass }, index.h(this.DsTextInputTag, { key: '0afdd46a1fbd380b76827035fc7afcb3e5690cc7', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? 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: '7d59b9a478f1eabce050f7c8df1870bf520e281d', 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-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var utils = require('./utils-DWrHry7C.js');
-var cx = require('./cx-B24n8vFf.js');
-var datepickerUtils = require('./datepickerUtils-DWup3ede.js');
-var componentFactory = require('./componentFactory-D5oS4vfA.js');
-require('./store-BDEqiIFl.js');
+var cx = require('./cx-D4_fhK_D.js');
+var datepickerUtils = require('./datepickerUtils-BV_E6a8_.js');
+var componentFactory = require('./componentFactory-C0erJ_VA.js');
+require('./store-BDkw2fdF.js');
 
 const dsDatepickerCss = () => ``;
 

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DNG8iA6h.js');
+var index = require('./index-7cLzA8W5.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-B24n8vFf.js');
+var cx = require('./cx-D4_fhK_D.js');
 
-const dsDividerCss = () => `.ds-no-style-leak.sc-ds-divider *.sc-ds-divider{all:unset;box-sizing:border-box;display:block}.ds-divider__pA2cRq.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__pA2cRq--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__pA2cRq--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__pA2cRq--decorative.sc-ds-divider{border-color:var(--ds-borderColor-light)}.ds-divider__pA2cRq--accessible.sc-ds-divider{border-color:var(--ds-borderColor-default)}`;
+const dsDividerCss = () => `.ds-no-style-leak.sc-ds-divider *.sc-ds-divider{all:unset;box-sizing:border-box;display:block}.ds-divider__0apwgA.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__0apwgA--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__0apwgA--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__0apwgA--decorative.sc-ds-divider{border-color:var(--ds-borderColor-light)}.ds-divider__0apwgA--accessible.sc-ds-divider{border-color:var(--ds-borderColor-default)}`;
 
 const DsDivider = class {
     constructor(hostRef) {
@@ -24,7 +24,7 @@ const DsDivider = class {
             '--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: '3c8cf29d56294503961838e078d30af609f6ef8b', style: hostStyle }, index.h("hr", { key: '575eb47fa5b5a102fd8ddcfd69c319b39502d7dd', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
+        return (index.h(index.Host, { key: '6f8595a51b98196d03be69eed929f03c281f8e16', style: hostStyle }, index.h("hr", { key: '54750a6aea57622700ce46876058eb7d4951143d', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
     }
 };
 DsDivider.style = dsDividerCss();