@uh-design-system/component-library 0.5.2 → 0.6.0

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

@@ -7,41 +7,41 @@ const meta = {
 export default meta;
 export const Unchecked = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
+        dsText: 'Checkbox text',
+        dsChecked: false,
     },
 };
 export const Checked = {
     args: {
-        text: 'Checkbox text',
-        checked: true,
+        dsText: 'Checkbox text',
+        dsChecked: true,
     },
 };
 export const Indeterminate = {
     args: {
-        text: 'Checkbox text',
-        indeterminate: true,
+        dsText: 'Checkbox text',
+        dsIndeterminate: true,
     },
 };
 export const Disabled = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
-        disabled: true
+        dsText: 'Checkbox text',
+        dsChecked: false,
+        dsDisabled: true
     },
 };
 export const Invalid = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
-        errorText: 'Error text',
+        dsText: 'Checkbox text',
+        dsChecked: false,
+        dsErrorText: 'Error text',
     },
 };
 const withoutValueTextDOM = html `
   <div class="ds-sb-without-value-text">
-    <ds-checkbox checked="false" aria-label="Checkbox text"></ds-checkbox>
-    <ds-checkbox disabled="true" aria-label="Checkbox text"></ds-checkbox>
-    <ds-checkbox error-text="Error text" aria-label="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-checked="false" ds-aria-label="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-disabled="true" ds-aria-label="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-error-text="Error text" ds-aria-label="Checkbox text"></ds-checkbox>
   </div>
 `;
 export const WithoutValueText = {
@@ -64,8 +64,8 @@ export const WithoutValueText = {
 };
 const requiredAndOptionalDOM = html `
   <div class="ds-sb-required-and-optional">
-    <ds-checkbox required="true" text="Checkbox text"></ds-checkbox>
-    <ds-checkbox optional="true" text="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-required="true" ds-text="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-optional="true" ds-text="Checkbox text"></ds-checkbox>
   <div>
 `;
 export const RequiredAndOptional = {
@@ -89,9 +89,9 @@ export const RequiredAndOptional = {
 };
 const withLegendAndAssistiveTextDOM = html `
   <div class="ds-sb-with-legend-and-assistive-text">
-    <ds-checkbox legend="Legend text" assistive-text="Assistive text" text="Checkbox text"></ds-checkbox>
-    <ds-checkbox legend="Legend text" assistive-text="Assistive text" text="Checkbox text" required="true"></ds-checkbox>
-    <ds-checkbox legend="Legend text" assistive-text="Assistive text" text="Checkbox text" optional="true"></ds-checkbox>
+    <ds-checkbox ds-legend="Legend text" ds-assistive-text="Assistive text" ds-text="Checkbox text"></ds-checkbox>
+    <ds-checkbox ds-legend="Legend text" ds-assistive-text="Assistive text" ds-text="Checkbox text" ds-required="true"></ds-checkbox>
+    <ds-checkbox ds-legend="Legend text" ds-assistive-text="Assistive text" ds-text="Checkbox text" ds-optional="true"></ds-checkbox>
   </div>
 `;
 export const WithLegendAndAssistiveText = {

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

@@ -5,34 +5,21 @@ const meta = {
 export default meta;
 export const Default = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
+        dsText: 'Checkbox text',
+        dsChecked: false,
     },
 };
 export const Playground = {
     args: {
-        text: 'Checkbox text',
-        checked: false,
-        indeterminate: false,
-        disabled: false,
-        errorText: '',
-        required: false,
-        optional: false,
-        legend: '',
-        assistiveText: '',
-        optionalText: '',
-    },
-    argTypes: {
-        text: { control: 'text' },
-        checked: { control: 'boolean' },
-        indeterminate: { control: 'boolean' },
-        disabled: { control: 'boolean' },
-        errorText: { control: 'text' },
-        required: { control: 'boolean' },
-        optional: { control: 'boolean' },
-        legend: { control: 'text' },
-        assistiveText: { control: 'text' },
-        optionalText: { control: 'text' },
-        ariaLabel: { name: 'aria-label', control: 'text' },
+        dsText: 'Checkbox text',
+        dsChecked: false,
+        dsIndeterminate: false,
+        dsDisabled: false,
+        dsErrorText: '',
+        dsRequired: false,
+        dsOptional: false,
+        dsLegend: '',
+        dsAssistiveText: '',
+        dsOptionalText: '',
     },
 };

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);
 }
