@uh-design-system/component-library 0.5.1 → 0.5.3

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

@@ -1,3 +1,11 @@
+:root {
+  --ds-breakpoint-xSmall: 20rem;
+  --ds-breakpoint-small: 30rem;
+  --ds-breakpoint-medium: 60rem;
+  --ds-breakpoint-large: 75rem;
+  --ds-breakpoint-xLarge: 90rem;
+}
+
 .ds-checkbox-fieldset {
   display: inline-flex;
   flex-direction: column;
@@ -16,17 +24,19 @@
 .ds-checkbox-fieldset__assistive-text {
   display: inline;
   font-size: var(--ds-fontSize-14);
-  color: var(--ds-textColor-secondary);
+  color: var(--ds-palette-black-70);
   line-height: var(--ds-lineHeight-large);
 }
 
 .ds-checkbox {
   display: inline-flex;
   align-self: flex-start;
-  align-items: center;
+  align-items: flex-start;
   flex-direction: row;
   flex-wrap: nowrap;
   text-wrap: wrap;
+  word-wrap: break-word;
+  white-space: normal;
   position: relative;
   cursor: pointer;
   user-select: none;
@@ -37,10 +47,10 @@
   margin-right: 0;
 }
 .ds-checkbox--disabled {
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-checkbox__span--optional {
-  color: var(--ds-textColor-secondary);
+  color: var(--ds-palette-black-70);
   font-size: var(--ds-fontSize-14);
 }
 .ds-checkbox:has(.ds-checkbox__input:disabled) {
@@ -52,13 +62,14 @@
   -webkit-appearance: none;
   appearance: none;
   /* For iOS < 15 to remove gradient background */
-  background-color: var(--ds-bgColor-white);
+  background-color: var(--ds-palette-white);
   /* Not removed via appearance */
   margin: 0;
   display: grid;
   place-content: center;
   height: 24px;
   width: 24px;
+  flex-shrink: 0;
   margin-right: var(--ds-spacing-xSmall);
   border-width: var(--ds-borderWidth-thin);
   border-style: solid;
@@ -69,24 +80,24 @@
   /** checkmark **/
 }
 .ds-checkbox__input:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline-color: var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
   outline-style: solid;
   outline-width: var(--ds-borderWidth-thin);
 }
 .ds-checkbox__input:hover, .ds-checkbox__input:active {
-  border-color: var(--ds-borderColor-default);
+  border-color: var(--ds-palette-black-50);
 }
 .ds-checkbox__input:hover {
-  background-color: var(--ds-bgColor-white-hover);
+  background-color: var(--ds-palette-black-10);
 }
 .ds-checkbox__input:active {
-  background-color: var(--ds-bgColor-white-active);
+  background-color: var(--ds-palette-black-20);
 }
 .ds-checkbox__input:disabled {
-  background-color: var(--ds-bgColor-disabled-onLight);
-  border-color: var(--ds-borderColor-disabled-onLight);
+  background-color: var(--ds-overlay-black-10);
+  border-color: var(--ds-overlay-black-15);
 }
 @media (forced-colors: active) {
   .ds-checkbox__input:disabled {
@@ -94,24 +105,24 @@
   }
 }
 .ds-checkbox__input:checked, .ds-checkbox__input:indeterminate {
-  background-color: var(--ds-bgColor-primary);
-  border-color: var(--ds-borderColor-transparent);
+  background-color: var(--ds-palette-mainBlue-70);
+  border-color: var(--ds-overlay-black-00);
 }
 .ds-checkbox__input:checked:hover, .ds-checkbox__input:indeterminate:hover {
-  background-color: var(--ds-bgColor-primary-hover);
+  background-color: var(--ds-palette-mainBlue-80);
 }
 .ds-checkbox__input:checked:active, .ds-checkbox__input:indeterminate:active {
-  background-color: var(--ds-bgColor-primary-active);
+  background-color: var(--ds-palette-mainBlue-90);
 }
 .ds-checkbox__input:checked:disabled, .ds-checkbox__input:indeterminate:disabled {
-  background-color: var(--ds-bgColor-disabled-onLight);
+  background-color: var(--ds-overlay-black-10);
 }
 .ds-checkbox__input:user-invalid, .ds-checkbox__input--invalid, .ds-checkbox__input--invalid:checked, .ds-checkbox__input--invalid:indeterminate {
-  border-color: var(--ds-borderColor-danger);
+  border-color: var(--ds-palette-red-50);
 }
 .ds-checkbox__input:disabled {
   cursor: not-allowed;
-  color: var(--ds-textColor-disabled-onLight);
+  color: var(--ds-palette-black-40);
 }
 .ds-checkbox__input::before {
   content: "";

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

@@ -1,21 +1,20 @@
 import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
-import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
+import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { isValidation } from "../../../store";
 import { getAriaLabel, idGenerator } from "../../../utils/utils";
 const checkboxIdGenerator = idGenerator('ds-checkbox');
 export class DsCheckbox {
+    checkboxGroup = null;
     inputElem;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    initialChecked;
     labelClicked = false;
     el;
     internals;
-    dsCheckboxInput;
     identifier = checkboxIdGenerator.next().value;
     checked = false;
     legend;
@@ -29,7 +28,8 @@ export class DsCheckbox {
     optional = false;
     optionalText;
     ariaLabel;
-    value = this.checked.toString();
+    invalid = !!this.errorText;
+    initialChecked = this.checked;
     validationMessage;
     setIds = () => {
         this.labelId = `${this.identifier}-label`;
@@ -59,24 +59,33 @@ export class DsCheckbox {
         return this.text;
     };
     getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
-    restoreInitialState = () => {
+    formResetCallback() {
         this.checked = this.initialChecked;
-        this.value = this.checked.toString();
         this.internals?.setValidity({});
-        this.internals?.setFormValue(this.value);
-    };
-    setInitialState = () => {
-        this.initialChecked = this.checked;
-        this.value = this.checked.toString();
-        this.internals?.setFormValue(this.value);
-    };
-    formResetCallback() {
-        this.restoreInitialState();
+        this.internals?.setFormValue(this.checked.toString());
+    }
+    connectedCallback() {
+        this.checkboxGroup = this.el.closest('ds-checkbox-group');
+        if (this.checkboxGroup) {
+            this.invalid = !!this.checkboxGroup.errorText;
+            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.checkboxGroup) {
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.checkboxGroup = null;
     }
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
     componentWillLoad() {
-        this.setInitialState();
         this.setIds();
-        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']);
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
+            ...inheritAttributes(this, this.el),
+        };
         if (isValidation('server') || this.errorText) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -84,9 +93,7 @@ export class DsCheckbox {
     handleInput = (e) => {
         const target = e.target;
         this.checked = target.checked;
-        this.value = target.checked.toString();
-        this.internals?.setFormValue(this.value);
-        this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
+        this.internals?.setFormValue(target.checked.toString());
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
@@ -114,13 +121,13 @@ export class DsCheckbox {
             'ds-checkbox--no-margin': Boolean(!this.text),
         });
         const inputClasses = classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText),
+            'ds-checkbox__input--invalid': Boolean(this.errorText) || this.invalid,
         });
         const errorClasses = classNames('ds-checkbox-error', {
             'ds-checkbox-error--visible': Boolean(this.validationMessage),
         });
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.value, disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.checked.toString(), disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
@@ -408,34 +415,11 @@ export class DsCheckbox {
     }
     static get states() {
         return {
-            "value": {},
+            "invalid": {},
+            "initialChecked": {},
             "validationMessage": {}
         };
     }
-    static get events() {
-        return [{
-                "method": "dsCheckboxInput",
-                "name": "dsCheckboxInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "DsCheckboxInputEvent",
-                    "resolved": "DsCheckboxInputEvent",
-                    "references": {
-                        "DsCheckboxInputEvent": {
-                            "location": "local",
-                            "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::DsCheckboxInputEvent"
-                        }
-                    }
-                }
-            }];
-    }
     static get elementRef() { return "el"; }
     static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -14,7 +14,7 @@
 }
 .ds-checkbox-group__assistive-text {
   font-size: var(--ds-fontSize-14);
-  color: var(--ds-textColor-secondary);
+  color: var(--ds-palette-black-70);
   line-height: var(--ds-lineHeight-large);
   margin-bottom: var(--ds-spacing-2xSmall);
 }

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

@@ -4,6 +4,7 @@ import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
 import { idGenerator } from "../../../utils/utils";
 const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
 export class DsCheckboxGroup {
+    checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -13,6 +14,7 @@ export class DsCheckboxGroup {
     el;
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
+    dsCheckboxGroupInvalidStateChange;
     legend;
     assistiveText;
     direction = 'vertical';
@@ -20,7 +22,7 @@ export class DsCheckboxGroup {
     text = '';
     checked = false;
     disabled = false;
-    childElementsCount = 0;
+    childElementsCount = 1;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
@@ -66,55 +68,61 @@ export class DsCheckboxGroup {
     watchIndeterminateChange(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
+    errorTextObserver(errorText) {
+        this.dsCheckboxGroupInvalidStateChange.emit(!!errorText);
+    }
     listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    watchCheckedChildElementCountChange(newValue, oldValue) {
-        this.isIndeterminate =
-            this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
-        if (newValue === this.childElementsCount && newValue > oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
-        }
-        else if (oldValue === this.childElementsCount && newValue < oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
-        }
+    watchCheckedChildElementCountChange() {
+        this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
     }
-    updateCheckedChildElementCount = (event) => {
-        if (event.detail.checked) {
-            this.checkedChildElementCount = this.checkedChildElementCount === this.childElementsCount ? this.checkedChildElementCount : this.checkedChildElementCount + 1;
+    updateCheckedChildElementCount = (checked) => {
+        if (checked) {
+            this.checkedChildElementCount = Math.min(this.childElementsCount, this.checkedChildElementCount + 1);
         }
         else {
-            this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
+            this.checkedChildElementCount = Math.max(0, this.checkedChildElementCount - 1);
         }
     };
     listenCheckboxChange(event) {
-        if (event.detail.id === this.checkboxId) {
-            this.updateChildElementsChecked(event.detail.checked);
+        if (event.target === this.el) {
+            this.updateChildElementsChecked(this.checkboxElem.checked);
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.checked });
             return;
         }
-        if (this.getChildCheckboxElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+        const target = event.target;
+        if (this.getChildCheckboxElements().includes(target)) {
+            const previousCheckedChildElementCount = this.checkedChildElementCount;
+            this.updateCheckedChildElementCount(target.checked);
+            if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
+            }
+            else if (previousCheckedChildElementCount === this.childElementsCount && this.checkedChildElementCount < previousCheckedChildElementCount) {
+                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+            }
         }
     }
     listenCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
-            this.updateCheckedChildElementCount(event);
+            event.stopPropagation();
+            this.updateCheckedChildElementCount(event.detail.checked);
         }
     }
-    setChildElementCount = () => {
-        this.childElementsCount = this.getChildElements().length;
-    };
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-labelledby']);
     }
     componentDidLoad() {
-        this.setChildElementCount();
+        this.childElementsCount = this.getChildElements().length;
         this.updateChildCheckboxes(element => {
             element.setAttribute('data-errors-disabled', 'true');
         });
     }
     componentDidUpdate() {
-        this.setChildElementCount();
+        const childElementCount = this.getChildElements().length;
+        if (this.childElementsCount !== childElementCount) {
+            this.childElementsCount = childElementCount;
+        }
     }
     render() {
         const classes = classNames('ds-checkbox-group', {
@@ -128,7 +136,7 @@ export class DsCheckboxGroup {
         const nestedClasses = classNames('ds-checkbox-group', 'ds-checkbox-group--inset');
         const checkboxesClasses = classNames('ds-checkbox-group__checkboxes');
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h("fieldset", { key: '1029763130b4d2d138679c9f84ec72c0231fcc83', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'a9be37aab510d5e402841c8bbda64190548bc1ea', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '0ae42c2b46e52dad0570ad120180e662db43f2fa', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '3ea5bb7991a99c676cb50a24d1a679b6f68c96bf', class: errorClasses }, h("ds-input-validity", { key: '8d5ca5e80b2a5f985e09bf7039538a5a13278e8e', id: this.errorTextId, text: this.errorText, type: "error" }))));
+        return (h("fieldset", { key: '25b932a80cf1b2c7467ef5ea012661992cb88853', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'e96b23987622f5df0144a9499122f7afba552648', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: 'ae3fb6f287dd518ad911391054f6ed4de7e8ea6f', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { ref: checkboxElem => (this.checkboxElem = checkboxElem), id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: 'd2719bdb242a526af73e628d2ce7bca234c94961', class: errorClasses }, h("ds-input-validity", { key: 'a31a78918c1894bd8f68207c3ea3f9df984bd52b', id: this.errorTextId, text: this.errorText, type: "error" }))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -335,6 +343,21 @@ export class DsCheckboxGroup {
                         }
                     }
                 }
+            }, {
+                "method": "dsCheckboxGroupInvalidStateChange",
+                "name": "dsCheckboxGroupInvalidStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -376,6 +399,9 @@ export class DsCheckboxGroup {
             }, {
                 "propName": "isIndeterminate",
                 "methodName": "watchIndeterminateChange"
+            }, {
+                "propName": "errorText",
+                "methodName": "errorTextObserver"
             }, {
                 "propName": "checkedChildElementCount",
                 "methodName": "watchCheckedChildElementCountChange"
@@ -389,7 +415,7 @@ export class DsCheckboxGroup {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "dsCheckboxInput",
+                "name": "input",
                 "method": "listenCheckboxChange",
                 "target": undefined,
                 "capture": false,

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

@@ -1,14 +1,11 @@
 import { html } from "lit";
+import { getShadowRoot } from "../../../../utils/tests/testUtils";
+import { expect, userEvent, waitFor } from "@storybook/test";
 const meta = {
     title: 'Base Components/CheckboxGroup/Features',
     component: 'ds-checkbox-group',
-    render: (args) => html `
-    <ds-checkbox-group
-      legend=${args.legend}
-      assistive-text=${args.assistiveText}
-      direction=${args.direction}
-      error-text=${args.errorText}
-    >
+    render: args => html `
+    <ds-checkbox-group legend=${args.legend} assistive-text=${args.assistiveText} direction=${args.direction} error-text=${args.errorText}>
       <ds-checkbox text="Value text"></ds-checkbox>
       <ds-checkbox text="Value text"></ds-checkbox>
       <ds-checkbox text="Value text"></ds-checkbox>
@@ -52,12 +49,8 @@ export const Nested = {
         checked: false,
         disabled: false,
     },
-    render: (args) => html `
-    <ds-checkbox-group
-      text=${args.text}
-      checked=${args.checked}
-      disabled=${args.disabled}
-    >
+    render: args => html `
+    <ds-checkbox-group text=${args.text} checked=${args.checked} disabled=${args.disabled}>
       <ds-checkbox text="Child checkbox"></ds-checkbox>
       <ds-checkbox text="Child checkbox"></ds-checkbox>
       <ds-checkbox text="Child checkbox"></ds-checkbox>
@@ -75,15 +68,78 @@ export const DeeplyNested = {
       disabled="false"
     >
       <ds-checkbox text="Parent checkbox"></ds-checkbox>
-      <ds-checkbox-group
-        text="Parent checkbox"
-        checked="false"
-        disabled="false"
-      >
+      <ds-checkbox-group id="parent-checkbox-group" text="Parent checkbox" checked="false" disabled="false">
         <ds-checkbox text="Child checkbox"></ds-checkbox>
         <ds-checkbox text="Child checkbox"></ds-checkbox>
         <ds-checkbox text="Child checkbox"></ds-checkbox>
       </ds-checkbox-group>
     </ds-checkbox-group>
   `,
+    play: async ({ canvasElement, step }) => {
+        const grandParentShadowRoot = await getShadowRoot(canvasElement, 'ds-checkbox-group');
+        const grandParentCheckboxWebc = grandParentShadowRoot.querySelector('ds-checkbox');
+        const grandParentCheckboxInput = grandParentCheckboxWebc.shadowRoot.querySelector('input');
+        const parentShadowRoot = await getShadowRoot(canvasElement, 'ds-checkbox-group#parent-checkbox-group');
+        const parentCheckboxWebc = parentShadowRoot.querySelector('ds-checkbox');
+        const parentCheckboxInput = parentCheckboxWebc.shadowRoot.querySelector('input');
+        const slottedCheckboxWebcs = canvasElement.querySelectorAll('ds-checkbox');
+        const slottedCheckboxInputs = [];
+        for (const webc of slottedCheckboxWebcs) {
+            slottedCheckboxInputs.push(webc.shadowRoot.querySelector('input'));
+        }
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(false);
+            expect(parentCheckboxInput.checked).toBe(false);
+        });
+        await step('Clicking an unchecked grand parent checkbox should check all checkboxes', async () => {
+            userEvent.click(grandParentCheckboxInput);
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(true);
+                expect(parentCheckboxInput.checked).toBe(true);
+                slottedCheckboxInputs.forEach(checkbox => {
+                    expect(checkbox.checked).toBe(true);
+                });
+            });
+        });
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(true);
+            expect(parentCheckboxInput.checked).toBe(true);
+        });
+        await step('Clicking a checked grand parent checkbox should uncheck all checkboxes', async () => {
+            userEvent.click(grandParentCheckboxInput);
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(false);
+                expect(parentCheckboxInput.checked).toBe(false);
+                slottedCheckboxInputs.forEach(checkbox => {
+                    expect(checkbox.checked).toBe(false);
+                });
+            });
+        });
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(false);
+            expect(parentCheckboxInput.checked).toBe(false);
+        });
+        await step('Clicking all unchecked child checkboxes should check parent and grandparent checkbox', async () => {
+            slottedCheckboxInputs.forEach(checkbox => {
+                userEvent.click(checkbox);
+            });
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(true);
+                expect(parentCheckboxInput.checked).toBe(true);
+            });
+        });
+        await waitFor(() => {
+            expect(grandParentCheckboxInput.checked).toBe(true);
+            expect(parentCheckboxInput.checked).toBe(true);
+        });
+        await step('Clicking all checked child checkboxes should uncheck parent and grandparent checkbox', async () => {
+            slottedCheckboxInputs.forEach(checkbox => {
+                userEvent.click(checkbox);
+            });
+            await waitFor(() => {
+                expect(grandParentCheckboxInput.checked).toBe(false);
+                expect(parentCheckboxInput.checked).toBe(false);
+            });
+        });
+    },
 };

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

@@ -48,7 +48,7 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '58309a22dafbad09a1f9e884657aad264261174e' }, h("span", { key: '3295d61af901e74ea7c39d1e7a4b7e083f44794f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '71d2466d7ab9bdac086b7e4723bdbcae85f46179' }, h("span", { key: 'b19955f6f321b89dfce0d7843dcc41d3db92b29f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.css

@@ -13,10 +13,10 @@
   gap: var(--ds-spacing-2xSmall);
 }
 .ds-input-validity--error {
-  color: var(--ds-textColor-danger);
+  color: var(--ds-palette-red-70);
 }
 .ds-input-validity--success {
-  color: var(--ds-textColor-success);
+  color: var(--ds-palette-green-70);
 }
 .ds-input-validity ds-icon {
   display: block;

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js

@@ -17,7 +17,7 @@ export class DsInputValidity {
             'ds-input-validity--success': this.type === 'success',
         });
         const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        return (h("div", { key: '2eca152eca6e7b4d7e894ff8aaf50a6d03c3e44f', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '73e4cd1b3af6a84b9c7cbca813c166bc10e9dd26', class: classes }, h("ds-icon", { key: '4eaad4001e758837f9e8b1aae48292a1c5a1a08f', name: icon }), h("small", { key: '3ee5d39785454b9aab9ae6012f3ad940c1f18df0', id: this.identifier }, this.text)))));
+        return (h("div", { key: 'b76f90369546a44b88ff02ec08182ebf2299c0e9', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '575d68fff500bac58612514a3c4efebdb62dffdb', class: classes }, h("ds-icon", { key: '707c95678fdf517f83bc5126a1fcea0d9f8eb5cb', name: icon }), h("small", { key: '39e098386b1ed37c9d797513d626bb50e2e50034', id: this.identifier }, this.text)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {

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

@@ -13,7 +13,7 @@
 .ds-link {
   display: inline-flex;
   align-items: center;
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
   font-weight: var(--ds-fontWeight-regular);
   letter-spacing: var(--ds-letterSpacing-wide);
   text-decoration-line: underline;
@@ -24,9 +24,9 @@
   text-underline-position: from-font;
 }
 .ds-link:focus-visible {
-  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);
-  outline-color: var(--ds-borderColor-black);
-  outline-offset: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline-color: var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
   outline-style: solid;
   outline-width: var(--ds-borderWidth-thin);
 }
@@ -75,30 +75,30 @@
   text-underline-offset: 12%;
 }
 .ds-link:hover {
-  color: var(--ds-textColor-link-hover);
+  color: var(--ds-palette-mainBlue-80);
 }
 .ds-link:active {
-  color: var(--ds-textColor-link-active);
+  color: var(--ds-palette-mainBlue-90);
 }
 .ds-link:visited {
-  color: var(--ds-textColor-link-visited);
+  color: #551a8b;
 }
 .ds-link--standalone {
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
   text-decoration-line: none;
 }
 .ds-link--standalone:hover, .ds-link--standalone:active {
   text-decoration-line: underline;
 }
 .ds-link--standalone:hover {
-  color: var(--ds-textColor-link-hover);
+  color: var(--ds-palette-mainBlue-80);
 }
 .ds-link--standalone:active {
-  color: var(--ds-textColor-link-active);
+  color: var(--ds-palette-mainBlue-90);
 }
 .ds-link--standalone:focus-visible {
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
 }
 .ds-link--standalone:visited {
-  color: var(--ds-textColor-link);
+  color: var(--ds-palette-mainBlue-70);
 }