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

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,19 +24,17 @@
 .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;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  align-items: flex-start;
+  flex-flow: row nowrap;
   text-wrap: wrap;
   word-wrap: break-word;
-  word-break: break-all;
   white-space: normal;
   position: relative;
   cursor: pointer;
@@ -36,26 +42,12 @@
   width: auto;
   padding: var(--ds-spacing-xSmall);
 }
-.ds-checkbox--no-margin .ds-checkbox__input {
-  margin-right: 0;
-}
-.ds-checkbox--disabled {
-  color: var(--ds-textColor-disabled-onLight);
-}
-.ds-checkbox__span--optional {
-  color: var(--ds-textColor-secondary);
-  font-size: var(--ds-fontSize-14);
-}
-.ds-checkbox:has(.ds-checkbox__input:disabled) {
-  cursor: not-allowed;
-}
 .ds-checkbox__input {
   cursor: pointer;
   /* hide the default checkbox */
-  -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;
@@ -69,53 +61,48 @@
   border-color: var(--ds-palette-black-50);
   /** unchecked **/
   /** checked and indeterminate **/
-  /** Error state should override other styles */
   /** 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);
-  outline-style: solid;
-  outline-width: var(--ds-borderWidth-thin);
+  box-shadow: 0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);
+  outline: var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);
+  outline-offset: calc(var(--ds-borderWidth-thin) * 1);
 }
 .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);
+  cursor: not-allowed;
+  color: var(--ds-palette-black-40);
+  background-color: var(--ds-overlay-black-10);
+  border-color: var(--ds-overlay-black-15);
 }
 @media (forced-colors: active) {
   .ds-checkbox__input:disabled {
     border-color: GrayText;
   }
 }
+.ds-checkbox__input:user-invalid, .ds-checkbox__input--invalid, .ds-checkbox__input--invalid:checked, .ds-checkbox__input--invalid:indeterminate {
+  border-color: var(--ds-palette-red-50);
+}
 .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);
-}
-.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);
-}
-.ds-checkbox__input:disabled {
-  cursor: not-allowed;
-  color: var(--ds-textColor-disabled-onLight);
+  background-color: var(--ds-overlay-black-10);
 }
 .ds-checkbox__input::before {
   content: "";
@@ -129,15 +116,28 @@
 .ds-checkbox__input:checked::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>");
 }
-.ds-checkbox__input:checked:disabled::before {
-  background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>");
-}
 .ds-checkbox__input:indeterminate::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>");
 }
+.ds-checkbox__input:checked:disabled::before {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>");
+}
 .ds-checkbox__input:indeterminate:disabled::before {
   background-image: url("data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>");
 }
+.ds-checkbox--no-margin .ds-checkbox__input {
+  margin-right: 0;
+}
+.ds-checkbox--disabled {
+  color: var(--ds-palette-black-40);
+}
+.ds-checkbox__span--optional {
+  color: var(--ds-palette-black-70);
+  font-size: var(--ds-fontSize-14);
+}
+.ds-checkbox:has(.ds-checkbox__input:disabled) {
+  cursor: not-allowed;
+}
 
 .ds-checkbox-error {
   display: flex;

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

@@ -3,100 +3,108 @@ import classNames from "classnames";
 import { inheritAriaAttributes, inheritAttributes } from "../../../utils/attributes/attributes";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
 import { isValidation } from "../../../store";
-import { getAriaLabel, idGenerator } from "../../../utils/utils";
+import { 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;
-    assistiveText;
-    text;
-    indeterminate = false;
-    disabled = false;
-    errorText = '';
-    errorsDisabled = false;
-    required = false;
-    optional = false;
-    optionalText;
-    ariaLabel;
-    value = this.checked.toString();
+    dsId = checkboxIdGenerator.next().value;
+    dsChecked = false;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsIndeterminate = false;
+    dsDisabled = false;
+    dsErrorText = '';
+    dsErrorsDisabled = false;
+    dsRequired = false;
+    dsOptional = false;
+    dsOptionalText;
+    dsAriaLabel;
+    dsChange;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
     validationMessage;
     setIds = () => {
-        this.labelId = `${this.identifier}-label`;
-        this.inputValidityId = `${this.identifier}-validity`;
-        this.assistiveTextId = `${this.identifier}-assistive-text`;
+        this.labelId = `${this.dsId}-label`;
+        this.inputValidityId = `${this.dsId}-validity`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
     };
-    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     getLegendText = () => {
-        if (this.required) {
-            return getRequiredText(this.legend);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
         }
-        if (this.optional) {
-            return getOptionalText(this.legend, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsLegend, this.dsOptionalText);
         }
-        return this.legend;
+        return this.dsLegend;
     };
     getCheckboxText = () => {
-        if (this.legend) {
-            return this.text;
+        if (this.dsLegend) {
+            return this.dsText;
         }
-        if (this.required) {
-            return getRequiredText(this.text);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsText);
         }
-        if (this.optional) {
-            return getOptionalText(this.text, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsText, this.dsOptionalText);
         }
-        return this.text;
-    };
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
-    restoreInitialState = () => {
-        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);
+        return this.dsText;
     };
+    getAriaDescribedBy = () => [Boolean(this.dsAssistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
     formResetCallback() {
-        this.restoreInitialState();
+        this.dsChecked = this.initialChecked;
+        this.internals?.setValidity({});
+        this.internals?.setFormValue(this.dsChecked.toString());
+    }
+    connectedCallback() {
+        this.checkboxGroup = this.el.closest('ds-checkbox-group');
+        if (this.checkboxGroup) {
+            this.invalid = !!this.checkboxGroup.dsErrorText;
+            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']),
             ...inheritAttributes(this, this.el),
         };
-        if (isValidation('server') || this.errorText) {
+        if (isValidation('server') || this.dsErrorText) {
             this.validationMessage = this.getValidationMessage();
         }
     }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
     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.dsChecked = target.checked;
+        this.internals?.setFormValue(target.checked.toString());
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter') {
-            this.inputElem.dispatchEvent(new Event('input'));
+            this.inputElem.click();
         }
     };
     handleBlur = () => {
@@ -113,26 +121,26 @@ export class DsCheckbox {
     };
     renderCheckbox() {
         const classes = classNames('ds-checkbox', {
-            'ds-checkbox--disabled': this.disabled,
-            'ds-checkbox--no-margin': Boolean(!this.text),
+            'ds-checkbox--disabled': this.dsDisabled,
+            'ds-checkbox--no-margin': Boolean(!this.dsText),
         });
         const inputClasses = classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText),
+            'ds-checkbox__input--invalid': Boolean(this.dsErrorText) || 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.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.dsChecked.toString(), disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": this.dsErrorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, dsText: this.validationMessage, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
         const legendClasses = classNames('ds-checkbox-fieldset__legend');
         const assistiveTextClasses = classNames('ds-checkbox-fieldset__assistive-text');
-        return (h("fieldset", { class: fieldsetClasses }, h("legend", { class: legendClasses }, this.getLegendText()), this.assistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.renderCheckbox()));
+        return (h("fieldset", { class: fieldsetClasses }, h("legend", { class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.renderCheckbox()));
     }
     render() {
-        if (this.legend) {
+        if (this.dsLegend) {
             return this.renderFieldset();
         }
         return this.renderCheckbox();
@@ -152,8 +160,9 @@ export class DsCheckbox {
     }
     static get properties() {
         return {
-            "identifier": {
+            "dsId": {
                 "type": "string",
+                "attribute": "ds-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -164,16 +173,16 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `id` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "id",
                 "reflect": false,
                 "defaultValue": "checkboxIdGenerator.next().value as string"
             },
-            "checked": {
+            "dsChecked": {
                 "type": "boolean",
+                "attribute": "ds-checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -184,16 +193,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `checked` attriubte of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "legend": {
+            "dsLegend": {
                 "type": "string",
+                "attribute": "ds-legend",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -204,15 +213,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Label of the checkbox"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "legend",
                 "reflect": false
             },
-            "assistiveText": {
+            "dsAssistiveText": {
                 "type": "string",
+                "attribute": "ds-assistive-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -223,15 +232,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text for additional information shown below label"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "assistive-text",
                 "reflect": false
             },
-            "text": {
+            "dsText": {
                 "type": "string",
+                "attribute": "ds-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -242,15 +251,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The text of the checkbox"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text",
                 "reflect": false
             },
-            "indeterminate": {
+            "dsIndeterminate": {
                 "type": "boolean",
+                "attribute": "ds-indeterminate",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -261,16 +270,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Mainly used in a nested checkbox group to display a parent\ncheckbox in a partially selected state if some but not\nall of the nested checkbox group's checkboxes are selected."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "indeterminate",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "disabled": {
+            "dsDisabled": {
                 "type": "boolean",
+                "attribute": "ds-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -281,16 +290,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `disabled` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "errorText": {
+            "dsErrorText": {
                 "type": "string",
+                "attribute": "ds-error-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -301,16 +310,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Error message shown below the text input.\nIf set, the checkbox is shown in an invalid state."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error-text",
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "errorsDisabled": {
+            "dsErrorsDisabled": {
                 "type": "boolean",
+                "attribute": "ds-errors-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -321,16 +330,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Used internally in checkbox group to disable error messages\nfor a single checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "data-errors-disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "required": {
+            "dsRequired": {
                 "type": "boolean",
+                "attribute": "ds-required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -341,16 +350,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `required` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "optional": {
+            "dsOptional": {
                 "type": "boolean",
+                "attribute": "ds-optional",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -361,16 +370,16 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Displays indicator that the checkbox is optional alongside label."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "optional",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "optionalText": {
+            "dsOptionalText": {
                 "type": "string",
+                "attribute": "ds-optional-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -381,15 +390,15 @@ export class DsCheckbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text shown alongside label, if the checkbox is set as optional."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "optional-text",
                 "reflect": false
             },
-            "ariaLabel": {
+            "dsAriaLabel": {
                 "type": "string",
+                "attribute": "ds-aria-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -400,45 +409,45 @@ export class DsCheckbox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Passed to the `aria-label` attribute of the `input` element of the rendered checkbox."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "aria-label",
                 "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "value": {},
+            "invalid": {},
+            "initialChecked": {},
             "validationMessage": {}
         };
     }
     static get events() {
         return [{
-                "method": "dsCheckboxInput",
-                "name": "dsCheckboxInput",
+                "method": "dsChange",
+                "name": "dsChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "The `dsChange` event is fired each time the `value` property of\nthe `ds-checkbox` element is changed."
                 },
                 "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"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "dsChecked",
+                "methodName": "dsCheckedObserver"
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }