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

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

@@ -1,33 +1,18 @@
-import { formAssociatedMixin } from "../../../mixins/index";
-import { Host, Mixin, h } from "@stencil/core";
-import { setFormValue } from "../../../utils/index";
+import { formAssociatedMixin } from "../../../../mixins/index";
+import { Host, Mixin, h, } from "@stencil/core";
+import { useFormCheckbox } from "../utils";
 /**
- * Checkbox card component is a selectable card-based checkbox option.
- * It presents a non-exclusive choice with optional descriptive text and icon,
- * supporting checked, indeterminate, disabled, and error states.
- * Can be used standalone or within a checkbox group for orchestration.
+ * @summary Checkbox card component is a selectable card-based checkbox option.
  *
  * @slot - Label content when no `label` prop is provided.
  * @slot icon - Optional icon rendered to the left of the label.
  * @slot description - Optional descriptive text rendered below the label.
- *
- * @property {string}  name          - Name of the form control, submitted as a key in the form data.
- * @property {boolean} disabled      - Disables the control. Defaults to `false`.
- * @property {boolean} required      - Marks the control as required for form submission. Defaults to `false`.
- * @property {string}  value         - Value submitted with the form data when checked. Defaults to `"on"`.
- * @property {string}  label         - Label displayed next to the checkbox. If not provided, the default slot is used.
- * @property {boolean} checked       - Whether the checkbox card is selected. Defaults to `false`.
- * @property {boolean} indeterminate - Whether the checkbox card shows an indeterminate ("mixed") visual state. Defaults to `false`.
- * @property {boolean} error         - Whether the checkbox card is in an error state. Defaults to `false`.
- *
- * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model). Payload: `boolean`.
- * @fires bdsChange   - Emitted when the user toggles the checkbox card. Payload: `{ checked: boolean, value: string }`.
  */
 export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
     constructor() {
         this.isDisabled = false;
+        this.isInvalid = false;
         this.isIndeterminate = false;
-        this.isChecked = false;
         /** Disables the control. */
         this.disabled = false;
         /** Marks the control as required for form submission. */
@@ -45,6 +30,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
         this.indeterminate = false;
         /** Whether the checkbox card is in an error state. */
         this.error = false;
+        this.formCheckbox = useFormCheckbox(this, this.value);
         this.handleClick = () => this.toggle();
         this.handleKeyDown = (e) => {
             if (e.key === ' ') {
@@ -57,7 +43,9 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
     componentWillLoad() {
         this.isDisabled = this.disabled;
         this.isIndeterminate = this.indeterminate;
-        this.isChecked = this.checked;
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
     }
     onDisabledChange(next) {
         this.isDisabled = next;
@@ -66,48 +54,59 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
         this.isIndeterminate = next;
     }
     onCheckedChange(next) {
-        this.isChecked = next;
+        this.checked = next !== false;
+        this.formCheckbox.syncFormValue();
+    }
+    /** 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) {
+        this.isInvalid = true;
     }
     toggle() {
         if (this.isDisabled)
             return;
-        this.isIndeterminate = false;
-        this.isChecked = !this.isChecked;
-        this.bdsChange.emit({ checked: this.isChecked, value: this.value });
-        this.valueChange.emit(this.isChecked);
+        if (this.isIndeterminate)
+            this.isIndeterminate = false;
+        this.checked = !this.checked;
+        this.bdsChange.emit({ checked: this.checked, value: this.value });
+        this.valueChange.emit(this.checked);
     }
     get hostClasses() {
         return {
             'bds-checkbox-card': true,
-            'bds-checkbox-card--checked': this.isChecked,
+            'bds-checkbox-card--checked': this.checked,
             'bds-checkbox-card--indeterminate': this.isIndeterminate,
             'bds-checkbox-card--disabled': this.isDisabled,
-            'bds-checkbox-card--error': this.error,
+            'bds-checkbox-card--error': this.isError,
         };
     }
     // ---------------------------------------------------------------------------
     // Form-associated callbacks (IFormControl)
     // ---------------------------------------------------------------------------
-    syncFormValue() {
-        setFormValue(this.internals, this.isChecked ? this.value : null);
-    }
     formAssociatedCallback() {
-        this.syncFormValue();
+        this.formCheckbox.formAssociatedCallback();
     }
     formResetCallback() {
-        this.isChecked = false;
-        this.isIndeterminate = false;
-        setFormValue(this.internals, null);
+        this.formCheckbox.formResetCallback();
     }
-    formStateRestoreCallback(state, _mode) {
-        this.isChecked = state === this.value;
-        this.syncFormValue();
+    formStateRestoreCallback(state) {
+        this.formCheckbox.formStateRestoreCallback(state);
     }
     formDisabledCallback(disabled) {
-        this.isDisabled = disabled;
+        this.formCheckbox.formDisabledCallback(disabled);
+    }
+    get isError() {
+        const error = this.error && !this.disabled;
+        return error || this.isInvalid;
     }
     render() {
-        return (h(Host, { key: '9277e649285e38b491fe55bd8bc4eabf7b0725f8', class: this.hostClasses, role: "checkbox", "aria-checked": this.isIndeterminate ? 'mixed' : `${this.isChecked}`, "aria-disabled": this.isDisabled ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-label": this.label || this.name || undefined, tabIndex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("bds-checkbox", { key: 'e87685111aae53e368f37fde53994590bbdc0a69', class: "bds-checkbox-card__checkbox", name: this.name, value: this.value, checked: this.isChecked, indeterminate: this.isIndeterminate, disabled: this.isDisabled, error: this.error, tabIndex: -1, "aria-hidden": "true" }), h("div", { key: 'ca93933dddfbdbbf6ae96a9f0b2f7ec1b4014a3a', class: "bds-checkbox-card__card" }, h("div", { key: '952ca899553bc57a7f6b01cd65607d084c7869a9', class: "bds-checkbox-card__content" }, h("div", { key: 'bf913fdb5d5fab9e81b387113c7198514fdbe8de', class: "bds-checkbox-card__header" }, h("div", { key: 'd885e0eabf9ea9d425160ce88a4d76212b400a1d', class: "bds-checkbox-card__icon" }, h("slot", { key: '9c658f9823aa449e4e9138b2b86e937cc9ce3e1c', name: "icon" })), h("div", { key: 'e7c410ff15cb7bd62c2eba56683cf1b9b24c970a', class: "bds-checkbox-card__title" }, this.label || h("slot", { key: '59cce6d6bd050711af8a55a44252747a593b0a29' }))), h("div", { key: '1a574fde1998ebd5f2940c27dbc5e275ce7bb933', class: "bds-checkbox-card__description" }, h("slot", { key: 'ed53c06534344f9dfec0f0ffba067c16596d24d7', name: "description" }))))));
+        return (h(Host, { key: 'cb39b373d8bbbbe137a74a001f91c73b444d0c8e', class: this.hostClasses, role: "checkbox", "aria-checked": this.isIndeterminate ? 'mixed' : `${this.checked}`, "aria-disabled": this.isDisabled ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-invalid": this.isError ? 'true' : null, "aria-label": this.label || this.name || undefined, tabIndex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("bds-checkbox", { key: '3375dc0b18a424f5f140143626b2bcdc73c298b0', name: this.name, class: "bds-checkbox-card__checkbox", ref: () => this.checkboxElement, value: this.value, checked: this.checked, indeterminate: this.isIndeterminate, disabled: this.isDisabled, error: this.isError, tabIndex: -1, "aria-hidden": "true", onBdsChange: e => e.preventDefault() }), h("div", { key: 'beba4396fb8c0830ffdb05b62482f0ff63aab0d7', class: "bds-checkbox-card__card" }, h("div", { key: 'f369995cc0dbeecfd7670d271ff041240a6dcb65', class: "bds-checkbox-card__content" }, h("div", { key: '12848e5aef69157ca5d144a2815e7b64a654cbe6', class: "bds-checkbox-card__header" }, h("div", { key: '18c72637c1dfb0037b7d2e7fc8cb5004bdeafb0b', class: "bds-checkbox-card__icon" }, h("slot", { key: '7e2979ea18f5c29ecdf629851378aa9efb9e39f6', name: "icon" })), h("div", { key: '0aedaf532433d3deb899f6f6fd6826589850fd71', class: "bds-checkbox-card__title" }, this.label || h("slot", { key: '43a0a9b10edc6f4ee73b5995912889728648d5d6' }))), h("div", { key: '8c89db4ab52395c75f8a1a826ace5aa0f0dbae10', class: "bds-checkbox-card__description" }, h("slot", { key: '174e70254d531fa80d8d19b419587837a4a676ea', name: "description" }))))));
     }
     static get is() { return "bds-checkbox-card"; }
     static get formAssociated() { return true; }
@@ -133,7 +132,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -159,7 +158,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -186,7 +185,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -213,7 +212,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -240,7 +239,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -267,7 +266,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -286,7 +285,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
             },
             "indeterminate": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "ICheckboxCard['indeterminate']",
                     "resolved": "boolean",
@@ -294,7 +293,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -321,7 +320,7 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                         "ICheckboxCard": {
                             "location": "import",
                             "path": "./types/ICheckboxCard",
-                            "id": "src/components/forms/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-card/types/ICheckboxCard.ts::ICheckboxCard",
                             "referenceLocation": "ICheckboxCard"
                         }
                     }
@@ -343,8 +342,8 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
     static get states() {
         return {
             "isDisabled": {},
-            "isIndeterminate": {},
-            "isChecked": {}
+            "isInvalid": {},
+            "isIndeterminate": {}
         };
     }
     static get events() {
@@ -380,6 +379,44 @@ export class BdsCheckboxCard 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 [{
@@ -393,5 +430,14 @@ export class BdsCheckboxCard extends Mixin(formAssociatedMixin) {
                 "methodName": "onCheckedChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
     static get attachInternalsMemberName() { return "internals"; }
 }

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

@@ -0,0 +1,55 @@
+@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
+ **/
+/**
+* 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-group {
+  /**
+   * @prop --layout-count: Defines the number of columns for horizontal orientation. Default is 1.
+   */
+  --bds-divider-gap: var(--boreal-spacing-3xs);
+  display: flex;
+  flex-direction: column;
+  gap: var(--boreal-spacing-2xs);
+}
+.bds-checkbox-group__options {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--boreal-spacing-xs);
+}
+.bds-checkbox-group[orientation=horizontal] .bds-checkbox-group__options {
+  grid-template-columns: repeat(var(--layout-count, 1), auto);
+  justify-content: start;
+}
+.bds-checkbox-group[type=checkboxbutton] .bds-checkbox-group__options {
+  display: inline-flex;
+  gap: 0;
+  padding: var(--boreal-spacing-3xs);
+  border: 1px solid var(--boreal-stroke-default-light);
+  background-color: var(--boreal-ui-inverse);
+  border-radius: var(--boreal-radius-xs);
+  overflow: hidden;
+}
+.bds-checkbox-group[type=checkboxbutton][orientation=vertical] .bds-checkbox-group__options {
+  flex-direction: column;
+}
+.bds-checkbox-group[type=checkboxbutton].bds-checkbox-group--error .bds-checkbox-group__options {
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox-group[type=checkboxbutton].bds-checkbox-group--error bds-checkbox-button.bds-checkbox-button--error {
+  color: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox-group[type=checkboxbutton].bds-checkbox-group--error bds-divider[data-injected] {
+  --bds-divider-color: var(--boreal-stroke-danger-base);
+}