npm - @uh-design-system/component-library - Versions diffs - 1.5.1 → 1.5.2-rc.1 - Mend

@uh-design-system/component-library 1.5.1 → 1.5.2-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2261) hide show

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

@@ -3,7 +3,7 @@
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host:not(:has(.ds-combobox__bQiYWO--full-width)) {
+  :host:not(:has(.ds-combobox__m9sbXh--full-width)) {
     width: 20rem;
   }
 }
@@ -13,7 +13,7 @@
   position: relative;
 }
-.ds-combobox__bQiYWO__input-container {
+.ds-combobox__m9sbXh__input-container {
   position: relative;
   display: flex;
   align-items: center;
@@ -25,37 +25,37 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-combobox__bQiYWO__input-container--disabled {
+.ds-combobox__m9sbXh__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__bQiYWO__input-container--disabled .ds-combobox__bQiYWO__input-container__toggle-button {
+.ds-combobox__m9sbXh__input-container--disabled .ds-combobox__m9sbXh__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__bQiYWO__input-container--invalid {
+.ds-combobox__m9sbXh__input-container--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-combobox__bQiYWO__input-container--invalid:not(.ds-combobox__bQiYWO__input-container--open):not(.ds-combobox__bQiYWO__input-container--disabled):hover {
+.ds-combobox__m9sbXh__input-container--invalid:not(.ds-combobox__m9sbXh__input-container--open):not(.ds-combobox__m9sbXh__input-container--disabled):hover {
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-combobox__bQiYWO__input-container--invalid:not(.ds-combobox__bQiYWO__input-container--open):not(.ds-combobox__bQiYWO__input-container--disabled):active {
+.ds-combobox__m9sbXh__input-container--invalid:not(.ds-combobox__m9sbXh__input-container--open):not(.ds-combobox__m9sbXh__input-container--disabled):active {
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-combobox__bQiYWO__input-container:active:not(.ds-combobox__bQiYWO__input-container--invalid, .ds-combobox__bQiYWO__input-container--disabled, .ds-combobox__bQiYWO__input-container--open) {
+.ds-combobox__m9sbXh__input-container:active:not(.ds-combobox__m9sbXh__input-container--invalid, .ds-combobox__m9sbXh__input-container--disabled, .ds-combobox__m9sbXh__input-container--open) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-combobox__bQiYWO__input-container:not(.ds-combobox__bQiYWO__input-container--open, .ds-combobox__bQiYWO__input-container:has(> .ds-combobox__bQiYWO__input-container__clear-button > button:focus), .ds-combobox__bQiYWO__input-container--invalid, .ds-combobox__bQiYWO__input-container--disabled):hover {
+.ds-combobox__m9sbXh__input-container:not(.ds-combobox__m9sbXh__input-container--open, .ds-combobox__m9sbXh__input-container:has(> .ds-combobox__m9sbXh__input-container__clear-button > button:focus), .ds-combobox__m9sbXh__input-container--invalid, .ds-combobox__m9sbXh__input-container--disabled):hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-combobox__bQiYWO__input-container:has(> .ds-combobox__bQiYWO__input-container__input:focus), .ds-combobox__bQiYWO__input-container:has(> .ds-combobox__bQiYWO__input-container__clear-button > button:focus) {
+.ds-combobox__m9sbXh__input-container:has(> .ds-combobox__m9sbXh__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__bQiYWO__input-container__input {
+.ds-combobox__m9sbXh__input-container__input {
   width: 100%;
   height: 100%;
   border: 0;
@@ -69,47 +69,52 @@
   padding-right: var(--ds-spacing-xSmall);
   text-overflow: ellipsis;
 }
-.ds-combobox__bQiYWO__input-container__input::placeholder {
+.ds-combobox__m9sbXh__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__bQiYWO__input-container__input:disabled {
+.ds-combobox__m9sbXh__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__bQiYWO__input-container__input:disabled::placeholder {
+.ds-combobox__m9sbXh__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__bQiYWO__input-container__input:focus {
+.ds-combobox__m9sbXh__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__bQiYWO__input-container__icon {
+.ds-combobox__m9sbXh__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__bQiYWO__input-container__icon + .ds-combobox__bQiYWO__input-container__input {
+.ds-combobox__m9sbXh__input-container__icon + .ds-combobox__m9sbXh__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__bQiYWO__input-container__badge-container {
+.ds-combobox__m9sbXh__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__bQiYWO__input-container__badge-container--padded {
+.ds-combobox__m9sbXh__input-container__badge-container--padded {
   padding-right: calc(var(--ds-spacing-2xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-combobox__bQiYWO__input-container__clear-button, .ds-combobox__bQiYWO__input-container__toggle-button {
+.ds-combobox__m9sbXh__input-container__clear-button, .ds-combobox__m9sbXh__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__bQiYWO__input-container__toggle-button {
+.ds-combobox__m9sbXh__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__m9sbXh__input-container__toggle-button {
   color: inherit;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
 }
-.ds-combobox__bQiYWO__input-container__toggle-button:focus {
+.ds-combobox__m9sbXh__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__bQiYWO__input-container__toggle-button__icon {
+.ds-combobox__m9sbXh__input-container__toggle-button__icon {
   align-items: center;
   align-self: stretch;
   border-left: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-disabled-onLight);
@@ -118,7 +123,7 @@
   pointer-events: none;
   padding: 0 var(--ds-spacing-2xSmall);
 }
-.ds-combobox__bQiYWO__options-container {
+.ds-combobox__m9sbXh__options-container {
   display: none;
   position: absolute;
   top: 100%;
@@ -128,11 +133,11 @@
   border: var(--ds-borderWidth-hairline) solid var(--ds-borderColor-light);
   background-color: var(--ds-bgColor-white);
 }
-.ds-combobox__bQiYWO__options-container--open {
+.ds-combobox__m9sbXh__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__bQiYWO__options-container__options {
+.ds-combobox__m9sbXh__options-container__options {
   position: relative;
   display: block;
   width: 100%;
@@ -141,7 +146,7 @@
   z-index: 0;
   overflow: auto;
 }
-.ds-combobox__bQiYWO__options-container__options__inner {
+.ds-combobox__m9sbXh__options-container__options__inner {
   position: relative;
   width: 100%;
   max-height: 20rem;
@@ -152,7 +157,7 @@
   padding: 0;
   margin: 0;
 }
-.ds-combobox__bQiYWO__options-container__options__inner__top-scrim, .ds-combobox__bQiYWO__options-container__options__inner__bottom-scrim {
+.ds-combobox__m9sbXh__options-container__options__inner__top-scrim, .ds-combobox__m9sbXh__options-container__options__inner__bottom-scrim {
   pointer-events: none;
   width: 100%;
   height: 2.75rem;
@@ -162,20 +167,20 @@
   z-index: 1;
   display: none;
 }
-.ds-combobox__bQiYWO__options-container__options__inner__top-scrim--visible, .ds-combobox__bQiYWO__options-container__options__inner__bottom-scrim--visible {
+.ds-combobox__m9sbXh__options-container__options__inner__top-scrim--visible, .ds-combobox__m9sbXh__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__bQiYWO__options-container__options__inner__top-scrim {
+.ds-combobox__m9sbXh__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__bQiYWO__options-container__options__inner__top-scrim--dark {
+.ds-combobox__m9sbXh__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__bQiYWO__options-container__options__inner__bottom-scrim {
+.ds-combobox__m9sbXh__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 CHANGED Viewed

@@ -143,7 +143,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
         oldValue?.forEach(opt => (opt.dsSelected = false));
         newValue.forEach(opt => (opt.dsSelected = true));
         const shouldEmit = this.getShouldEmit([hasChanged]);
-        this.setDisableEventEmits(true);
+        this._setDisableEventEmits(true);
         if (shouldEmit) {
             this.dsMultipleChange.emit({ values: newValues, added: addedValues, removed: removedValues });
             this.dsChange.emit(newValues[0] || null);
@@ -236,7 +236,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
     async handleOptionClick(option) {
         if (!option || option.dsDisabled)
             return;
-        this.setDisableEventEmits(false);
+        this._setDisableEventEmits(false);
         if (this.inValue(option.dsValue) && this.isMultiple) {
             this.value = this.withoutValue(option.dsValue);
         }
@@ -283,7 +283,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
         }
     }
     componentWillLoad() {
-        this.setDisableEventEmits(true);
+        this._setDisableEventEmits(true);
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-autocomplete', 'aria-activedescendant', 'aria-expanded', 'aria-controls', 'aria-describedby']),
             ...inheritAttributes(this, this.el),
@@ -611,7 +611,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
     handleClearButtonClick = (event) => {
         event.stopPropagation();
         this.unsetActiveOption();
-        this.setDisableEventEmits(false);
+        this._setDisableEventEmits(false);
         this.value = this.toValue(null);
         if (this.isOpen) {
             this.closeCombobox('focus', '');
@@ -665,7 +665,7 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRoot
                 this.openCombobox('');
             } }, this.dsIcon && h(DsIcon, { class: `${inputContainerClass}__icon`, dsName: this.dsIcon }), h("input", { ref: el => (this.inputRef = el), class: `${inputContainerClass}__input`, id: this.dsId, form: this.dsForm, type: "text", placeholder: this.dsPlaceholderHidden ? undefined : this.dsPlaceholder || searchOrSelectAnOption(), disabled: this.dsDisabled, onKeyDown: this.handleKeyDown, onInput: this.handleInput, onFocus: this.handleFocus, value: this.inputValue, role: "combobox", "aria-required": this.dsRequired ? 'true' : 'false', "aria-autocomplete": "list", "aria-activedescendant": this.activeOption?.dsId || '', "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.isMultiple && this.selectedOptions?.length > 0 ? `${this.labelId} ${this.badgeId}` : this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, ...ifDefined('aria-describedby', ariaDescribedBy), ...restAttributes }), this.isMultiple && this.selectedOptions?.length > 0 && (h("div", { class: classNames(`${inputContainerClass}__badge-container`, {
                 [`${inputContainerClass}__badge-container--padded`]: this.dsDisabled || !this.dsClearable,
-            }) }, h(this.DsBadge, { dsId: this.badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections(), dsVariant: this.dsDisabled ? 'disabled' : 'default' }))), this.dsClearable && this.selectedOptions?.length > 0 && !this.dsDisabled && (h(DsButton, { class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: this.handleClearButtonClick, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: this.dsId })), h("div", { id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabIndex: -1, "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { class: classNames(optionsContainerClass, {
+            }) }, h(this.DsBadge, { dsId: this.badgeId, dsText: `${this.selectedOptions.length}`, dsHiddenAssistiveText: selections(), dsVariant: this.dsDisabled ? 'disabled' : 'default' }))), this.dsClearable && this.selectedOptions?.length > 0 && !this.dsDisabled && (h(DsButton, { class: `${inputContainerClass}__clear-button`, dsVariant: "supplementary", dsIcon: "cancel_fill", dsColour: "black", dsIconTitle: clearButtonAriaLabel, dsIconAriaLabel: clearButtonAriaLabel, onClick: this.handleClearButtonClick, dsAriaLabel: clearButtonAriaLabel, dsAriaDescribedby: this.dsId, dsInInput: true, dsNoFocusRing: true })), h("div", { id: this.buttonId, class: `${inputContainerClass}__toggle-button`, role: "button", tabIndex: -1, "aria-label": !this.dsLabel ? ariaLabel : undefined, "aria-labelledby": this.dsLabel && this.labelId, "aria-expanded": String(this.isOpen), "aria-controls": this.optionsId, onClick: this.handleToggleButtonClick }, h(DsIcon, { class: `${inputContainerClass}__toggle-button__icon`, dsName: this.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }))), h("div", { class: classNames(optionsContainerClass, {
                 [`${optionsContainerClass}--open`]: this.isOpen,
             }) }, h("div", { ref: el => (this.optionsListRef = el), class: classNames(`${optionsContainerClass}__options`) }, h(DsOptionsMessage, { dsLoading: this.dsLoading, dsLoadingText: this.dsLoadingText, dsError: this.dsOptionsError, dsErrorTitle: this.dsOptionsErrorTitle, dsErrorText: this.dsOptionsErrorText, dsNoResults: this.dsNoResults || this.noResults, dsNoResultsTitle: this.getNoResultsTitle(this.inputValue), dsNoResultsText: this.dsNoResultsText }), h("div", { id: this.optionsId, class: `${optionsContainerClass}__options__inner`, tabIndex: -1, role: "listbox", ref: el => (this.optionsListInnerRef = el), onScroll: this.handleScroll, "aria-multiselectable": this.isMultiple ? 'true' : 'false', "aria-label": listBoxAriaLabel, "aria-labelledby": this.dsLabel && [this.labelId, this.optionsId].join(' ') }, h("div", { class: classNames(`${optionsContainerClass}__options__inner__top-scrim`, {
                 [`${optionsContainerClass}__options__inner__top-scrim--dark`]: this.hasTopScrimDark,

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

@@ -1,4 +1,4 @@
-.ds-control-label__bQiYWO__label {
+.ds-control-label__m9sbXh__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__bQiYWO {
+.ds-control-label__m9sbXh {
   font-family: var(--ds-fontFamily-body);
   display: flex;
   flex-direction: column;
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-control-label__bQiYWO:empty {
+.ds-control-label__m9sbXh:empty {
   display: none;
 }

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

@@ -14,11 +14,11 @@
   position: relative;
 }
-.ds-datepicker-custom__bQiYWO__calendar-icon {
+.ds-datepicker-custom__m9sbXh__calendar-icon {
   height: 100%;
 }
-.ds-datepicker-custom__bQiYWO {
+.ds-datepicker-custom__m9sbXh {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -26,15 +26,15 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-datepicker-custom__bQiYWO__calendar-icon {
+.ds-datepicker-custom__m9sbXh__calendar-icon {
   margin-right: calc(-1 * var(--ds-spacing-xSmall));
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-custom__bQiYWO__calendar-icon {
+  .ds-datepicker-custom__m9sbXh__calendar-icon {
     display: inline-flex;
   }
 }
-.ds-datepicker-custom__bQiYWO__picker {
+.ds-datepicker-custom__m9sbXh__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__bQiYWO__header {
+.ds-datepicker-custom__m9sbXh__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--ds-spacing-small);
   margin-bottom: var(--ds-spacing-xSmall);
 }
-.ds-datepicker-custom__bQiYWO__selects {
+.ds-datepicker-custom__m9sbXh__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__bQiYWO__navigation {
+.ds-datepicker-custom__m9sbXh__navigation {
   --ds-button-min-height: 2rem;
   --ds-button-min-width: 2rem;
   display: flex;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__bQiYWO__calendar {
+.ds-datepicker-custom__m9sbXh__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__bQiYWO__calendar--prev {
+.ds-datepicker-custom__m9sbXh__calendar--prev {
   animation: slide-in-from-left 250ms ease-out;
 }
-.ds-datepicker-custom__bQiYWO__calendar--next {
+.ds-datepicker-custom__m9sbXh__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__bQiYWO__weekday-row, .ds-datepicker-custom__bQiYWO__day-row {
+.ds-datepicker-custom__m9sbXh__weekday-row, .ds-datepicker-custom__m9sbXh__day-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__bQiYWO__weekday-row [role=gridcell], .ds-datepicker-custom__bQiYWO__day-row [role=gridcell] {
+.ds-datepicker-custom__m9sbXh__weekday-row [role=gridcell], .ds-datepicker-custom__m9sbXh__day-row [role=gridcell] {
   display: contents;
 }
-.ds-datepicker-custom__bQiYWO__weekday, .ds-datepicker-custom__bQiYWO__day {
+.ds-datepicker-custom__m9sbXh__weekday, .ds-datepicker-custom__m9sbXh__day {
   aspect-ratio: 1;
   line-height: var(--ds-button-min-height);
   text-align: center;
 }
-.ds-datepicker-custom__bQiYWO__weekday {
+.ds-datepicker-custom__m9sbXh__weekday {
   font-weight: var(--ds-fontWeight-semibold);
   font-size: var(--ds-fontSize-12);
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__bQiYWO__day {
+.ds-datepicker-custom__m9sbXh__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__bQiYWO__day:focus-visible {
+.ds-datepicker-custom__m9sbXh__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__bQiYWO__day:hover:not(.ds-datepicker-custom__bQiYWO__day--disabled, .ds-datepicker-custom__bQiYWO__day--selected) {
+.ds-datepicker-custom__m9sbXh__day:hover:not(.ds-datepicker-custom__m9sbXh__day--disabled, .ds-datepicker-custom__m9sbXh__day--selected) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-custom__bQiYWO__day:active:not(.ds-datepicker-custom__bQiYWO__day--disabled, .ds-datepicker-custom__bQiYWO__day--selected) {
+.ds-datepicker-custom__m9sbXh__day:active:not(.ds-datepicker-custom__m9sbXh__day--disabled, .ds-datepicker-custom__m9sbXh__day--selected) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-datepicker-custom__bQiYWO__day--other-month:not(.ds-datepicker-custom__bQiYWO__day--disabled) {
+.ds-datepicker-custom__m9sbXh__day--other-month:not(.ds-datepicker-custom__m9sbXh__day--disabled) {
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__bQiYWO__day--today {
+.ds-datepicker-custom__m9sbXh__day--today {
   font-weight: var(--ds-fontWeight-bold);
   text-decoration: underline;
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-datepicker-custom__bQiYWO__day--selected:not(.ds-datepicker-custom__bQiYWO__day--disabled) {
+.ds-datepicker-custom__m9sbXh__day--selected:not(.ds-datepicker-custom__m9sbXh__day--disabled) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-datepicker-custom__bQiYWO__day--selected:not(.ds-datepicker-custom__bQiYWO__day--disabled):hover {
+.ds-datepicker-custom__m9sbXh__day--selected:not(.ds-datepicker-custom__m9sbXh__day--disabled):hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-datepicker-custom__bQiYWO__day--selected:not(.ds-datepicker-custom__bQiYWO__day--disabled):active {
+.ds-datepicker-custom__m9sbXh__day--selected:not(.ds-datepicker-custom__m9sbXh__day--disabled):active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-datepicker-custom__bQiYWO__day--disabled {
+.ds-datepicker-custom__m9sbXh__day--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-datepicker-custom__bQiYWO__footer {
+.ds-datepicker-custom__m9sbXh__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }
-.ds-datepicker-custom__bQiYWO__footer-button--left {
+.ds-datepicker-custom__m9sbXh__footer-button--left {
   margin-right: auto;
 }
-.ds-datepicker-custom__bQiYWO__footer-button--right {
+.ds-datepicker-custom__m9sbXh__footer-button--right {
   margin-left: auto;
 }

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-native/ds-datepicker-native.css CHANGED Viewed

@@ -14,7 +14,7 @@
   position: relative;
 }
-.ds-datepicker-native__bQiYWO__input-container .ds-datepicker-native__bQiYWO__input {
+.ds-datepicker-native__m9sbXh__input-container .ds-datepicker-native__m9sbXh__input {
   flex: 1;
   border: none;
   outline: none;
@@ -26,22 +26,22 @@
   min-width: 0;
   width: 100%;
 }
-.ds-datepicker-native__bQiYWO__input-container .ds-datepicker-native__bQiYWO__input:disabled {
+.ds-datepicker-native__m9sbXh__input-container .ds-datepicker-native__m9sbXh__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-datepicker-native__bQiYWO__input-container .ds-datepicker-native__bQiYWO__input::-webkit-calendar-picker-indicator {
+.ds-datepicker-native__m9sbXh__input-container .ds-datepicker-native__m9sbXh__input::-webkit-calendar-picker-indicator {
   display: none;
 }
-.ds-datepicker-native__bQiYWO__input-container .ds-datepicker-native__bQiYWO__input::-webkit-clear-button {
+.ds-datepicker-native__m9sbXh__input-container .ds-datepicker-native__m9sbXh__input::-webkit-clear-button {
   display: none;
 }
-.ds-datepicker-native__bQiYWO__calendar-icon {
+.ds-datepicker-native__m9sbXh__calendar-icon {
   height: 100%;
 }
-.ds-datepicker-native__bQiYWO {
+.ds-datepicker-native__m9sbXh {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -57,58 +57,58 @@
   height: 2.75rem;
   width: 100%;
 }
-.ds-datepicker-native__bQiYWO--disabled {
+.ds-datepicker-native__m9sbXh--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-datepicker-native__bQiYWO--readonly {
+.ds-datepicker-native__m9sbXh--readonly {
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
-.ds-datepicker-native__bQiYWO--invalid {
+.ds-datepicker-native__m9sbXh--invalid {
   background-color: var(--ds-bgColor-danger);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__bQiYWO--invalid:active {
+.ds-datepicker-native__m9sbXh--invalid:active {
   background-color: var(--ds-bgColor-danger-active);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__bQiYWO--invalid:hover:not(.ds-datepicker-native__bQiYWO--invalid:focus-within) {
+.ds-datepicker-native__m9sbXh--invalid:hover:not(.ds-datepicker-native__m9sbXh--invalid:focus-within) {
   background-color: var(--ds-bgColor-danger-hover);
   border-color: var(--ds-borderColor-danger);
 }
-.ds-datepicker-native__bQiYWO:hover:not(.ds-datepicker-native__bQiYWO--disabled, .ds-datepicker-native__bQiYWO--readonly, .ds-datepicker-native__bQiYWO--invalid, .ds-datepicker-native__bQiYWO:focus-within) {
+.ds-datepicker-native__m9sbXh:hover:not(.ds-datepicker-native__m9sbXh--disabled, .ds-datepicker-native__m9sbXh--readonly, .ds-datepicker-native__m9sbXh--invalid, .ds-datepicker-native__m9sbXh:focus-within) {
   border-color: var(--ds-borderColor-default);
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-native__bQiYWO:focus-within:not(.ds-datepicker-native__bQiYWO--invalid, .ds-datepicker-native__bQiYWO--disabled, .ds-datepicker-native__bQiYWO--readonly) {
+.ds-datepicker-native__m9sbXh:focus-within:not(.ds-datepicker-native__m9sbXh--invalid, .ds-datepicker-native__m9sbXh--disabled, .ds-datepicker-native__m9sbXh--readonly) {
   border-color: var(--ds-borderColor-primary);
 }
-.ds-datepicker-native__bQiYWO:focus-visible {
+.ds-datepicker-native__m9sbXh:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-datepicker-native__bQiYWO:focus-within {
+.ds-datepicker-native__m9sbXh:focus-within {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-datepicker-native__bQiYWO {
+.ds-datepicker-native__m9sbXh {
   justify-content: space-between;
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-native__bQiYWO__calendar-icon {
+  .ds-datepicker-native__m9sbXh__calendar-icon {
     display: none !important;
   }
 }
-.ds-datepicker-native__bQiYWO__input-container {
+.ds-datepicker-native__m9sbXh__input-container {
   width: 100% !important;
 }
 @supports (-webkit-touch-callout: none) {
-  .ds-datepicker-native__bQiYWO__input-container .ds-datepicker-native__bQiYWO__input {
+  .ds-datepicker-native__m9sbXh__input-container .ds-datepicker-native__m9sbXh__input {
     position: absolute;
     inset: 0;
     line-height: var(--ds-fontSize-36);

package/dist/collection/components/01-base-components/ds-datepicker/ds-datepicker-simple/ds-datepicker-simple.css CHANGED Viewed

@@ -14,7 +14,7 @@
   position: relative;
 }
-.ds-datepicker-simple__bQiYWO {
+.ds-datepicker-simple__m9sbXh {
   all: initial;
   display: revert;
   box-sizing: border-box;