@telesign/boreal-web-components 0.1.0-alpha.5 → 0.1.0-alpha.6

package/dist/collection/components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.js

@@ -1,5 +1,5 @@
 import { Host, Mixin, h } from "@stencil/core";
-import { COMPONENT_STATES, MENU_ROLES } from "../../../../types/index";
+import { COMPONENT_STATES } from "../../../../types/index";
 import { validatePropValue } from "../../../../utils/helpers/validateProps";
 import { MenuItemBehavior, WithLinks } from "../../../../mixins/index";
 import { LIST_MENU_ITEM_VARIANTS } from "./types/enum";
@@ -72,6 +72,8 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         this.download = '';
         /** State to manage click and keyboard interaction states */
         this.currentState = COMPONENT_STATES.DEFAULT;
+        /** State to manage checked box */
+        this.boxChecked = false;
         /** Event to notify when the menu item is clicked */
         this.handleClick = (e) => {
             if (this.disabled || this.isLabelVariant)
@@ -81,11 +83,10 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
                 this.handleLinkClick(e);
                 return;
             }
-            if (this.checkable && this.parentRole !== MENU_ROLES.LISTBOX)
-                this.selected = !this.selected;
             this.bdsSelectItem.emit({
                 value: this.value,
                 selected: !this.selected,
+                element: this.el,
             });
         };
         /** Event to handle keydown navigation and trigger click */
@@ -110,9 +111,17 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     checkPropsVariant() {
         validatePropValue(Object.values(LIST_MENU_ITEM_VARIANTS), LIST_MENU_ITEM_VARIANTS.BUTTON, this.el, 'variant');
     }
