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

package/dist/cjs/bds-checkbox-button.cjs.entry.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var checkboxFormAssociation = require('./checkbox-form-association-DTEpHXUD.js');
+
+const bdsCheckboxButtonCss = () => `@charset "UTF-8";.bds-checkbox-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);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);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);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);-webkit-box-shadow:var(--boreal-depth-box-shadow-active);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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-checkbox-button__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-checkbox-button__icon:empty{display:none}.bds-checkbox-button__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}`;
+
+const BdsCheckboxButton = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        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 = checkboxFormAssociation.useFormCheckbox(this, this.value);
+        this.handleClick = () => this.toggle();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.toggle();
+            }
+        };
+    }
+    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 (index.h(index.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 }, index.h("input", { key: 'fdd48deeb69445ecdde9cb2ce3556a3f07286602', type: "checkbox", value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), index.h("span", { key: '96783bbf11a64262b8ebe88487cd2cc16f4d4263', class: "bds-checkbox-button__icon" }, index.h("slot", { key: 'de45f31aa9a6774f33a36c6238380014be066d50', name: "icon" })), index.h("span", { key: '9f94a920639d50a6949bf5272bc6fe6057701bee', class: "bds-checkbox-button__label" }, this.label || index.h("slot", { key: '8fb82d43c376371110a24a0310a15a7911f42964' })), this.info && (index.h("span", { key: '9f128d14a257bae34ab64be3e1b76b1ccfce295b', class: "bds-checkbox-button__info" }, index.h("span", { key: 'b3baa9bf7172810a8d5971d9e58939de24861da8', class: "bds-checkbox-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: 'bea872bace0b177316103002f7a3d17ac65fb951' }, this.info)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": [{
+                "onCheckedChange": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+BdsCheckboxButton.style = bdsCheckboxButtonCss();
+
+exports.bds_checkbox_button = BdsCheckboxButton;

package/dist/cjs/bds-checkbox-card.cjs.entry.js

@@ -2,9 +2,9 @@
 
 var index = require('./index-CwYIVC9N.js');
 var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
-var internals = require('./internals-D8x7GMfR.js');
+var checkboxFormAssociation = require('./checkbox-form-association-DTEpHXUD.js');
 
-const bdsCheckboxCardCss = () => `@charset "UTF-8";.bds-checkbox-card{position:relative;cursor:pointer;font-family:var(--boreal-typography-font-family-primary);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:start;align-items:flex-start;gap:var(--boreal-spacing-xs);padding:var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);border-radius:var(--boreal-radius-xs);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-checkbox-card:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-checkbox-card:focus-within,.bds-checkbox-card:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-checkbox-card:focus-visible{outline:none}.bds-checkbox-card:active bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:hover bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus-within bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus-visible bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box{background:var(--boreal-ui-inverse)}.bds-checkbox-card__icon{display:-ms-flexbox;display:flex;margin-top:var(--boreal-spacing-3xs);height:var(--boreal-layout-m);-ms-flex-align:center;align-items:center;margin-bottom:var(--boreal-spacing-2xs)}.bds-checkbox-card .bds-checkbox-card__checkbox{pointer-events:none;-ms-flex-negative:0;flex-shrink:0;margin-top:calc(var(--boreal-spacing-2xs) - var(--boreal-spacing-4xs))}.bds-checkbox-card .bds-checkbox-card__checkbox .bds-checkbox__label{display:none}.bds-checkbox-card__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-checkbox-card__header{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-3xs);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md)}.bds-checkbox-card__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md)}.bds-checkbox-card__description{color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-xs);line-height:var(--boreal-typography-line-height-xs)}.bds-checkbox-card--checked{border-color:var(--boreal-stroke-primary-base)}.bds-checkbox-card--checked:hover,.bds-checkbox-card--checked:focus,.bds-checkbox-card--checked:focus-within,.bds-checkbox-card--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-checkbox-card--checked .bds-checkbox-card__header,.bds-checkbox-card--checked .bds-checkbox-card__description{color:var(--boreal-text-primary-base)}.bds-checkbox-card--indeterminate{border-color:var(--boreal-stroke-default-light)}.bds-checkbox-card--indeterminate .bds-checkbox-card__header{color:var(--boreal-text-default)}.bds-checkbox-card--indeterminate .bds-checkbox-card__description{color:var(--boreal-text-default-light)}.bds-checkbox-card--disabled{pointer-events:none}.bds-checkbox-card--disabled .bds-checkbox-card__header,.bds-checkbox-card--disabled .bds-checkbox-card__description{color:var(--boreal-text-disabled)}.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error){border-color:var(--boreal-stroke-primary-light)}.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error) .bds-checkbox-card__header,.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error) .bds-checkbox-card__description{color:var(--boreal-text-primary-light)}.bds-checkbox-card--disabled.bds-checkbox-card--error{border-color:var(--boreal-stroke-danger-light)}.bds-checkbox-card--disabled.bds-checkbox-card--error .bds-checkbox-card__header,.bds-checkbox-card--disabled.bds-checkbox-card--error .bds-checkbox-card__description{color:var(--boreal-text-danger-light)}.bds-checkbox-card--error{border-color:var(--boreal-stroke-danger-base)}.bds-checkbox-card--error:hover,.bds-checkbox-card--error:focus,.bds-checkbox-card--error:focus-within,.bds-checkbox-card--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-checkbox-card--error .bds-checkbox-card__header,.bds-checkbox-card--error .bds-checkbox-card__description{color:var(--boreal-text-danger-base)}`;
+const bdsCheckboxCardCss = () => `@charset "UTF-8";.bds-checkbox-card{position:relative;cursor:pointer;font-family:var(--boreal-typography-font-family-primary);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:start;align-items:flex-start;gap:var(--boreal-spacing-xs);padding:var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);border-radius:var(--boreal-radius-xs);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-checkbox-card:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-checkbox-card:focus-within,.bds-checkbox-card:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-checkbox-card:focus-visible{outline:none}.bds-checkbox-card:active bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:hover bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus-within bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box,.bds-checkbox-card:focus-visible bds-checkbox:not(.bds-checkbox--checked) .bds-checkbox__box{background:var(--boreal-ui-inverse)}.bds-checkbox-card__icon{display:-ms-flexbox;display:flex;margin-top:var(--boreal-spacing-3xs);height:var(--boreal-layout-m);-ms-flex-align:center;align-items:center;margin-bottom:var(--boreal-spacing-2xs)}.bds-checkbox-card .bds-checkbox-card__checkbox{pointer-events:none;-ms-flex-negative:0;flex-shrink:0;margin-top:var(--boreal-spacing-2xs);gap:0}.bds-checkbox-card .bds-checkbox-card__checkbox .bds-checkbox__label{display:none}.bds-checkbox-card__content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-checkbox-card__header{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-3xs);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md)}.bds-checkbox-card__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md)}.bds-checkbox-card__description{color:var(--boreal-text-default-light);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)}.bds-checkbox-card--checked:hover,.bds-checkbox-card--checked:focus,.bds-checkbox-card--checked:focus-within,.bds-checkbox-card--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-checkbox-card--checked .bds-checkbox-card__header,.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)}.bds-checkbox-card--indeterminate .bds-checkbox-card__header{color:var(--boreal-text-default)}.bds-checkbox-card--indeterminate .bds-checkbox-card__description{color:var(--boreal-text-default-light)}.bds-checkbox-card--disabled{pointer-events:none}.bds-checkbox-card--disabled .bds-checkbox-card__header,.bds-checkbox-card--disabled .bds-checkbox-card__description{color:var(--boreal-text-disabled)}.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error){border-color:var(--boreal-stroke-primary-light)}.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error) .bds-checkbox-card__header,.bds-checkbox-card--disabled.bds-checkbox-card--checked:not(.bds-checkbox-card--error) .bds-checkbox-card__description{color:var(--boreal-text-primary-light)}.bds-checkbox-card--disabled.bds-checkbox-card--error{border-color:var(--boreal-stroke-danger-light)}.bds-checkbox-card--disabled.bds-checkbox-card--error .bds-checkbox-card__header,.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)}.bds-checkbox-card--error:hover,.bds-checkbox-card--error:focus,.bds-checkbox-card--error:focus-within,.bds-checkbox-card--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-checkbox-card--error .bds-checkbox-card__header,.bds-checkbox-card--error .bds-checkbox-card__description{color:var(--boreal-text-danger-base)}`;
 
 const BdsCheckboxCard = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
     constructor(hostRef) {
@@ -20,8 +20,8 @@ const BdsCheckboxCard = class extends index.Mixin(formAssociated_mixin.formAssoc
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         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. */
@@ -39,6 +39,7 @@ const BdsCheckboxCard = class extends index.Mixin(formAssociated_mixin.formAssoc
         this.indeterminate = false;
         /** Whether the checkbox card is in an error state. */
         this.error = false;
+        this.formCheckbox = checkboxFormAssociation.useFormCheckbox(this, this.value);
         this.handleClick = () => this.toggle();
         this.handleKeyDown = (e) => {
             if (e.key === ' ') {
@@ -50,7 +51,9 @@ const BdsCheckboxCard = class extends index.Mixin(formAssociated_mixin.formAssoc
     componentWillLoad() {
         this.isDisabled = this.disabled;
         this.isIndeterminate = this.indeterminate;
-        this.isChecked = this.checked;
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
     }
     onDisabledChange(next) {
         this.isDisabled = next;
@@ -59,48 +62,59 @@ const BdsCheckboxCard = class extends index.Mixin(formAssociated_mixin.formAssoc
         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() {
-        internals.setFormValue(this.internals, this.isChecked ? this.value : null);
-    }
     formAssociatedCallback() {
-        this.syncFormValue();
+        this.formCheckbox.formAssociatedCallback();
     }
     formResetCallback() {
-        this.isChecked = false;
-        this.isIndeterminate = false;
-        internals.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 (index.h(index.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 }, index.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" }), index.h("div", { key: 'ca93933dddfbdbbf6ae96a9f0b2f7ec1b4014a3a', class: "bds-checkbox-card__card" }, index.h("div", { key: '952ca899553bc57a7f6b01cd65607d084c7869a9', class: "bds-checkbox-card__content" }, index.h("div", { key: 'bf913fdb5d5fab9e81b387113c7198514fdbe8de', class: "bds-checkbox-card__header" }, index.h("div", { key: 'd885e0eabf9ea9d425160ce88a4d76212b400a1d', class: "bds-checkbox-card__icon" }, index.h("slot", { key: '9c658f9823aa449e4e9138b2b86e937cc9ce3e1c', name: "icon" })), index.h("div", { key: 'e7c410ff15cb7bd62c2eba56683cf1b9b24c970a', class: "bds-checkbox-card__title" }, this.label || index.h("slot", { key: '59cce6d6bd050711af8a55a44252747a593b0a29' }))), index.h("div", { key: '1a574fde1998ebd5f2940c27dbc5e275ce7bb933', class: "bds-checkbox-card__description" }, index.h("slot", { key: 'ed53c06534344f9dfec0f0ffba067c16596d24d7', name: "description" }))))));
+        return (index.h(index.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 }, index.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() }), index.h("div", { key: 'beba4396fb8c0830ffdb05b62482f0ff63aab0d7', class: "bds-checkbox-card__card" }, index.h("div", { key: 'f369995cc0dbeecfd7670d271ff041240a6dcb65', class: "bds-checkbox-card__content" }, index.h("div", { key: '12848e5aef69157ca5d144a2815e7b64a654cbe6', class: "bds-checkbox-card__header" }, index.h("div", { key: '18c72637c1dfb0037b7d2e7fc8cb5004bdeafb0b', class: "bds-checkbox-card__icon" }, index.h("slot", { key: '7e2979ea18f5c29ecdf629851378aa9efb9e39f6', name: "icon" })), index.h("div", { key: '0aedaf532433d3deb899f6f6fd6826589850fd71', class: "bds-checkbox-card__title" }, this.label || index.h("slot", { key: '43a0a9b10edc6f4ee73b5995912889728648d5d6' }))), index.h("div", { key: '8c89db4ab52395c75f8a1a826ace5aa0f0dbae10', class: "bds-checkbox-card__description" }, index.h("slot", { key: '174e70254d531fa80d8d19b419587837a4a676ea', name: "description" }))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-checkbox-group.cjs.entry.js

@@ -0,0 +1,292 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var Keys = require('./Keys-DXn16dlA.js');
+var orientation = require('./orientation-DQAIleEJ.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const CHECKBOX_GROUP_TYPES = {
+    CHECKBOX: 'checkbox',
+    CHECKBOX_BUTTON: 'checkboxbutton',
+    CHECKBOX_CARD: 'checkboxcard',
+};
+
+const bdsCheckboxGroupCss = () => `@charset "UTF-8";.bds-checkbox-group{--bds-divider-gap:var(--boreal-spacing-3xs);display:-ms-flexbox;display:flex;-ms-flex-direction:column;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);-ms-flex-pack:start;justify-content:start}.bds-checkbox-group[type=checkboxbutton] .bds-checkbox-group__options{display:-ms-inline-flexbox;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{-ms-flex-direction:column;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)}`;
+
+const LEAF_TAG = ['BDS-CHECKBOX', 'BDS-CHECKBOX-BUTTON', 'BDS-CHECKBOX-CARD'];
+const BdsCheckboxGroup = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        this.valueChange = index.createEvent(this, "valueChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this._id = BaseAttributes.createId('bds-checkbox-group');
+        /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
+        this.isDisabled = false;
+        /** Set to true when native form validation fires the `invalid` event; cleared on reset or when value becomes valid. */
+        this.isInvalid = false;
+        /** Disables all child checkboxes and prevents selection. Also mirrored to isDisabled @State for form-level disable support. */
+        this.disabled = false;
+        /** Shows error styling on the group helper text. Propagated to all child checkboxes. */
+        this.error = false;
+        /** Error message rendered below the checkbox options when error is true. Replaces helperText. */
+        this.errorMessage = '';
+        /** Helper text rendered below the checkbox options. Shown in default state; replaced by errorMessage in error state. */
+        this.helperText = '';
+        /** Tooltip text shown on the group label info icon. */
+        this.info = '';
+        /** Group label rendered above the checkbox options. */
+        this.label = '';
+        /** Layout direction of the checkbox options. */
+        this.orientation = 'horizontal';
+        /** Marks the group as required for form submission. Triggers validity error when no checkboxes are selected. */
+        this.required = false;
+        /** Identifies this group variant. 'checkbox' renders bds-checkbox children; 'checkboxbutton' renders bds-checkbox-button segmented control; 'checkboxcard' renders bds-checkbox-card element. */
+        this.type = 'checkbox';
+        /** Currently selected checkbox values. Synced to children on change. */
+        this.value = [];
+        /** Hides the divider between checkbox buttons when type is 'checkboxbutton'. */
+        this.joined = false;
+        this.handleKeyDown = (event) => {
+            const target = event.target;
+            if (!LEAF_TAG.includes(target.tagName))
+                return;
+            switch (event.key) {
+                case Keys.KEYBOARD.ArrowDown:
+                case Keys.KEYBOARD.ArrowRight:
+                    this.navigateTo(target, true);
+                    event.preventDefault();
+                    break;
+                case Keys.KEYBOARD.ArrowUp:
+                case Keys.KEYBOARD.ArrowLeft:
+                    this.navigateTo(target, false);
+                    event.preventDefault();
+                    break;
+            }
+        };
+    }
+    onJoinedChange() {
+        this.insertDividers();
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(orientation.ORIENTATIONS), orientation.ORIENTATIONS.VERTICAL, this.el, 'orientation');
+        validateProps.validatePropValue(Object.values(CHECKBOX_GROUP_TYPES), CHECKBOX_GROUP_TYPES.CHECKBOX, this.el, 'type');
+        this.insertDividers();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+        this.propagatePropertyToCheckboxes('disabled', next);
+    }
+    onErrorChange(val) {
+        this.propagatePropertyToCheckboxes('error', val);
+    }
+    onValuesChange(vals) {
+        this.syncCheckboxStates(vals);
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.isDisabled = this.disabled;
+        if (this.value.length !== 0)
+            return;
+        const selector = LEAF_TAG.map(tag => `${tag}[checked]`).join(',');
+        const el = this.el;
+        const checkedElements = Array.from(el.querySelectorAll(selector));
+        if (checkedElements.length > 0)
+            this.value = checkedElements.map((el) => el.getAttribute('value') ?? '').filter(v => v !== '');
+    }
+    componentDidLoad() {
+        this.onValuesChange(this.value);
+        this.onErrorChange(this.isError);
+        this.syncFormValue();
+        this.updateLayoutCount();
+    }
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formResetCallback() {
+        this.value = [];
+        this.isInvalid = false;
+        this.checkboxElements.forEach((checkbox) => {
+            checkbox.checked = false;
+            checkbox.error = this.isError;
+        });
+        this.internals.setFormValue(null);
+        this.updateFormValidity();
+    }
+    formStateRestoreCallback(state, _mode) {
+        const vals = Array.isArray(state) ? state : [];
+        this.value = vals.filter(v => typeof v === 'string');
+        this.updateFormValue();
+    }
+    formDisabledCallback(disabled) {
+        this.isDisabled = disabled;
+        this.propagatePropertyToCheckboxes('disabled', disabled);
+    }
+    handleCheckboxChange(event) {
+        const target = event.target;
+        if (!LEAF_TAG.includes(target.tagName))
+            return;
+        event.stopPropagation();
+        const checkbox = target;
+        const value = checkbox.value;
+        this.updateCheckboxSelection(value, checkbox.checked);
+        this.syncFormValue();
+        this.bdsChange.emit({ value: this.value });
+        this.valueChange.emit(this.value);
+    }
+    handleInvalid(event) {
+        this.isInvalid = true;
+        if (this.errorMessage !== '')
+            event.preventDefault();
+    }
+    handleValueChange(event) {
+        const target = event.target;
+        if (!LEAF_TAG.includes(target.tagName))
+            return;
+        event.stopPropagation();
+    }
+    /** Returns whether the group's current value satisfies the browser's built-in constraint validation. */
+    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();
+    }
+    insertDividers() {
+        this.el.querySelectorAll('bds-divider[data-injected]').forEach(d => d.remove());
+        if (this.type !== CHECKBOX_GROUP_TYPES.CHECKBOX_BUTTON || this.joined)
+            return;
+        const dividerOrientation = this.orientation === orientation.ORIENTATIONS.HORIZONTAL ? orientation.ORIENTATIONS.VERTICAL : orientation.ORIENTATIONS.HORIZONTAL;
+        const buttons = this.checkboxElements.filter((el) => el.tagName === 'BDS-CHECKBOX-BUTTON');
+        buttons.forEach((btn, i) => {
+            if (i === 0)
+                return;
+            const divider = document.createElement('bds-divider');
+            divider.setAttribute('orientation', dividerOrientation);
+            divider.setAttribute('data-injected', '');
+            btn.parentNode?.insertBefore(divider, btn);
+        });
+    }
+    navigateTo(current, forward) {
+        const elements = this.checkboxElements.filter(el => !el.disabled);
+        if (elements.length === 0)
+            return;
+        const idx = elements.indexOf(current);
+        const newIndex = (elements.length + idx + (forward ? 1 : -1)) % elements.length;
+        const next = elements[newIndex];
+        next.focus();
+    }
+    updateCheckboxSelection(value, isChecked) {
+        if (!isChecked) {
+            this.value = this.value.filter(v => v !== value);
+            return;
+        }
+        if (!this.value.includes(value))
+            this.value = [...this.value, value];
+    }
+    syncCheckboxStates(vals) {
+        this.checkboxElements.forEach((el) => {
+            const isChecked = vals.includes(el.value);
+            el.checked = isChecked;
+        });
+    }
+    get checkboxElements() {
+        const selector = LEAF_TAG.map(tag => tag).join(',');
+        const el = this.el;
+        return Array.from(el.querySelectorAll(selector));
+    }
+    propagatePropertyToCheckboxes(property, value) {
+        this.checkboxElements.forEach(el => {
+            el[property] = value;
+        });
+    }
+    updateFormValue() {
+        if (this.value.length === 0)
+            this.internals.setFormValue(null);
+        else {
+            const formData = new FormData();
+            this.value.forEach(val => {
+                formData.append(this.name, val);
+            });
+            this.internals.setFormValue(formData);
+        }
+    }
+    syncFormValue() {
+        this.updateFormValue();
+        this.updateFormValidity();
+    }
+    updateFormValidity() {
+        if (this.required && this.value.length === 0) {
+            const anchor = this.checkboxElements.find(el => !el.disabled);
+            this.internals.setValidity({ valueMissing: true }, this.errorMessage !== '' ? this.errorMessage : 'Please select at least one option.', anchor);
+        }
+        else {
+            this.internals.setValidity({});
+            if (!this.isInvalid)
+                return;
+            this.isInvalid = false;
+            if (!this.error)
+                this.propagatePropertyToCheckboxes('error', false);
+        }
+    }
+    updateLayoutCount() {
+        const count = this.checkboxElements.length;
+        const el = this.el;
+        el.style.setProperty('--layout-count', `${count}`);
+    }
+    get isError() {
+        return this.error && !this.isDisabled;
+    }
+    get classMap() {
+        const showError = this.isError || this.isInvalid;
+        return {
+            'bds-checkbox-group': true,
+            'bds-checkbox-group--disabled': this.isDisabled,
+            'bds-checkbox-group--error': showError,
+            'bds-checkbox-group--required': this.required,
+        };
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        const helperId = `${this._id}-helper`;
+        const showError = this.isError || this.isInvalid;
+        const typographyState = this.isDisabled ? 'disabled' : showError ? 'error' : 'default';
+        const helperContent = showError && this.errorMessage !== '' ? this.errorMessage : this.helperText;
+        return (index.h(index.Host, { key: 'ae68b7136eae0493eb3191caa71bfd31c87bd5dd', class: this.classMap, role: "group", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": helperContent !== '' ? helperId : undefined, "aria-invalid": showError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onKeyDown: this.handleKeyDown }, this.label && (index.h("bds-typography", { key: '779561b620c5a18f7018fabaeaa8759de1c5a2e6', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), index.h("div", { key: '6a0edf16a86b9628dd52390da861c51089107b85', class: "bds-checkbox-group__options" }, index.h("slot", { key: 'd702a5bdfbf2b0984c6c799a2abadb5c7fb904d0', onSlotchange: () => this.updateLayoutCount() })), helperContent && (index.h("bds-typography", { key: '357a3fbf88e2b70696512806840a390e468b1c62', id: helperId, variant: "helper", state: typographyState }, helperContent))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "joined": [{
+                "onJoinedChange": 0
+            }],
+        "orientation": [{
+                "checkPropValues": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }],
+        "error": [{
+                "onErrorChange": 0
+            }],
+        "isInvalid": [{
+                "onErrorChange": 0
+            }],
+        "value": [{
+                "onValuesChange": 0
+            }]
+    }; }
+};
+BdsCheckboxGroup.style = bdsCheckboxGroupCss();
+
+exports.bds_checkbox_group = BdsCheckboxGroup;