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

package/dist/esm/ds-checkbox-group-expand-button.entry.js

@@ -0,0 +1,38 @@
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, h } from './index-DC3hrKbf.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { t as transformTagName, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as componentFactory } from './componentFactory-DmszWHOG.js';
+import './store-DjcJcxKC.js';
+
+const dsCheckboxGroupExpandButtonCss = () => `.ds-no-style-leak.sc-ds-checkbox-group-expand-button *.sc-ds-checkbox-group-expand-button{all:unset;box-sizing:border-box;display:block}.ds-checkbox-group-expand-button__izAhxK.sc-ds-checkbox-group-expand-button{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.sc-ds-checkbox-group-expand-button: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.sc-ds-checkbox-group-expand-button{margin-block:var(--ds-spacing-xSmall);color:var(--ds-textColor-default)}.ds-checkbox-group-expand-button__izAhxK--actionable.sc-ds-checkbox-group-expand-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}.ds-checkbox-group-expand-button__izAhxK--actionable.sc-ds-checkbox-group-expand-button:active{background-color:var(--ds-bgColor-transparent-onLight-active)}.ds-checkbox-group-expand-button__izAhxK__icon-container.sc-ds-checkbox-group-expand-button{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.sc-ds-checkbox-group-expand-button{transform:rotate(90deg);transition-timing-function:ease-out;transition-duration:var(--tree-transition-in-duration, 140ms)}`;
+
+const DsCheckboxGroupExpandButton = class extends Mixin(componentFactory('ds-checkbox-group-expand-button')) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.dsOpenChange = createEvent(this, "dsOpenChange", 7);
+    }
+    get el() { return getElement(this); }
+    dsOpenChange;
+    dsOpen = false;
+    dsActionable = true;
+    dsAriaLabel;
+    get DsIcon() {
+        return transformTagName('ds-icon', 'ds-checkbox-group-expand-button', this.el);
+    }
+    handleClick = () => {
+        if (this.dsActionable) {
+            this.dsOpenChange.emit(!this.dsOpen);
+        }
+    };
+    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" }))));
+    }
+};
+declareComponentDependencies([h("ds-icon", { dsName: "" })]);
+DsCheckboxGroupExpandButton.style = dsCheckboxGroupExpandButtonCss();
+
+export { DsCheckboxGroupExpandButton as ds_checkbox_group_expand_button };

package/dist/esm/ds-checkbox-group.entry.js