+    handleSelectedChange(newValue) {
+        if (this.checkable) {
+            this.boxChecked = newValue;
+        }
+    }
     /** Lifecycle method called before the component is loaded */
     componentWillLoad() {
         this.checkPropsVariant();
+        if (this.checkable) {
+            this.boxChecked = this.selected;
+        }
     }
     /** Improve aria resolve for checkable items */
     get menuItemRoleExtended() {
@@ -143,7 +152,7 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     renderCheckbox() {
         if (!this.checkable)
             return null;
-        return (h("bds-checkbox", { checked: this.selected, disabled: this.disabled, name: `checkbox-${this.value}`, tabindex: "-1", style: { pointerEvents: 'none' }, inert: true }));
+        return (h("bds-checkbox", { checked: this.boxChecked, disabled: this.disabled, name: `checkbox-${this.value}`, tabindex: "-1", style: { pointerEvents: 'none' }, inert: true }));
     }
     /** Return the render for the button variant of the list menu item */
     renderTypeButton() {
@@ -155,7 +164,7 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         if (this.isLabelVariant)
             renderItem = this.renderTypeLabel();
         const linkAttributes = this.isLink ? { ...this.linkAttributes, tabindex: this.activeItem ? 0 : -1 } : {};
-        return (h(Host, { key: '0882d4cb677f6621518113c48e92d7e94cb71916', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRoleExtended, "aria-selected": !this.checkable ? this.ariaSelected : false, "aria-checked": this.checkable ? this.ariaSelected : undefined, ...linkAttributes, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, renderItem));
+        return (h(Host, { key: 'f2eba72a913704f5de812a1be1f7aafbd718f27b', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRoleExtended, "aria-selected": !this.checkable ? this.ariaSelected : false, "aria-checked": this.checkable ? this.ariaSelected : undefined, ...linkAttributes, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, renderItem));
     }
     static get is() { return "bds-list-menu-item"; }
     static get originalStyleUrls() {
@@ -253,7 +262,7 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
             },
             "selected": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "IListMenuItem['selected']",
                     "resolved": "boolean",
@@ -444,7 +453,8 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
     }
     static get states() {
         return {
-            "currentState": {}
+            "currentState": {},
+            "boxChecked": {}
         };
     }
     static get events() {
@@ -477,6 +487,9 @@ export class BdsListMenuItem extends Mixin(MenuItemBehavior, WithLinks) {
         return [{
                 "propName": "variant",
                 "methodName": "checkPropsVariant"
+            }, {
+                "propName": "selected",
+                "methodName": "handleSelectedChange"
             }];
     }
 }

package/dist/collection/components/actions/bds-toggle/bds-toggle.css

@@ -35,14 +35,14 @@
   outline: none;
 }
 .bds-toggle:active .bds-toggle__input:not([disabled]) + .bds-toggle__slider, .bds-toggle:focus-visible .bds-toggle__input:not([disabled]) + .bds-toggle__slider {
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-toggle .bds-toggle__input:active:not([disabled]) + .bds-toggle__slider,
 .bds-toggle .bds-toggle__input:focus-visible:not([disabled]) + .bds-toggle__slider {
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-toggle:hover:not(:active):not([checked]):not([disabled]) .bds-toggle__slider, .bds-toggle:hover:not(:active):focus-within:not([checked]) .bds-toggle__slider {
-  box-shadow: 0 1px 2px 0 var(--boreal-stroke-default-light);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-toggle__switch {
   position: relative;

package/dist/collection/components/feedback/bds-tag/bds-tag.css

@@ -30,15 +30,15 @@
   line-height: var(--boreal-typography-line-height-xs);
 }
 .bds-tag:hover:not(.bds-tag--selected):not(.bds-tag--disabled) {
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-tag:focus:not(.bds-tag--selected) {
   outline: none;
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-tag--selected {
   outline: none;
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: var(--boreal-depth-box-shadow-active);
 }
 .bds-tag__icon {
   font-size: var(--boreal-typography-font-size-md);
@@ -67,7 +67,7 @@
   cursor: pointer;
 }
 .bds-tag__close-button:hover {
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
   background-color: var(--boreal-ui-inverse);
   opacity: 0.5;
 }
@@ -75,12 +75,12 @@
   background-color: var(--boreal-ui-inverse);
   opacity: 0.5;
   outline: none;
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: var(--boreal-depth-box-shadow-active);
 }
 .bds-tag__close-button:active {
   background-color: var(--boreal-ui-inverse);
   opacity: 0.5;
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset, 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: var(--boreal-depth-box-shadow-active);
 }
 .bds-tag--disabled {
   cursor: not-allowed;

package/dist/collection/components/forms/bds-checkbox/bds-checkbox/bds-checkbox.css

@@ -0,0 +1,132 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+.bds-checkbox__info {
+  display: inline-flex;
+  align-items: center;
+}
+
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.bds-checkbox {
+  font-family: var(--boreal-typography-font-family-primary);
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: var(--boreal-spacing-2xs);
+  outline: none;
+  cursor: pointer;
+}
+.bds-checkbox input[type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+.bds-checkbox__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--boreal-spacing-3xs);
+}
+.bds-checkbox__required-indicator {
+  color: var(--boreal-icon-danger-base);
+  font-weight: var(--boreal-typography-font-weight-regular);
+  font-style: normal;
+}
+.bds-checkbox__info-icon {
+  font-size: var(--boreal-typography-font-size-xs);
+  color: var(--boreal-icon-default-light);
+}
+.bds-checkbox__label {
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-checkbox__label:empty {
+  display: none;
+}
+.bds-checkbox__icon:empty {
+  display: none;
+}
+.bds-checkbox__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--boreal-spacing-m);
+  height: var(--boreal-spacing-m);
+  border: var(--boreal-spacing-3xs) solid var(--boreal-stroke-default-light);
+  background: var(--boreal-ui-inverse);
+  border-radius: var(--boreal-spacing-2xs);
+  transition: background 0.2s ease;
+}
+.bds-checkbox:hover .bds-checkbox__box {
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+}
+.bds-checkbox:focus .bds-checkbox__box, .bds-checkbox:focus-visible .bds-checkbox__box {
+  box-shadow: var(--boreal-depth-box-shadow-focus);
+}
+.bds-checkbox:active .bds-checkbox__box {
+  box-shadow: var(--boreal-depth-box-shadow-active);
+}
+.bds-checkbox--checked .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-base);
+  background: var(--boreal-ui-primary-base);
+  color: var(--boreal-icon-inverse);
+}
+.bds-checkbox--checked:hover .bds-checkbox__box {
+  border-color: var(--boreal-stroke-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+.bds-checkbox--checked:active .bds-checkbox__box {
+  border-color: var(--boreal-stroke-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+.bds-checkbox--checked:disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-primary-light);
+  background: var(--boreal-ui-primary-light);
+}
+.bds-checkbox--indeterminate .bds-checkbox__box {
+  color: var(--boreal-icon-default-ink);
+}
+.bds-checkbox--indeterminate:disabled .bds-checkbox__box {
+  color: var(--boreal-icon-disabled);
+  background: var(--boreal-ui-inverse);
+}
+.bds-checkbox--error .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+  background: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box {
+  color: var(--boreal-icon-inverse);
+  border-color: var(--boreal-stroke-danger-base);
+  background: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox--disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.bds-checkbox--disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+  background: var(--boreal-ui-disabled);
+}
+.bds-checkbox--disabled .bds-checkbox__label {
+  color: var(--boreal-text-disabled);
+}
+.bds-checkbox--disabled .bds-checkbox__required-indicator {
+  color: var(--boreal-text-danger-light);
+}

package/dist/collection/components/forms/bds-checkbox/{bds-checkbox.js → bds-checkbox/bds-checkbox.js}

@@ -1,7 +1,9 @@
 import { Host, Mixin, h, } from "@stencil/core";
-import { formAssociatedMixin } from "../../../mixins/form-associated.mixin";
-import { setFormValue } from "../../../utils/form/index";
-import { inheritAriaAttributes } from "../../../utils/a11y/attributes";
+import { formAssociatedMixin } from "../../../../mixins/form-associated.mixin";
+import { inheritAriaAttributes } from "../../../../utils/a11y/attributes";
+import { KeyboardController, KEYBOARD } from "../../../../utils/index";
+import { useFormCheckbox } from "../utils";
+import { createId } from "../../../../utils/index";
 /**
  * Checkbox component for boolean selection with three visual states.
  *
@@ -21,11 +23,23 @@ import { inheritAriaAttributes } from "../../../utils/a11y/attributes";
 export class BdsCheckbox extends Mixin(formAssociatedMixin) {
     constructor() {
         this.inheritedAttributes = {};
+        this._keyboard = new KeyboardController();
+        this._id = createId('bds-checkbox');
         /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
         this.isDisabled = false;
-        /** Disables the control. */
+        /** Set to true when native form validation fires the `invalid` event; cleared on reset or when value becomes valid. */
+        this.isInvalid = false;
+        // ---------------------------------------------------------------------------
+        // Props (from formAssociatedMixin — redeclared here because Stencil's spec-
+        // test compiler only sees @Prop decorators that are statically on the class)
+        // ---------------------------------------------------------------------------
+        /** Name of the form control, submitted as a key in the form data. */
+        this.name = '';
+        /** Tooltip text for the checkbox. */
+        this.info = '';
+        /** Disables the checkbox. */
         this.disabled = false;
-        /** Marks the control as required for form submission. */
+        /** Marks the checkbox as required for form submission. */
         this.required = false;
         // ---------------------------------------------------------------------------
         // Props
@@ -40,15 +54,10 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
         this.value = 'on';
         /** Label displayed next to the checkbox. If not provided, the default slot is used. */
         this.label = '';
+        this.formCheckbox = useFormCheckbox(this, this.value);
         this.handleClick = () => {
             this.toggle();
         };
-        this.handleKeyDown = (e) => {
-            if (e.key === ' ') {
-                e.preventDefault();
-                this.toggle();
-            }
-        };
         super();
     }
     // ---------------------------------------------------------------------------
@@ -59,13 +68,22 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el),
         };
-        this.syncFormValue();
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
+        this._keyboard.attach(this.el).set(KEYBOARD.Space, () => {
+            if (!this.isDisabled)
+                this.toggle();
+        });
+    }
+    disconnectedCallback() {
+        this._keyboard.detach();
     }
     // ---------------------------------------------------------------------------
     // Watchers
     // ---------------------------------------------------------------------------
     onCheckedChange() {
-        this.syncFormValue();
+        this.formCheckbox.syncFormValue();
     }
     onDisabledChange(next) {
         this.isDisabled = next;
@@ -74,26 +92,32 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
     // Form-associated callbacks (IFormControl)
     // ---------------------------------------------------------------------------
     formAssociatedCallback() {
-        this.syncFormValue();
+        this.formCheckbox.formAssociatedCallback();
     }
     formResetCallback() {
-        this.checked = false;
-        this.indeterminate = false;
-        setFormValue(this.internals, null);
+        this.formCheckbox.formResetCallback();
     }
-    formStateRestoreCallback(state, _mode) {
-        this.checked = state === this.value;
-        this.syncFormValue();
+    formStateRestoreCallback(state) {
+        this.formCheckbox.formStateRestoreCallback(state);
     }
     formDisabledCallback(disabled) {
-        this.isDisabled = disabled;
+        this.formCheckbox.formDisabledCallback(disabled);
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports the group's validity state to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    handleInvalid(event) {
+        event.preventDefault();
+        this.isInvalid = true;
     }
     // ---------------------------------------------------------------------------
     // Private helpers
     // ---------------------------------------------------------------------------
-    syncFormValue() {
-        setFormValue(this.internals, this.checked ? this.value : null);
-    }
     toggle() {
         if (this.isDisabled)
             return;
@@ -102,13 +126,17 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
         this.valueChange.emit(this.checked);
         this.bdsChange.emit({ checked: this.checked, value: this.value });
     }
+    get isError() {
+        const error = this.error && !this.disabled;
+        return error || this.isInvalid;
+    }
     // ---------------------------------------------------------------------------
     // Render helpers
     // ---------------------------------------------------------------------------
     getAriaChecked() {
         if (this.indeterminate)
             return 'mixed';
-        return this.checked ? 'true' : 'false';
+        return `${this.checked}`;
     }
     get hideFromScreenReaders() {
         return this.el.closest('bds-checkbox-card') !== null || this.isDisabled;
@@ -122,21 +150,21 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
         }
         return null;
     }
-    get canShowLabel() {
-        return this.label !== undefined && this.label !== null;
-    }
     // ---------------------------------------------------------------------------
     // Render
     // ---------------------------------------------------------------------------
-    render() {
-        const classes = {
+    getClasses() {
+        return {
             'bds-checkbox': true,
             'bds-checkbox--checked': this.checked,
             'bds-checkbox--indeterminate': this.indeterminate,
-            'bds-checkbox--error': this.error,
+            'bds-checkbox--error': this.isError,
             'bds-checkbox--disabled': this.isDisabled,
         };
-        return (h(Host, { key: 'd5346e9f5943d81df215268f2c9ad3253941c3c8', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, "aria-hidden": this.hideFromScreenReaders ? 'true' : null, tabindex: this.hideFromScreenReaders ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: '217759044655c827609956b4d574fce3ce90c996', class: "bds-checkbox__box" }, this.renderCheckIcon()), this.canShowLabel && (h("span", { key: '47b8120c25700fe6e07e8d626c0acb28ac9387d7', class: "bds-checkbox__label" }, this.label.trim() !== '' ? this.label : h("slot", null)))));
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        return (h(Host, { key: '2d1fa28a22f182826625c313ffaf3a98d0784d0c', class: this.getClasses(), ...this.inheritedAttributes, role: "checkbox", "aria-required": this.required ? 'true' : null, "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, "aria-invalid": this.isError ? 'true' : null, "aria-hidden": this.hideFromScreenReaders ? 'true' : null, "aria-labelledby": labelId || undefined, tabindex: this.hideFromScreenReaders ? -1 : 0, onClick: this.handleClick }, h("input", { key: 'f8e3ca7085aa01a10e7fe397daf10f18024ce254', type: "checkbox", value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '397626b30b104d317a8c48554e8b8f6396c9a441', class: "bds-checkbox__box" }, this.renderCheckIcon()), h("span", { key: 'f8aec05775f2819d3c9fd510378bb74a9e22cc5e', class: "bds-checkbox__content" }, h("span", { key: '2956fccc6a6c7aa8624bb43798ece435cec7fbc0', class: "bds-checkbox__icon" }, h("slot", { key: '845c326874e4b854b71a6f0a360e6e692629b683', name: "icon" })), h("label", { key: '35531d1619a81972e29bf5332012b51e19fa3223', id: labelId, class: "bds-checkbox__label" }, this.label.trim() !== '' ? this.label : h("slot", null)), this.required && (h("em", { key: '81ea33ec4c831dea9029680b2ed7fff230849f4a', class: "bds-checkbox__required-indicator", "aria-hidden": "true" }, "*")), this.info && (h("span", { key: '237ad3a810ac31a95e59dc819ca118e8ab94763b', class: "bds-checkbox__info" }, h("span", { key: 'b83aa05c6b5468e7f57b3f36fd5e3ac770d5b985', class: "bds-checkbox__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: '572f7ab57a6144bdd5e22e0ee38a395cda7300d3' }, this.info))))));
     }
     static get is() { return "bds-checkbox"; }
     static get formAssociated() { return true; }
