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

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

@@ -1,8 +1,8 @@
 import { M as Mixin, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
 import { f as formAssociatedMixin } from './form-associated.mixin-C4HM8wQe.js';
-import { s as setFormValue } from './internals-DfaYciGa.js';
+import { u as useFormCheckbox } from './checkbox-form-association-cgdh1LO-.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 Mixin(formAssociatedMixin) {
     constructor(hostRef) {
@@ -18,8 +18,8 @@ const BdsCheckboxCard = class extends Mixin(formAssociatedMixin) {
             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. */
@@ -37,6 +37,7 @@ const BdsCheckboxCard = class 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 === ' ') {
@@ -48,7 +49,9 @@ const BdsCheckboxCard = class 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;
@@ -57,48 +60,59 @@ const BdsCheckboxCard = class 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 formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -0,0 +1,290 @@
+import { M as Mixin, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { f as formAssociatedMixin } from './form-associated.mixin-C4HM8wQe.js';
+import { K as KEYBOARD } from './Keys-7G4h4DI7.js';
+import { O as ORIENTATIONS } from './orientation-CPvuMm5C.js';
+import { c as createId } from './BaseAttributes-DhSchGPI.js';
+import { v as validatePropValue } from './validateProps-kGnB15Lz.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 Mixin(formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.bdsChange = createEvent(this, "bdsChange");
+        this.valueChange = 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 = 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 KEYBOARD.ArrowDown:
+                case KEYBOARD.ArrowRight:
+                    this.navigateTo(target, true);
+                    event.preventDefault();
+                    break;
+                case KEYBOARD.ArrowUp:
+                case KEYBOARD.ArrowLeft:
+                    this.navigateTo(target, false);
+                    event.preventDefault();
+                    break;
+            }
+        };
+    }
+    onJoinedChange() {
+        this.insertDividers();
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(ORIENTATIONS), ORIENTATIONS.VERTICAL, this.el, 'orientation');
+        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 === ORIENTATIONS.HORIZONTAL ? ORIENTATIONS.VERTICAL : 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 (h(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 && (h("bds-typography", { key: '779561b620c5a18f7018fabaeaa8759de1c5a2e6', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), h("div", { key: '6a0edf16a86b9628dd52390da861c51089107b85', class: "bds-checkbox-group__options" }, h("slot", { key: 'd702a5bdfbf2b0984c6c799a2abadb5c7fb904d0', onSlotchange: () => this.updateLayoutCount() })), helperContent && (h("bds-typography", { key: '357a3fbf88e2b70696512806840a390e468b1c62', id: helperId, variant: "helper", state: typographyState }, helperContent))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return 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();
+
+export { BdsCheckboxGroup as bds_checkbox_group };

package/dist/esm/bds-checkbox.entry.js

@@ -1,9 +1,14 @@
 import { M as Mixin, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
 import { f as formAssociatedMixin } from './form-associated.mixin-C4HM8wQe.js';
-import { s as setFormValue } from './internals-DfaYciGa.js';
 import { a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
+import { K as KeyboardController } from './KeyboardController-DcnXb5F5.js';
+import { K as KEYBOARD } from './Keys-7G4h4DI7.js';
+import { c as createId } from './BaseAttributes-DhSchGPI.js';
+import { u as useFormCheckbox } from './checkbox-form-association-cgdh1LO-.js';
+import './Logger-iq2UuV7c.js';
+import './orientation-CPvuMm5C.js';
 
-const bdsCheckboxCss = () => `@charset "UTF-8";bds-checkbox{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:8px;cursor:pointer;outline:none}bds-checkbox .bds-checkbox__label{font-family:var(--boreal-typography-font-family-primary)}bds-checkbox .bds-checkbox__box{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--boreal-layout-m);height:var(--boreal-layout-m);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background:transparent;-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:4px}bds-checkbox:hover .bds-checkbox__box{border-color:var(--boreal-stroke-default-light)}bds-checkbox:focus-visible .bds-checkbox__box{border-color:var(--boreal-stroke-focus);outline:2px solid var(--boreal-stroke-focus);outline-offset:1px}bds-checkbox:active .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-bg-neutral);outline:2px solid var(--boreal-stroke-primary-light)}bds-checkbox.bds-checkbox--checked .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);color:var(--boreal-ui-inverse)}bds-checkbox.bds-checkbox--checked:hover .bds-checkbox__box{border-color:var(--boreal-ui-primary-dark);background:var(--boreal-ui-primary-dark)}bds-checkbox.bds-checkbox--checked:focus-visible .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);outline:2px solid var(--boreal-stroke-focus)}bds-checkbox.bds-checkbox--checked:active .bds-checkbox__box{border-color:var(--boreal-ui-primary-dark);background:var(--boreal-ui-primary-dark)}bds-checkbox.bds-checkbox--error .bds-checkbox__box{border-color:var(--boreal-stroke-danger-base)}bds-checkbox.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box,bds-checkbox.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box{color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-danger-base);background:var(--boreal-stroke-danger-base)}bds-checkbox.bds-checkbox--disabled{pointer-events:none}bds-checkbox.bds-checkbox--disabled .bds-checkbox__box{border-color:var(--boreal-stroke-default-light);background:var(--boreal-bg-neutral)}bds-checkbox.bds-checkbox--disabled .bds-checkbox__label{color:var(--boreal-text-disabled)}bds-checkbox.bds-checkbox--disabled.bds-checkbox--checked .bds-checkbox__box,bds-checkbox.bds-checkbox--disabled.bds-checkbox--indeterminate .bds-checkbox__box{border-color:var(--boreal-ui-primary-light);background:var(--boreal-ui-primary-light);color:#fff}`;
+const bdsCheckboxCss = () => `@charset "UTF-8";.bds-checkbox__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-checkbox{font-family:var(--boreal-typography-font-family-primary);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack: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);-webkit-transition:background 0.2s ease;transition:background 0.2s ease}.bds-checkbox:hover .bds-checkbox__box{-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-checkbox:focus .bds-checkbox__box,.bds-checkbox:focus-visible .bds-checkbox__box{-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-checkbox:active .bds-checkbox__box{-webkit-box-shadow:var(--boreal-depth-box-shadow-active);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)}`;
 
 const BdsCheckbox = class extends Mixin(formAssociatedMixin) {
     constructor(hostRef) {
@@ -19,11 +24,23 @@ const BdsCheckbox = class extends Mixin(formAssociatedMixin) {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         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
@@ -38,15 +55,10 @@ const BdsCheckbox = class 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();
-            }
-        };
     }
     // ---------------------------------------------------------------------------
     // Lifecycle
@@ -56,13 +68,22 @@ const BdsCheckbox = class 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;
@@ -71,26 +92,32 @@ const BdsCheckbox = class 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;
@@ -99,13 +126,17 @@ const BdsCheckbox = class 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;
@@ -119,21 +150,21 @@ const BdsCheckbox = class 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 formAssociated() { return true; }
     get el() { return getElement(this); }