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

package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group-expand-button/ds-checkbox-group-expand-button.css

@@ -4,35 +4,35 @@
   display: block;
 }
 
-.ds-checkbox-group-expand-button__pA2cRq {
+.ds-checkbox-group-expand-button__owcjsm {
   all: initial;
   display: revert;
   box-sizing: border-box;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
 }
-.ds-checkbox-group-expand-button__pA2cRq:focus-visible {
+.ds-checkbox-group-expand-button__owcjsm:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-checkbox-group-expand-button__pA2cRq {
+.ds-checkbox-group-expand-button__owcjsm {
   margin-block: var(--ds-spacing-xSmall);
   color: var(--ds-textColor-default);
 }
-.ds-checkbox-group-expand-button__pA2cRq--actionable:hover {
+.ds-checkbox-group-expand-button__owcjsm--actionable:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-checkbox-group-expand-button__pA2cRq--actionable:active {
+.ds-checkbox-group-expand-button__owcjsm--actionable:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-checkbox-group-expand-button__pA2cRq__icon-container {
+.ds-checkbox-group-expand-button__owcjsm__icon-container {
   transform: rotate(0deg);
   transition-property: transform;
   transition-timing-function: ease-in;
   transition-duration: var(--tree-transition-out-duration, 100ms);
 }
-.ds-checkbox-group-expand-button__pA2cRq__icon-container--open {
+.ds-checkbox-group-expand-button__owcjsm__icon-container--open {
   transform: rotate(90deg);
   transition-timing-function: ease-out;
   transition-duration: var(--tree-transition-in-duration, 140ms);

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

@@ -1,12 +1,12 @@
 /* stylelint-disable uhds/versioned-class-requires-reset */
-.ds-checkbox-group__pA2cRq {
+.ds-checkbox-group__owcjsm {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__pA2cRq__legend {
+.ds-checkbox-group__owcjsm__legend {
   color: var(--ds-textColor-default);
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
@@ -15,41 +15,41 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox-group__pA2cRq__assistive-text {
+.ds-checkbox-group__owcjsm__assistive-text {
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
   color: var(--ds-textColor-secondary);
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-2xSmall);
 }
-.ds-checkbox-group__pA2cRq__checkbox-container {
+.ds-checkbox-group__owcjsm__checkbox-container {
   display: flex;
   gap: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__pA2cRq__checkbox-container__expand-button {
+.ds-checkbox-group__owcjsm__checkbox-container__expand-button {
   order: -1;
 }
-.ds-checkbox-group__pA2cRq__error {
+.ds-checkbox-group__owcjsm__error {
   display: flex;
 }
-.ds-checkbox-group__pA2cRq__error--visible {
+.ds-checkbox-group__owcjsm__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__pA2cRq > .ds-checkbox-group__pA2cRq__checkboxes {
+.ds-checkbox-group__owcjsm > .ds-checkbox-group__owcjsm__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__pA2cRq--inset {
+.ds-checkbox-group__owcjsm--inset {
   margin-left: calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall));
 }
-.ds-checkbox-group__pA2cRq--inset[hidden] {
+.ds-checkbox-group__owcjsm--inset[hidden] {
   display: none;
 }
-.ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq--inset {
+.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm--inset {
   margin-left: calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq__inset-reveal {
+.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal {
   --ds-tree-overhang-base: calc(var(--ds-spacing-medium) + var(--ds-spacing-4xSmall));
   --ds-tree-focus-bleed: var(--ds-spacing-3xSmall);
   --ds-tree-overhang-left: calc(var(--ds-tree-overhang-base) + var(--ds-tree-focus-bleed));
@@ -63,23 +63,23 @@
   transition-duration: var(--tree-transition-out-duration, 100ms), var(--tree-transition-out-duration, 100ms);
   will-change: max-height, opacity;
 }
-.ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=opening], .ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=open] {
+.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal[data-phase=opening], .ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal[data-phase=open] {
   opacity: 1;
   transition-timing-function: ease-out, ease-out;
   transition-duration: var(--tree-transition-in-duration, 140ms), var(--tree-transition-in-duration, 140ms);
 }
-.ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=closing], .ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq__inset-reveal[data-phase=closed] {
+.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal[data-phase=closing], .ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal[data-phase=closed] {
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  .ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq__inset-reveal {
+  .ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal {
     transition: none;
   }
 }
-.ds-checkbox-group__pA2cRq--tree .ds-checkbox-group__pA2cRq--has-parent {
+.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm--has-parent {
   margin-left: calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)));
 }
-.ds-checkbox-group__pA2cRq--horizontal > .ds-checkbox-group__pA2cRq__checkboxes {
+.ds-checkbox-group__owcjsm--horizontal > .ds-checkbox-group__owcjsm__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -1,9 +1,9 @@
-.ds-chip__pA2cRq:focus-visible {
+.ds-chip__owcjsm:focus-visible {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-chip__pA2cRq {
+.ds-chip__owcjsm {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -18,12 +18,12 @@
   border: var(--ds-borderWidth-thin) solid var(--ds-borderColor-primary);
   border-radius: 1rem;
 }
-.ds-chip__pA2cRq:hover {
+.ds-chip__owcjsm:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__pA2cRq:active {
+.ds-chip__owcjsm:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__pA2cRq__text {
+.ds-chip__owcjsm__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -1,4 +1,4 @@
-.ds-chip-group__pA2cRq__chips {
+.ds-chip-group__owcjsm__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-combobox/ds-combobox.css

@@ -8,35 +8,35 @@
   display: inline-block;
 }
 
-:host(.ds-combobox__pA2cRq__host) {
+:host(.ds-combobox__owcjsm__host) {
   width: 100%;
 }
 @media (min-width: 30rem) {
-  :host(.ds-combobox__pA2cRq__host) {
+  :host(.ds-combobox__owcjsm__host) {
     width: 20rem;
   }
 }
 
 @media (min-width: 30rem) {
-  :host(.ds-combobox__pA2cRq__host--full-width) {
+  :host(.ds-combobox__owcjsm__host--full-width) {
     width: 100%;
   }
 }
 
-:host > .ds-combobox__pA2cRq {
+:host > .ds-combobox__owcjsm {
   display: flex;
   flex-direction: column;
   position: relative;
 }
 
-.ds-combobox__pA2cRq {
+.ds-combobox__owcjsm {
   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__owcjsm__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__owcjsm__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__owcjsm__input-container--disabled .ds-combobox__owcjsm__input-container__toggle-button {
   cursor: not-allowed;
 }
-.ds-combobox__pA2cRq__input-container--invalid {
+.ds-combobox__owcjsm__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__owcjsm__input-container--invalid:not(.ds-combobox__owcjsm__input-container--open):not(.ds-combobox__owcjsm__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__owcjsm__input-container--invalid:not(.ds-combobox__owcjsm__input-container--open):not(.ds-combobox__owcjsm__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__owcjsm__input-container:active:not(.ds-combobox__owcjsm__input-container--invalid, .ds-combobox__owcjsm__input-container--disabled, .ds-combobox__owcjsm__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__owcjsm__input-container:not(.ds-combobox__owcjsm__input-container--open, .ds-combobox__owcjsm__input-container:has(> .ds-combobox__owcjsm__input-container__clear-button > button:focus), .ds-combobox__owcjsm__input-container--invalid, .ds-combobox__owcjsm__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__owcjsm__input-container:has(> .ds-combobox__owcjsm__input-container__input:focus) {
   box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
   outline: var(--ds-borderWidth-thin) solid var(--ds-borderColor-black);
   outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
-.ds-combobox__pA2cRq__input-container__input {
+.ds-combobox__owcjsm__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__owcjsm__input-container__input::placeholder {
   color: var(--ds-textColor-secondary);
 }
-.ds-combobox__pA2cRq__input-container__input:disabled {
+.ds-combobox__owcjsm__input-container__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__pA2cRq__input-container__input:disabled::placeholder {
+.ds-combobox__owcjsm__input-container__input:disabled::placeholder {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-combobox__pA2cRq__input-container__input:focus {
+.ds-combobox__owcjsm__input-container__input:focus {
   outline: none;
 }
-.ds-combobox__pA2cRq__input-container__icon {
+.ds-combobox__owcjsm__input-container__icon {
   padding-left: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__pA2cRq__input-container__icon + .ds-combobox__pA2cRq__input-container__input {
+.ds-combobox__owcjsm__input-container__icon + .ds-combobox__owcjsm__input-container__input {
   padding-left: var(--ds-spacing-2xSmall);
   padding-right: var(--ds-spacing-2xSmall);
 }
-.ds-combobox__pA2cRq__input-container__badge-container {
+.ds-combobox__owcjsm__input-container__badge-container {
   pointer-events: none;
   user-select: none;
 }
-.ds-combobox__pA2cRq__input-container__badge-container--padded {
+.ds-combobox__owcjsm__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__owcjsm__input-container__clear-button, .ds-combobox__owcjsm__input-container__toggle-button {
   cursor: pointer;
 }
-.ds-combobox__pA2cRq__input-container__clear-button:has(button:focus) {
+.ds-combobox__owcjsm__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__owcjsm__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__owcjsm__input-container__toggle-button:focus {
   outline: none;
 }
-.ds-combobox__pA2cRq__input-container__toggle-button__icon {
+.ds-combobox__owcjsm__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__owcjsm__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__owcjsm__options-container--open {
   display: block;
   box-shadow: var(--ds-shadow-overlay);
 }
-.ds-combobox__pA2cRq__options-container__options {
+.ds-combobox__owcjsm__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__owcjsm__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__owcjsm__options-container__options__inner__top-scrim, .ds-combobox__owcjsm__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__owcjsm__options-container__options__inner__top-scrim--visible, .ds-combobox__owcjsm__options-container__options__inner__bottom-scrim--visible {
   display: block;
 }
-.ds-combobox__pA2cRq__options-container__options__inner__top-scrim {
+.ds-combobox__owcjsm__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__owcjsm__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__owcjsm__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

@@ -134,6 +134,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 +164,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 +305,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 +368,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 = () => {
@@ -1525,6 +1535,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__owcjsm__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__owcjsm {
   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__owcjsm:empty {
   display: none;
 }

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__owcjsm__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-custom__pA2cRq {
+.ds-datepicker-custom__owcjsm {
   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__owcjsm__calendar-icon {
   margin-right: calc(-1 * var(--ds-spacing-xSmall));
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-custom__pA2cRq__calendar-icon {
+  .ds-datepicker-custom__owcjsm__calendar-icon {
     display: inline-flex;
   }
 }
-.ds-datepicker-custom__pA2cRq__picker {
+.ds-datepicker-custom__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__calendar--prev {
   animation: slide-in-from-left 250ms ease-out;
 }
-.ds-datepicker-custom__pA2cRq__calendar--next {
+.ds-datepicker-custom__owcjsm__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__owcjsm__weekday-row, .ds-datepicker-custom__owcjsm__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__owcjsm__weekday-row [role=gridcell], .ds-datepicker-custom__owcjsm__day-row [role=gridcell] {
   display: contents;
 }
-.ds-datepicker-custom__pA2cRq__weekday, .ds-datepicker-custom__pA2cRq__day {
+.ds-datepicker-custom__owcjsm__weekday, .ds-datepicker-custom__owcjsm__day {
   aspect-ratio: 1;
   line-height: var(--ds-button-min-height);
   text-align: center;
 }
-.ds-datepicker-custom__pA2cRq__weekday {
+.ds-datepicker-custom__owcjsm__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__owcjsm__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__owcjsm__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__owcjsm__day:hover:not(.ds-datepicker-custom__owcjsm__day--disabled, .ds-datepicker-custom__owcjsm__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__owcjsm__day:active:not(.ds-datepicker-custom__owcjsm__day--disabled, .ds-datepicker-custom__owcjsm__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__owcjsm__day--other-month:not(.ds-datepicker-custom__owcjsm__day--disabled) {
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__pA2cRq__day--today {
+.ds-datepicker-custom__owcjsm__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__owcjsm__day--selected:not(.ds-datepicker-custom__owcjsm__day--disabled) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-datepicker-custom__pA2cRq__day--selected:not(.ds-datepicker-custom__pA2cRq__day--disabled):hover {
+.ds-datepicker-custom__owcjsm__day--selected:not(.ds-datepicker-custom__owcjsm__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__owcjsm__day--selected:not(.ds-datepicker-custom__owcjsm__day--disabled):active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-datepicker-custom__pA2cRq__day--disabled {
+.ds-datepicker-custom__owcjsm__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__owcjsm__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }
-.ds-datepicker-custom__pA2cRq__footer-button--left {
+.ds-datepicker-custom__owcjsm__footer-button--left {
   margin-right: auto;
 }
-.ds-datepicker-custom__pA2cRq__footer-button--right {
+.ds-datepicker-custom__owcjsm__footer-button--right {
   margin-left: auto;
 }