@@ -160,7 +188,7 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
+                "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
@@ -169,7 +197,28 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "name"
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text for the checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "info",
+                "defaultValue": "''"
             },
             "disabled": {
                 "type": "boolean",
@@ -183,7 +232,7 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disables the control."
+                    "text": "Disables the checkbox."
                 },
                 "getter": false,
                 "setter": false,
@@ -203,7 +252,7 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Marks the control as required for form submission."
+                    "text": "Marks the checkbox as required for form submission."
                 },
                 "getter": false,
                 "setter": false,
@@ -315,7 +364,8 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
     }
     static get states() {
         return {
-            "isDisabled": {}
+            "isDisabled": {},
+            "isInvalid": {}
         };
     }
     static get events() {
@@ -350,7 +400,7 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
                     "references": {
                         "CheckboxChangeDetail": {
                             "location": "import",
-                            "path": "./types/ICheckbox",
+                            "path": "../types/ICheckbox",
                             "id": "src/components/forms/bds-checkbox/types/ICheckbox.ts::CheckboxChangeDetail",
                             "referenceLocation": "CheckboxChangeDetail"
                         }
@@ -358,6 +408,44 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports the group's validity state to the user, showing native validation UI if invalid.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports the group's validity state to the user, showing native validation UI if invalid.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
@@ -368,5 +456,14 @@ export class BdsCheckbox extends Mixin(formAssociatedMixin) {
                 "methodName": "onDisabledChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }