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

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

@@ -161,7 +161,7 @@ export class DsChip extends Mixin(componentFactory('ds-chip'), ariaDeprecationFa
                     "references": {
                         "DsChipValue": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-chip/ds-chip.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-chip/ds-chip.tsx",
                             "id": "src/components/01-base-components/ds-chip/ds-chip.tsx::DsChipValue"
                         }
                     }
@@ -303,7 +303,7 @@ export class DsChip extends Mixin(componentFactory('ds-chip'), ariaDeprecationFa
                     "references": {
                         "DsChipClickEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-chip/ds-chip.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-chip/ds-chip.tsx",
                             "id": "src/components/01-base-components/ds-chip/ds-chip.tsx::DsChipClickEvent"
                         }
                     }

package/dist/collection/components/01-base-components/ds-chip-group/ds-chip-group.css

@@ -1,4 +1,4 @@
-.ds-chip-group__izAhxK__chips {
+.ds-chip-group__9el4Wy__chips {
   display: inline-flex;
   flex-flow: row wrap;
   gap: var(--ds-spacing-xSmall) var(--ds-spacing-2xSmall);

package/dist/collection/components/01-base-components/ds-chip-group/ds-chip-group.js

@@ -144,7 +144,7 @@ export class DsChipGroup extends Mixin(componentFactory('ds-chip-group', { stopR
         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 (h("div", { key: 'a9b2d37bc3ac4fa723b72915dae46bcd1e4576ca', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: '95d50e4b9b71c5c5470e7a25ef92df91885cf8f8', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: 'd40f164810ab5e20e6adcd4bab2786a02d0db150', name: "label" }), h("slot", { key: 'f0c17f617718893fab1ed43dcd197d2ea1c4ccd9', name: "assistiveText" })), h("div", { key: '4748700a92d9ef713c4a7902b4ed9be48baba471', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '5de58e4e1bc6b509360a66078cfcb0624d8c1f3e' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), h(this.DsInputValidity, { key: '158e5ae0b0936f306d31f1c298aa017df0e8cb22', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
+        return (h("div", { key: '65cfa5aecda4f0b674889cc0e120dfc9a0ea7e35', class: baseClass, role: "group", ...ifDefined('aria-label', ariaLabel), ...ifDefined('aria-labelledby', this.dsAriaLabelledby), ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-labelledby', this.dsErrorText && errorTextId), ...restAttributes }, h(this.DsGroupLabel, { key: 'fa767b112ab1a442e06ce9341938b81d42487f9b', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '7db691d4f8a2228ea5aebe55bf63cb53bc0bb548', name: "label" }), h("slot", { key: '529ba250c6345977b1d34041235b5b933700f68a', name: "assistiveText" })), h("div", { key: 'f6b4247b90ba8a87566f164f64692ab29e70c66e', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '424b01344c6640e751530f582b58be72ed0869b4' })), this.internals?.form && this.internals?.validity.valid && this.childChips.map(chip => h("input", { type: "hidden", name: this.dsName, value: chip.dsValue, key: chip.dsValue })), h(this.DsInputValidity, { key: '459a9a51d0bb5c4179e93ade081e012fd1220c79', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,19 +1,42 @@
+.ds-no-style-leak * {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+}
+
 :host {
   display: inline-block;
+}
+
+:host(.ds-combobox__9el4Wy__host) {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host:not(:has(.ds-combobox__izAhxK--full-width)) {
+  :host(.ds-combobox__9el4Wy__host) {
     width: 20rem;
   }
 }
-:host > div {
+
+@media (min-width: 30rem) {
+  :host(.ds-combobox__9el4Wy__host--full-width) {
+    width: 100%;
+  }
+}
+
+:host > .ds-combobox__9el4Wy {
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
-.ds-combobox__izAhxK__input-container {
+.ds-combobox__9el4Wy {
+  all: initial;
+  display: revert;
+  box-sizing: border-box;
+  font-family: var(--ds-fontFamily-body);
+  font-size: var(--ds-fontSize-16);
+}
+.ds-combobox__9el4Wy__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +48,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__izAhxK__input-container--disabled {
+.ds-combobox__9el4Wy__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__izAhxK__input-container--disabled .ds-combobox__izAhxK__input-container__toggle-button {
+.ds-combobox__9el4Wy__input-container--disabled .ds-combobox__9el4Wy__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__izAhxK__input-container--invalid {
+.ds-combobox__9el4Wy__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__izAhxK__input-container--invalid:not(.ds-combobox__izAhxK__input-container--open):not(.ds-combobox__izAhxK__input-container--disabled):hover {
+.ds-combobox__9el4Wy__input-container--invalid:not(.ds-combobox__9el4Wy__input-container--open):not(.ds-combobox__9el4Wy__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__izAhxK__input-container--invalid:not(.ds-combobox__izAhxK__input-container--open):not(.ds-combobox__izAhxK__input-container--disabled):active {
+.ds-combobox__9el4Wy__input-container--invalid:not(.ds-combobox__9el4Wy__input-container--open):not(.ds-combobox__9el4Wy__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__izAhxK__input-container:active:not(.ds-combobox__izAhxK__input-container--invalid, .ds-combobox__izAhxK__input-container--disabled, .ds-combobox__izAhxK__input-container--open) {
+.ds-combobox__9el4Wy__input-container:active:not(.ds-combobox__9el4Wy__input-container--invalid, .ds-combobox__9el4Wy__input-container--disabled, .ds-combobox__9el4Wy__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__izAhxK__input-container:not(.ds-combobox__izAhxK__input-container--open, .ds-combobox__izAhxK__input-container:has(> .ds-combobox__izAhxK__input-container__clear-button > button:focus), .ds-combobox__izAhxK__input-container--invalid, .ds-combobox__izAhxK__input-container--disabled):hover {
+.ds-combobox__9el4Wy__input-container:not(.ds-combobox__9el4Wy__input-container--open, .ds-combobox__9el4Wy__input-container:has(> .ds-combobox__9el4Wy__input-container__clear-button > button:focus), .ds-combobox__9el4Wy__input-container--invalid, .ds-combobox__9el4Wy__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__izAhxK__input-container:has(> .ds-combobox__izAhxK__input-container__input:focus) {
+.ds-combobox__9el4Wy__input-container:has(> .ds-combobox__9el4Wy__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__izAhxK__input-container__input {
+.ds-combobox__9el4Wy__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,52 +92,52 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__izAhxK__input-container__input::placeholder {
+.ds-combobox__9el4Wy__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__izAhxK__input-container__input:disabled {
+.ds-combobox__9el4Wy__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__izAhxK__input-container__input:disabled::placeholder {
+.ds-combobox__9el4Wy__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__izAhxK__input-container__input:focus {
+.ds-combobox__9el4Wy__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__izAhxK__input-container__icon {
+.ds-combobox__9el4Wy__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__izAhxK__input-container__icon + .ds-combobox__izAhxK__input-container__input {
+.ds-combobox__9el4Wy__input-container__icon + .ds-combobox__9el4Wy__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__izAhxK__input-container__badge-container {
+.ds-combobox__9el4Wy__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__izAhxK__input-container__badge-container--padded {
+.ds-combobox__9el4Wy__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__izAhxK__input-container__clear-button, .ds-combobox__izAhxK__input-container__toggle-button {
+.ds-combobox__9el4Wy__input-container__clear-button, .ds-combobox__9el4Wy__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__izAhxK__input-container__clear-button:has(button:focus) {
+.ds-combobox__9el4Wy__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__izAhxK__input-container__toggle-button {
+.ds-combobox__9el4Wy__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__izAhxK__input-container__toggle-button:focus {
+.ds-combobox__9el4Wy__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__izAhxK__input-container__toggle-button__icon {
+.ds-combobox__9el4Wy__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -123,7 +146,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__izAhxK__options-container {
+.ds-combobox__9el4Wy__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -133,11 +156,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__izAhxK__options-container--open {
+.ds-combobox__9el4Wy__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__izAhxK__options-container__options {
+.ds-combobox__9el4Wy__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -146,7 +169,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__izAhxK__options-container__options__inner {
+.ds-combobox__9el4Wy__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -157,7 +180,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__izAhxK__options-container__options__inner__top-scrim, .ds-combobox__izAhxK__options-container__options__inner__bottom-scrim {
+.ds-combobox__9el4Wy__options-container__options__inner__top-scrim, .ds-combobox__9el4Wy__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -167,20 +190,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__izAhxK__options-container__options__inner__top-scrim--visible, .ds-combobox__izAhxK__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__9el4Wy__options-container__options__inner__top-scrim--visible, .ds-combobox__9el4Wy__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__izAhxK__options-container__options__inner__top-scrim {
+.ds-combobox__9el4Wy__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__izAhxK__options-container__options__inner__top-scrim--dark {
+.ds-combobox__9el4Wy__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__izAhxK__options-container__options__inner__bottom-scrim {
+.ds-combobox__9el4Wy__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

@@ -1,4 +1,4 @@
-import { forceUpdate, Fragment, h, Mixin } from "@stencil/core";
+import { forceUpdate, h, Host, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { debounce, declareComponentDependencies, ifDefined, transformTagName } from "../../../utils/utils";
 import { atLeastOneOption, loadingOptions, multiselectable, noResultsFound, removeSelection, searchOrSelectAnOption, selections, thereAreOptionsToBrowse, tryADifferentSearchTerm, tryAgainOrIfTheProblemPersists, weCouldNotLoadOptions, } from "../../../utils/controls/controlUtils";
@@ -645,10 +645,12 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
         const DsInputValidity = transformTagName('ds-input-validity', 'ds-combobox', this.el);
         const DsControlLabel = transformTagName('ds-control-label', 'ds-combobox', this.el);
         const baseClass = cx('ds-combobox');
+        const hostClass = `${baseClass}__host`;
         const inputContainerClass = `${baseClass}__input-container`;
         const optionsContainerClass = `${baseClass}__options-container`;
-        return (h(Fragment, null, h(DsControlLabel, { dsId: this.labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { name: "label" }), h("slot", { name: "assistiveText" })), h("div", { class: classNames(baseClass, {
-                [`${baseClass}--full-width`]: this.dsFullWidth,
+        return (h(Host, { class: classNames(hostClass, {
+                [`${hostClass}--full-width`]: this.dsFullWidth,
+            }) }, h(DsControlLabel, { dsId: this.labelId, dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: this.assistiveTextId }, h("slot", { name: "label" }), h("slot", { name: "assistiveText" })), h("div", { class: classNames(baseClass, {
                 [`${baseClass}--open`]: this.isOpen,
             }) }, h("div", { class: classNames(inputContainerClass, {
                 [`${inputContainerClass}--disabled`]: this.dsDisabled,
@@ -1250,7 +1252,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                     "references": {
                         "DsComboboxFilterChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
                             "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxFilterChangeEvent"
                         }
                     }
@@ -1271,7 +1273,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                     "references": {
                         "DsComboboxMultipleChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
                             "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxMultipleChangeEvent"
                         }
                     }
@@ -1292,7 +1294,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                     "references": {
                         "DsComboboxChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
                             "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxChangeEvent"
                         }
                     }
@@ -1313,7 +1315,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                     "references": {
                         "DsComboboxSelectedOptionValueChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
                             "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxSelectedOptionValueChangeEvent"
                         }
                     }
@@ -1334,7 +1336,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                     "references": {
                         "DsComboboxSelectedOptionRemovedEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
                             "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxSelectedOptionRemovedEvent"
                         }
                     }
@@ -1399,7 +1401,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                     "references": {
                         "DsComboboxBlurEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
                             "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxBlurEvent"
                         }
                     }
@@ -1420,7 +1422,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                     "references": {
                         "DsComboboxFocusEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-combobox/ds-combobox.tsx",
                             "id": "src/components/01-base-components/ds-combobox/ds-combobox.tsx::DsComboboxFocusEvent"
                         }
                     }

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

@@ -1,4 +1,4 @@
-.ds-control-label__izAhxK__label {
+.ds-control-label__9el4Wy__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__izAhxK {
+.ds-control-label__9el4Wy {
   font-family: var(--ds-fontFamily-body);
   display: flex;
   flex-direction: column;
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-control-label__izAhxK:empty {
+.ds-control-label__9el4Wy: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: 'd2fe881cdf38cef4e7c7e80e8ecaac117a8361a6', class: baseClass }, h("slot", { key: 'f81fc8f6b938f6d87972d19741a483e2bf576c27', name: "label" }, this.dsLabel && (h("label", { key: 'ad389060716d49d9809feef5daafea7dafab60e7', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: 'aa4726f2ae80e07a3e2f0a572d8b724c65fff790', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '0c2a048c0f1db647d318350b18151d95c13542d6', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '2cacc5835e351b7bd170f78cd8649bf144258ba5', id: this.dsVisuallyHiddenAssistiveTextId, dsTag: "span" }, this.dsVisuallyHiddenAssistiveText)))));
+        return (h("div", { key: 'fb82006018b75e4c00356245966ea94fa1ba62ba', class: baseClass }, h("slot", { key: '4626446a9dcd5984a66cc0a24978339c74bc79df', name: "label" }, this.dsLabel && (h("label", { key: 'fc7253241bc2bfd7ebb7cf3d46a0edb3ec1f12c9', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '41e6bb792f3a594cb7a846cfcdc1ac7a0accd871', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '3c33bb3d1c8a4708e349559f759847dcf6c94bc6', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: '7ca49d923701fdc03ba72d46c4f989e4f92e1834', 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__izAhxK__calendar-icon {
+.ds-datepicker-custom__9el4Wy__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-custom__izAhxK {
+.ds-datepicker-custom__9el4Wy {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -26,15 +26,15 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-datepicker-custom__izAhxK__calendar-icon {
+.ds-datepicker-custom__9el4Wy__calendar-icon {
   margin-right: calc(-1 * var(--ds-spacing-xSmall));
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-custom__izAhxK__calendar-icon {
+  .ds-datepicker-custom__9el4Wy__calendar-icon {
     display: inline-flex;
   }
 }
-.ds-datepicker-custom__izAhxK__picker {
+.ds-datepicker-custom__9el4Wy__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__izAhxK__header {
+.ds-datepicker-custom__9el4Wy__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--ds-spacing-small);
   margin-bottom: var(--ds-spacing-xSmall);
 }
-.ds-datepicker-custom__izAhxK__selects {
+.ds-datepicker-custom__9el4Wy__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__izAhxK__navigation {
+.ds-datepicker-custom__9el4Wy__navigation {
   --ds-button-min-height: 2rem;
   --ds-button-min-width: 2rem;
   display: flex;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__izAhxK__calendar {
+.ds-datepicker-custom__9el4Wy__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__izAhxK__calendar--prev {
+.ds-datepicker-custom__9el4Wy__calendar--prev {
   animation: slide-in-from-left 250ms ease-out;
 }
-.ds-datepicker-custom__izAhxK__calendar--next {
+.ds-datepicker-custom__9el4Wy__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__izAhxK__weekday-row, .ds-datepicker-custom__izAhxK__day-row {
+.ds-datepicker-custom__9el4Wy__weekday-row, .ds-datepicker-custom__9el4Wy__day-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__izAhxK__weekday-row [role=gridcell], .ds-datepicker-custom__izAhxK__day-row [role=gridcell] {
+.ds-datepicker-custom__9el4Wy__weekday-row [role=gridcell], .ds-datepicker-custom__9el4Wy__day-row [role=gridcell] {
   display: contents;
 }
-.ds-datepicker-custom__izAhxK__weekday, .ds-datepicker-custom__izAhxK__day {
+.ds-datepicker-custom__9el4Wy__weekday, .ds-datepicker-custom__9el4Wy__day {
   aspect-ratio: 1;
   line-height: var(--ds-button-min-height);
   text-align: center;
 }
-.ds-datepicker-custom__izAhxK__weekday {
+.ds-datepicker-custom__9el4Wy__weekday {
   font-weight: var(--ds-fontWeight-semibold);
   font-size: var(--ds-fontSize-12);
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__izAhxK__day {
+.ds-datepicker-custom__9el4Wy__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__izAhxK__day:focus-visible {
+.ds-datepicker-custom__9el4Wy__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__izAhxK__day:hover:not(.ds-datepicker-custom__izAhxK__day--disabled, .ds-datepicker-custom__izAhxK__day--selected) {
+.ds-datepicker-custom__9el4Wy__day:hover:not(.ds-datepicker-custom__9el4Wy__day--disabled, .ds-datepicker-custom__9el4Wy__day--selected) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-custom__izAhxK__day:active:not(.ds-datepicker-custom__izAhxK__day--disabled, .ds-datepicker-custom__izAhxK__day--selected) {
+.ds-datepicker-custom__9el4Wy__day:active:not(.ds-datepicker-custom__9el4Wy__day--disabled, .ds-datepicker-custom__9el4Wy__day--selected) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-datepicker-custom__izAhxK__day--other-month:not(.ds-datepicker-custom__izAhxK__day--disabled) {
+.ds-datepicker-custom__9el4Wy__day--other-month:not(.ds-datepicker-custom__9el4Wy__day--disabled) {
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__izAhxK__day--today {
+.ds-datepicker-custom__9el4Wy__day--today {
   font-weight: var(--ds-fontWeight-bold);
   text-decoration: underline;
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-datepicker-custom__izAhxK__day--selected:not(.ds-datepicker-custom__izAhxK__day--disabled) {
+.ds-datepicker-custom__9el4Wy__day--selected:not(.ds-datepicker-custom__9el4Wy__day--disabled) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-datepicker-custom__izAhxK__day--selected:not(.ds-datepicker-custom__izAhxK__day--disabled):hover {
+.ds-datepicker-custom__9el4Wy__day--selected:not(.ds-datepicker-custom__9el4Wy__day--disabled):hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-datepicker-custom__izAhxK__day--selected:not(.ds-datepicker-custom__izAhxK__day--disabled):active {
+.ds-datepicker-custom__9el4Wy__day--selected:not(.ds-datepicker-custom__9el4Wy__day--disabled):active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-datepicker-custom__izAhxK__day--disabled {
+.ds-datepicker-custom__9el4Wy__day--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-datepicker-custom__izAhxK__footer {
+.ds-datepicker-custom__9el4Wy__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }
-.ds-datepicker-custom__izAhxK__footer-button--left {
+.ds-datepicker-custom__9el4Wy__footer-button--left {
   margin-right: auto;
 }
-.ds-datepicker-custom__izAhxK__footer-button--right {
+.ds-datepicker-custom__9el4Wy__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: '36fcd5c8412002f3bbf5837d8a66b475b6e588ab' }, h(this.DsControlLabel, { key: '7e19a728468dbd41ff162a68acf694e964c71565', dsHtmlFor: this.dsId, dsLabel: this.dsLabel, dsRequired: this.dsRequired, dsOptional: this.dsOptional, dsOptionalText: this.dsOptionalText, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId, dsVisuallyHiddenAssistiveText: this.dsHiddenAssistiveText, dsVisuallyHiddenAssistiveTextId: hiddenAssistiveTextId }, h("slot", { key: '28a783c8c02c86d25448b13cee06e9180e29fc5c', name: "label" }), h("slot", { key: 'dfb4ab27189fe899b7ac8e13bc442c670db4f3a8', name: "assistiveText" })), h("div", { key: '02bb2e1ffe902a6003ceab75932be733a0bc97b0', class: customDatepickerClass }, h(this.DsTextInputTag, { key: '9b379fc4ccc2a8aa729e727af3cf6d89cd6bc98d', ref: el => (this.textInputRef = el), dsId: this.dsId, dsName: this.dsName, dsForm: this.dsForm, dsDisabled: this.dsDisabled, dsReadonly: this.dsReadonly, dsRequired: this.dsRequired, dsValue: this.inputValue ?? 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: '949b14cf0836f350e6230e8a4ed01aebc85f930f', ref: el => (this.calendarButtonRef = el), slot: "suffix", class: `${customDatepickerClass}__calendar-icon`, dsVariant: "supplementary", dsColour: "black", dsSize: "small", onClick: this.handleCalendarButtonClick, onKeyDown: this.handleIconKeyDown, dsDisabled: this.dsDisabled || this.dsReadonly, dsAriaLabel: this.calendarButtonAriaLabel, dsInInput: true, tabindex: this.dsDisabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false' }, h(this.DsIconTag, { key: 'c00a87c3ff158a280326802209694d80ca1c347a', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: '66aa7339fcd083ced79db74ae687c679c2f1d408', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: 'd7a3b7d5247964dda877ce4176466690e595292b', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: '0df676197d2f3f2d0f7065cb63ff63daab73dc64', class: `${customDatepickerClass}__header` }, h("div", { key: 'c03cc6f1318eb9ea4dc2283eab8a3e37a15e1b54', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: 'f47ebec65b269d28d238dbe8d0b91507f1513219', 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: '97e7861bea111869e61e69004f09857c1bfd347e', 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: 'f66c363cb852aecc4ab391fb9d1731dbbb5e9f7d', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: 'b7abfb45d5d25aedfaf1eaa065b962b8bca36227', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: '1501214afb47f434cc7ef4cd6c355483c3c891b3', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: '7ef7fa2cd2258ba2b4e8abed9eee38035950fd4f', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: '82ea872f6302dead5ab4b267193d91639746f73a', dsName: "chevron_forward", dsSize: "1rem", dsAriaHidden: true })))), h("div", { class: classNames(`${customDatepickerClass}__calendar`, {
+        return (h("div", { key: 'f50a54b4a75be645e9ec4170d78d355e687854aa' }, 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 }, h("slot", { key: 'c8df34b031c4cc2788782a2e60ef5196fd2e33e2', name: "label" }), h("slot", { key: '1eafd8431a6194526e887a481d0b9d6bef4e2a2c', name: "assistiveText" })), h("div", { key: '775ab129c975921cc3e4037fa78309d33dcf9c16', class: customDatepickerClass }, 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 ?? 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: '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' }, h(this.DsIconTag, { key: 'daa9f84beefcc3d749da4f74194e86cb4d470fd8', dsName: this.isOpen ? 'calendar_month_fill' : 'calendar_month', dsAriaHidden: true }))), this.isOpen && (h("div", { key: '565f183552fa4e1a19818781fab3af3eb6ea4e81', ref: el => (this.pickerRef = el), class: `${customDatepickerClass}__picker`, role: "dialog", "aria-modal": "true", "aria-labelledby": `${this.dsId}-grid-label` }, h(this.DsFeedbackTag, { key: 'd7ac342060ead1022a6a9745dee33d26bbd01d5f', dsSrOnly: true, dsSrOnlyTag: "span" }, this.announcerText), h("div", { key: '8767bce23f72bb8f3628738f09ac691e835eed30', class: `${customDatepickerClass}__header` }, h("div", { key: '619d9638b98a6a97a6663745dee6d6061d3464da', id: `${this.dsId}-grid-label`, class: `${customDatepickerClass}__selects` }, h(this.DsSelectTag, { key: '3a88064bdd9e07968620f4a232c1a5fe62e3badf', 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: '1fa63a0d54a567014198d019c0d97e2029447b46', 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: 'd1930fcfcf54ff13ee21884e2d4a468993c7d1d0', class: `${customDatepickerClass}__navigation` }, h(this.DsButtonTag, { key: '608d0d4bede655fa638502315b9abc4c85a94eb5', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: previousMonth(), onClick: () => this.handleChangeMonth('prev'), tabindex: 0 }, h(this.DsIconTag, { key: '024a3684755799dff974def9dbd48f9212df47db', dsName: "chevron_backward", dsSize: "1rem", dsAriaHidden: true })), h(this.DsButtonTag, { key: 'c33384d1a14519377e6cd2005c4b9eb94ad64c24', dsVariant: "supplementary", dsColour: "blue", dsSize: "small", dsAriaLabel: nextMonth(), onClick: () => this.handleChangeMonth('next'), tabindex: 0 }, h(this.DsIconTag, { key: 'c6e5c82f8df387ff482b66302bded85b25ea914d', 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: 'd301d732eb26250654241d795efd725f7d6af103', 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: '68fbd73bf8bb6b48876e17b050033906b9f12e8e', 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: '8227ce2a0d37d37700b4b7224d9ea5a79da6d080', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: 'f3fb962009e6cc354dde012157c653d05d2ace22', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: 'aa4dd130edd6fd2942e44f5c1a4a223d87bd5b9e', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: 'd7ebeb82e77cbe2245b05a5723499cad72e11a5c', id: validityId, dsText: this.validityText, dsType: "error" })));
+        })), h("div", { key: '4e17847ce9974195e29ce614bf577f88187bb459', class: `${customDatepickerClass}__footer` }, h(this.DsButtonTag, { key: '459d40a68e064e37c09201e97c6dcc96298fb98b', dsVariant: "supplementary", dsText: showToday(), dsSize: "small", onClick: this.handleShowToday, class: `${customDatepickerClass}__footer-button--left`, tabindex: 0 }), h(this.DsButtonTag, { key: '43cfd6c39c2e7158d8ba33133ed469dd8d2cb9a3', dsVariant: "supplementary", dsText: clearDate(), dsSize: "small", onClick: this.handleClear, class: `${customDatepickerClass}__footer-button--right`, tabindex: 0 }))))), this.validityText && h(this.DsInputValidityTag, { key: '9a8c56751eede8868cdf94ebce9ab508f3db5237', id: validityId, dsText: this.validityText, dsType: "error" })));
     }
     static get is() { return "ds-datepicker-custom"; }
     static get encapsulation() { return "scoped"; }