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

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

@@ -8,35 +8,35 @@
   display: inline-block;
 }
 
-:host(.ds-combobox__pA2cRq__host) {
+:host(.ds-combobox__0apwgA__host) {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host(.ds-combobox__pA2cRq__host) {
+  :host(.ds-combobox__0apwgA__host) {
     width: 20rem;
   }
 }
 
 @media (min-width: 30rem) {
-  :host(.ds-combobox__pA2cRq__host--full-width) {
+  :host(.ds-combobox__0apwgA__host--full-width) {
     width: 100%;
   }
 }
 
-:host > .ds-combobox__pA2cRq {
+:host > .ds-combobox__0apwgA {
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
-.ds-combobox__pA2cRq {
+.ds-combobox__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-combobox__pA2cRq__input-container {
+.ds-combobox__0apwgA__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -48,37 +48,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__pA2cRq__input-container--disabled {
+.ds-combobox__0apwgA__input-container--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-combobox__pA2cRq__input-container--disabled .ds-combobox__pA2cRq__input-container__toggle-button {
+.ds-combobox__0apwgA__input-container--disabled .ds-combobox__0apwgA__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__pA2cRq__input-container--invalid {
+.ds-combobox__0apwgA__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__pA2cRq__input-container--invalid:not(.ds-combobox__pA2cRq__input-container--open):not(.ds-combobox__pA2cRq__input-container--disabled):hover {
+.ds-combobox__0apwgA__input-container--invalid:not(.ds-combobox__0apwgA__input-container--open):not(.ds-combobox__0apwgA__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__pA2cRq__input-container--invalid:not(.ds-combobox__pA2cRq__input-container--open):not(.ds-combobox__pA2cRq__input-container--disabled):active {
+.ds-combobox__0apwgA__input-container--invalid:not(.ds-combobox__0apwgA__input-container--open):not(.ds-combobox__0apwgA__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__pA2cRq__input-container:active:not(.ds-combobox__pA2cRq__input-container--invalid, .ds-combobox__pA2cRq__input-container--disabled, .ds-combobox__pA2cRq__input-container--open) {
+.ds-combobox__0apwgA__input-container:active:not(.ds-combobox__0apwgA__input-container--invalid, .ds-combobox__0apwgA__input-container--disabled, .ds-combobox__0apwgA__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__pA2cRq__input-container:not(.ds-combobox__pA2cRq__input-container--open, .ds-combobox__pA2cRq__input-container:has(> .ds-combobox__pA2cRq__input-container__clear-button > button:focus), .ds-combobox__pA2cRq__input-container--invalid, .ds-combobox__pA2cRq__input-container--disabled):hover {
+.ds-combobox__0apwgA__input-container:not(.ds-combobox__0apwgA__input-container--open, .ds-combobox__0apwgA__input-container:has(> .ds-combobox__0apwgA__input-container__clear-button > button:focus), .ds-combobox__0apwgA__input-container--invalid, .ds-combobox__0apwgA__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__pA2cRq__input-container:has(> .ds-combobox__pA2cRq__input-container__input:focus) {
+.ds-combobox__0apwgA__input-container:has(> .ds-combobox__0apwgA__input-container__input:focus) {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-combobox__pA2cRq__input-container__input {
+.ds-combobox__0apwgA__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -92,52 +92,52 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__pA2cRq__input-container__input::placeholder {
+.ds-combobox__0apwgA__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__pA2cRq__input-container__input:disabled {
+.ds-combobox__0apwgA__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__pA2cRq__input-container__input:disabled::placeholder {
+.ds-combobox__0apwgA__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__pA2cRq__input-container__input:focus {
+.ds-combobox__0apwgA__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__pA2cRq__input-container__icon {
+.ds-combobox__0apwgA__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__pA2cRq__input-container__icon + .ds-combobox__pA2cRq__input-container__input {
+.ds-combobox__0apwgA__input-container__icon + .ds-combobox__0apwgA__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__pA2cRq__input-container__badge-container {
+.ds-combobox__0apwgA__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__pA2cRq__input-container__badge-container--padded {
+.ds-combobox__0apwgA__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__pA2cRq__input-container__clear-button, .ds-combobox__pA2cRq__input-container__toggle-button {
+.ds-combobox__0apwgA__input-container__clear-button, .ds-combobox__0apwgA__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__pA2cRq__input-container__clear-button:has(button:focus) {
+.ds-combobox__0apwgA__input-container__clear-button:has(button:focus) {
   box-shadow: inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * -1 * 2);
 }
-.ds-combobox__pA2cRq__input-container__toggle-button {
+.ds-combobox__0apwgA__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__pA2cRq__input-container__toggle-button:focus {
+.ds-combobox__0apwgA__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__pA2cRq__input-container__toggle-button__icon {
+.ds-combobox__0apwgA__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -146,7 +146,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__pA2cRq__options-container {
+.ds-combobox__0apwgA__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -156,11 +156,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__pA2cRq__options-container--open {
+.ds-combobox__0apwgA__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__pA2cRq__options-container__options {
+.ds-combobox__0apwgA__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -169,7 +169,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__pA2cRq__options-container__options__inner {
+.ds-combobox__0apwgA__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -180,7 +180,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__pA2cRq__options-container__options__inner__top-scrim, .ds-combobox__pA2cRq__options-container__options__inner__bottom-scrim {
+.ds-combobox__0apwgA__options-container__options__inner__top-scrim, .ds-combobox__0apwgA__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -190,20 +190,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__pA2cRq__options-container__options__inner__top-scrim--visible, .ds-combobox__pA2cRq__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__0apwgA__options-container__options__inner__top-scrim--visible, .ds-combobox__0apwgA__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__pA2cRq__options-container__options__inner__top-scrim {
+.ds-combobox__0apwgA__options-container__options__inner__top-scrim {
   top: 0;
   background: linear-gradient(to bottom, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }
-.ds-combobox__pA2cRq__options-container__options__inner__top-scrim--dark {
+.ds-combobox__0apwgA__options-container__options__inner__top-scrim--dark {
   height: calc(var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall));
   background: none;
   margin-top: calc(-1 * (var(--ds-fontSize-14) * var(--ds-lineHeight-large) + 2 * var(--ds-spacing-2xSmall)));
   box-shadow: var(--ds-shadow-overflow);
 }
-.ds-combobox__pA2cRq__options-container__options__inner__bottom-scrim {
+.ds-combobox__0apwgA__options-container__options__inner__bottom-scrim {
   bottom: 0;
   background: linear-gradient(to top, var(--ds-bgColor-white) 0%, var(--ds-overlay-white-00) 100%);
 }

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

@@ -67,7 +67,6 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
     hasFocus = false;
     feedback = [];
     forceUpdateInputValue = false;
-    preventImmediateOpen = false;
     get badgeId() {
         return `${this.dsId}-badge`;
     }
@@ -134,6 +133,19 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
             description: option.dsDescription || null,
         })));
     }
+    setValueMissingValidity = (condition) => {
+        this.internals?.setValidity({ valueMissing: condition }, 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) || [];
@@ -151,10 +163,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
             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();
@@ -295,7 +304,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
     componentDidLoad() {
         this.componentMounted();
         this.updateScrimClasses();
-        this.internals?.setValidity({ valueMissing: this.dsRequired && (!this.dsValue || (Array.isArray(this.dsValue) && this.dsValue.length === 0)) }, 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)
@@ -358,7 +367,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
         if (!this.isMultiple) {
             this.unsetActiveOption();
         }
-        this.internals?.setValidity({ valueMissing: this.dsRequired && options.length === 0 }, atLeastOneOption(), this.inputRef);
+        this.setValueMissingValidity(this.dsRequired && options.length === 0);
         this.selectedOptions = options;
     };
     unsetActiveOption = () => {
@@ -506,7 +515,6 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                 let closeEvent = undefined;
                 if (hadActiveOption && event.shiftKey) {
                     closeEvent = 'focus';
-                    this.preventImmediateOpen = this.isOpen;
                 }
                 this.closeCombobox(closeEvent);
                 break;
@@ -590,11 +598,6 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
     handleFocus = () => {
         if (this.dsDisabled)
             return;
-        if (this.selectedOptions?.length === 0 && !this.preventImmediateOpen) {
-            this.openCombobox();
-            return;
-        }
-        this.preventImmediateOpen = false;
         this.inputRef?.select();
     };
     handleToggleButtonClick = async (event) => {
@@ -1525,6 +1528,9 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "dsRequired",
+                "methodName": "dsRequiredObserver"
+            }, {
                 "propName": "selectedOptions",
                 "methodName": "selectedOptionsObserver"
             }, {

package/dist/collection/components/01-base-components/ds-control-label/ds-control-label.css

@@ -1,4 +1,4 @@
-.ds-control-label__pA2cRq__label {
+.ds-control-label__0apwgA__label {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -8,12 +8,12 @@
   color: var(--ds-textColor-default);
 }
 
-.ds-control-label__pA2cRq {
+.ds-control-label__0apwgA {
   font-family: var(--ds-fontFamily-body);
   display: flex;
   flex-direction: column;
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-control-label__pA2cRq:empty {
+.ds-control-label__0apwgA:empty {
   display: none;
 }

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

@@ -46,7 +46,7 @@ export class DsControlLabel extends Mixin(componentFactory('ds-control-label'))
     };
     render() {
         const baseClass = cx('ds-control-label');
-        return (h("div", { key: '81a17445cf574cfde472563e206ad0bece9060a2', class: baseClass }, h("slot", { key: 'fc96f88cb8f9237539b0e957b2cac9a3004e8b35', name: "label" }, this.dsLabel && (h("label", { key: 'd5b999096ba9c9d1024b9ce483428318e523cd5f', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '090dda162fe25799c5cbdc36b7250d0b2a471fb0', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'e54915bf41862e7fbd94e724158f642b4ebd8642', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '4eef6a04158a1314dd656f021d648c00a62dcb9d', id: this.dsVisuallyHiddenAssistiveTextId, dsTag: "span" }, this.dsVisuallyHiddenAssistiveText)))));
+        return (h("div", { key: '9ab9daf97653af241ac7cbc66ac3322b858301a4', class: baseClass }, h("slot", { key: '77f0bc3fc7fe3c1f324c251346e364b4e2826b85', name: "label" }, this.dsLabel && (h("label", { key: '641d9efbcc75e67a4640d490353424b91318215c', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '1e832ae93b303f972a15c330ecfee4e14b9bd641', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '4143fbf6f6d9335ac42cfa8b7c0339865f969673', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '772ac5477c5e517c26cad07b3709219071de4b23', id: this.dsVisuallyHiddenAssistiveTextId, dsTag: "span" }, this.dsVisuallyHiddenAssistiveText)))));
     }
     static get is() { return "ds-control-label"; }
     static get originalStyleUrls() {

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

@@ -14,11 +14,11 @@
   position: relative;
 }
 
-.ds-datepicker-custom__pA2cRq__calendar-icon {
+.ds-datepicker-custom__0apwgA__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-custom__pA2cRq {
+.ds-datepicker-custom__0apwgA {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -26,15 +26,15 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-datepicker-custom__pA2cRq__calendar-icon {
+.ds-datepicker-custom__0apwgA__calendar-icon {
   margin-right: calc(-1 * var(--ds-spacing-xSmall));
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-custom__pA2cRq__calendar-icon {
+  .ds-datepicker-custom__0apwgA__calendar-icon {
     display: inline-flex;
   }
 }
-.ds-datepicker-custom__pA2cRq__picker {
+.ds-datepicker-custom__0apwgA__picker {
   position: absolute;
   top: 100%;
   width: 100%;
@@ -47,14 +47,14 @@
   z-index: 1000;
   padding: var(--ds-spacing-xSmall) var(--ds-spacing-small);
 }
-.ds-datepicker-custom__pA2cRq__header {
+.ds-datepicker-custom__0apwgA__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--ds-spacing-small);
   margin-bottom: var(--ds-spacing-xSmall);
 }
-.ds-datepicker-custom__pA2cRq__selects {
+.ds-datepicker-custom__0apwgA__selects {
   --ds-select-borderWidth: 0;
   --ds-select-narrow-width: auto;
   --ds-select-wide-width: auto;
@@ -70,23 +70,23 @@
   gap: var(--ds-spacing-xSmall);
   flex: 1;
 }
-.ds-datepicker-custom__pA2cRq__navigation {
+.ds-datepicker-custom__0apwgA__navigation {
   --ds-button-min-height: 2rem;
   --ds-button-min-width: 2rem;
   display: flex;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__pA2cRq__calendar {
+.ds-datepicker-custom__0apwgA__calendar {
   --ds-button-min-height: var(--ds-spacing-large);
   --ds-button-min-width: var(--ds-spacing-large);
   display: flex;
   flex-direction: column;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__pA2cRq__calendar--prev {
+.ds-datepicker-custom__0apwgA__calendar--prev {
   animation: slide-in-from-left 250ms ease-out;
 }
-.ds-datepicker-custom__pA2cRq__calendar--next {
+.ds-datepicker-custom__0apwgA__calendar--next {
   animation: slide-in-from-right 250ms ease-out;
 }
 @keyframes slide-in-from-left {
@@ -109,25 +109,25 @@
     transform: translateX(0);
   }
 }
-.ds-datepicker-custom__pA2cRq__weekday-row, .ds-datepicker-custom__pA2cRq__day-row {
+.ds-datepicker-custom__0apwgA__weekday-row, .ds-datepicker-custom__0apwgA__day-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__pA2cRq__weekday-row [role=gridcell], .ds-datepicker-custom__pA2cRq__day-row [role=gridcell] {
+.ds-datepicker-custom__0apwgA__weekday-row [role=gridcell], .ds-datepicker-custom__0apwgA__day-row [role=gridcell] {
   display: contents;
 }
-.ds-datepicker-custom__pA2cRq__weekday, .ds-datepicker-custom__pA2cRq__day {
+.ds-datepicker-custom__0apwgA__weekday, .ds-datepicker-custom__0apwgA__day {
   aspect-ratio: 1;
   line-height: var(--ds-button-min-height);
   text-align: center;
 }
-.ds-datepicker-custom__pA2cRq__weekday {
+.ds-datepicker-custom__0apwgA__weekday {
   font-weight: var(--ds-fontWeight-semibold);
   font-size: var(--ds-fontSize-12);
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__pA2cRq__day {
+.ds-datepicker-custom__0apwgA__day {
   background: none;
   border: none;
   font-family: var(--ds-fontFamily-body);
@@ -136,51 +136,51 @@
   line-height: var(--ds-lineHeight-large);
   color: var(--ds-textColor-default);
 }
-.ds-datepicker-custom__pA2cRq__day:focus-visible {
+.ds-datepicker-custom__0apwgA__day:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-datepicker-custom__pA2cRq__day:hover:not(.ds-datepicker-custom__pA2cRq__day--disabled, .ds-datepicker-custom__pA2cRq__day--selected) {
+.ds-datepicker-custom__0apwgA__day:hover:not(.ds-datepicker-custom__0apwgA__day--disabled, .ds-datepicker-custom__0apwgA__day--selected) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-custom__pA2cRq__day:active:not(.ds-datepicker-custom__pA2cRq__day--disabled, .ds-datepicker-custom__pA2cRq__day--selected) {
+.ds-datepicker-custom__0apwgA__day:active:not(.ds-datepicker-custom__0apwgA__day--disabled, .ds-datepicker-custom__0apwgA__day--selected) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-datepicker-custom__pA2cRq__day--other-month:not(.ds-datepicker-custom__pA2cRq__day--disabled) {
+.ds-datepicker-custom__0apwgA__day--other-month:not(.ds-datepicker-custom__0apwgA__day--disabled) {
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__pA2cRq__day--today {
+.ds-datepicker-custom__0apwgA__day--today {
   font-weight: var(--ds-fontWeight-bold);
   text-decoration: underline;
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-datepicker-custom__pA2cRq__day--selected:not(.ds-datepicker-custom__pA2cRq__day--disabled) {
+.ds-datepicker-custom__0apwgA__day--selected:not(.ds-datepicker-custom__0apwgA__day--disabled) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-datepicker-custom__pA2cRq__day--selected:not(.ds-datepicker-custom__pA2cRq__day--disabled):hover {
+.ds-datepicker-custom__0apwgA__day--selected:not(.ds-datepicker-custom__0apwgA__day--disabled):hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-datepicker-custom__pA2cRq__day--selected:not(.ds-datepicker-custom__pA2cRq__day--disabled):active {
+.ds-datepicker-custom__0apwgA__day--selected:not(.ds-datepicker-custom__0apwgA__day--disabled):active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-datepicker-custom__pA2cRq__day--disabled {
+.ds-datepicker-custom__0apwgA__day--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-datepicker-custom__pA2cRq__footer {
+.ds-datepicker-custom__0apwgA__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }
-.ds-datepicker-custom__pA2cRq__footer-button--left {
+.ds-datepicker-custom__0apwgA__footer-button--left {
   margin-right: auto;
 }
-.ds-datepicker-custom__pA2cRq__footer-button--right {
+.ds-datepicker-custom__0apwgA__footer-button--right {
   margin-left: auto;
 }

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

@@ -587,11 +587,11 @@ export class DsDatepickerCustom {
         const hiddenAssistiveTextId = this.dsHiddenAssistiveText ? `${this.dsId}-hidden-assistive` : undefined;
         const validityId = this.validityText ? `${this.dsId}-validity` : undefined;
         const ariaDescribedbyValue = this.dsAriaDescribedby || undefined;
-        return (h("div", { key: '1a2bbdff99ee602a19e699a7fcb28b1b95d501db' }, 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 }, h("slot", { key: 'b52f403b9135f80ccff3be99115deb049e21d920', name: "label" }), h("slot", { key: 'dfa38760670974f2811888c4d0198e4f5e8c8238', name: "assistiveText" })), h("div", { key: '50896b1dba1cabfc398ea89d53294e897724442b', class: customDatepickerClass }, 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 ?? formatDisplayDate(this.selectedDate), dsPlaceholder: this.dsPlaceholder, dsInvalid: !!this.validityText, dsFullWidth: true, dsAriaDescribedby: [ariaDescribedbyValue, assistiveTextId, hiddenAssistiveTextId, validityId].filter(Boolean).join(' ') || undefined, onDsInput: this.handleInputChange, onDsChange: (e) => e.stopPropagation(), onDsValidity: this.handleValidityEvent(this.dsValidity), onDsSubmitInvalid: this.handleValidityEvent(this.dsSubmitInvalid) }, h(this.DsButtonTag, { key: '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' }, h(this.DsIconTag, { key: 'c6ede8147d9e530c591cd83559a776afc9451dad', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: 'b0f0580e17f1af38e67f15c8c44eccc19cd97224', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: '07da0878e9fe3c16d3a4c356d31748b29c703ce6', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: 'a0d510d92d3f1262d1a9c24b2d5a53c6d231c473', class: `${customDatepickerClass}__header` }, h("div", { key: '661fffe696b124d062bf663f98189817445a320b', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '2a9a14ce6784c0cc954096c2da073727233e7bf6', dsId: `${this.dsId}-month`, dsValue: this.currentMonth.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: monthLabel(), dsAriaLabel: `${selectMonth()}, ${months[this.currentMonth]}`, onDsChange: this.handleMonthChange }, months.map((monthName, index) => (h("option", { key: monthName, slot: "native", value: index.toString() }, monthName)))), h(this.DsSelectTag, { key: 'd2e79e4700d998884f7b4efb02bd0ad3a056c920', dsId: `${this.dsId}-year`, dsValue: this.currentYear.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: yearLabel(), dsAriaLabel: `${selectYear()}, ${this.currentYear}`, onDsChange: this.handleYearChange }, yearOptions.map(year => (h("option", { key: year, slot: "native", value: year.toString() }, year))))), h("div", { key: 'fa814f285637e2bb66f21a3c9e8749f60d64f75c', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: '86f2196079697201a1bdcf03630d5e8160f45ffc', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: 'd5361b0f1e91b57a6c565ed2f0b1291a972d7ea7', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: '77a0cbff46f25b88a6fcbadddf25e69f0851271c', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: 'f10f1a8aa39b1800c88c2d00f11d063205129e40', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), h("div", { class: classNames(`${customDatepickerClass}__calendar`, {
+        return (h("div", { key: 'fd725336ea64eabae4d4a82884807ceede42e866' }, h(this.DsControlLabel, { key: 'f7a8c2b1e81d42766edad1d3859711d2fcbb141e', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: 'c51702ba7b21d84db278282d6f374390ef9a488c', name: "label" }), h("slot", { key: 'c0f02119e6e90b846970515d97711a0c4dd537d0', name: "assistiveText" })), h("div", { key: '093fc08ac961719d16970f5949db17524ed1df34', class: customDatepickerClass }, h(this.DsTextInputTag, { key: '1bd6adbe76689a754d06ab0fcdf1421e884f92c7', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? formatDisplayDate(this.selectedDate), dsPlaceholder: this.dsPlaceholder, dsInvalid: !!this.validityText, dsFullWidth: true, dsAriaDescribedby: [ariaDescribedbyValue, assistiveTextId, hiddenAssistiveTextId, validityId].filter(Boolean).join(' ') || undefined, onDsInput: this.handleInputChange, onDsChange: (e) => e.stopPropagation(), onDsValidity: this.handleValidityEvent(this.dsValidity), onDsSubmitInvalid: this.handleValidityEvent(this.dsSubmitInvalid) }, h(this.DsButtonTag, { key: '652f3f177c9298c1941b628fba22c8ec0b42acf5', ref: el => (this.calendarButtonRef = el), slot: "suffix", class: `${customDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.handleCalendarButtonClick, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: this.calendarButtonAriaLabel, dsInInput: true, tabindex: this.dsDisabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false' }, h(this.DsIconTag, { key: '5f36e855192c85981930b97c1f8f7bb5e436e9a3', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: '9a20ebdf46938ad214b6574d0c36370428d6fecb', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: '44730edf4cf2e3f8a0062395fee0c2bded7ef88a', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: 'cd04d51fcf4ddc0e3b389c1571bcd403f2ce4737', class: `${customDatepickerClass}__header` }, h("div", { key: 'eca4d410381d6747f0fd9dcfd06e411cad7ab9fe', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '0a13486544338818ce57369a2ead935af3d1f09d', dsId: `${this.dsId}-month`, dsValue: this.currentMonth.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: monthLabel(), dsAriaLabel: `${selectMonth()}, ${months[this.currentMonth]}`, onDsChange: this.handleMonthChange }, months.map((monthName, index) => (h("option", { key: monthName, slot: "native", value: index.toString() }, monthName)))), h(this.DsSelectTag, { key: '70ba97df815fa27570e3ae08f10f0cdc8f904810', dsId: `${this.dsId}-year`, dsValue: this.currentYear.toString(), dsClearable: false, dsVariant: "native", dsIconSize: "1rem", dsPlaceholder: yearLabel(), dsAriaLabel: `${selectYear()}, ${this.currentYear}`, onDsChange: this.handleYearChange }, yearOptions.map(year => (h("option", { key: year, slot: "native", value: year.toString() }, year))))), h("div", { key: 'c848ffe88a3513d0fad3907e07bd38b35dbf06cc', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: '68c6c1d5ce2c3b1383f28525f0eca7b6925278a4', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: 'c57c4c17289265ebc2a78d23fb9ae6789daa8ecb', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: '71806d8570162a8d98f56d681c295a2915a3b54a', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: '49d3fea4e81682107e1e41e946e71bdab4d56826', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), h("div", { class: classNames(`${customDatepickerClass}__calendar`, {
                 [`${customDatepickerClass}__calendar--transitioning`]: this.transitionDirection !== null,
                 [`${customDatepickerClass}__calendar--prev`]: this.transitionDirection === 'prev',
                 [`${customDatepickerClass}__calendar--next`]: this.transitionDirection === 'next',
-            }), key: this.transitionKey, role: "grid", "aria-label": `${months[this.currentMonth]} ${this.currentYear}`, onAnimationEnd: () => (this.transitionDirection = null) }, h("div", { key: 'd89f6ad4d7b38bde0fd4f1a8bacc11df77b2d891', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (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) }, h("div", { key: 'd1595d73b77de795433d32179c03ac627c003835', role: "row", class: `${customDatepickerClass}__weekday-row`, "aria-hidden": "true" }, weekdays.map(weekday => (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 (h("div", { key: rowIndex, role: "row", class: `${customDatepickerClass}__day-row` }, rowDays.map(({ day, isCurrentMonth, isToday, date }) => {
                 const isDisabled = isDateDisabled(date, this.dateConstraints);
@@ -610,7 +610,7 @@ export class DsDatepickerCustom {
                         [`${customDatepickerClass}__day--disabled`]: isDisabled,
                     }) }, day)));
             })));
-        })), h("div", { key: '02201c7514f49545f4d93b4f26fe2a6da856bde7', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: 'ca7abb6b9371d6188304f3dff0f385b889c6eb95', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: 'b0cf45060fea0ec0453fb98607f665848278c934', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: '8642724e0dddafddd0c8706d26e265e245c0036b', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), h("div", { key: '9badb64a67cb9955ce6e08ccff1ac5e55277a312', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: '6774fbe4ce095159426d9736378ae2f74f3e7b81', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: 'c58cea183bb38798d8e477f1bbedc0e53d5fe50a', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: 'e0ac6550a76646fbc30e1ee57ccfca1ba243cea4', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-custom"; }
     static get encapsulation() { return "scoped"; }