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

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

@@ -0,0 +1,113 @@
+@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-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: var(--boreal-spacing-2xs);
+  padding: var(--boreal-spacing-2xs) var(--boreal-spacing-s);
+  border: 1px solid transparent;
+  border-radius: var(--boreal-radius-s);
+  background-color: var(--boreal-ui-default-base);
+  color: var(--boreal-text-default);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.bds-checkbox-button input[type=checkbox],
+.bds-checkbox-button input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+.bds-checkbox-button [slot=icon] {
+  display: inline-flex;
+  align-items: center;
+}
+.bds-checkbox-button:hover:not(.bds-checkbox-button--disabled):not(.bds-checkbox-button--checked):not(.bds-checkbox-button--error) {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
+}
+.bds-checkbox-button:focus-visible, .bds-checkbox-button:focus {
+  z-index: 1;
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
+  outline: none;
+}
+.bds-checkbox-button:active:not(.bds-checkbox-button--disabled):not(.bds-checkbox-button--checked):not(.bds-checkbox-button--error) {
+  z-index: 1;
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: var(--boreal-depth-box-shadow-active);
+}
+.bds-checkbox-button--checked {
+  background-color: var(--boreal-ui-inverse);
+  border-color: var(--boreal-stroke-primary-base);
+  color: var(--boreal-text-primary-base);
+}
+.bds-checkbox-button--checked:hover, .bds-checkbox-button--checked:focus-visible, .bds-checkbox-button--checked:focus, .bds-checkbox-button--checked:active {
+  background-color: var(--boreal-ui-primary-lighter);
+}
+.bds-checkbox-button--error {
+  background-color: var(--boreal-ui-inverse);
+  color: var(--boreal-text-danger-base);
+}
+.bds-checkbox-button--error:hover, .bds-checkbox-button--error:focus-visible, .bds-checkbox-button--error:focus, .bds-checkbox-button--error:active {
+  background-color: var(--boreal-ui-danger-lighter);
+}
+.bds-checkbox-button--error.bds-checkbox-button--checked {
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-checkbox-button--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: var(--boreal-ui-inverse);
+  color: var(--boreal-text-disabled);
+}
+.bds-checkbox-button--disabled.bds-checkbox-button--checked {
+  border-color: var(--boreal-stroke-primary-light);
+  color: var(--boreal-text-primary-light);
+}
+.bds-checkbox-button__label {
+  font-family: var(--boreal-typography-font-family-primary);
+  font-size: var(--boreal-typography-font-size-sm);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-checkbox-button__info {
+  display: inline-flex;
+  align-items: center;
+}
+.bds-checkbox-button__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bds-checkbox-button__icon:empty {
+  display: none;
+}
+.bds-checkbox-button__info-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: 1;
+  color: var(--boreal-icon-default-ink);
+}

package/dist/collection/components/forms/bds-checkbox/bds-checkbox-button/bds-checkbox-button.js