@@ -32,7 +32,6 @@
   margin-left: var(--ds-spacing-large);
 }
 .ds-checkbox-group--horizontal > .ds-checkbox-group__checkboxes {
-  flex-direction: row;
+  flex-flow: row wrap;
   gap: var(--ds-spacing-small);
-  flex-wrap: wrap;
 }

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

@@ -2,8 +2,10 @@ import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
 import { idGenerator } from "../../../utils/utils";
+import { allOptions, atLeastOneOption, getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
 export class DsCheckboxGroup {
+    checkboxElem;
     fieldsetId = fieldsetIdGenerator.next().value;
     checkboxId = `${this.fieldsetId}-checkbox`;
     errorTextId = `${this.fieldsetId}-error`;
@@ -11,23 +13,45 @@ export class DsCheckboxGroup {
     nestedId = `${this.fieldsetId}-nested`;
     inheritedAttributes = {};
     el;
+    internals;
     dsCheckboxGroupChange;
     dsCheckboxGroupIndeterminateChildChange;
-    legend;
-    assistiveText;
-    direction = 'vertical';
-    errorText = '';
-    text = '';
-    checked = false;
-    disabled = false;
-    childElementsCount = 0;
+    dsCheckboxGroupInvalidStateChange;
+    dsLegend;
+    dsAssistiveText;
+    dsDirection = 'vertical';
+    dsErrorText = '';
+    dsText = '';
+    dsChecked = false;
+    dsDisabled = false;
+    dsRequired = false;
+    dsAllRequired = false;
+    dsOptional = false;
+    dsOptionalText;
+    childElementsCount = 1;
     checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
+    showInternalsValidationMessage = false;
     elementIs = (localName) => (element) => element.localName === localName;
     elementIsCheckbox = this.elementIs('ds-checkbox');
     elementIsCheckboxGroup = this.elementIs('ds-checkbox-group');
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.errorText) && this.errorTextId].filter(Boolean).join(' ');
+    getLegendText = () => {
+        if (this.dsRequired || this.dsAllRequired) {
+            return getRequiredText(this.dsLegend);
+        }
+        if (this.dsOptional) {
+            return getOptionalText(this.dsLegend, this.dsOptionalText);
+        }
+        return this.dsLegend;
+    };
+    getAriaDescribedBy = () => [
+        !!this.dsAssistiveText && this.assistiveTextId,
+        (!!this.dsErrorText || (this.showInternalsValidationMessage && !!this.internals?.validationMessage)) && this.errorTextId,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    getValidationMessage = () => this.dsErrorText || (this.showInternalsValidationMessage ? this.internals?.validationMessage : '');
     getChildElements = () => {
         const slot = this.el.shadowRoot.querySelector('slot');
         return (slot?.assignedElements() || []);
@@ -44,7 +68,7 @@ export class DsCheckboxGroup {
     updateChildElementsChecked = (checked) => {
         this.checkedChildElementCount = checked ? this.childElementsCount : 0;
         this.updateChildElements((element) => {
-            element.checked = checked;
+            element.dsChecked = checked;
             if (this.elementIsCheckboxGroup(element)) {
                 (async () => {
                     await element.setChecked(checked);
@@ -57,7 +81,7 @@ export class DsCheckboxGroup {
     }
     watchCheckboxDisabledChange(newValue) {
         this.updateChildElements((element) => {
-            element.disabled = newValue;
+            element.dsDisabled = newValue;
         });
     }
     watchCheckedChange(newValue) {
@@ -66,72 +90,100 @@ 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 });
+    watchCheckedChildElementCountChange() {
+        this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
+        if (this.dsRequired && this.checkedChildElementCount === 0) {
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+        }
+        else if (this.dsAllRequired && this.checkedChildElementCount !== this.childElementsCount) {
+            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
         }
-        else if (oldValue === this.childElementsCount && newValue < oldValue) {
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
+        else {
+            this.internals?.setValidity({ valueMissing: false });
         }
     }
-    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 (!this.showInternalsValidationMessage) {
+            this.showInternalsValidationMessage = true;
+        }
+        if (event.target === this.el) {
+            this.updateChildElementsChecked(this.checkboxElem.dsChecked);
+            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.dsChecked });
             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.dsChecked);
+            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;
-    };
+    formResetCallback() {
+        this.internals?.setValidity({});
+    }
     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');
+            element.setAttribute('ds-errors-disabled', 'true');
         });
+        if (this.dsRequired) {
+            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+        }
+        else if (this.dsAllRequired) {
+            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0].shadowRoot.querySelector('input'));
+        }
     }
     componentDidUpdate() {
-        this.setChildElementCount();
+        const childElementCount = this.getChildElements().length;
+        if (this.childElementsCount !== childElementCount) {
+            this.childElementsCount = childElementCount;
+        }
     }
     render() {
         const classes = classNames('ds-checkbox-group', {
-            'ds-checkbox-group--horizontal': this.direction === 'horizontal',
+            'ds-checkbox-group--horizontal': this.dsDirection === 'horizontal',
         });
         const legendClasses = classNames('ds-checkbox-group__legend');
         const assistiveTextClasses = classNames('ds-checkbox-group__assistive-text');
         const errorClasses = classNames('ds-checkbox-group__error', {
-            'ds-checkbox-group__error--visible': Boolean(this.errorText),
+            'ds-checkbox-group__error--visible': Boolean(this.dsErrorText),
         });
         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: '98ff7c5dd5c36c163ed1dfb177d5c0b28b93971a', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.dsLegend && h("legend", { key: '22274e3c85262fd08f69a9aa548d2910eaf30ce2', class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { key: '4566b9d66b0be262548ddecd11f6eda5acc6d399', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h("ds-checkbox", { 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 }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), (!!this.dsErrorText || this.dsRequired || this.dsAllRequired) && (h("div", { key: 'd0a2dbc9d46967de609096d9a398b040f5228807', class: errorClasses }, h("ds-input-validity", { key: '409b5d8fbd59b26245cb828146f28eec3d010aaa', id: this.errorTextId, dsText: this.getValidationMessage(), dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["ds-checkbox-group.scss"]
@@ -144,8 +196,9 @@ export class DsCheckboxGroup {
     }
     static get properties() {
         return {
-            "legend": {
+            "dsLegend": {
                 "type": "string",
+                "attribute": "ds-legend",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -156,15 +209,15 @@ export class DsCheckboxGroup {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the checkbox group"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "legend",
                 "reflect": false
             },
-            "assistiveText": {
+            "dsAssistiveText": {
                 "type": "string",
+                "attribute": "ds-assistive-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -175,15 +228,15 @@ export class DsCheckboxGroup {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text for additional information shown below label"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "assistive-text",
                 "reflect": false
             },
-            "direction": {
+            "dsDirection": {
                 "type": "string",
+                "attribute": "ds-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "'horizontal' | 'vertical'",
@@ -194,16 +247,16 @@ export class DsCheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`vertical` displays checkboxes stacked\n`horizontal` displays checkboxes side by side"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
-            "errorText": {
+            "dsErrorText": {
                 "type": "string",
+                "attribute": "ds-error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -214,16 +267,16 @@ export class DsCheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error message shown below the checkbox group.\nIf set, the checkbox group is shown in an invalid state."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "text": {
+            "dsText": {
                 "type": "string",
+                "attribute": "ds-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -234,16 +287,76 @@ export class DsCheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "If given, a parent checkbox with this text will be rendered above slotted checkboxes"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "checked": {
+            "dsChecked": {
+                "type": "boolean",
+                "attribute": "ds-checked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Passed to the `checked` attribute of the `input` of parent checkbox element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsDisabled": {
+                "type": "boolean",
+                "attribute": "ds-disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables all checkboxes in the checkbox group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsRequired": {
+                "type": "boolean",
+                "attribute": "ds-required",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "One or more checkboxes must be checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dsAllRequired": {
                 "type": "boolean",
+                "attribute": "ds-all-required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -254,16 +367,16 @@ export class DsCheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "All checkboxes must be checked."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "disabled": {
+            "dsOptional": {
                 "type": "boolean",
+                "attribute": "ds-optional",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -274,13 +387,31 @@ export class DsCheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "None of the checkboxes need to be checked."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "dsOptionalText": {
+                "type": "string",
+                "attribute": "ds-optional-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown alongside label, if the checkbox button group is set as optional."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -289,7 +420,8 @@ export class DsCheckboxGroup {
             "childElementsCount": {},
             "checkedChildElementCount": {},
             "isIndeterminate": {},
-            "indeterminateChildCheckboxCount": {}
+            "indeterminateChildCheckboxCount": {},
+            "showInternalsValidationMessage": {}
         };
     }
     static get events() {
@@ -301,7 +433,7 @@ export class DsCheckboxGroup {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`dsCheckboxGroupChange` event is emitted when the `checked` state of\na checkbox rendered inside the group changes.\nThis is used internally to synchronize the state of checkbox groups."
                 },
                 "complexType": {
                     "original": "DsCheckboxGroupChangeEvent",
@@ -322,7 +454,7 @@ export class DsCheckboxGroup {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "`dsCheckboxGroupIndeterminateChildChange` event is emitted when\nthe `indeterminate` state of a nested checkbox group is changed.\nThis is used internally to synchronize the state of checkbox groups."
                 },
                 "complexType": {
                     "original": "DsCheckboxGroupIndeterminateChildChangeEvent",
@@ -335,6 +467,21 @@ export class DsCheckboxGroup {
                         }
                     }
                 }
+            }, {
+                "method": "dsCheckboxGroupInvalidStateChange",
+                "name": "dsCheckboxGroupInvalidStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `dsCheckboxGroupInvalidStateChange` event is emitted when the\n`dsErrorText` property changes. The event `detail` will be `false`\nif the `dsErrorText` is empty, otherwise `true`.\nThis event is mainly used internallty to synchronize the invalid\nstate of checkboxes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -368,14 +515,17 @@ export class DsCheckboxGroup {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "disabled",
+                "propName": "dsDisabled",
                 "methodName": "watchCheckboxDisabledChange"
             }, {
-                "propName": "checked",
+                "propName": "dsChecked",
                 "methodName": "watchCheckedChange"
             }, {
                 "propName": "isIndeterminate",
                 "methodName": "watchIndeterminateChange"
+            }, {
+                "propName": "dsErrorText",
+                "methodName": "errorTextObserver"
             }, {
                 "propName": "checkedChildElementCount",
                 "methodName": "watchCheckedChildElementCountChange"
@@ -389,7 +539,7 @@ export class DsCheckboxGroup {
                 "capture": false,
                 "passive": false
             }, {
-                "name": "dsCheckboxInput",
+                "name": "input",
                 "method": "listenCheckboxChange",
                 "target": undefined,
                 "capture": false,
@@ -402,4 +552,5 @@ export class DsCheckboxGroup {
                 "passive": false
             }];
     }
+    static get attachInternalsMemberName() { return "internals"; }
 }