@@ -1,13 +1,13 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-DVRFDmEO.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-DC3hrKbf.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { t as transformTagName, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { g as getRequiredText, a as getOptionalText, b as atLeastOneOption, c as allOptions } from './controlUtils-Do94ctdy.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './store-CJmuEAso.js';
+import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
+import { C as CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS, b as CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS, t as transformTagName, n as nextFrame, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { g as getRequiredText, a as getOptionalText, b as atLeastOneOption, c as allOptions } from './controlUtils-CuF9Fnfg.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { c as componentFactory } from './componentFactory-DmszWHOG.js';
+import { g as getLanguage } from './store-DjcJcxKC.js';
 
-const dsCheckboxGroupCss = () => `.ds-checkbox-group__cpPWV0.sc-ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__cpPWV0__legend.sc-ds-checkbox-group{color:var(--ds-textColor-default);padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__cpPWV0__assistive-text.sc-ds-checkbox-group{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__cpPWV0__error.sc-ds-checkbox-group{display:flex}.ds-checkbox-group__cpPWV0__error--visible.sc-ds-checkbox-group{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__cpPWV0.sc-ds-checkbox-group>.ds-checkbox-group__cpPWV0__checkboxes.sc-ds-checkbox-group{display:inline-flex;flex-direction:column}.ds-checkbox-group__cpPWV0--inset.sc-ds-checkbox-group{margin-left:var(--ds-spacing-medium)}.ds-checkbox-group__cpPWV0--horizontal.sc-ds-checkbox-group>.ds-checkbox-group__cpPWV0__checkboxes.sc-ds-checkbox-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}`;
+const dsCheckboxGroupCss = () => `.ds-checkbox-group__izAhxK.sc-ds-checkbox-group{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__izAhxK__legend.sc-ds-checkbox-group{color:var(--ds-textColor-default);padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__izAhxK__assistive-text.sc-ds-checkbox-group{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.sc-ds-checkbox-group{display:flex;gap:var(--ds-spacing-4xSmall)}.ds-checkbox-group__izAhxK__checkbox-container__expand-button.sc-ds-checkbox-group{order:-1}.ds-checkbox-group__izAhxK__error.sc-ds-checkbox-group{display:flex}.ds-checkbox-group__izAhxK__error--visible.sc-ds-checkbox-group{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__izAhxK.sc-ds-checkbox-group>.ds-checkbox-group__izAhxK__checkboxes.sc-ds-checkbox-group{display:inline-flex;flex-direction:column}.ds-checkbox-group__izAhxK--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-medium) + var(--ds-spacing-3xSmall))}.ds-checkbox-group__izAhxK--inset[hidden].sc-ds-checkbox-group{display:none}.ds-checkbox-group__izAhxK--tree.sc-ds-checkbox-group .ds-checkbox-group__izAhxK--inset.sc-ds-checkbox-group{margin-left:calc(var(--ds-spacing-2xLarge) + var(--ds-spacing-3xSmall) + var(--ds-spacing-4xSmall))}.ds-checkbox-group__izAhxK--tree.sc-ds-checkbox-group .ds-checkbox-group__izAhxK__inset-reveal.sc-ds-checkbox-group{--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));margin-left:calc(-1 * var(--ds-tree-overhang-left));padding-left:var(--ds-tree-overhang-left);overflow:hidden;max-height:0;opacity:0;transition-property:max-height, opacity;transition-timing-function:ease-in, ease-in;transition-duration:var(--tree-transition-out-duration, 100ms), var(--tree-transition-out-duration, 100ms);will-change:max-height, opacity}.ds-checkbox-group__izAhxK--tree.sc-ds-checkbox-group .ds-checkbox-group__izAhxK__inset-reveal[data-phase=opening].sc-ds-checkbox-group,.ds-checkbox-group__izAhxK--tree.sc-ds-checkbox-group .ds-checkbox-group__izAhxK__inset-reveal[data-phase=open].sc-ds-checkbox-group{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.sc-ds-checkbox-group .ds-checkbox-group__izAhxK__inset-reveal[data-phase=closing].sc-ds-checkbox-group,.ds-checkbox-group__izAhxK--tree.sc-ds-checkbox-group .ds-checkbox-group__izAhxK__inset-reveal[data-phase=closed].sc-ds-checkbox-group{opacity:0}@media (prefers-reduced-motion: reduce){.ds-checkbox-group__izAhxK--tree.sc-ds-checkbox-group .ds-checkbox-group__izAhxK__inset-reveal.sc-ds-checkbox-group{transition:none}}.ds-checkbox-group__izAhxK--tree.sc-ds-checkbox-group .ds-checkbox-group__izAhxK--has-parent.sc-ds-checkbox-group{margin-left:calc(-1 * (var(--ds-spacing-medium) + var(--ds-spacing-4xSmall)))}.ds-checkbox-group__izAhxK--horizontal.sc-ds-checkbox-group>.ds-checkbox-group__izAhxK__checkboxes.sc-ds-checkbox-group{flex-flow:row wrap;gap:var(--ds-spacing-small)}`;
 
 const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group', { stopRootTracking: true })) {
     constructor(hostRef) {
@@ -15,7 +15,7 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
         registerInstance(this, hostRef);
         this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange", 7);
         this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange", 7);
-        this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange", 7);
+        this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange", 3);
         this.dsCheckboxGroupDisabledChange = createEvent(this, "dsCheckboxGroupDisabledChange", 7);
         this.dsCheckboxGroupAllRequiredChange = createEvent(this, "dsCheckboxGroupAllRequiredChange", 7);
         this.dsCheckboxGroupFormChange = createEvent(this, "dsCheckboxGroupFormChange", 7);
@@ -33,6 +33,8 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     }
     checkboxElem;
     parentCheckboxGroup = null;
+    nestedReveal;
+    nestedTransitionTimeout = null;
     generatedId = this.getUniqueId();
     fieldsetId = this.generatedId;
     checkboxId = `${this.generatedId}-checkbox`;
@@ -42,6 +44,10 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     nestedId = `${this.generatedId}-nested`;
     childBlurTimeout = null;
     inheritedAttributes = {};
+    treeTransitionStyles = {
+        '--tree-transition-in-duration': `${CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS}ms`,
+        '--tree-transition-out-duration': `${CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS}ms`,
+    };
     get el() { return getElement(this); }
     internals;
     dsCheckboxGroupChange;
@@ -70,12 +76,72 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     get dsId() {
         return this.checkboxId;
     }
+    dsVariant = 'default';
+    dsOpen = false;
     childElementsCount = 0;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
     focusedChildCheckbox;
     wasInvalidOnBlur = false;
+    nestedPhase = 'open';
+    nestedMaxHeight = 'none';
+    parentDsErrorText = '';
+    parentErrorTextId = '';
+    get DsCheckbox() {
+        return transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
+    }
+    get DsCheckboxGroup() {
+        return transformTagName('ds-checkbox-group', 'ds-checkbox-group', this.el);
+    }
+    get DsCheckboxGroupExpandButton() {
+        return transformTagName('ds-checkbox-group-expand-button', 'ds-checkbox-group', this.el);
+    }
+    get DsInputValidity() {
+        return transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
+    }
+    getEffectiveErrorText(dsErrorText = this.dsErrorText) {
+        return dsErrorText || this.parentDsErrorText;
+    }
+    getEffectiveErrorTextId() {
+        return this.dsErrorText ? this.errorTextId : this.parentErrorTextId;
+    }
+    getFirstDescribedCheckbox = () => {
+        if (this.checkboxElem)
+            return this.checkboxElem;
+        return this.getChildCheckboxElements()[0];
+    };
+    syncFirstChildErrorDescribedBy = () => {
+        const target = this.getFirstDescribedCheckbox();
+        if (!target)
+            return;
+        const effectiveText = this.getEffectiveErrorText();
+        const effectiveId = this.getEffectiveErrorTextId();
+        if (effectiveText && effectiveId) {
+            target.setAttribute('aria-describedby', effectiveId);
+        }
+        else {
+            target.removeAttribute('aria-describedby');
+        }
+    };
+    resolveParentErrorTextId = () => {
+        if (!this.parentCheckboxGroup)
+            return '';
+        const validity = Array.from(this.parentCheckboxGroup.querySelectorAll(this.DsInputValidity)).find(el => !!el.dsText);
+        return validity?.id ?? '';
+    };
+    get expandButtonLabel() {
+        if (!this.dsText)
+            return '';
+        switch (getLanguage()) {
+            case 'fi':
+                return `${this.dsText} alaryhmä`;
+            case 'sv':
+                return `${this.dsText} undergrupp`;
+            default:
+                return `${this.dsText} subgroup`;
+        }
+    }
     elementIs = (tagName) => (element) => element.tagName.toLowerCase() === transformTagName(tagName, 'ds-checkbox-group', this.el);
     elementIsCheckbox = this.elementIs('ds-checkbox');
     async setFocus() {
@@ -108,8 +174,7 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     };
     getChildElements = () => {
         const checkboxTag = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
-        const groupTag = transformTagName('ds-checkbox-group', 'ds-checkbox-group', this.el);
-        return Array.from(this.el.querySelectorAll(`${checkboxTag}, ${groupTag}`)).filter(el => el !== this.checkboxElem && el.parentElement?.closest(groupTag) === this.el);
+        return Array.from(this.el.querySelectorAll(`${checkboxTag}, ${this.DsCheckboxGroup}`)).filter(el => el !== this.checkboxElem && el.parentElement?.closest(this.DsCheckboxGroup) === this.el);
     };
     getChildCheckboxElements = () => {
         return this.getChildElements().filter(el => this.elementIsCheckbox(el));
@@ -117,8 +182,13 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     getEnabledChildCheckboxElements = () => {
         return this.getChildCheckboxElements().filter((element) => !element.dsDisabled);
     };
-    updateChildCheckboxes = (updateFn) => {
-        this.getChildCheckboxElements().forEach(updateFn);
+    handleParentInvalidStateChange = (e) => {
+        if (e.target !== this.parentCheckboxGroup)
+            return;
+        this.parentDsErrorText = e.detail;
+        this.parentErrorTextId = e.detail ? this.resolveParentErrorTextId() : '';
+        this.syncFirstChildErrorDescribedBy();
+        this.dsCheckboxGroupInvalidStateChange.emit(this.getEffectiveErrorText());
     };
     handleParentCheckedChange = (e) => {
         this.updateChildElementsChecked(e.detail);
@@ -140,15 +210,9 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
     dsErrorTextObserver(newValue) {
-        this.updateChildCheckboxes((element, index) => {
-            if (index === 0 && newValue) {
-                element.setAttribute('aria-describedby', this.errorTextId);
-            }
-            else if (index === 0 && !newValue) {
-                element.removeAttribute('aria-describedby');
-            }
-        });
-        this.dsCheckboxGroupInvalidStateChange.emit(newValue);
+        const effective = this.getEffectiveErrorText(newValue);
+        this.syncFirstChildErrorDescribedBy();
+        this.dsCheckboxGroupInvalidStateChange.emit(effective);
     }
     dsFormObserver(newValue) {
         this.dsCheckboxGroupFormChange.emit(newValue);
@@ -156,13 +220,84 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     dsNameObserver(newValue) {
         this.dsCheckboxGroupNameChange.emit(newValue);
     }
+    syncNestedStateFromProps = (dsVariant = this.dsVariant) => {
+        if (dsVariant !== 'tree') {
+            this.nestedPhase = 'open';
+            this.nestedMaxHeight = 'none';
+            return;
+        }
+        this.nestedPhase = this.dsOpen ? 'open' : 'closed';
+        this.nestedMaxHeight = this.dsOpen ? 'none' : '0px';
+    };
+    dsVariantObserver(newValue) {
+        this.syncNestedStateFromProps(newValue);
+    }
+    async dsOpenObserver(newValue) {
+        if (!this.nestedReveal) {
+            this.syncNestedStateFromProps();
+            return;
+        }
+        await this.animateNested(newValue);
+    }
+    finishNestedTransition = (onDone, durationMs) => {
+        if (!this.nestedReveal) {
+            onDone();
+            return;
+        }
+        const cleanup = () => {
+            this.nestedReveal?.removeEventListener('transitionend', onEnd);
+            if (this.nestedTransitionTimeout) {
+                clearTimeout(this.nestedTransitionTimeout);
+            }
+            this.nestedTransitionTimeout = null;
+        };
+        const onEnd = (e) => {
+            if (e.target !== this.nestedReveal)
+                return;
+            cleanup();
+            onDone();
+        };
+        this.nestedReveal?.addEventListener('transitionend', onEnd);
+        this.nestedTransitionTimeout = setTimeout(() => {
+            cleanup();
+            onDone();
+        }, durationMs + 40);
+    };
+    async animateNested(open) {
+        if (this.dsVariant !== 'tree' || !this.nestedReveal)
+            return;
+        const reducedMotion = globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (reducedMotion) {
+            this.nestedPhase = open ? 'open' : 'closed';
+            this.nestedMaxHeight = open ? 'none' : '0px';
+            return;
+        }
+        if (open) {
+            this.nestedPhase = 'closing';
+            this.nestedMaxHeight = '0px';
+            await nextFrame();
+            this.nestedPhase = 'opening';
+            this.nestedMaxHeight = `${this.nestedReveal.scrollHeight}px`;
+            this.finishNestedTransition(() => {
+                this.nestedPhase = 'open';
+                this.nestedMaxHeight = 'none';
+            }, CHECKBOX_GROUP_TREE_TRANSITION_IN_DURATION_MS);
+            return;
+        }
+        this.nestedPhase = 'closing';
+        this.nestedMaxHeight = `${this.nestedReveal.scrollHeight}px`;
+        await nextFrame();
+        this.nestedMaxHeight = '0px';
+        this.finishNestedTransition(() => {
+            this.nestedPhase = 'closed';
+            this.nestedMaxHeight = '0px';
+        }, CHECKBOX_GROUP_TREE_TRANSITION_OUT_DURATION_MS);
+    }
     handleDsCheckboxGroupIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
     childElementsCountObserver(newValue, oldValue) {
-        if (this.dsErrorText) {
-            this.getChildCheckboxElements()[0]?.setAttribute('aria-describedby', this.errorTextId);
-        }
+        this.syncFirstChildErrorDescribedBy();
         if (oldValue === this.checkedChildElementCount && oldValue > 0) {
             this.checkedChildElementCount = newValue;
             this.updateChildElementsChecked(true);
@@ -171,10 +306,10 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     checkedChildElementCountObserver() {
         this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
         if (this.dsRequired && this.checkedChildElementCount === 0) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0]?.querySelector('input') ?? undefined);
         }
         else if (this.dsAllRequired && this.checkedChildElementCount !== this.childElementsCount) {
-            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0]?.querySelector('input') ?? undefined);
         }
         else {
             this.internals?.setValidity({});
@@ -234,6 +369,9 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
             }
         }, 0);
     }
+    handleDsOpenChange(e) {
+        e.stopPropagation();
+    }
     formResetCallback() {
         this.dsErrorText = '';
         this.childElementsCount = 0;
@@ -241,20 +379,28 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
         this.isIndeterminate = false;
         this.indeterminateChildCheckboxCount = 0;
         if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0]?.querySelector('input') ?? undefined);
         }
         else if (this.dsAllRequired) {
-            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
+            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0]?.querySelector('input') ?? undefined);
         }
         else {
             this.internals?.setValidity({});
         }
     }
     connectedCallback() {
-        const groupTag = transformTagName('ds-checkbox-group', 'ds-checkbox-group', this.el);
-        this.parentCheckboxGroup = this.el.parentElement?.closest(groupTag) ?? null;
+        this.parentCheckboxGroup = this.el.parentElement?.closest(this.DsCheckboxGroup) ?? null;
         if (this.parentCheckboxGroup) {
+            const ancestorError = this.parentCheckboxGroup.dsErrorText;
+            if (ancestorError) {
+                this.parentDsErrorText = ancestorError;
+                queueMicrotask(() => {
+                    this.parentErrorTextId = this.resolveParentErrorTextId();
+                    this.syncFirstChildErrorDescribedBy();
+                });
+            }
             this.parentCheckboxGroup.addEventListener('dsCheckboxGroupCheckedChange', this.handleParentCheckedChange);
+            this.parentCheckboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.handleParentInvalidStateChange);
         }
         if (this.internals?.form) {
             this.el.addEventListener('invalid', this.handleInvalid);
@@ -263,6 +409,7 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
     disconnectedCallback() {
         if (this.parentCheckboxGroup) {
             this.parentCheckboxGroup.removeEventListener('dsCheckboxGroupCheckedChange', this.handleParentCheckedChange);
+            this.parentCheckboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.handleParentInvalidStateChange);
         }
         this.parentCheckboxGroup = null;
         if (this.internals?.form) {
@@ -272,6 +419,10 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
             clearTimeout(this.childBlurTimeout);
         }
         this.childBlurTimeout = null;
+        if (this.nestedTransitionTimeout) {
+            clearTimeout(this.nestedTransitionTimeout);
+        }
+        this.nestedTransitionTimeout = null;
     }
     handleInvalid = (e) => {
         e.preventDefault();
@@ -285,10 +436,12 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
             ...inheritAttributes(this, this.el),
             ...inheritAriaAttributes(this.el, ['aria-labelledby']),
         };
