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

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

@@ -1,4 +1,4 @@
-.ds-checkbox__izAhxK-fieldset {
+.ds-checkbox__WN0Emr-fieldset {
   display: inline-flex;
   flex-direction: column;
   border: none;
@@ -6,7 +6,7 @@
   margin: 0;
   gap: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox__izAhxK-fieldset__legend {
+.ds-checkbox__WN0Emr-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__izAhxK-fieldset__assistive-text {
+.ds-checkbox__WN0Emr-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__izAhxK {
+.ds-checkbox__WN0Emr {
   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__izAhxK__input {
+.ds-checkbox__WN0Emr__input {
   /* hide the default checkbox */
   appearance: none;
   /* For iOS < 15 to remove gradient background */
@@ -55,79 +55,79 @@
   flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
 }
-.ds-checkbox__izAhxK__input:focus-visible {
+.ds-checkbox__WN0Emr__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__izAhxK__input {
+.ds-checkbox__WN0Emr__input {
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
   border-color: var(--ds-borderColor-default);
   /** unchecked **/
 }
-.ds-checkbox__izAhxK__input:hover, .ds-checkbox__izAhxK__input:active {
+.ds-checkbox__WN0Emr__input:hover, .ds-checkbox__WN0Emr__input:active {
   border-color: var(--ds-borderColor-default);
 }
-.ds-checkbox__izAhxK__input:hover {
+.ds-checkbox__WN0Emr__input:hover {
   background-color: var(--ds-bgColor-white-hover);
 }
-.ds-checkbox__izAhxK__input:active {
+.ds-checkbox__WN0Emr__input:active {
   background-color: var(--ds-bgColor-white-active);
 }
-.ds-checkbox__izAhxK__input:disabled {
+.ds-checkbox__WN0Emr__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__izAhxK__input:disabled {
+  .ds-checkbox__WN0Emr__input:disabled {
     border-color: GrayText;
   }
 }
-.ds-checkbox__izAhxK__input--invalid {
+.ds-checkbox__WN0Emr__input--invalid {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger);
 }
-.ds-checkbox__izAhxK__input--invalid:hover {
+.ds-checkbox__WN0Emr__input--invalid:hover {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-hover);
 }
-.ds-checkbox__izAhxK__input--invalid:active {
+.ds-checkbox__WN0Emr__input--invalid:active {
   border-color: var(--ds-borderColor-danger);
   background-color: var(--ds-bgColor-danger-active);
 }
-.ds-checkbox__izAhxK__input {
+.ds-checkbox__WN0Emr__input {
   /** checked and indeterminate **/
 }
-.ds-checkbox__izAhxK__input--invalid:checked, .ds-checkbox__izAhxK__input--invalid:indeterminate {
+.ds-checkbox__WN0Emr__input--invalid:checked, .ds-checkbox__WN0Emr__input--invalid:indeterminate {
   background-color: var(--ds-iconColor-danger);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__izAhxK__input--invalid:checked:hover, .ds-checkbox__izAhxK__input--invalid:indeterminate:hover {
+.ds-checkbox__WN0Emr__input--invalid:checked:hover, .ds-checkbox__WN0Emr__input--invalid:indeterminate:hover {
   background-color: var(--ds-palette-red-60);
 }
-.ds-checkbox__izAhxK__input--invalid:checked:active, .ds-checkbox__izAhxK__input--invalid:indeterminate:active {
+.ds-checkbox__WN0Emr__input--invalid:checked:active, .ds-checkbox__WN0Emr__input--invalid:indeterminate:active {
   background-color: var(--ds-palette-red-70);
 }
-.ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):checked, .ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):indeterminate {
+.ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):checked, .ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):indeterminate {
   background-color: var(--ds-bgColor-primary);
   border-color: var(--ds-borderColor-transparent);
 }
-.ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):checked:hover, .ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):indeterminate:hover {
+.ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):checked:hover, .ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):indeterminate:hover {
   background-color: var(--ds-bgColor-primary-hover);
 }
-.ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):checked:active, .ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):indeterminate:active {
+.ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):checked:active, .ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):indeterminate:active {
   background-color: var(--ds-bgColor-primary-active);
 }
-.ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):checked:disabled, .ds-checkbox__izAhxK__input:not(.ds-checkbox__izAhxK__input--invalid):indeterminate:disabled {
+.ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):checked:disabled, .ds-checkbox__WN0Emr__input:not(.ds-checkbox__WN0Emr__input--invalid):indeterminate:disabled {
   background-color: var(--ds-bgColor-disabled-onLight);
 }
-.ds-checkbox__izAhxK__input {
+.ds-checkbox__WN0Emr__input {
   /** checkmark **/
 }
-.ds-checkbox__izAhxK__input::before {
+.ds-checkbox__WN0Emr__input::before {
   content: "";
   display: block;
   height: 1em;
@@ -136,36 +136,36 @@
   background-repeat: no-repeat;
   background-position: center;
 }
-.ds-checkbox__izAhxK__input:checked::before {
+.ds-checkbox__WN0Emr__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__izAhxK__input:indeterminate::before {
+.ds-checkbox__WN0Emr__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__izAhxK__input:checked:disabled::before {
+.ds-checkbox__WN0Emr__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__izAhxK__input:indeterminate:disabled::before {
+.ds-checkbox__WN0Emr__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__izAhxK--no-margin .ds-checkbox__izAhxK__input {
+.ds-checkbox__WN0Emr--no-margin .ds-checkbox__WN0Emr__input {
   margin-right: 0;
 }
-.ds-checkbox__izAhxK--disabled {
+.ds-checkbox__WN0Emr--disabled {
   color: var(--ds-textColor-disabled-onLight);
 }
-.ds-checkbox__izAhxK__span--optional {
+.ds-checkbox__WN0Emr__span--optional {
   color: var(--ds-textColor-secondary);
   font-size: var(--ds-fontSize-14);
 }
-.ds-checkbox__izAhxK:has(.ds-checkbox__izAhxK__input:disabled) {
+.ds-checkbox__WN0Emr:has(.ds-checkbox__WN0Emr__input:disabled) {
   cursor: not-allowed;
 }
 
-.ds-checkbox__izAhxK-error {
+.ds-checkbox__WN0Emr-error {
   display: flex;
 }
-.ds-checkbox__izAhxK-error--visible {
+.ds-checkbox__WN0Emr-error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }

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

@@ -49,6 +49,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
     groupInvalid = false;
     hasFocus = false;
     wasInvalidOnBlur = false;
+    internalChecked = false;
     initialChecked = false;
     isPressingEnter = false;
     get labelId() {
@@ -187,6 +188,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
             ...inheritAriaAttributes(this.el, ['aria-describedby', 'aria-invalid']),
         };
         this.initialChecked = this.dsChecked;
+        this.internalChecked = this.dsChecked;
         this._setDisableEventEmits(true);
     }
     componentDidLoad() {
@@ -200,7 +202,14 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
         forceUpdate(this);
     }
     dsCheckedObserver(isChecked) {
-        const shouldEmit = this.getShouldEmit();
+        this.internalChecked = isChecked;
+        this._setDisableEventEmits(true);
+    }
+    internalCheckedObserver(isChecked, oldValue) {
+        const shouldEmit = this.getShouldEmit([isChecked !== oldValue]);
+        if (this.dsChecked !== isChecked) {
+            this.dsChecked = isChecked;
+        }
         this._setDisableEventEmits(true);
         if (shouldEmit) {
             this.dsChange.emit({ checked: isChecked, value: this.dsValue });
@@ -222,7 +231,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
     handleInput = (e) => {
         const target = e.target;
         this._setDisableEventEmits(false);
-        this.dsChecked = target.checked;
+        this.internalChecked = target.checked;
     };
     handleKeyDown = (event) => {
         if (event.key === 'Enter' && !this.isPressingEnter) {
@@ -275,7 +284,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
             [!!this.dsAssistiveText && this.assistiveTextId, !this.dsErrorsDisabled && !!this.dsErrorText && this.inputValidityId].filter(Boolean).join(' ');
         const ariaLabel = this.dsAriaLabel || attrAriaLabel;
         const ariaInvalid = this.dsErrorText ? 'true' : attrAriaInvalid;
-        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes }, h("input", { ref: el => (this.inputElement = el), type: "checkbox", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, value: this.dsValue, disabled: this.dsDisabled, required: this.dsRequired, ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-label', ariaLabel), "aria-invalid": ariaInvalid, ...restAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: errorClasses }, h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))))));
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes }, h("input", { ref: el => (this.inputElement = el), type: "checkbox", class: inputClasses, id: this.dsId, name: this.dsName, form: this.dsForm, checked: this.internalChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, onFocus: this.handleFocus, onInvalid: this.handleInvalid, value: this.dsValue, disabled: this.dsDisabled, required: this.dsRequired, ...ifDefined('aria-describedby', ariaDescribedBy), ...ifDefined('aria-label', ariaLabel), "aria-invalid": ariaInvalid, ...restAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("slot", { name: "validity" }, h("div", { class: errorClasses }, h(DsInputValidity, { id: this.inputValidityId, dsText: this.dsErrorText, dsType: "error" }))))));
     }
     renderFieldset(baseClass) {
         const fieldsetClasses = classNames(`${baseClass}-fieldset`);
@@ -396,7 +405,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Passed to the `checked` attribute of the `input` element of the rendered checkbox."
+                    "text": "Passed to the `checked` attribute of the `input` element of the rendered checkbox.\nPublic API for programmatic checked state control and external state sync.\nUser interaction updates are handled via internal checked state."
                 },
                 "getter": false,
                 "setter": false,
@@ -644,7 +653,8 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
         return {
             "groupInvalid": {},
             "hasFocus": {},
-            "wasInvalidOnBlur": {}
+            "wasInvalidOnBlur": {},
+            "internalChecked": {}
         };
     }
     static get events() {
@@ -664,7 +674,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
                     "references": {
                         "DsCheckboxChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
                             "id": "src/components/01-base-components/ds-checkbox/ds-checkbox.tsx::DsCheckboxChangeEvent"
                         }
                     }
@@ -685,7 +695,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
                     "references": {
                         "DsCheckboxFocusEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
                             "id": "src/components/01-base-components/ds-checkbox/ds-checkbox.tsx::DsCheckboxFocusEvent"
                         }
                     }
@@ -706,7 +716,7 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
                     "references": {
                         "DsCheckboxBlurEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
                             "id": "src/components/01-base-components/ds-checkbox/ds-checkbox.tsx::DsCheckboxBlurEvent"
                         }
                     }
@@ -806,6 +816,9 @@ export class DsCheckbox extends Mixin(componentFactory('ds-checkbox'), ariaDepre
             }, {
                 "propName": "dsChecked",
                 "methodName": "dsCheckedObserver"
+            }, {
+                "propName": "internalChecked",
+                "methodName": "internalCheckedObserver"
             }];
     }
 }

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__izAhxK {
+.ds-checkbox-group-expand-button__WN0Emr {
   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__izAhxK:focus-visible {
+.ds-checkbox-group-expand-button__WN0Emr: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__izAhxK {
+.ds-checkbox-group-expand-button__WN0Emr {
   margin-block: var(--ds-spacing-xSmall);
   color: var(--ds-textColor-default);
 }
-.ds-checkbox-group-expand-button__izAhxK--actionable:hover {
+.ds-checkbox-group-expand-button__WN0Emr--actionable:hover {
   background-color: var(--ds-bgColor-transparent-onLight-hover);
 }
-.ds-checkbox-group-expand-button__izAhxK--actionable:active {
+.ds-checkbox-group-expand-button__WN0Emr--actionable:active {
   background-color: var(--ds-bgColor-transparent-onLight-active);
 }
-.ds-checkbox-group-expand-button__izAhxK__icon-container {
+.ds-checkbox-group-expand-button__WN0Emr__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__izAhxK__icon-container--open {
+.ds-checkbox-group-expand-button__WN0Emr__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: 'ec1289839d6cc751c16fdd9884225d606a159ef6', type: "button", onClick: this.handleClick, class: classNames(baseClass, { [`${baseClass}--actionable`]: this.dsActionable }), "aria-expanded": String(this.dsOpen), "aria-label": this.dsAriaLabel }, h("div", { key: '685d9e3d665e07650a4aafea821ed97b093a43f4', class: classNames(iconContainerClass, { [`${iconContainerClass}--open`]: this.dsOpen }) }, h(this.DsIcon, { key: 'dc846692453eeeaa00727a64f1dfbee7a0e77af1', dsSize: "1.5rem", dsName: "chevron_forward" }))));
+        return (h("button", { key: 'c402e3ee7b99d9e59428dbc96ad05d91c69d8b8d', type: "button", onClick: this.handleClick, class: classNames(baseClass, { [`${baseClass}--actionable`]: this.dsActionable }), "aria-expanded": String(this.dsOpen), "aria-label": this.dsAriaLabel }, h("div", { key: '62812be947351d81089d1353c6e511b66c1895d3', class: classNames(iconContainerClass, { [`${iconContainerClass}--open`]: this.dsOpen }) }, h(this.DsIcon, { key: '9078c2ef334362d6a71a27a0e4474ee7b39df4f2', 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__izAhxK {
+.ds-checkbox-group__WN0Emr {
   display: inline-flex;
   flex-direction: column;
   border: none;
   padding: 0;
   margin: 0;
 }
-.ds-checkbox-group__izAhxK__legend {
+.ds-checkbox-group__WN0Emr__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__izAhxK__assistive-text {
+.ds-checkbox-group__WN0Emr__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__izAhxK__checkbox-container {
+.ds-checkbox-group__WN0Emr__checkbox-container {
   display: flex;
   gap: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__izAhxK__checkbox-container__expand-button {
+.ds-checkbox-group__WN0Emr__checkbox-container__expand-button {
   order: -1;
 }
-.ds-checkbox-group__izAhxK__error {
+.ds-checkbox-group__WN0Emr__error {
   display: flex;
 }
-.ds-checkbox-group__izAhxK__error--visible {
+.ds-checkbox-group__WN0Emr__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
   padding-left: var(--ds-spacing-4xSmall);
 }
-.ds-checkbox-group__izAhxK > .ds-checkbox-group__izAhxK__checkboxes {
+.ds-checkbox-group__WN0Emr > .ds-checkbox-group__WN0Emr__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }
-.ds-checkbox-group__izAhxK--inset {
+.ds-checkbox-group__WN0Emr--inset {
   margin-left: calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall));
 }
-.ds-checkbox-group__izAhxK--inset[hidden] {
+.ds-checkbox-group__WN0Emr--inset[hidden] {
   display: none;
 }
-.ds-checkbox-group__izAhxK--tree .ds-checkbox-group__izAhxK--inset {
+.ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr--inset {
   margin-left: calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall));
 }
-.ds-checkbox-group__izAhxK--tree .ds-checkbox-group__izAhxK__inset-reveal {
+.ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr__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__izAhxK--tree .ds-checkbox-group__izAhxK__inset-reveal[data-phase=opening], .ds-checkbox-group__izAhxK--tree .ds-checkbox-group__izAhxK__inset-reveal[data-phase=open] {
+.ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr__inset-reveal[data-phase=opening], .ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr__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__izAhxK--tree .ds-checkbox-group__izAhxK__inset-reveal[data-phase=closing], .ds-checkbox-group__izAhxK--tree .ds-checkbox-group__izAhxK__inset-reveal[data-phase=closed] {
+.ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr__inset-reveal[data-phase=closing], .ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr__inset-reveal[data-phase=closed] {
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
-  .ds-checkbox-group__izAhxK--tree .ds-checkbox-group__izAhxK__inset-reveal {
+  .ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr__inset-reveal {
     transition: none;
   }
 }
-.ds-checkbox-group__izAhxK--tree .ds-checkbox-group__izAhxK--has-parent {
+.ds-checkbox-group__WN0Emr--tree .ds-checkbox-group__WN0Emr--has-parent {
   margin-left: calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)));
 }
-.ds-checkbox-group__izAhxK--horizontal > .ds-checkbox-group__izAhxK__checkboxes {
+.ds-checkbox-group__WN0Emr--horizontal > .ds-checkbox-group__WN0Emr__checkboxes {
   flex-flow: row wrap;
   gap: var(--ds-spacing-small);
 }

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

@@ -1,7 +1,7 @@
 import { forceUpdate, Fragment, h, Mixin } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
-import { declareComponentDependencies, nextFrame, transformTagName } from "../../../utils/utils";
+import { declareComponentDependencies, nextFrame, ifDefined, transformTagName } from "../../../utils/utils";
 import { allOptions, atLeastOneOption, getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { cx } from "../../../utils/cx";
 import { componentFactory } from "../../00-foundations/factories/componentFactory";
@@ -38,6 +38,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
     dsCheckboxGroupFormChange;
     dsCheckboxGroupNameChange;
     dsCheckboxGroupCheckedChange;
+    dsCheckboxGroupOpenChange;
     dsSubmitInvalid;
     dsValidity;
     dsForm;
@@ -98,10 +99,10 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
         const effectiveText = this.getEffectiveErrorText();
         const effectiveId = this.getEffectiveErrorTextId();
         if (effectiveText && effectiveId) {
-            target.setAttribute('aria-describedby', effectiveId);
+            target.dsAriaDescribedby = effectiveId;
         }
         else {
-            target.removeAttribute('aria-describedby');
+            target.dsAriaDescribedby = undefined;
         }
     };
     resolveParentErrorTextId = () => {
@@ -351,6 +352,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
     }
     handleDsOpenChange(e) {
         e.stopPropagation();
+        this.dsCheckboxGroupOpenChange.emit(e.detail);
     }
     formResetCallback() {
         this.dsErrorText = '';
@@ -433,7 +435,6 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
     render() {
         const effectiveErrorText = this.getEffectiveErrorText();
         const effectiveErrorTextId = this.getEffectiveErrorTextId();
-        const labelledBy = [this.legendId, effectiveErrorText && effectiveErrorTextId].filter(Boolean).join(' ');
         const baseClass = cx('ds-checkbox-group');
         const classes = classNames(baseClass, {
             [`${baseClass}--horizontal`]: this.dsDirection === 'horizontal',
@@ -452,7 +453,10 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
         const revealStyle = {
             maxHeight: this.nestedMaxHeight,
         };
-        return (h("fieldset", { key: '953641435af6c6b12a3483aba73232c23db56614', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": labelledBy, style: this.treeTransitionStyles, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: '23bed490441cc7464b9525bd92db403e2ff263cd', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: 'c3ebfe700b8badb6d2a407ff2ff9acfa469686f3', 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: '6e210f21924c81e550bfae9ed28331a93a9cb8ae', class: errorClasses }, h(this.DsInputValidity, { key: '9a84d6c6bd839520ad86bb9a305fca7b411ff184', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
+        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" }))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "scoped"; }
@@ -817,7 +821,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupChangeEvent"
                         }
                     }
@@ -838,7 +842,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupIndeterminateChildChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupIndeterminateChildChangeEvent"
                         }
                     }
@@ -859,7 +863,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupInvalidStateChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupInvalidStateChangeEvent"
                         }
                     }
@@ -880,7 +884,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupDisabledChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupDisabledChangeEvent"
                         }
                     }
@@ -901,7 +905,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupAllRequiredChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupAllRequiredChangeEvent"
                         }
                     }
@@ -922,7 +926,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupFormChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupFormChangeEvent"
                         }
                     }
@@ -943,7 +947,7 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupNameChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupNameChangeEvent"
                         }
                     }
@@ -964,11 +968,26 @@ export class DsCheckboxGroup extends Mixin(componentFactory('ds-checkbox-group',
                     "references": {
                         "DsCheckboxGroupCheckedChangeEvent": {
                             "location": "local",
-                            "path": "/Users/tuukkaturu/hy/hy-ds/uh-ds/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
+                            "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
                             "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupCheckedChangeEvent"
                         }
                     }
                 }
+            }, {
+                "method": "dsCheckboxGroupOpenChange",
+                "name": "dsCheckboxGroupOpenChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsCheckboxGroupOpenChange` event is emitted when the expand button is toggled in tree variant.\nThe event `detail` is the new open state."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }, {
                 "method": "dsSubmitInvalid",
                 "name": "dsSubmitInvalid",

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

@@ -1,9 +1,9 @@
-.ds-chip__izAhxK:focus-visible {
+.ds-chip__WN0Emr: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__izAhxK {
+.ds-chip__WN0Emr {
   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__izAhxK:hover {
+.ds-chip__WN0Emr:hover {
   background-color: var(--ds-bgColor-secondary-hover);
 }
-.ds-chip__izAhxK:active {
+.ds-chip__WN0Emr:active {
   background-color: var(--ds-bgColor-secondary-active);
 }
-.ds-chip__izAhxK__text {
+.ds-chip__WN0Emr__text {
   padding: 0 var(--ds-spacing-3xSmall);
 }