@uh-design-system/component-library 1.5.0 → 1.5.1-rc.0

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

@@ -1,9 +1,9 @@
-.ds-chip__GqWYnG:focus-visible {
+.ds-chip__0Yjiso: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__GqWYnG {
+.ds-chip__0Yjiso {
   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__GqWYnG:hover {
+.ds-chip__0Yjiso:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__GqWYnG:active {
+.ds-chip__0Yjiso:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__GqWYnG__text {
+.ds-chip__0Yjiso__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -67,7 +67,7 @@ export class DsChip extends Mixin(componentFactory('ds-chip'), ariaDeprecationFa
         };
         forceUpdate(this);
     }
-    onClick() {
+    handleClick() {
         this.dsClick.emit(this.dsValue);
     }
     render() {
@@ -78,7 +78,7 @@ export class DsChip extends Mixin(componentFactory('ds-chip'), ariaDeprecationFa
         const ariaLabel = this.dsAriaLabel ?? this.inheritedAttributes['aria-label'];
         const Elem = resolvedRole ? 'div' : Fragment;
         const restAttributes = omit(this.inheritedAttributes, ['role', 'aria-label']);
-        return (h(Elem, { key: '78aa1823f1fb9176f63c14d6f1955b83fa7115f2', role: resolvedRole }, h("button", { key: '25ee0ae57d1a4d7540d7f58520dc2f6a38e8052e', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: '6a4be2105331431f86b71703eecdc8d0e6e8f93c', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '672bf282ea5a9bd7757156192f467399d47a141f', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: 'd5c793cb0dc19f2e8c6c1427fdb92050d702f082', class: `${baseClass}__text` }, h("slot", { key: 'ad4a14352e961465fd721c5ed269f4d20950934d' }, this.dsText), h(DsVisuallyHidden, { key: '8d3458b2c19349cc06310f81b583919a338b5723', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: 'ffa0ecae1ccf261abc1c3bbd342e048e680b49e1', dsName: "close", dsSize: "1rem" }))));
+        return (h(Elem, { key: 'f983e1b4fe07f9eeed524dd5e4060f4c24b93699', role: resolvedRole }, h("button", { key: '978d753167b4473b9140856c7aaf5cff3e11f2fe', ref: el => (this.buttonEl = el), class: baseClass, id: this.dsId, name: this.name, form: this.dsForm, type: this.dsType, "aria-label": ariaLabel, ...restAttributes }, h("slot", { key: 'b12c9a1e7abf7ac8abf3f0d698f53950c9f59549', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '351d5aa58c3f9329dfc4d5fd4d11b267ed9e5e0d', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: '5356d617c2270322b8cafd633cd00eba13c38122', class: `${baseClass}__text` }, h("slot", { key: 'd3eb97ea2f6e803db178a7cc631483e36d2f8c9b' }, this.dsText), h(DsVisuallyHidden, { key: 'e21034448a8ad20dad12853ae59ce424f56d8e60', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: '3d1b5815acd5db98a8655241e05c704f7d47d1bf', dsName: "close", dsSize: "1rem" }))));
     }
     static get is() { return "ds-chip"; }
     static get originalStyleUrls() {
@@ -347,7 +347,7 @@ export class DsChip extends Mixin(componentFactory('ds-chip'), ariaDeprecationFa
     static get listeners() {
         return [{
                 "name": "click",
-                "method": "onClick",
+                "method": "handleClick",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1,4 +1,4 @@
-.ds-chip-group__GqWYnG__chips {
+.ds-chip-group__0Yjiso__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

@@ -5,7 +5,7 @@ import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attribu
 import { itemsShortage, itemsOverage } from "../../../utils/controls/controlUtils";
 import { ariaDeprecationFactory } from "../../00-foundations/factories/ariaDeprecationFactory";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
-export class DsChipGroup extends Mixin(componentFactory('ds-chip-group'), ariaDeprecationFactory) {
+export class DsChipGroup extends Mixin(componentFactory('ds-chip-group', { stopRootTracking: true }), ariaDeprecationFactory) {
     constructor() {
         super();
     }
@@ -138,7 +138,7 @@ export class DsChipGroup extends Mixin(componentFactory('ds-chip-group'), ariaDe
     dsMaxItemsObserver(newValue) {
         this.setValidity({ dsMaxItems: newValue });
     }
-    onChipClick(e) {
+    handleDsClick(e) {
         if (this.childChips.includes(e.target)) {
             this.dsChipClick.emit(e.detail);
         }
@@ -150,7 +150,7 @@ export class DsChipGroup extends Mixin(componentFactory('ds-chip-group'), ariaDe
         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: '3e891ff4382e82c7096f0e7b70c47c4fb7b4ae20', 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: 'ef0a1805c2d3d8be2d341b5b1629f60a3677cf84', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '62d5fd1b14df8854ff51974e806000429f99d437', name: "label" }), h("slot", { key: 'f1382d4ab634117707406118272c55809b9d33ba', name: "assistiveText" })), h("div", { key: '10dadc52350f45ec04e50e2df8e2f407ea7be26b', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '34d15e6790db57713e82b192e1317dee32919191' })), 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: '23959e8f0520f686d1dfb6e285490d31303bf1ed', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
+        return (h("div", { key: '4ababae35585e255c0a113e4841af4d9efe140a6', 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: 'cf458c09e8a31ada663516781096d5c373fa1d68', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '62fce22b818aa90866628b942500742f37e07a88', name: "label" }), h("slot", { key: '1c716f1105fbe74d2a5e72a40f7237a586d46f12', name: "assistiveText" })), h("div", { key: '3f02a975d23cdec126b53c1c1ff1508b61ba0eb6', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '63f1039a8aa2a5ec7cfd33f15052988a6c6dbf41' })), 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: '98b5b3a5a46d4eab0847e98e0d74dab2b64e1e97', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }
@@ -515,7 +515,7 @@ export class DsChipGroup extends Mixin(componentFactory('ds-chip-group'), ariaDe
     static get listeners() {
         return [{
                 "name": "dsClick",
-                "method": "onChipClick",
+                "method": "handleDsClick",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

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

@@ -8,7 +8,7 @@ import { FEEDBACK_RESET_TIMEOUT, FEEDBACK_SET_TIMEOUT, SCRIM_HEIGHT } from "../.
 import { multipleValueFactory } from "../../00-foundations/factories/multipleValueFactory";
 import { disableEventsFactory } from "../../00-foundations/factories/disableEventsFactory";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
-export class DsCombobox extends Mixin(componentFactory('ds-combobox'), multipleValueFactory, disableEventsFactory) {
+export class DsCombobox extends Mixin(componentFactory('ds-combobox', { stopRootTracking: true }), multipleValueFactory, disableEventsFactory) {
     constructor() {
         super();
     }
@@ -247,29 +247,29 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox'), multipleV
             return;
         this.closeCombobox('select');
     }
-    onDsClick(event) {
+    handleDsClick(event) {
         this.handleOptionClick(event.target);
     }
-    onDsMounted(event) {
+    handleDsMounted(event) {
         const option = event.target;
         option.dsFocusOnActiveChange = false;
         option.dsMouseDownPreventDefault = true;
     }
-    onDsValueChange(event) {
+    handleDsValueChange(event) {
         if (this.selectedOptions.some(opt => opt.dsValue === event.detail.oldValue)) {
             const valueWithoutOld = this.withoutValue(event.detail.oldValue);
             this.value = event.detail.newValue ? [...(valueWithoutOld || []), event.detail.newValue] : valueWithoutOld;
         }
     }
-    onDsLabelChange(event) {
+    handleDsLabelChange(event) {
         if (this.selectedOptions.some(opt => opt.dsValue === event.detail.value)) {
             this.setInputValue(this.inputValue.replace(event.detail.oldLabel, event.detail.newLabel));
         }
     }
-    onFocusIn() {
+    handleFocusIn() {
         this.hasFocus = true;
     }
-    onFocusOut(e) {
+    handleFocusOut(e) {
         const nextFocused = e && 'relatedTarget' in e ? e.relatedTarget : null;
         const lostFocus = !nextFocused || !this.el.contains(nextFocused);
         if (lostFocus) {
@@ -1561,37 +1561,37 @@ export class DsCombobox extends Mixin(componentFactory('ds-combobox'), multipleV
     static get listeners() {
         return [{
                 "name": "dsClick",
-                "method": "onDsClick",
+                "method": "handleDsClick",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsMounted",
-                "method": "onDsMounted",
+                "method": "handleDsMounted",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsValueChange",
-                "method": "onDsValueChange",
+                "method": "handleDsValueChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsLabelChange",
-                "method": "onDsLabelChange",
+                "method": "handleDsLabelChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "focusin",
-                "method": "onFocusIn",
+                "method": "handleFocusIn",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "focusout",
-                "method": "onFocusOut",
+                "method": "handleFocusOut",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1,4 +1,4 @@
-.ds-control-label__GqWYnG__label {
+.ds-control-label__0Yjiso__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__GqWYnG {
+.ds-control-label__0Yjiso {
   font-family: var(--ds-fontFamily-body);
   display: flex;
   flex-direction: column;
   margin-block-end: var(--ds-spacing-2xSmall);
 }
-.ds-control-label__GqWYnG:empty {
+.ds-control-label__0Yjiso:empty {
   display: none;
 }

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

@@ -1,9 +1,13 @@
-import { h } from "@stencil/core";
+import { h, Mixin } from "@stencil/core";
 import { cx } from "../../../utils/cx";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { declareComponentDependencies, transformTagName } from "../../../utils/utils";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
-export class DsControlLabel {
+import { componentFactory } from "../../00-foundations/factories/componentFactory";
+export class DsControlLabel extends Mixin(componentFactory('ds-control-label')) {
+    constructor() {
+        super();
+    }
     inheritedAttributes = {};
     el;
     dsId;
@@ -28,6 +32,9 @@ export class DsControlLabel {
             ...inheritAttributes(this, this.el),
         };
     }
+    componentDidLoad() {
+        this.componentMounted();
+    }
     getLabelText = () => {
         if (this.dsRequired) {
             return getRequiredText(this.dsLabel);
@@ -39,7 +46,7 @@ export class DsControlLabel {
     };
     render() {
         const baseClass = cx('ds-control-label');
-        return (h("div", { key: 'fab508f4e3fa50aac9e734414eaa1f73c4483107', class: baseClass }, h("slot", { key: 'e483813e2f15ee7410400149ea53807f2f0f15ef', name: "label" }, this.dsLabel && (h("label", { key: 'af75b193d8fc93e60ed5e4c60ce5f18cf7a93552', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '50194ab5f50307640b651281ba4f9827957b026c', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: 'cdd90c6b958c5234479e1eda45cf7a57bec439f3', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: 'feeee3fe0deb641b92692c2fb0940fc27ccec957', id: this.dsVisuallyHiddenAssistiveTextId, dsTag: "span" }, this.dsVisuallyHiddenAssistiveText)))));
+        return (h("div", { key: '74111ceaa165c74e43df9bbd15a3bbfd2704f93b', class: baseClass }, h("slot", { key: 'afbd5efbc7ecf02146d026242419cdeca0bd895e', name: "label" }, this.dsLabel && (h("label", { key: '00eea258bacd8302c32627bbf1e8d1d5a339edf7', class: `${baseClass}__label`, htmlFor: this.dsHtmlFor, id: this.dsId, ...this.inheritedAttributes }, this.getLabelText()))), h("slot", { key: '354218a4ca19a77c1bfaca7d397cf44baf2438d8', name: "assistiveText" }, this.dsAssistiveText && h(this.DsAssistiveText, { key: '7f5dc0c193c5df880bdfaf2a95adb486c435b78f', dsId: this.dsAssistiveTextId, dsText: this.dsAssistiveText }), this.dsVisuallyHiddenAssistiveText && (h(this.DsVisuallyHidden, { key: 'e4da623a56ed0ee1829917bdc4733d120e8ba93b', 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__GqWYnG__calendar-icon {
+.ds-datepicker-custom__0Yjiso__calendar-icon {
   height: 100%;
 }
 
-.ds-datepicker-custom__GqWYnG {
+.ds-datepicker-custom__0Yjiso {
   all: initial;
   display: revert;
   box-sizing: border-box;
@@ -26,15 +26,15 @@
   font-size: var(--ds-fontSize-16);
   position: relative;
 }
-.ds-datepicker-custom__GqWYnG__calendar-icon {
+.ds-datepicker-custom__0Yjiso__calendar-icon {
   margin-right: calc(-1 * var(--ds-spacing-xSmall));
 }
 @supports (-moz-appearance: none) {
-  .ds-datepicker-custom__GqWYnG__calendar-icon {
+  .ds-datepicker-custom__0Yjiso__calendar-icon {
     display: inline-flex;
   }
 }
-.ds-datepicker-custom__GqWYnG__picker {
+.ds-datepicker-custom__0Yjiso__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__GqWYnG__header {
+.ds-datepicker-custom__0Yjiso__header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: var(--ds-spacing-small);
   margin-bottom: var(--ds-spacing-xSmall);
 }
-.ds-datepicker-custom__GqWYnG__selects {
+.ds-datepicker-custom__0Yjiso__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__GqWYnG__navigation {
+.ds-datepicker-custom__0Yjiso__navigation {
   --ds-button-min-height: 2rem;
   --ds-button-min-width: 2rem;
   display: flex;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__GqWYnG__calendar {
+.ds-datepicker-custom__0Yjiso__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__GqWYnG__calendar--prev {
+.ds-datepicker-custom__0Yjiso__calendar--prev {
   animation: slide-in-from-left 250ms ease-out;
 }
-.ds-datepicker-custom__GqWYnG__calendar--next {
+.ds-datepicker-custom__0Yjiso__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__GqWYnG__weekday-row, .ds-datepicker-custom__GqWYnG__day-row {
+.ds-datepicker-custom__0Yjiso__weekday-row, .ds-datepicker-custom__0Yjiso__day-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-datepicker-custom__GqWYnG__weekday-row [role=gridcell], .ds-datepicker-custom__GqWYnG__day-row [role=gridcell] {
+.ds-datepicker-custom__0Yjiso__weekday-row [role=gridcell], .ds-datepicker-custom__0Yjiso__day-row [role=gridcell] {
   display: contents;
 }
-.ds-datepicker-custom__GqWYnG__weekday, .ds-datepicker-custom__GqWYnG__day {
+.ds-datepicker-custom__0Yjiso__weekday, .ds-datepicker-custom__0Yjiso__day {
   aspect-ratio: 1;
   line-height: var(--ds-button-min-height);
   text-align: center;
 }
-.ds-datepicker-custom__GqWYnG__weekday {
+.ds-datepicker-custom__0Yjiso__weekday {
   font-weight: var(--ds-fontWeight-semibold);
   font-size: var(--ds-fontSize-12);
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__GqWYnG__day {
+.ds-datepicker-custom__0Yjiso__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__GqWYnG__day:focus-visible {
+.ds-datepicker-custom__0Yjiso__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__GqWYnG__day:hover:not(.ds-datepicker-custom__GqWYnG__day--disabled, .ds-datepicker-custom__GqWYnG__day--selected) {
+.ds-datepicker-custom__0Yjiso__day:hover:not(.ds-datepicker-custom__0Yjiso__day--disabled, .ds-datepicker-custom__0Yjiso__day--selected) {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-datepicker-custom__GqWYnG__day:active:not(.ds-datepicker-custom__GqWYnG__day--disabled, .ds-datepicker-custom__GqWYnG__day--selected) {
+.ds-datepicker-custom__0Yjiso__day:active:not(.ds-datepicker-custom__0Yjiso__day--disabled, .ds-datepicker-custom__0Yjiso__day--selected) {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-datepicker-custom__GqWYnG__day--other-month:not(.ds-datepicker-custom__GqWYnG__day--disabled) {
+.ds-datepicker-custom__0Yjiso__day--other-month:not(.ds-datepicker-custom__0Yjiso__day--disabled) {
   color: var(--ds-textColor-secondary);
 }
-.ds-datepicker-custom__GqWYnG__day--today {
+.ds-datepicker-custom__0Yjiso__day--today {
   font-weight: var(--ds-fontWeight-bold);
   text-decoration: underline;
   text-decoration-thickness: 13%;
   text-underline-offset: 12%;
 }
-.ds-datepicker-custom__GqWYnG__day--selected:not(.ds-datepicker-custom__GqWYnG__day--disabled) {
+.ds-datepicker-custom__0Yjiso__day--selected:not(.ds-datepicker-custom__0Yjiso__day--disabled) {
   background-color: var(--ds-bgColor-primary);
   color: var(--ds-textColor-white);
   font-weight: var(--ds-fontWeight-bold);
 }
-.ds-datepicker-custom__GqWYnG__day--selected:not(.ds-datepicker-custom__GqWYnG__day--disabled):hover {
+.ds-datepicker-custom__0Yjiso__day--selected:not(.ds-datepicker-custom__0Yjiso__day--disabled):hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-datepicker-custom__GqWYnG__day--selected:not(.ds-datepicker-custom__GqWYnG__day--disabled):active {
+.ds-datepicker-custom__0Yjiso__day--selected:not(.ds-datepicker-custom__0Yjiso__day--disabled):active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-datepicker-custom__GqWYnG__day--disabled {
+.ds-datepicker-custom__0Yjiso__day--disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
   color: var(--ds-textColor-disabled-onLight);
   cursor: not-allowed;
 }
-.ds-datepicker-custom__GqWYnG__footer {
+.ds-datepicker-custom__0Yjiso__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }
-.ds-datepicker-custom__GqWYnG__footer-button--left {
+.ds-datepicker-custom__0Yjiso__footer-button--left {
   margin-right: auto;
 }
-.ds-datepicker-custom__GqWYnG__footer-button--right {
+.ds-datepicker-custom__0Yjiso__footer-button--right {
   margin-left: auto;
 }