@@ -0,0 +1,382 @@
+import { Host, Mixin, h, } from "@stencil/core";
+import { formAssociatedMixin } from "../../../../mixins/index";
+import { useFormCheckbox } from "../utils";
+/**
+ * Button-shaped checkbox option that toggles independently on each interaction.
+ * Renders as a pill-button with the same visual language as `bds-radio-button`, but uses
+ * `role="checkbox"` and multi-select semantics — toggling one button has no effect on others.
+ *
+ * Can be used standalone (with `name` and optional `required`) or inside a `bds-checkbox-group`,
+ * which is the recommended approach for coordinated form state and group-level validation.
+ *
+ * @slot - Label content rendered when no `label` prop is provided.
+ * @slot icon - Optional icon displayed to the left of the label.
+ */
+export class BdsCheckboxButton extends Mixin(formAssociatedMixin) {
+    constructor() {
+        this.isDisabled = false;
+        this.isInvalid = false;
+        /** Name of the form control, submitted as a key in the form data. */
+        this.name = '';
+        /** Disables the button, preventing interaction. Propagated by `bds-checkbox-group` when the group is disabled. */
+        this.disabled = false;
+        /** Marks this button as required for form submission. Has no effect when used inside `bds-checkbox-group`. */
+        this.required = false;
+        /** Toggle state of this button. Flips on every interaction when not disabled. */
+        this.checked = false;
+        /** Shows error styling on the button. */
+        this.error = false;
+        /** Value associated with this button; submitted with form data when checked. */
+        this.value = 'on';
+        /** Label text displayed inside the button. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Tooltip text shown on an info icon next to the label. */
+        this.info = '';
+        this.formCheckbox = useFormCheckbox(this, this.value);
+        this.handleClick = () => this.toggle();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.toggle();
+            }
+        };
+        super();
+    }
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
+    }
+    onCheckedChange() {
+        this.formCheckbox.syncFormValue();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    formAssociatedCallback() {
+        this.formCheckbox.formAssociatedCallback();
+    }
+    formResetCallback() {
+        this.formCheckbox.formResetCallback();
+    }
+    formStateRestoreCallback(state) {
+        this.formCheckbox.formStateRestoreCallback(state);
+    }
+    formDisabledCallback(disabled) {
+        this.formCheckbox.formDisabledCallback(disabled);
+    }
+    handleInvalid(event) {
+        event.preventDefault();
+        this.isInvalid = true;
+    }
+    /** Returns whether this button satisfies its validation constraints. */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** Reports validity to the user, showing native validation UI if invalid. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.checked = !this.checked;
+        this.bdsChange.emit({ checked: this.checked, value: this.value });
+        this.valueChange.emit(this.checked);
+    }
+    get isError() {
+        return (this.error && !this.isDisabled) || this.isInvalid;
+    }
+    get classMap() {
+        return {
+            'bds-checkbox-button': true,
+            'bds-checkbox-button--checked': this.checked,
+            'bds-checkbox-button--error': this.isError,
+            'bds-checkbox-button--disabled': this.isDisabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: '39d1432637929a38909bb0d3a768619d27af09c1', class: this.classMap, role: "checkbox", "aria-checked": `${this.checked}`, "aria-disabled": this.isDisabled ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-invalid": this.isError ? 'true' : null, tabIndex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: 'fdd48deeb69445ecdde9cb2ce3556a3f07286602', type: "checkbox", value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '96783bbf11a64262b8ebe88487cd2cc16f4d4263', class: "bds-checkbox-button__icon" }, h("slot", { key: 'de45f31aa9a6774f33a36c6238380014be066d50', name: "icon" })), h("span", { key: '9f94a920639d50a6949bf5272bc6fe6057701bee', class: "bds-checkbox-button__label" }, this.label || h("slot", { key: '8fb82d43c376371110a24a0310a15a7911f42964' })), this.info && (h("span", { key: '9f128d14a257bae34ab64be3e1b76b1ccfce295b', class: "bds-checkbox-button__info" }, h("span", { key: 'b3baa9bf7172810a8d5971d9e58939de24861da8', class: "bds-checkbox-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: 'bea872bace0b177316103002f7a3d17ac65fb951' }, this.info)))));
+    }
+    static get is() { return "bds-checkbox-button"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-checkbox-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-checkbox-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the form control, submitted as a key in the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button, preventing interaction. Propagated by `bds-checkbox-group` when the group is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks this button as required for form submission. Has no effect when used inside `bds-checkbox-group`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggle state of this button. Flips on every interaction when not disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows error styling on the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value associated with this button; submitted with form data when checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed inside the button. Falls back to the default slot when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text shown on an info icon next to the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDisabled": {},
+            "isInvalid": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes. Used for `v-model` two-way binding in Vue. Payload: `boolean`."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on every toggle \u2014 both when the button becomes checked and when it becomes unchecked.\nPayload: `{ checked: boolean, value: string }`."
+                },
+                "complexType": {
+                    "original": "CheckboxButtonChangeDetail",
+                    "resolved": "CheckboxButtonChangeDetail",
+                    "references": {
+                        "CheckboxButtonChangeDetail": {
+                            "location": "import",
+                            "path": "./types/ICheckboxButton",
+                            "id": "src/components/forms/bds-checkbox/bds-checkbox-button/types/ICheckboxButton.ts::CheckboxButtonChangeDetail",
+                            "referenceLocation": "CheckboxButtonChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Returns whether this button satisfies its validation constraints.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Reports validity to the user, showing native validation UI if invalid.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }];
+    }
+    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-card → bds-checkbox/bds-checkbox-card}/bds-checkbox-card.css

@@ -29,11 +29,11 @@
 }
 .bds-checkbox-card:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-checkbox-card:focus-within, .bds-checkbox-card:focus {
   background-color: var(--boreal-ui-default-lighter);
-  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-checkbox-card:focus-visible {
   outline: none;
@@ -51,7 +51,8 @@
 .bds-checkbox-card .bds-checkbox-card__checkbox {
   pointer-events: none;
   flex-shrink: 0;
-  margin-top: calc(var(--boreal-spacing-2xs) - var(--boreal-spacing-4xs));
+  margin-top: var(--boreal-spacing-2xs);
+  gap: 0;
 }
 .bds-checkbox-card .bds-checkbox-card__checkbox .bds-checkbox__label {
   display: none;
@@ -75,6 +76,9 @@
   font-size: var(--boreal-typography-font-size-xs);
   line-height: var(--boreal-typography-line-height-xs);
 }
+.bds-checkbox-card__icon:empty {
+  display: none;
+}
 .bds-checkbox-card--checked {
   border-color: var(--boreal-stroke-primary-base);
 }
@@ -85,6 +89,10 @@
 .bds-checkbox-card--checked .bds-checkbox-card__description {
   color: var(--boreal-text-primary-base);
 }
+.bds-checkbox-card--checked:disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-primary-light);
+  background: var(--boreal-ui-primary-light);
+}
 .bds-checkbox-card--indeterminate {
   border-color: var(--boreal-stroke-default-light);
 }
@@ -115,6 +123,10 @@
 .bds-checkbox-card--disabled.bds-checkbox-card--error .bds-checkbox-card__description {
   color: var(--boreal-text-danger-light);
 }
+.bds-checkbox-card--disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+  background: var(--boreal-ui-disabled);
+}
 .bds-checkbox-card--error {
   border-color: var(--boreal-stroke-danger-base);
 }