+        this.syncNestedStateFromProps();
     }
     componentDidLoad() {
         this.componentMounted();
         this.childElementsCount = this.getChildElements().length;
+        this.dsCheckboxGroupInvalidStateChange.emit(this.getEffectiveErrorText());
     }
     ariaAttributeObserver(newValue, _oldValue, propName) {
         this.inheritedAttributes = {
@@ -298,20 +451,28 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
         forceUpdate(this);
     }
     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',
+            [`${baseClass}--tree`]: this.dsVariant === 'tree',
+            [`${baseClass}--has-parent`]: !!this.parentCheckboxGroup,
         });
         const legendClasses = classNames(`${baseClass}__legend`);
         const assistiveTextClasses = classNames(`${baseClass}__assistive-text`);
+        const checkboxContainerClasses = classNames(`${baseClass}__checkbox-container`);
         const errorClasses = classNames(`${baseClass}__error`, {
             [`${baseClass}__error--visible`]: !!this.dsErrorText,
         });
         const nestedClasses = classNames(`${baseClass}`, `${baseClass}--inset`);
+        const nestedRevealClasses = classNames(`${baseClass}__inset-reveal`);
         const checkboxesClasses = classNames(`${baseClass}__checkboxes`);
-        const DsCheckbox = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
-        const DsInputValidity = transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
-        return (h("fieldset", { key: '2b31f0afbe3f018200b982bd6900e8900cdcbbd3', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: '22c782f28d747ff0472108aadcf113b1266de9bf', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: 'bdb80226c6b9136efa9492ffbd9e059f096a94c9', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '143f532e903dcf3080b4bf7f6d438bbc700ae6c7', class: errorClasses }, h(DsInputValidity, { key: 'c1b07837ef7a05c2ffba793720cfad817f2d6f76', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error" }))));
+        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" }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -336,6 +497,12 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
         "dsName": [{
                 "dsNameObserver": 0
             }],
+        "dsVariant": [{
+                "dsVariantObserver": 0
+            }],
+        "dsOpen": [{
+                "dsOpenObserver": 0
+            }],
         "childElementsCount": [{
                 "childElementsCountObserver": 0
             }, {
@@ -355,7 +522,7 @@ const DsCheckboxGroup = class extends Mixin(componentFactory('ds-checkbox-group'
             }]
     }; }
 };
-declareComponentDependencies([h("ds-checkbox", null), h("ds-checkbox-group", null), h("ds-input-validity", null)]);
+declareComponentDependencies([h("ds-checkbox", null), h("ds-checkbox-group", null), h("ds-input-validity", null), h("ds-checkbox-group-expand-button", { dsAriaLabel: "" })]);
 DsCheckboxGroup.style = dsCheckboxGroupCss();
 
 export { DsCheckboxGroup as ds_checkbox_group };

package/dist/esm/ds-checkbox.entry.js

@@ -1,15 +1,15 @@
-import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-DVRFDmEO.js';
+import { M as Mixin, r as registerInstance, c as createEvent, e as getElement, f as forceUpdate, h, F as Fragment } from './index-DC3hrKbf.js';
 import { c as classNames } from './index-BfTCfPZ1.js';
-import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-DfbgRyXR.js';
-import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-Do94ctdy.js';
-import { t as transformTagName, i as ifDefined, d as declareComponentDependencies } from './utils-BGPSuOgq.js';
-import { c as cx } from './cx-gIO_QE3F.js';
-import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-DJfPtVrk.js';
-import { d as disableEventsFactory } from './disableEventsFactory-DCi2KTzz.js';
-import { c as componentFactory } from './componentFactory-B_QxX88s.js';
-import './store-CJmuEAso.js';
+import { b as inheritAriaAttributes, i as inheritAttributes } from './attributes-Dzq9qJk7.js';
+import { g as getRequiredText, a as getOptionalText, v as validityMessage } from './controlUtils-CuF9Fnfg.js';
+import { t as transformTagName, a as ifDefined, d as declareComponentDependencies } from './utils-CRB48Q9-.js';
+import { c as cx } from './cx-DAxPJw14.js';
+import { a as ariaDeprecationFactory } from './ariaDeprecationFactory-BVOItkJB.js';
+import { d as disableEventsFactory } from './disableEventsFactory-DeCjjcHf.js';
+import { c as componentFactory } from './componentFactory-DmszWHOG.js';
+import './store-DjcJcxKC.js';
 
-const dsCheckboxCss = () => `.ds-checkbox__cpPWV0-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__cpPWV0-fieldset__legend.sc-ds-checkbox{padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox__cpPWV0-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox__cpPWV0.sc-ds-checkbox{font-family:var(--ds-fontFamily-body);box-sizing:border-box;color:var(--ds-textColor-default);display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;user-select:none;width:auto;padding:var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-4xSmall);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox{appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox: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__cpPWV0__input.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox:hover,.ds-checkbox__cpPWV0__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox: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__cpPWV0__input.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__cpPWV0__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):checked,.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):checked:hover,.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):checked:active,.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):checked:disabled,.ds-checkbox__cpPWV0__input.sc-ds-checkbox:not(.ds-checkbox__cpPWV0__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__cpPWV0__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__cpPWV0__input.sc-ds-checkbox: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__cpPWV0__input.sc-ds-checkbox: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__cpPWV0__input.sc-ds-checkbox: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__cpPWV0__input.sc-ds-checkbox: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__cpPWV0--no-margin.sc-ds-checkbox .ds-checkbox__cpPWV0__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__cpPWV0--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__cpPWV0__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__cpPWV0.sc-ds-checkbox:has(.ds-checkbox__cpPWV0__input:disabled){cursor:not-allowed}.ds-checkbox__cpPWV0-error.sc-ds-checkbox{display:flex}.ds-checkbox__cpPWV0-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}`;
+const dsCheckboxCss = () => `.ds-checkbox__izAhxK-fieldset.sc-ds-checkbox{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox__izAhxK-fieldset__legend.sc-ds-checkbox{padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox__izAhxK-fieldset__assistive-text.sc-ds-checkbox{display:inline;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox__izAhxK.sc-ds-checkbox{font-family:var(--ds-fontFamily-body);box-sizing:border-box;color:var(--ds-textColor-default);display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;user-select:none;width:auto;padding:var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-xSmall) var(--ds-spacing-4xSmall);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-regular);line-height:var(--ds-lineHeight-large)}.ds-checkbox__izAhxK__input.sc-ds-checkbox{appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall)}.ds-checkbox__izAhxK__input.sc-ds-checkbox: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.sc-ds-checkbox{border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-borderColor-default)}.ds-checkbox__izAhxK__input.sc-ds-checkbox:hover,.ds-checkbox__izAhxK__input.sc-ds-checkbox:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__izAhxK__input.sc-ds-checkbox:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__izAhxK__input.sc-ds-checkbox:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__izAhxK__input.sc-ds-checkbox: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.sc-ds-checkbox:disabled{border-color:GrayText}}.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger)}.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:hover{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-hover)}.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:active{border-color:var(--ds-borderColor-danger);background-color:var(--ds-bgColor-danger-active)}.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:checked,.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:indeterminate{background-color:var(--ds-iconColor-danger);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:checked:hover,.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:indeterminate:hover{background-color:var(--ds-palette-red-60)}.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:checked:active,.ds-checkbox__izAhxK__input--invalid.sc-ds-checkbox:indeterminate:active{background-color:var(--ds-palette-red-70)}.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):checked,.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):checked:hover,.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):checked:active,.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):checked:disabled,.ds-checkbox__izAhxK__input.sc-ds-checkbox:not(.ds-checkbox__izAhxK__input--invalid):indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__izAhxK__input.sc-ds-checkbox::before{content:"";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__izAhxK__input.sc-ds-checkbox: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.sc-ds-checkbox: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.sc-ds-checkbox: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.sc-ds-checkbox: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.sc-ds-checkbox .ds-checkbox__izAhxK__input.sc-ds-checkbox{margin-right:0}.ds-checkbox__izAhxK--disabled.sc-ds-checkbox{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__izAhxK__span--optional.sc-ds-checkbox{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox__izAhxK.sc-ds-checkbox:has(.ds-checkbox__izAhxK__input:disabled){cursor:not-allowed}.ds-checkbox__izAhxK-error.sc-ds-checkbox{display:flex}.ds-checkbox__izAhxK-error--visible.sc-ds-checkbox{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}`;
 
 const DsCheckbox = class extends Mixin(componentFactory('ds-checkbox'), ariaDeprecationFactory, disableEventsFactory) {
     constructor(hostRef) {
@@ -71,7 +71,7 @@ const DsCheckbox = class extends Mixin(componentFactory('ds-checkbox'), ariaDepr
         return `${this.dsId}-assistive-text`;
     }
     async setFocus() {
-        this.inputElement.focus();
+        this.inputElement?.focus();
     }
     async checkValidity() {
         return this.inputElement?.checkValidity();
@@ -100,20 +100,31 @@ const DsCheckbox = class extends Mixin(componentFactory('ds-checkbox'), ariaDepr
     get DsCheckboxGroupTag() {
         return transformTagName('ds-checkbox-group', 'ds-checkbox', this.el);
     }
+    getInheritedGroupErrorText = () => {
+        let group = this.el.closest(this.DsCheckboxGroupTag);
+        while (group) {
+            if (group.dsErrorText)
+                return group.dsErrorText;
+            group = group.parentElement?.closest(this.DsCheckboxGroupTag) ?? null;
+        }
+        return '';
+    };
     formResetCallback() {
         this.dsErrorText = '';
         this.dsChecked = this.initialChecked;
         this.checkboxGroup = this.el.closest(this.DsCheckboxGroupTag);
         if (this.checkboxGroup) {
-            this.groupInvalid = !!this.checkboxGroup.dsErrorText;
-            this.dsErrorText = this.checkboxGroup.dsErrorText;
+            const inheritedError = this.getInheritedGroupErrorText();
+            this.groupInvalid = !!inheritedError;
+            this.dsErrorText = this.dsErrorText || inheritedError;
         }
     }
     connectedCallback() {
         this.checkboxGroup = this.el.closest(this.DsCheckboxGroupTag);
         if (this.checkboxGroup) {
-            this.groupInvalid = !!this.checkboxGroup.dsErrorText;
-            this.dsErrorText = this.checkboxGroup.dsErrorText;
+            const inheritedError = this.getInheritedGroupErrorText();
+            this.groupInvalid = !!inheritedError;
+            this.dsErrorText = this.dsErrorText || inheritedError;
             this.dsErrorsDisabled = true;
             if (this.checkboxGroup.dsDisabled)
                 this.dsDisabled = true;
@@ -230,7 +241,7 @@ const DsCheckbox = class extends Mixin(componentFactory('ds-checkbox'), ariaDepr
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter' && this.isPressingEnter) {
-            this.inputElement.click();
+            this.inputElement?.click();
             this.isPressingEnter = false;
         }
     };
@@ -274,7 +285,7 @@ const DsCheckbox = class extends Mixin(componentFactory('ds-checkbox'), ariaDepr
             [!!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: inputElement => (this.inputElement = inputElement), 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.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" }))))));
     }
     renderFieldset(baseClass) {
         const fieldsetClasses = classNames(`${baseClass}-fieldset`);