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

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

@@ -1,4 +1,4 @@
-.ds-checkbox__owcjsm-fieldset {
+.ds-checkbox__0apwgA-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__owcjsm-fieldset__legend {
+.ds-checkbox__0apwgA-fieldset__legend {
   padding-inline: 0;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-16);
@@ -14,7 +14,7 @@
   letter-spacing: var(--ds-letterSpacing-wide);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__owcjsm-fieldset__assistive-text {
+.ds-checkbox__0apwgA-fieldset__assistive-text {
   display: inline;
   font-family: var(--ds-fontFamily-body);
   font-size: var(--ds-fontSize-14);
@@ -22,7 +22,7 @@
   line-height: var(--ds-lineHeight-large);
 }
 
-.ds-checkbox__owcjsm {
+.ds-checkbox__0apwgA {
   font-family: var(--ds-fontFamily-body);
   box-sizing: border-box;
   color: var(--ds-textColor-default);
@@ -41,7 +41,7 @@
   font-weight: var(--ds-fontWeight-regular);
   line-height: var(--ds-lineHeight-large);
 }
-.ds-checkbox__owcjsm__input {
+.ds-checkbox__0apwgA__input {
   /* hide the default checkbox */
   appearance: none;
   /* For iOS < 15 to remove gradient background */
@@ -56,79 +56,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__owcjsm__input:focus-visible {
+.ds-checkbox__0apwgA__input: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__owcjsm__input {
+.ds-checkbox__0apwgA__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__owcjsm__input:hover, .ds-checkbox__owcjsm__input:active {
+.ds-checkbox__0apwgA__input:hover, .ds-checkbox__0apwgA__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__owcjsm__input:hover {
+.ds-checkbox__0apwgA__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__owcjsm__input:active {
+.ds-checkbox__0apwgA__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__owcjsm__input:disabled {
+.ds-checkbox__0apwgA__input:disabled {
   cursor: not-allowed;
   color: var(--ds-textColor-disabled-onLight);
   background-color: var(--ds-bgColor-disabled-onLight);
   border-color: var(--ds-borderColor-disabled-onLight);
 }
 @media (forced-colors: active) {
-  .ds-checkbox__owcjsm__input:disabled {
+  .ds-checkbox__0apwgA__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__owcjsm__input--invalid {
+.ds-checkbox__0apwgA__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__owcjsm__input--invalid:hover {
+.ds-checkbox__0apwgA__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__owcjsm__input--invalid:active {
+.ds-checkbox__0apwgA__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__owcjsm__input {
+.ds-checkbox__0apwgA__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__owcjsm__input--invalid:checked, .ds-checkbox__owcjsm__input--invalid:indeterminate {
+.ds-checkbox__0apwgA__input--invalid:checked, .ds-checkbox__0apwgA__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__owcjsm__input--invalid:checked:hover, .ds-checkbox__owcjsm__input--invalid:indeterminate:hover {
+.ds-checkbox__0apwgA__input--invalid:checked:hover, .ds-checkbox__0apwgA__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__owcjsm__input--invalid:checked:active, .ds-checkbox__owcjsm__input--invalid:indeterminate:active {
+.ds-checkbox__0apwgA__input--invalid:checked:active, .ds-checkbox__0apwgA__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate {
+.ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):checked, .ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked:hover, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:hover {
+.ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):checked:hover, .ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked:active, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:active {
+.ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):checked:active, .ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):checked:disabled, .ds-checkbox__owcjsm__input:not(.ds-checkbox__owcjsm__input--invalid):indeterminate:disabled {
+.ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):checked:disabled, .ds-checkbox__0apwgA__input:not(.ds-checkbox__0apwgA__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__owcjsm__input {
+.ds-checkbox__0apwgA__input {
   /** checkmark **/
 }
-.ds-checkbox__owcjsm__input::before {
+.ds-checkbox__0apwgA__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -137,36 +137,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__owcjsm__input:checked::before {
+.ds-checkbox__0apwgA__input:checked::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__owcjsm__input:indeterminate::before {
+.ds-checkbox__0apwgA__input:indeterminate::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__owcjsm__input:checked:disabled::before {
+.ds-checkbox__0apwgA__input:checked:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>");
 }
-.ds-checkbox__owcjsm__input:indeterminate:disabled::before {
+.ds-checkbox__0apwgA__input:indeterminate:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>");
 }
-.ds-checkbox__owcjsm--no-margin .ds-checkbox__owcjsm__input {
+.ds-checkbox__0apwgA--no-margin .ds-checkbox__0apwgA__input {
   margin-right: 0;
 }
-.ds-checkbox__owcjsm--disabled {
+.ds-checkbox__0apwgA--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__owcjsm__span--optional {
+.ds-checkbox__0apwgA__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__owcjsm:has(.ds-checkbox__owcjsm__input:disabled) {
+.ds-checkbox__0apwgA:has(.ds-checkbox__0apwgA__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__owcjsm-error {
+.ds-checkbox__0apwgA-error {
   display: flex;
 }
-.ds-checkbox__owcjsm-error--visible {
+.ds-checkbox__0apwgA-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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__owcjsm {
+.ds-checkbox-group-expand-button__0apwgA {
   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__owcjsm:focus-visible {
+.ds-checkbox-group-expand-button__0apwgA: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__owcjsm {
+.ds-checkbox-group-expand-button__0apwgA {
   margin-block: var(--ds-spacing-xSmall);
   color: var(--ds-textColor-default);
 }
-.ds-checkbox-group-expand-button__owcjsm--actionable:hover {
+.ds-checkbox-group-expand-button__0apwgA--actionable:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-checkbox-group-expand-button__owcjsm--actionable:active {
+.ds-checkbox-group-expand-button__0apwgA--actionable:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-checkbox-group-expand-button__owcjsm__icon-container {
+.ds-checkbox-group-expand-button__0apwgA__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__owcjsm__icon-container--open {
+.ds-checkbox-group-expand-button__0apwgA__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-expand-button/ds-checkbox-group-expand-button.js

@@ -23,7 +23,7 @@ export class DsCheckboxGroupExpandButton extends Mixin(componentFactory('ds-chec
     render() {
         const baseClass = cx('ds-checkbox-group-expand-button');
         const iconContainerClass = `${baseClass}__icon-container`;
-        return (h("button", { key: '6dd937bf1a860c9b0bed4dd0e6f7801ecbbaa628', type: "button", onClick: this.handleClick, class: classNames(baseClass, { [`${baseClass}--actionable`]: this.dsActionable }), "aria-expanded": String(this.dsOpen), "aria-label": this.dsAriaLabel }, h("div", { key: 'bdec58e8c15c855247c44707edb3edfe83f91e73', class: classNames(iconContainerClass, { [`${iconContainerClass}--open`]: this.dsOpen }) }, h(this.DsIcon, { key: '298b233df16d11297cb18e468067ce9ef3ec2e6a', dsSize: "1.5rem", dsName: "chevron_forward" }))));
+        return (h("button", { key: '6412918776461b7293a1284d7b42b32aa6161b7e', type: "button", onClick: this.handleClick, class: classNames(baseClass, { [`${baseClass}--actionable`]: this.dsActionable }), "aria-expanded": String(this.dsOpen), "aria-label": this.dsAriaLabel }, h("div", { key: 'abbd586281ded9583ad26de311317d7864725914', class: classNames(iconContainerClass, { [`${iconContainerClass}--open`]: this.dsOpen }) }, h(this.DsIcon, { key: '8f612fadd5dc0308a369590f1dc1958a732365bd', dsSize: "1.5rem", dsName: "chevron_forward" }))));
     }
     static get is() { return "ds-checkbox-group-expand-button"; }
     static get encapsulation() { return "scoped"; }

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__owcjsm {
+.ds-checkbox-group__0apwgA {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__owcjsm__legend {
+.ds-checkbox-group__0apwgA__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__owcjsm__assistive-text {
+.ds-checkbox-group__0apwgA__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__owcjsm__checkbox-container {
+.ds-checkbox-group__0apwgA__checkbox-container {
   display: flex;
   gap: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__owcjsm__checkbox-container__expand-button {
+.ds-checkbox-group__0apwgA__checkbox-container__expand-button {
   order: -1;
 }
-.ds-checkbox-group__owcjsm__error {
+.ds-checkbox-group__0apwgA__error {
   display: flex;
 }
-.ds-checkbox-group__owcjsm__error--visible {
+.ds-checkbox-group__0apwgA__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__owcjsm > .ds-checkbox-group__owcjsm__checkboxes {
+.ds-checkbox-group__0apwgA > .ds-checkbox-group__0apwgA__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__owcjsm--inset {
+.ds-checkbox-group__0apwgA--inset {
   margin-left: calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall));
 }
-.ds-checkbox-group__owcjsm--inset[hidden] {
+.ds-checkbox-group__0apwgA--inset[hidden] {
   display: none;
 }
-.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm--inset {
+.ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA--inset {
   margin-left: calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal {
+.ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA__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__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] {
+.ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA__inset-reveal[data-phase=opening], .ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA__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__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] {
+.ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA__inset-reveal[data-phase=closing], .ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA__inset-reveal[data-phase=closed] {
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  .ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm__inset-reveal {
+  .ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA__inset-reveal {
     transition: none;
   }
 }
-.ds-checkbox-group__owcjsm--tree .ds-checkbox-group__owcjsm--has-parent {
+.ds-checkbox-group__0apwgA--tree .ds-checkbox-group__0apwgA--has-parent {
   margin-left: calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)));
 }
-.ds-checkbox-group__owcjsm--horizontal > .ds-checkbox-group__owcjsm__checkboxes {
+.ds-checkbox-group__0apwgA--horizontal > .ds-checkbox-group__0apwgA__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -132,7 +132,11 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
         }
         this.getEnabledChildCheckboxElements()?.[0]?.setFocus();
     }
+    recalculateCheckedChildElementCount = () => {
+        this.checkedChildElementCount = this.getChildCheckboxElements().filter(checkbox => checkbox.dsChecked).length;
+    };
     async checkValidity() {
+        this.recalculateCheckedChildElementCount();
         return this.internals?.checkValidity();
     }
     async setChecked(newValue) {
@@ -283,6 +287,9 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
             this.checkedChildElementCount = newValue;
             this.updateChildElementsChecked(true);
         }
+        else {
+            this.recalculateCheckedChildElementCount();
+        }
     }
     checkedChildElementCountObserver() {
         this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
@@ -423,6 +430,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
     componentDidLoad() {
         this.componentMounted();
         this.childElementsCount = this.getChildElements().length;
+        this.recalculateCheckedChildElementCount();
         this.dsCheckboxGroupInvalidStateChange.emit(this.getEffectiveErrorText());
     }
     ariaAttributeObserver(newValue, _oldValue, propName) {
@@ -456,7 +464,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
         const { ['aria-describedby']: attrAriaDescribedBy, ...restInheritedAttributes } = this.inheritedAttributes;
         const ariaLabelledBy = [this.dsLabel && this.legendId, effectiveErrorText && effectiveErrorTextId].filter(Boolean).join(' ');
         const ariaDescribedBy = [attrAriaDescribedBy, this.dsAssistiveText && this.assistiveTextId].filter(Boolean).join(' ');
-        return (h("fieldset", { key: '44f32d4f3ec55cf7520d008d9aecf6956da6ad73', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, style: this.treeTransitionStyles, ...ifDefined('aria-labelledby', ariaLabelledBy), ...ifDefined('aria-describedby', ariaDescribedBy), ...restInheritedAttributes }, this.dsLabel && (h("legend", { key: '34d641d0aed5d5afe9e708ebc240fcac28309f9b', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '4c33a7717de0f2d86064189a0cae91171f1c97ed', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h("div", { class: classNames(checkboxContainerClasses) }, h(this.DsCheckbox, { ref: el => (this.checkboxElem = el), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: effectiveErrorText, dsErrorsDisabled: true }), this.dsVariant === 'tree' && (h(this.DsCheckboxGroupExpandButton, { class: classNames(`${checkboxContainerClasses}__expand-button`), dsOpen: this.dsOpen, dsAriaLabel: this.expandButtonLabel, dsActionable: ['closed', 'open'].includes(this.nestedPhase) }))), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses, hidden: this.dsVariant === 'tree' && this.nestedPhase === 'closed' }, h("div", { ref: el => (this.nestedReveal = el), class: nestedRevealClasses, "data-phase": this.nestedPhase, style: revealStyle }, h("slot", null))))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '34c740b44002a36d7c22acab2cd41db5b7eaccfa', class: errorClasses }, h(this.DsInputValidity, { key: '57dace1b1491fbfe2685952dc37a825771e298ea', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
+        return (h("fieldset", { key: '576958f8411f79fc6976e2f84c6c965f329c2e9f', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, style: this.treeTransitionStyles, ...ifDefined('aria-labelledby', ariaLabelledBy), ...ifDefined('aria-describedby', ariaDescribedBy), ...restInheritedAttributes }, this.dsLabel && (h("legend", { key: '557176a2f4424e8e7560bb9ef923f4e98bf03ef1', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '39830bcb9b6abc81c9feff4aea850073e69c8764', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h("div", { class: classNames(checkboxContainerClasses) }, h(this.DsCheckbox, { ref: el => (this.checkboxElem = el), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: effectiveErrorText, dsErrorsDisabled: true }), this.dsVariant === 'tree' && (h(this.DsCheckboxGroupExpandButton, { class: classNames(`${checkboxContainerClasses}__expand-button`), dsOpen: this.dsOpen, dsAriaLabel: this.expandButtonLabel, dsActionable: ['closed', 'open'].includes(this.nestedPhase) }))), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses, hidden: this.dsVariant === 'tree' && this.nestedPhase === 'closed' }, h("div", { ref: el => (this.nestedReveal = el), class: nestedRevealClasses, "data-phase": this.nestedPhase, style: revealStyle }, h("slot", null))))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: 'add9f1b3da7b6d9e6eb7914739016615d30a08e9', class: errorClasses }, h(this.DsInputValidity, { key: '331f130104ec8a8b96570ce810635e74f71af900', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,9 +1,9 @@
-.ds-chip__owcjsm:focus-visible {
+.ds-chip__0apwgA: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__owcjsm {
+.ds-chip__0apwgA {
   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__owcjsm:hover {
+.ds-chip__0apwgA:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__owcjsm:active {
+.ds-chip__0apwgA:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__owcjsm__text {
+.ds-chip__0apwgA__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }

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

@@ -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: '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" }))));
+        return (h(Elem, { key: 'ee95d0a55e8352a99ff0041aae9a46a7fff53459', role: resolvedRole }, h("button", { key: '143f70c6031f1b55d7d019edc8a84456c1574c00', 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: '102dcbb34c8cb1eb27d7dc5af610f4e8d7fb358c', name: "prefix" }, this.dsIcon && h(DsIcon, { key: '42f9a70a1cb0f843768083e07fe93a2dff4e43b2', dsName: this.dsIcon, dsSize: "1rem" })), h("span", { key: 'b5318f73b9c25fe19012571302a5e60b56bcf95e', class: `${baseClass}__text` }, h("slot", { key: '75a3a0d6f5af796dd88a8cad760b83cffcb8c911' }, this.dsText), h(DsVisuallyHidden, { key: '30f24bc5e869cb322041ac54eec1e2af912641d6', dsTag: "span" }, ", ", removeSelection())), h(DsIcon, { key: '95bcdf6eb538b81e4f014e1e8e4856abac848d20', dsName: "close", dsSize: "1rem" }))));
     }
     static get is() { return "ds-chip"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,4 @@
-.ds-chip-group__owcjsm__chips {
+.ds-chip-group__0apwgA__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: 'eb079e9adb2b23d675e08d6e1a840afc33f0bfae', 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: '7ca24eefb56427514bdffafe5ef142f8e8ab7ef1', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '86cfcee9f38438a41dca600c54a7f2a3bb5c4b73', name: "label" }), h("slot", { key: '8c03de831d4563f5c92529074cecc51741bae705', name: "assistiveText" })), h("div", { key: '3c391cc9acf8763e2bf8866d8761c2300c1dd4e7', role: "list", class: `${baseClass}__chips` }, h("slot", { key: 'e5b969afc5e2c7d8106cabef7a687f5f50eba522' })), 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: 'e678f0b21b128cb2763c680cb6e025a67ff92015', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
+        return (h("div", { key: 'ad3709fbc34176e53e3f856615e3c0174967e571', 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: '603359bd7ec2f25118e5be1edfaa408445c34eab', dsLabel: this.dsLabel, dsAssistiveText: this.dsAssistiveText, dsAssistiveTextId: assistiveTextId }, h("slot", { key: '78522345bc322c38c2e5ee21e3f5686f38a7ce6c', name: "label" }), h("slot", { key: '2b2dd6706e35f336a8eecfee66c12074345fff32', name: "assistiveText" })), h("div", { key: 'bb6925219fdf24911011cc552d4ae94cae641761', role: "list", class: `${baseClass}__chips` }, h("slot", { key: '5aed60f027379d133b40c9e9822037826660e155' })), 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: '189c22e46c3fb8dd6c9b4919a088cb0d7bed36b4', id: errorTextId, dsText: this.dsErrorText, dsType: "error" })));
     }
     static get is() { return "ds-chip-group"; }
     static get encapsulation() { return "scoped"; }