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

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

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var utils = require('./utils-D94MuKO1.js');
-var controlUtils = require('./controlUtils-CGxmX6pv.js');
-var cx = require('./cx-uuGgi31h.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-var store = require('./store-Dse4EhGQ.js');
+var utils = require('./utils-DWrHry7C.js');
+var controlUtils = require('./controlUtils-CHspM5B4.js');
+var cx = require('./cx-BS6nqACL.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+var store = require('./store-C9xOI2Br.js');
 
-const dsCheckboxGroupCss = () => `.ds-checkbox-group__oJU1eo.sc-ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__oJU1eo__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__oJU1eo__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__oJU1eo__checkbox-container.sc-ds-checkbox-group{display:flex;gap:var(--ds-spacing-4xSmall)}.ds-checkbox-group__oJU1eo__checkbox-container__expand-button.sc-ds-checkbox-group{order:-1}.ds-checkbox-group__oJU1eo__error.sc-ds-checkbox-group{display:flex}.ds-checkbox-group__oJU1eo__error--visible.sc-ds-checkbox-group{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__oJU1eo.sc-ds-checkbox-group>.ds-checkbox-group__oJU1eo__checkboxes.sc-ds-checkbox-group{display:inline-flex;flex-direction:column}.ds-checkbox-group__oJU1eo--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall))}.ds-checkbox-group__oJU1eo--inset[hidden].sc-ds-checkbox-group{display:none}.ds-checkbox-group__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}.ds-checkbox-group__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo__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__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo__inset-reveal[data-phase=opening].sc-ds-checkbox-group,.ds-checkbox-group__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo__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__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo__inset-reveal[data-phase=closing].sc-ds-checkbox-group,.ds-checkbox-group__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo__inset-reveal[data-phase=closed].sc-ds-checkbox-group{opacity:0}@media (prefers-reduced-motion: reduce){.ds-checkbox-group__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo__inset-reveal.sc-ds-checkbox-group{transition:none}}.ds-checkbox-group__oJU1eo--tree.sc-ds-checkbox-group .ds-checkbox-group__oJU1eo--has-parent.sc-ds-checkbox-group{margin-left:calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)))}.ds-checkbox-group__oJU1eo--horizontal.sc-ds-checkbox-group>.ds-checkbox-group__oJU1eo__checkboxes.sc-ds-checkbox-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}`;
+const dsCheckboxGroupCss = () => `.ds-checkbox-group__owcjsm.sc-ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__owcjsm__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__owcjsm__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__owcjsm__checkbox-container.sc-ds-checkbox-group{display:flex;gap:var(--ds-spacing-4xSmall)}.ds-checkbox-group__owcjsm__checkbox-container__expand-button.sc-ds-checkbox-group{order:-1}.ds-checkbox-group__owcjsm__error.sc-ds-checkbox-group{display:flex}.ds-checkbox-group__owcjsm__error--visible.sc-ds-checkbox-group{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__owcjsm.sc-ds-checkbox-group>.ds-checkbox-group__owcjsm__checkboxes.sc-ds-checkbox-group{display:inline-flex;flex-direction:column}.ds-checkbox-group__owcjsm--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall))}.ds-checkbox-group__owcjsm--inset[hidden].sc-ds-checkbox-group{display:none}.ds-checkbox-group__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}.ds-checkbox-group__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm__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__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm__inset-reveal[data-phase=opening].sc-ds-checkbox-group,.ds-checkbox-group__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm__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__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm__inset-reveal[data-phase=closing].sc-ds-checkbox-group,.ds-checkbox-group__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm__inset-reveal[data-phase=closed].sc-ds-checkbox-group{opacity:0}@media (prefers-reduced-motion: reduce){.ds-checkbox-group__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm__inset-reveal.sc-ds-checkbox-group{transition:none}}.ds-checkbox-group__owcjsm--tree.sc-ds-checkbox-group .ds-checkbox-group__owcjsm--has-parent.sc-ds-checkbox-group{margin-left:calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)))}.ds-checkbox-group__owcjsm--horizontal.sc-ds-checkbox-group>.ds-checkbox-group__owcjsm__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) {

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var controlUtils = require('./controlUtils-CGxmX6pv.js');
-var utils = require('./utils-D94MuKO1.js');
-var cx = require('./cx-uuGgi31h.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-j82aBIxx.js');
-var disableEventsFactory = require('./disableEventsFactory-Cccoj4QF.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var controlUtils = require('./controlUtils-CHspM5B4.js');
+var utils = require('./utils-DWrHry7C.js');
+var cx = require('./cx-BS6nqACL.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-Os9dT7II.js');
+var disableEventsFactory = require('./disableEventsFactory-BAjJLkIG.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
-const dsCheckboxCss = () => `.ds-checkbox__oJU1eo-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__oJU1eo-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__oJU1eo-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__oJU1eo.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__oJU1eo__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__oJU1eo__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__oJU1eo__input.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox:hover,.ds-checkbox__oJU1eo__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__oJU1eo__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__oJU1eo__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__oJU1eo__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):checked,.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):checked:hover,.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):checked:active,.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):checked:disabled,.ds-checkbox__oJU1eo__input.sc-ds-checkbox:not(.ds-checkbox__oJU1eo__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__oJU1eo__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__oJU1eo__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__oJU1eo__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__oJU1eo__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__oJU1eo__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__oJU1eo--no-margin.sc-ds-checkbox .ds-checkbox__oJU1eo__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__oJU1eo--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__oJU1eo__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__oJU1eo.sc-ds-checkbox:has(.ds-checkbox__oJU1eo__input:disabled){cursor:not-allowed}.ds-checkbox__oJU1eo-error.sc-ds-checkbox{display:flex}.ds-checkbox__oJU1eo-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}`;
+const dsCheckboxCss = () => `.ds-checkbox__owcjsm-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__owcjsm-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__owcjsm-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__owcjsm.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__owcjsm__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__owcjsm__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__owcjsm__input.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__owcjsm__input.sc-ds-checkbox:hover,.ds-checkbox__owcjsm__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__owcjsm__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__owcjsm__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__owcjsm__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__owcjsm__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__owcjsm__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):checked,.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):checked:hover,.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):checked:active,.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):checked:disabled,.ds-checkbox__owcjsm__input.sc-ds-checkbox:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__owcjsm__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm--no-margin.sc-ds-checkbox .ds-checkbox__owcjsm__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__owcjsm--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__owcjsm__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__owcjsm.sc-ds-checkbox:has(.ds-checkbox__owcjsm__input:disabled){cursor:not-allowed}.ds-checkbox__owcjsm-error.sc-ds-checkbox{display:flex}.ds-checkbox__owcjsm-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-CSBE5f9n.js');
-var utils = require('./utils-D94MuKO1.js');
-var cx = require('./cx-uuGgi31h.js');
+var index = require('./index-BBBTmSCS.js');
+var utils = require('./utils-DWrHry7C.js');
+var cx = require('./cx-BS6nqACL.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var controlUtils = require('./controlUtils-CGxmX6pv.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-j82aBIxx.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var controlUtils = require('./controlUtils-CHspM5B4.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-Os9dT7II.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
-const dsChipGroupCss = () => `.ds-chip-group__oJU1eo__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__owcjsm__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: '65cfa5aecda4f0b674889cc0e120dfc9a0ea7e35', 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: 'fa767b112ab1a442e06ce9341938b81d42487f9b', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, index.h("slot", { key: '7db691d4f8a2228ea5aebe55bf63cb53bc0bb548', name: "label" }), index.h("slot", { key: '529ba250c6345977b1d34041235b5b933700f68a', name: "assistiveText" })), index.h("div", { key: 'f6b4247b90ba8a87566f164f64692ab29e70c66e', role: "list", class: `${baseClass}__chips` }, index.h("slot", { key: '424b01344c6640e751530f582b58be72ed0869b4' })), 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: '459a9a51d0bb5c4179e93ade081e012fd1220c79', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
+        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" })));
     }
     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-CSBE5f9n.js');
-var controlUtils = require('./controlUtils-CGxmX6pv.js');
-var utils = require('./utils-D94MuKO1.js');
-var cx = require('./cx-uuGgi31h.js');
+var index = require('./index-BBBTmSCS.js');
+var controlUtils = require('./controlUtils-CHspM5B4.js');
+var utils = require('./utils-DWrHry7C.js');
+var cx = require('./cx-BS6nqACL.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var ariaDeprecationFactory = require('./ariaDeprecationFactory-j82aBIxx.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var ariaDeprecationFactory = require('./ariaDeprecationFactory-Os9dT7II.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
-const dsChipCss = () => `.ds-chip__oJU1eo: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__oJU1eo{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__oJU1eo:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__oJU1eo:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__oJU1eo__text{padding:0 var(--ds-spacing-3xSmall)}`;
+const dsChipCss = () => `.ds-chip__owcjsm: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__owcjsm{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__owcjsm:hover{background-color:var(--ds-bgColor-secondary-hover)}.ds-chip__owcjsm:active{background-color:var(--ds-bgColor-secondary-active)}.ds-chip__owcjsm__text{padding:0 var(--ds-spacing-3xSmall)}`;
 
 const parseName = (newValue, currValue) => {
     return newValue || currValue;

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

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-D94MuKO1.js');
-var controlUtils = require('./controlUtils-CGxmX6pv.js');
-var cx = require('./cx-uuGgi31h.js');
+var utils = require('./utils-DWrHry7C.js');
+var controlUtils = require('./controlUtils-CHspM5B4.js');
+var cx = require('./cx-BS6nqACL.js');
 var attributes = require('./attributes-DbNfxmvc.js');
-var multipleValueFactory = require('./multipleValueFactory-RF9K04rp.js');
-var disableEventsFactory = require('./disableEventsFactory-Cccoj4QF.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var multipleValueFactory = require('./multipleValueFactory-DcMJU_0L.js');
+var disableEventsFactory = require('./disableEventsFactory-BAjJLkIG.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.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__oJU1eo__host.sc-ds-combobox-h{width:100%}@media (min-width: 30rem){.ds-combobox__oJU1eo__host.sc-ds-combobox-h{width:20rem}}@media (min-width: 30rem){.ds-combobox__oJU1eo__host--full-width.sc-ds-combobox-h{width:100%}}.sc-ds-combobox-h>.ds-combobox__oJU1eo.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__oJU1eo.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__oJU1eo__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__oJU1eo__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__oJU1eo__input-container--disabled.sc-ds-combobox .ds-combobox__oJU1eo__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__oJU1eo__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__oJU1eo__input-container--invalid.sc-ds-combobox:not(.ds-combobox__oJU1eo__input-container--open):not(.ds-combobox__oJU1eo__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__oJU1eo__input-container--invalid.sc-ds-combobox:not(.ds-combobox__oJU1eo__input-container--open):not(.ds-combobox__oJU1eo__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__oJU1eo__input-container.sc-ds-combobox:active:not(.ds-combobox__oJU1eo__input-container--invalid,.ds-combobox__oJU1eo__input-container--disabled.sc-ds-combobox,.ds-combobox__oJU1eo__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__oJU1eo__input-container.sc-ds-combobox:not(.ds-combobox__oJU1eo__input-container--open,.ds-combobox__oJU1eo__input-container.sc-ds-combobox:has(>.ds-combobox__oJU1eo__input-container__clear-button>button:focus),.ds-combobox__oJU1eo__input-container--invalid.sc-ds-combobox,.ds-combobox__oJU1eo__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__oJU1eo__input-container.sc-ds-combobox:has(>.ds-combobox__oJU1eo__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__oJU1eo__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__oJU1eo__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__oJU1eo__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__oJU1eo__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__oJU1eo__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__oJU1eo__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__oJU1eo__input-container__icon.sc-ds-combobox+.ds-combobox__oJU1eo__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__oJU1eo__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__oJU1eo__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__oJU1eo__input-container__clear-button.sc-ds-combobox,.ds-combobox__oJU1eo__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__oJU1eo__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__oJU1eo__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__oJU1eo__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__oJU1eo__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__oJU1eo__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__oJU1eo__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__oJU1eo__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__oJU1eo__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__oJU1eo__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__oJU1eo__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__oJU1eo__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__oJU1eo__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__oJU1eo__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__oJU1eo__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__oJU1eo__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__owcjsm__host.sc-ds-combobox-h{width:100%}@media (min-width: 30rem){.ds-combobox__owcjsm__host.sc-ds-combobox-h{width:20rem}}@media (min-width: 30rem){.ds-combobox__owcjsm__host--full-width.sc-ds-combobox-h{width:100%}}.sc-ds-combobox-h>.ds-combobox__owcjsm.sc-ds-combobox{display:flex;flex-direction:column;position:relative}.ds-combobox__owcjsm.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__owcjsm__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__owcjsm__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__owcjsm__input-container--disabled.sc-ds-combobox .ds-combobox__owcjsm__input-container__toggle-button.sc-ds-combobox{cursor:not-allowed}.ds-combobox__owcjsm__input-container--invalid.sc-ds-combobox{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-combobox__owcjsm__input-container--invalid.sc-ds-combobox:not(.ds-combobox__owcjsm__input-container--open):not(.ds-combobox__owcjsm__input-container--disabled):hover{background-color:var(--ds-bgColor-danger-hover)}.ds-combobox__owcjsm__input-container--invalid.sc-ds-combobox:not(.ds-combobox__owcjsm__input-container--open):not(.ds-combobox__owcjsm__input-container--disabled):active{background-color:var(--ds-bgColor-danger-active)}.ds-combobox__owcjsm__input-container.sc-ds-combobox:active:not(.ds-combobox__owcjsm__input-container--invalid,.ds-combobox__owcjsm__input-container--disabled.sc-ds-combobox,.ds-combobox__owcjsm__input-container--open).sc-ds-combobox{background-color:var(--ds-bgColor-white-active)}.ds-combobox__owcjsm__input-container.sc-ds-combobox:not(.ds-combobox__owcjsm__input-container--open,.ds-combobox__owcjsm__input-container.sc-ds-combobox:has(>.ds-combobox__owcjsm__input-container__clear-button>button:focus),.ds-combobox__owcjsm__input-container--invalid.sc-ds-combobox,.ds-combobox__owcjsm__input-container--disabled).sc-ds-combobox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-combobox__owcjsm__input-container.sc-ds-combobox:has(>.ds-combobox__owcjsm__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__owcjsm__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__owcjsm__input-container__input.sc-ds-combobox::placeholder{color:var(--ds-textColor-secondary)}.ds-combobox__owcjsm__input-container__input.sc-ds-combobox:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-combobox__owcjsm__input-container__input.sc-ds-combobox:disabled::placeholder{color:var(--ds-textColor-disabled-onLight)}.ds-combobox__owcjsm__input-container__input.sc-ds-combobox:focus{outline:none}.ds-combobox__owcjsm__input-container__icon.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall)}.ds-combobox__owcjsm__input-container__icon.sc-ds-combobox+.ds-combobox__owcjsm__input-container__input.sc-ds-combobox{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.ds-combobox__owcjsm__input-container__badge-container.sc-ds-combobox{pointer-events:none;user-select:none}.ds-combobox__owcjsm__input-container__badge-container--padded.sc-ds-combobox{padding-right:calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall))}.ds-combobox__owcjsm__input-container__clear-button.sc-ds-combobox,.ds-combobox__owcjsm__input-container__toggle-button.sc-ds-combobox{cursor:pointer}.ds-combobox__owcjsm__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__owcjsm__input-container__toggle-button.sc-ds-combobox{color:inherit;display:flex;align-items:center;justify-content:center;height:100%}.ds-combobox__owcjsm__input-container__toggle-button.sc-ds-combobox:focus{outline:none}.ds-combobox__owcjsm__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__owcjsm__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__owcjsm__options-container--open.sc-ds-combobox{display:block;box-shadow:var(--ds-shadow-overlay)}.ds-combobox__owcjsm__options-container__options.sc-ds-combobox{position:relative;display:block;width:100%;padding:0;margin:0;z-index:0;overflow:auto}.ds-combobox__owcjsm__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__owcjsm__options-container__options__inner__top-scrim.sc-ds-combobox,.ds-combobox__owcjsm__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__owcjsm__options-container__options__inner__top-scrim--visible.sc-ds-combobox,.ds-combobox__owcjsm__options-container__options__inner__bottom-scrim--visible.sc-ds-combobox{display:block}.ds-combobox__owcjsm__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__owcjsm__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__owcjsm__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) {
@@ -156,6 +156,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 +186,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 +327,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 +390,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 = () => {
@@ -701,6 +711,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-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var utils = require('./utils-D94MuKO1.js');
-var cx = require('./cx-uuGgi31h.js');
-var controlUtils = require('./controlUtils-CGxmX6pv.js');
-var datepickerUtils = require('./datepickerUtils-DfuEvRH4.js');
-require('./store-Dse4EhGQ.js');
+var utils = require('./utils-DWrHry7C.js');
+var cx = require('./cx-BS6nqACL.js');
+var controlUtils = require('./controlUtils-CHspM5B4.js');
+var datepickerUtils = require('./datepickerUtils-D3VxgASh.js');
+require('./store-C9xOI2Br.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__oJU1eo__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__oJU1eo.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__oJU1eo__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__oJU1eo__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__oJU1eo__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__oJU1eo__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__oJU1eo__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__oJU1eo__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__oJU1eo__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__oJU1eo__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__oJU1eo__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__oJU1eo__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__oJU1eo__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__oJU1eo__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__oJU1eo__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__oJU1eo__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__oJU1eo__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__oJU1eo__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__oJU1eo__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__oJU1eo__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__oJU1eo__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__oJU1eo__day--disabled,.ds-datepicker-custom__oJU1eo__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__oJU1eo__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__oJU1eo__day--disabled,.ds-datepicker-custom__oJU1eo__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__oJU1eo__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__oJU1eo__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__oJU1eo__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__oJU1eo__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__oJU1eo__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__oJU1eo__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__oJU1eo__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__oJU1eo__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__oJU1eo__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__oJU1eo__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__oJU1eo__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__oJU1eo__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__oJU1eo__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__owcjsm__calendar-icon.sc-ds-datepicker-custom{height:100%}.ds-datepicker-custom__owcjsm.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__owcjsm__calendar-icon.sc-ds-datepicker-custom{margin-right:calc(-1 * var(--ds-spacing-xSmall))}@supports (-moz-appearance: none){.ds-datepicker-custom__owcjsm__calendar-icon.sc-ds-datepicker-custom{display:inline-flex}}.ds-datepicker-custom__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__calendar--prev.sc-ds-datepicker-custom{animation:slide-in-from-left 250ms ease-out}.ds-datepicker-custom__owcjsm__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__owcjsm__weekday-row.sc-ds-datepicker-custom,.ds-datepicker-custom__owcjsm__day-row.sc-ds-datepicker-custom{display:grid;grid-template-columns:repeat(7, 1fr);gap:var(--ds-spacing-3xSmall)}.ds-datepicker-custom__owcjsm__weekday-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom,.ds-datepicker-custom__owcjsm__day-row.sc-ds-datepicker-custom [role=gridcell].sc-ds-datepicker-custom{display:contents}.ds-datepicker-custom__owcjsm__weekday.sc-ds-datepicker-custom,.ds-datepicker-custom__owcjsm__day.sc-ds-datepicker-custom{aspect-ratio:1;line-height:var(--ds-button-min-height);text-align:center}.ds-datepicker-custom__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__day.sc-ds-datepicker-custom:hover:not(.ds-datepicker-custom__owcjsm__day--disabled,.ds-datepicker-custom__owcjsm__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-custom__owcjsm__day.sc-ds-datepicker-custom:active:not(.ds-datepicker-custom__owcjsm__day--disabled,.ds-datepicker-custom__owcjsm__day--selected).sc-ds-datepicker-custom{background-color:var(--ds-bgColor-white-active)}.ds-datepicker-custom__owcjsm__day--other-month.sc-ds-datepicker-custom:not(.ds-datepicker-custom__owcjsm__day--disabled){color:var(--ds-textColor-secondary)}.ds-datepicker-custom__owcjsm__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__owcjsm__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__owcjsm__day--disabled){background-color:var(--ds-bgColor-primary);color:var(--ds-textColor-white);font-weight:var(--ds-fontWeight-bold)}.ds-datepicker-custom__owcjsm__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__owcjsm__day--disabled):hover{background-color:var(--ds-bgColor-primary-hover)}.ds-datepicker-custom__owcjsm__day--selected.sc-ds-datepicker-custom:not(.ds-datepicker-custom__owcjsm__day--disabled):active{background-color:var(--ds-bgColor-primary-active)}.ds-datepicker-custom__owcjsm__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__owcjsm__footer.sc-ds-datepicker-custom{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.ds-datepicker-custom__owcjsm__footer-button--left.sc-ds-datepicker-custom{margin-right:auto}.ds-datepicker-custom__owcjsm__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: 'f50a54b4a75be645e9ec4170d78d355e687854aa' }, index.h(this.DsControlLabel, { key: '02d53ca7184f69f926da21312f1f37d9cfcca1a8', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: 'c8df34b031c4cc2788782a2e60ef5196fd2e33e2', name: "label" }), index.h("slot", { key: '1eafd8431a6194526e887a481d0b9d6bef4e2a2c', name: "assistiveText" })), index.h("div", { key: '775ab129c975921cc3e4037fa78309d33dcf9c16', class: customDatepickerClass }, index.h(this.DsTextInputTag, { key: '545df59b00c7d360fad87b7fb9cf935fcd550dc9', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? 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: 'df19e3f5a3393cb03dac916477aefce760c2956d', ref: el => (this.calendarButtonRef = el), slot: "suffix", class: `${customDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.handleCalendarButtonClick, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: this.calendarButtonAriaLabel, dsInInput: true, tabindex: this.dsDisabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false' }, index.h(this.DsIconTag, { key: 'daa9f84beefcc3d749da4f74194e86cb4d470fd8', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (index.h("div", { key: '565f183552fa4e1a19818781fab3af3eb6ea4e81', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, index.h(this.DsFeedbackTag, { key: 'd7ac342060ead1022a6a9745dee33d26bbd01d5f', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), index.h("div", { key: '8767bce23f72bb8f3628738f09ac691e835eed30', class: `${customDatepickerClass}__header` }, index.h("div", { key: '619d9638b98a6a97a6663745dee6d6061d3464da', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, index.h(this.DsSelectTag, { key: '3a88064bdd9e07968620f4a232c1a5fe62e3badf', 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: '1fa63a0d54a567014198d019c0d97e2029447b46', 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: 'd1930fcfcf54ff13ee21884e2d4a468993c7d1d0', class: `${customDatepickerClass}__navigation` }, index.h(this.DsButtonTag, { key: '608d0d4bede655fa638502315b9abc4c85a94eb5', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, index.h(this.DsIconTag, { key: '024a3684755799dff974def9dbd48f9212df47db', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), index.h(this.DsButtonTag, { key: 'c33384d1a14519377e6cd2005c4b9eb94ad64c24', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: datepickerUtils.nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, index.h(this.DsIconTag, { key: 'c6e5c82f8df387ff482b66302bded85b25ea914d', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), index.h("div", { class: index$1.classNames(`${customDatepickerClass}__calendar`, {
+        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`, {
                 [`${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: '68fbd73bf8bb6b48876e17b050033906b9f12e8e', 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: '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) => {
             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: '4e17847ce9974195e29ce614bf577f88187bb459', class: `${customDatepickerClass}__footer` }, index.h(this.DsButtonTag, { key: '459d40a68e064e37c09201e97c6dcc96298fb98b', dsVariant: "supplementary", dsText: datepickerUtils.showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), index.h(this.DsButtonTag, { key: '43cfd6c39c2e7158d8ba33133ed469dd8d2cb9a3', dsVariant: "supplementary", dsText: datepickerUtils.clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && index.h(this.DsInputValidityTag, { key: '9a8c56751eede8868cdf94ebce9ab508f3db5237', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), 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" })));
     }
     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__oJU1eo__input-container.sc-ds-datepicker-native .ds-datepicker-native__oJU1eo__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__oJU1eo__input-container.sc-ds-datepicker-native .ds-datepicker-native__oJU1eo__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__oJU1eo__input-container.sc-ds-datepicker-native .ds-datepicker-native__oJU1eo__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__oJU1eo__input-container.sc-ds-datepicker-native .ds-datepicker-native__oJU1eo__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__oJU1eo__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__oJU1eo.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__oJU1eo--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__oJU1eo--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__oJU1eo--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__oJU1eo--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__oJU1eo--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__oJU1eo--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__oJU1eo.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__oJU1eo--disabled,.ds-datepicker-native__oJU1eo--readonly.sc-ds-datepicker-native,.ds-datepicker-native__oJU1eo--invalid.sc-ds-datepicker-native,.ds-datepicker-native__oJU1eo.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__oJU1eo.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__oJU1eo--invalid,.ds-datepicker-native__oJU1eo--disabled.sc-ds-datepicker-native,.ds-datepicker-native__oJU1eo--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__oJU1eo.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__oJU1eo.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__oJU1eo.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__oJU1eo__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__oJU1eo__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__oJU1eo__input-container.sc-ds-datepicker-native .ds-datepicker-native__oJU1eo__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__owcjsm__input-container.sc-ds-datepicker-native .ds-datepicker-native__owcjsm__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__owcjsm__input-container.sc-ds-datepicker-native .ds-datepicker-native__owcjsm__input.sc-ds-datepicker-native:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-datepicker-native__owcjsm__input-container.sc-ds-datepicker-native .ds-datepicker-native__owcjsm__input.sc-ds-datepicker-native::-webkit-calendar-picker-indicator{display:none}.ds-datepicker-native__owcjsm__input-container.sc-ds-datepicker-native .ds-datepicker-native__owcjsm__input.sc-ds-datepicker-native::-webkit-clear-button{display:none}.ds-datepicker-native__owcjsm__calendar-icon.sc-ds-datepicker-native{height:100%}.ds-datepicker-native__owcjsm.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__owcjsm--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__owcjsm--readonly.sc-ds-datepicker-native{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}.ds-datepicker-native__owcjsm--invalid.sc-ds-datepicker-native{background-color:var(--ds-bgColor-danger);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__owcjsm--invalid.sc-ds-datepicker-native:active{background-color:var(--ds-bgColor-danger-active);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__owcjsm--invalid.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__owcjsm--invalid:focus-within){background-color:var(--ds-bgColor-danger-hover);border-color:var(--ds-borderColor-danger)}.ds-datepicker-native__owcjsm.sc-ds-datepicker-native:hover:not(.ds-datepicker-native__owcjsm--disabled,.ds-datepicker-native__owcjsm--readonly.sc-ds-datepicker-native,.ds-datepicker-native__owcjsm--invalid.sc-ds-datepicker-native,.ds-datepicker-native__owcjsm.sc-ds-datepicker-native:focus-within){border-color:var(--ds-borderColor-default);background-color:var(--ds-bgColor-white-hover)}.ds-datepicker-native__owcjsm.sc-ds-datepicker-native:focus-within:not(.ds-datepicker-native__owcjsm--invalid,.ds-datepicker-native__owcjsm--disabled.sc-ds-datepicker-native,.ds-datepicker-native__owcjsm--readonly).sc-ds-datepicker-native{border-color:var(--ds-borderColor-primary)}.ds-datepicker-native__owcjsm.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__owcjsm.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__owcjsm.sc-ds-datepicker-native{justify-content:space-between}@supports (-moz-appearance: none){.ds-datepicker-native__owcjsm__calendar-icon.sc-ds-datepicker-native{display:none !important}}.ds-datepicker-native__owcjsm__input-container.sc-ds-datepicker-native{width:100% !important}@supports (-webkit-touch-callout: none){.ds-datepicker-native__owcjsm__input-container.sc-ds-datepicker-native .ds-datepicker-native__owcjsm__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: '64547375f3f38953341f08abcac3f88818308e6d' }, index.h(DsControlLabel, { key: '56b0513bc7f859e7f2ee9c9285444af70688ec29', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: '5cce8836ef66ce7500952ddb240bcf8196f890f6', name: "label" })), index.h("div", { key: '5eb2ea20b1452f9e9a814c06ad8e6906871968c6', class: index$1.classNames(`${baseClass}`, {
+        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}`, {
                 [`${baseClass}--disabled`]: this.dsDisabled,
                 [`${baseClass}--readonly`]: this.dsReadonly,
                 [`${baseClass}--invalid`]: !!this.dsErrorText,
-            }) }, index.h("div", { key: 'e0fc6ed13c20ee5b134c8d439c2266d53b654a74', class: inputContainerClass }, index.h("input", { key: '0efc0702b90470ce367bc03ed6b2812421538e3b', ref: el => {
+            }) }, index.h("div", { key: 'a61e796b2ec2838200475b47059ee18a5f2196da', class: inputContainerClass }, index.h("input", { key: 'd5ceceb10138ebc2c02949e52c122a38201fd240', 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: '5cd4723dc8f4cd4c0e7136ceaf4af00b36dc42a4', 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: 'aa3a6f734b716d43ca8b2c9f1abbe7e0baa55f5d', slot: "prefix", dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true })))), index.h(this.DsInputValidityTag, { key: 'f8aace43f6471b7e43826b50a3f666087b802bbd', id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" })));
+            }, "aria-invalid": this.dsErrorText ? 'true' : 'false', "aria-describedby": ariaDescribedbyValue, "aria-controls": this.dsAriaControls })), this.dsShowCalendarIcon && (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" })));
     }
     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__oJU1eo.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__owcjsm.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: '373c32690d8fee31f5ab6e51ae3031eb62eaf2a3' }, index.h(this.DsControlLabel, { key: '3b4955ab73606e5256f09d20d0fb749d2fdbe7f7', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, index.h("slot", { key: '4b21ccaa7cf52648136b9208e0324b0d796cbc8c', name: "label" })), index.h("div", { key: 'e9607a5c7383087743f81b49dde499b83732ff17', class: simpleClass }, index.h(this.DsTextInputTag, { key: '6a470db20b702027069db2844ee549ce78dee81b', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? 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: '8f2e9e843812b3cc86c1e52373b7d27642e742ba', id: validityId, dsText: this.validityText, dsType: "error" })));
+        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" })));
     }
     static get watchers() { return {
         "hasFocus": [{

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
-var utils = require('./utils-D94MuKO1.js');
-var cx = require('./cx-uuGgi31h.js');
-var datepickerUtils = require('./datepickerUtils-DfuEvRH4.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var index = require('./index-BBBTmSCS.js');
+var utils = require('./utils-DWrHry7C.js');
+var cx = require('./cx-BS6nqACL.js');
+var datepickerUtils = require('./datepickerUtils-D3VxgASh.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
 const dsDatepickerCss = () => ``;
 

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-uuGgi31h.js');
+var cx = require('./cx-BS6nqACL.js');
 
-const dsDividerCss = () => `.ds-no-style-leak.sc-ds-divider *.sc-ds-divider{all:unset;box-sizing:border-box;display:block}.ds-divider__oJU1eo.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__oJU1eo--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__oJU1eo--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__oJU1eo--decorative.sc-ds-divider{border-color:var(--ds-borderColor-light)}.ds-divider__oJU1eo--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__owcjsm.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__owcjsm--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__owcjsm--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__owcjsm--decorative.sc-ds-divider{border-color:var(--ds-borderColor-light)}.ds-divider__owcjsm--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: 'c32b42d11ec24625a6d3718a64c4f3c58bf1a07e', style: hostStyle }, index.h("hr", { key: '123356c89917b559636f32027ad4e12d72aaaac5', class: index$1.classNames(baseClass, `${baseClass}--${this.dsVariant}`, `${baseClass}--${this.dsOrientation}`), "aria-hidden": this.dsVariant === 'decorative' ? 'true' : undefined })));
+        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 })));
     }
 };
 DsDivider.style = dsDividerCss();

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

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CSBE5f9n.js');
+var index = require('./index-BBBTmSCS.js');
 var index$1 = require('./index-Bp6Dd2i1.js');
-var cx = require('./cx-uuGgi31h.js');
-var utils = require('./utils-D94MuKO1.js');
-var componentFactory = require('./componentFactory-tVOtxh8F.js');
-require('./store-Dse4EhGQ.js');
+var cx = require('./cx-BS6nqACL.js');
+var utils = require('./utils-DWrHry7C.js');
+var componentFactory = require('./componentFactory-izBTCdjj.js');
+require('./store-C9xOI2Br.js');
 
-const dsGridCss = () => `.ds-grid__oJU1eo.ds-grid__oJU1eo--container{max-width:calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));margin:0 var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__oJU1eo.ds-grid__oJU1eo--container{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid__oJU1eo.ds-grid__oJU1eo--container{margin:0 auto}}.ds-grid__oJU1eo.ds-grid__oJU1eo__flex{display:flex;flex-flow:wrap;min-width:0;box-sizing:border-box;gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__flex{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__flex{gap:var(--ds-spacing-layout-small)}}.ds-grid__oJU1eo.ds-grid__oJU1eo__flex:not(.ds-grid__oJU1eo.ds-grid__oJU1eo__flex--container){width:calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile))}@media (min-width: 30rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__flex:not(.ds-grid__oJU1eo.ds-grid__oJU1eo__flex--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 45rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__flex:not(.ds-grid__oJU1eo.ds-grid__oJU1eo__flex--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 75rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__flex:not(.ds-grid__oJU1eo.ds-grid__oJU1eo__flex--container){width:calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop))}}.ds-grid__oJU1eo.ds-grid__oJU1eo__grid.ds-grid__oJU1eo--container{display:grid;grid-template-columns:repeat(var(--ds-columns-mobile), 1fr);gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid.ds-grid__oJU1eo--container{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid.ds-grid__oJU1eo--container{gap:var(--ds-spacing-layout-small)}}@media (min-width: 30rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid.ds-grid__oJU1eo--container{grid-template-columns:repeat(var(--ds-columns-tablet), 1fr)}}@media (min-width: 75rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid.ds-grid__oJU1eo--container{grid-template-columns:repeat(var(--ds-columns-desktop), 1fr)}}.ds-grid__oJU1eo.ds-grid__oJU1eo__grid{grid-column:span var(--ds-size-mobile);grid-row:span var(--ds-row-span-mobile, 1)}@supports (grid-column: span var(--ds-size-mobile)){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid[style*="--ds-size-mobile: -1"]{grid-column:1/-1}}@media (min-width: 30rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid{grid-column:span var(--ds-size-tablet);grid-row:span var(--ds-row-span-tablet, 1)}@supports (grid-column: span var(--ds-size-tablet)){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid[style*="--ds-size-tablet: -1"]{grid-column:1/-1}.ds-grid__oJU1eo.ds-grid__oJU1eo__grid:not([style*="--ds-size-tablet: -1"]){grid-column:span var(--ds-size-tablet)}}}@media (min-width: 75rem){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid{grid-column:span var(--ds-size-desktop);grid-row:span var(--ds-row-span-desktop, 1)}@supports (grid-column: span var(--ds-size-desktop)){.ds-grid__oJU1eo.ds-grid__oJU1eo__grid[style*="--ds-size-desktop: -1"]{grid-column:1/-1}.ds-grid__oJU1eo.ds-grid__oJU1eo__grid:not([style*="--ds-size-desktop: -1"]){grid-column:span var(--ds-size-desktop)}}}`;
+const dsGridCss = () => `.ds-grid__owcjsm.ds-grid__owcjsm--container{max-width:calc(var(--ds-breakpoint-xLarge) - var(--ds-spacing-layout-large));margin:0 var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__owcjsm.ds-grid__owcjsm--container{margin:0 var(--ds-spacing-layout-small)}}@media (min-width: 90rem){.ds-grid__owcjsm.ds-grid__owcjsm--container{margin:0 auto}}.ds-grid__owcjsm.ds-grid__owcjsm__flex{display:flex;flex-flow:wrap;min-width:0;box-sizing:border-box;gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__owcjsm.ds-grid__owcjsm__flex{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__owcjsm.ds-grid__owcjsm__flex{gap:var(--ds-spacing-layout-small)}}.ds-grid__owcjsm.ds-grid__owcjsm__flex:not(.ds-grid__owcjsm.ds-grid__owcjsm__flex--container){width:calc(100% * var(--ds-size-mobile) / var(--ds-parent-size-mobile) - (var(--ds-parent-size-mobile) - var(--ds-size-mobile)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-mobile))}@media (min-width: 30rem){.ds-grid__owcjsm.ds-grid__owcjsm__flex:not(.ds-grid__owcjsm.ds-grid__owcjsm__flex--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-2xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 45rem){.ds-grid__owcjsm.ds-grid__owcjsm__flex:not(.ds-grid__owcjsm.ds-grid__owcjsm__flex--container){width:calc(100% * var(--ds-size-tablet) / var(--ds-parent-size-tablet) - (var(--ds-parent-size-tablet) - var(--ds-size-tablet)) * var(--ds-spacing-layout-xSmall) / var(--ds-parent-size-tablet))}}@media (min-width: 75rem){.ds-grid__owcjsm.ds-grid__owcjsm__flex:not(.ds-grid__owcjsm.ds-grid__owcjsm__flex--container){width:calc(100% * var(--ds-size-desktop) / var(--ds-parent-size-desktop) - (var(--ds-parent-size-desktop) - var(--ds-size-desktop)) * var(--ds-spacing-layout-small) / var(--ds-parent-size-desktop))}}.ds-grid__owcjsm.ds-grid__owcjsm__grid.ds-grid__owcjsm--container{display:grid;grid-template-columns:repeat(var(--ds-columns-mobile), 1fr);gap:var(--ds-spacing-layout-2xSmall)}@media (min-width: 45rem){.ds-grid__owcjsm.ds-grid__owcjsm__grid.ds-grid__owcjsm--container{gap:var(--ds-spacing-layout-xSmall)}}@media (min-width: 75rem){.ds-grid__owcjsm.ds-grid__owcjsm__grid.ds-grid__owcjsm--container{gap:var(--ds-spacing-layout-small)}}@media (min-width: 30rem){.ds-grid__owcjsm.ds-grid__owcjsm__grid.ds-grid__owcjsm--container{grid-template-columns:repeat(var(--ds-columns-tablet), 1fr)}}@media (min-width: 75rem){.ds-grid__owcjsm.ds-grid__owcjsm__grid.ds-grid__owcjsm--container{grid-template-columns:repeat(var(--ds-columns-desktop), 1fr)}}.ds-grid__owcjsm.ds-grid__owcjsm__grid{grid-column:span var(--ds-size-mobile);grid-row:span var(--ds-row-span-mobile, 1)}@supports (grid-column: span var(--ds-size-mobile)){.ds-grid__owcjsm.ds-grid__owcjsm__grid[style*="--ds-size-mobile: -1"]{grid-column:1/-1}}@media (min-width: 30rem){.ds-grid__owcjsm.ds-grid__owcjsm__grid{grid-column:span var(--ds-size-tablet);grid-row:span var(--ds-row-span-tablet, 1)}@supports (grid-column: span var(--ds-size-tablet)){.ds-grid__owcjsm.ds-grid__owcjsm__grid[style*="--ds-size-tablet: -1"]{grid-column:1/-1}.ds-grid__owcjsm.ds-grid__owcjsm__grid:not([style*="--ds-size-tablet: -1"]){grid-column:span var(--ds-size-tablet)}}}@media (min-width: 75rem){.ds-grid__owcjsm.ds-grid__owcjsm__grid{grid-column:span var(--ds-size-desktop);grid-row:span var(--ds-row-span-desktop, 1)}@supports (grid-column: span var(--ds-size-desktop)){.ds-grid__owcjsm.ds-grid__owcjsm__grid[style*="--ds-size-desktop: -1"]{grid-column:1/-1}.ds-grid__owcjsm.ds-grid__owcjsm__grid:not([style*="--ds-size-desktop: -1"]){grid-column:span var(--ds-size-desktop)}}}`;
 
 const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-grid', { transparentForRootTracking: true })) {
     constructor(hostRef) {
@@ -62,7 +62,7 @@ const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-g
             [`${baseClass}--container`]: this.dsContainer,
             [`${baseClass}__${this.dsType}`]: this.dsType,
         });
-        return (index.h(index.Host, { key: '1968d1901faaa000283eca19c576ac785eae700f', class: classes, style: {
+        return (index.h(index.Host, { key: '5a7344f82286b6a074003c96c6cd0542341abb7e', class: classes, style: {
                 ...(this.dsType === 'flex'
                     ? {
                         '--ds-parent-size-mobile': `${this.dsParentSizeMobile}`,
@@ -91,7 +91,7 @@ const DsGrid = class extends index.Mixin(componentFactory.componentFactory('ds-g
                         '--ds-row-span-tablet': this.dsRowSpanTablet ? `${this.dsRowSpanTablet}` : undefined,
                         '--ds-row-span-desktop': this.dsRowSpanDesktop ? `${this.dsRowSpanDesktop}` : undefined,
                     }),
-            } }, index.h("slot", { key: 'e7351f15cc350c4a5480ccb8585a24b6c784741e' })));
+            } }, index.h("slot", { key: '87f19783c5395703efdb643a83c322549714381a' })));
     }
 };
 utils.declareComponentDependencies([index.h("ds-grid", null)]);