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

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;

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

@@ -1,10 +1,16 @@
 'use strict';
 
 var index = require('./index-CwYIVC9N.js');
-var formAssociated_mixin = require('./form-associated.mixin-DXwvF_vW.js');
-var attributes = require('./attributes-wIHueigW.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var attributes = require('./attributes-CgRFplrN.js');
+var KeyboardController = require('./KeyboardController-B_g3peyB.js');
+var Keys = require('./Keys-DXn16dlA.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var checkboxFormAssociation = require('./checkbox-form-association-DTEpHXUD.js');
+require('./Logger-DnziItRH.js');
+require('./orientation-DQAIleEJ.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:18px;height:18px;border:2px 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,bds-checkbox.bds-checkbox--indeterminate .bds-checkbox__box{border-color:var(--boreal-ui-primary-base);background:var(--boreal-ui-primary-base);color:#fff}bds-checkbox.bds-checkbox--checked:hover .bds-checkbox__box,bds-checkbox.bds-checkbox--indeterminate: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,bds-checkbox.bds-checkbox--indeterminate: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,bds-checkbox.bds-checkbox--indeterminate: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{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 index.Mixin(formAssociated_mixin.formAssociatedMixin) {
     constructor(hostRef) {
@@ -20,11 +26,23 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.inheritedAttributes = {};
+        this._keyboard = new KeyboardController.KeyboardController();
+        this._id = BaseAttributes.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
@@ -39,15 +57,10 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         this.value = 'on';
         /** Label displayed next to the checkbox. If not provided, the default slot is used. */
         this.label = '';
+        this.formCheckbox = checkboxFormAssociation.useFormCheckbox(this, this.value);
         this.handleClick = () => {
             this.toggle();
         };
-        this.handleKeyDown = (e) => {
-            if (e.key === ' ') {
-                e.preventDefault();
-                this.toggle();
-            }
-        };
     }
     // ---------------------------------------------------------------------------
     // Lifecycle
@@ -57,13 +70,22 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         this.inheritedAttributes = {
             ...attributes.inheritAriaAttributes(this.el),
         };
-        this.syncFormValue();
+    }
+    componentDidLoad() {
+        this.formCheckbox.syncFormValue();
+        this._keyboard.attach(this.el).set(Keys.KEYBOARD.Space, () => {
+            if (!this.isDisabled)
+                this.toggle();
+        });
+    }
+    disconnectedCallback() {
+        this._keyboard.detach();
     }
     // ---------------------------------------------------------------------------
     // Watchers
     // ---------------------------------------------------------------------------
     onCheckedChange() {
-        this.syncFormValue();
+        this.formCheckbox.syncFormValue();
     }
     onDisabledChange(next) {
         this.isDisabled = next;
@@ -72,26 +94,32 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
     // Form-associated callbacks (IFormControl)
     // ---------------------------------------------------------------------------
     formAssociatedCallback() {
-        this.syncFormValue();
+        this.formCheckbox.formAssociatedCallback();
     }
     formResetCallback() {
-        this.checked = false;
-        this.indeterminate = false;
-        formAssociated_mixin.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() {
-        formAssociated_mixin.setFormValue(this.internals, this.checked ? this.value : null);
-    }
     toggle() {
         if (this.isDisabled)
             return;
@@ -100,13 +128,20 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
         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;
     }
     renderCheckIcon() {
         if (this.indeterminate) {
@@ -120,15 +155,18 @@ const BdsCheckbox = class extends index.Mixin(formAssociated_mixin.formAssociate
     // ---------------------------------------------------------------------------
     // 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 (index.h(index.Host, { key: '4c2aa0c0e06451d258204ed2aaf92c41f730a2a8', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, tabindex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.h("span", { key: 'de6763aaef951d9236cbf4df7ac49fd09f998e93', class: "bds-checkbox__box" }, this.renderCheckIcon()), index.h("span", { key: '571e62e3cde00561465a155bc1399f6074516a03', class: "bds-checkbox__label" }, this.label ? this.label : index.h("slot", null))));
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        return (index.h(index.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 }, index.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() }), index.h("span", { key: '397626b30b104d317a8c48554e8b8f6396c9a441', class: "bds-checkbox__box" }, this.renderCheckIcon()), index.h("span", { key: 'f8aec05775f2819d3c9fd510378bb74a9e22cc5e', class: "bds-checkbox__content" }, index.h("span", { key: '2956fccc6a6c7aa8624bb43798ece435cec7fbc0', class: "bds-checkbox__icon" }, index.h("slot", { key: '845c326874e4b854b71a6f0a360e6e692629b683', name: "icon" })), index.h("label", { key: '35531d1619a81972e29bf5332012b51e19fa3223', id: labelId, class: "bds-checkbox__label" }, this.label.trim() !== '' ? this.label : index.h("slot", null)), this.required && (index.h("em", { key: '81ea33ec4c831dea9029680b2ed7fff230849f4a', class: "bds-checkbox__required-indicator", "aria-hidden": "true" }, "*")), this.info && (index.h("span", { key: '237ad3a810ac31a95e59dc819ca118e8ab94763b', class: "bds-checkbox__info" }, index.h("span", { key: 'b83aa05c6b5468e7f57b3f36fd5e3ac770d5b985', class: "bds-checkbox__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: '572f7ab57a6144bdd5e22e0ee38a395cda7300d3' }, this.info))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-dialog.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CwYIVC9N.js');
 var floating_mixin = require('./floating.mixin-Bje4320w.js');
-var attributes = require('./attributes-wIHueigW.js');
+var attributes = require('./attributes-CgRFplrN.js');
 var validateProps = require('./validateProps-CJe9X5x8.js');
 var states = require('./states-BweP5Vpu.js');
 
@@ -194,7 +194,7 @@ const DIALOG_CONTENT_PADDING = {
     NONE: 'none',
 };
 
-const bdsDialogCss = () => `@charset "UTF-8";.bds-dialog{font-family:var(--boreal-typography-font-family-primary);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-dialog__header{height:var(--boreal-spacing-4xl);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__header:empty{display:none}.bds-dialog__header-right,.bds-dialog__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-dialog__title{color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-dialog__body{height:100%;overflow-y:auto;padding:var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__footer{padding:var(--boreal-spacing-s) var(--boreal-spacing-xs)}.bds-dialog__body,.bds-dialog__footer{-webkit-box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset;box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset}.bds-dialog__body:empty,.bds-dialog__footer:empty{display:none}.bds-dialog--sm{width:min(448px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--md{width:min(640px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--lg{width:min(960px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--full{width:min(1280px, 100vw - var(--boreal-spacing-m) * 2);height:calc(100vh - var(--boreal-spacing-4xl))}.bds-dialog--custom-size{width:var(--bds-dialog-width, auto);height:var(--bds-dialog-height, auto)}.bds-dialog--info .bds-dialog__variant-icon{color:var(--boreal-icon-info-base)}.bds-dialog--warning .bds-dialog__variant-icon{color:var(--boreal-icon-warning-base)}.bds-dialog--danger .bds-dialog__variant-icon{color:var(--boreal-icon-danger-base)}.bds-dialog--success .bds-dialog__variant-icon{color:var(--boreal-icon-success-base)}.bds-dialog--no-padding{padding:0}bds-dialog dialog{border:none;border-radius:var(--boreal-radius-xs);background-color:var(--boreal-white);-webkit-box-shadow:0 8px 12px 0 rgba(19, 19, 22, 0.15);box-shadow:0 8px 12px 0 rgba(19, 19, 22, 0.15);-ms-flex-item-align:center;align-self:center;justify-self:center}bds-dialog dialog::-webkit-backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog::-ms-backdrop{opacity:0;-ms-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog,bds-dialog dialog::backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog[open].enter::-webkit-backdrop{opacity:1}bds-dialog dialog[open].enter::-ms-backdrop{opacity:1}bds-dialog dialog[open].enter,bds-dialog dialog[open].enter::backdrop{opacity:1}`;
+const bdsDialogCss = () => `@charset "UTF-8";.bds-dialog{font-family:var(--boreal-typography-font-family-primary);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bds-dialog__header{height:var(--boreal-spacing-4xl);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__header:empty{display:none}.bds-dialog__header-right,.bds-dialog__header-left{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs)}.bds-dialog__title{color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-dialog__body{height:100%;overflow-y:auto;padding:var(--boreal-spacing-s) var(--boreal-spacing-l)}.bds-dialog__footer{padding:var(--boreal-spacing-s) var(--boreal-spacing-xs)}.bds-dialog__body,.bds-dialog__footer{-webkit-box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset;box-shadow:0 var(--boreal-spacing-4xs) var(--boreal-spacing-4xs) 0 var(--boreal-stroke-default-light) inset}.bds-dialog__body:empty,.bds-dialog__footer:empty{display:none}.bds-dialog--sm{width:min(448px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--md{width:min(640px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--lg{width:min(960px, 100vw - var(--boreal-spacing-m) * 2)}.bds-dialog--full{width:min(1280px, 100vw - var(--boreal-spacing-m) * 2);height:calc(100vh - var(--boreal-spacing-4xl))}.bds-dialog--custom-size{width:var(--bds-dialog-width, auto);height:var(--bds-dialog-height, auto)}.bds-dialog--info .bds-dialog__variant-icon{color:var(--boreal-icon-info-base)}.bds-dialog--warning .bds-dialog__variant-icon{color:var(--boreal-icon-warning-base)}.bds-dialog--danger .bds-dialog__variant-icon{color:var(--boreal-icon-danger-base)}.bds-dialog--success .bds-dialog__variant-icon{color:var(--boreal-icon-success-base)}.bds-dialog--no-padding{padding:0}bds-dialog dialog{border:none;border-radius:var(--boreal-radius-xs);background-color:var(--boreal-white);-webkit-box-shadow:var(--boreal-depth-box-shadow-l);box-shadow:var(--boreal-depth-box-shadow-l);-ms-flex-item-align:center;align-self:center;justify-self:center}bds-dialog dialog::-webkit-backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog::-ms-backdrop{opacity:0;-ms-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog,bds-dialog dialog::backdrop{opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}bds-dialog dialog[open].enter::-webkit-backdrop{opacity:1}bds-dialog dialog[open].enter::-ms-backdrop{opacity:1}bds-dialog dialog[open].enter,bds-dialog dialog[open].enter::backdrop{opacity:1}`;
 
 const BdsDialog = class extends index.Mixin(backdropMixin) {
     constructor(hostRef) {
@@ -356,10 +356,10 @@ const BdsDialog = class extends index.Mixin(backdropMixin) {
     }
     render() {
         const inheritedAriaAttr = this.inheritedAttributes;
-        return (index.h("dialog", { key: '73f9b2516aa414e3016e8a18b5f0d2de7f46a09a', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
+        return (index.h("dialog", { key: 'de042f49b5eaaf2a0a0f305570d04321959b9fcb', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
                 if (el !== undefined)
                     this.dialogElement = el;
-            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, index.h("div", { key: 'ef900b6a99ed650db043fb8123c90c3cd7322ec6', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (index.h("div", { key: '81d96f353eef6bd9f38baba8702b88599d6c02a3', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), index.h("div", { key: 'd36d2c112a87e885e53bd4a8740530ac7b196980', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, index.h("slot", { key: 'c296c8e91a44d7f40284586b3b425a6b87964cdd' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (index.h("div", { key: '98c17852b5dc519207c66850c38d679d31d27b5b', class: "bds-dialog__footer" }, index.h("slot", { key: '159426b4095804e6da864d86a0f6ef7a8e2197e3', name: "footer" }))))));
+            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, index.h("div", { key: 'fef08504c053ca1f6188526ff0af517f767a4349', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (index.h("div", { key: '399281c7b7caa7a167677b26dc3ef338b987a09d', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), index.h("div", { key: 'dc4bc6d37b7c3928b6d5d15b56456340ac02cbfa', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, index.h("slot", { key: 'e6f01fe42e2b57bc94986ca232d5a8860e5236ef' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (index.h("div", { key: '80d7a6432bd127635a45b482d71b58973089b87d', class: "bds-dialog__footer" }, index.h("slot", { key: '8e5ec1341161020313712e64195bf9df68bbe340', name: "footer" }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-divider.cjs.entry.js

@@ -8,7 +8,7 @@ const DIVIDER_ORIENTATIONS = {
     VERTICAL: 'vertical',
 };
 
-const bdsDividerCss = () => `@charset "UTF-8";bds-divider[orientation=vertical]{display:inline-block;height:100%}bds-divider[orientation=horizontal]{display:block;width:100%}.bds-divider{background-color:var(--boreal-ui-default-lighter)}.bds-divider--horizontal{width:100%;height:var(--boreal-spacing-4xs)}.bds-divider--vertical{width:var(--boreal-spacing-4xs);height:100%}`;
+const bdsDividerCss = () => `@charset "UTF-8";bds-divider{}bds-divider[orientation=vertical]{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;margin-inline:var(--bds-divider-gap, 0px)}bds-divider[orientation=horizontal]{display:block;width:100%;margin-block:var(--bds-divider-gap, 0px)}.bds-divider{background-color:var(--bds-divider-color, var(--boreal-ui-default-lighter))}.bds-divider--horizontal{width:100%;height:var(--boreal-spacing-4xs)}.bds-divider--vertical{-ms-flex:1;flex:1;width:var(--boreal-spacing-4xs)}`;
 
 const BdsDivider = class {
     constructor(hostRef) {
@@ -32,7 +32,7 @@ const BdsDivider = class {
         this.checkPropValues();
     }
     render() {
-        return index.h("div", { key: 'd34f930e98129a75ca706f4695e40e577d5a12f6', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
+        return index.h("div", { key: 'a64c78979ba69f2de16edd48265cdb61d86d7026', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-flag.cjs.entry.js

@@ -2931,7 +2931,7 @@ const BdsFlag = class {
         const flagContentClass = this.flagContentClass;
         const flagClass = this.flagClass;
         const flagStyle = !this.isGlobal ? { backgroundImage: `url(${this.flagUrl(flag)})` } : {};
-        return (index.h(index.Host, { key: 'c8f41b293eb2cfb1313aaa5c1ecbd4de3bf2e27c', class: flagClass, "aria-label": countryName, role: "img" }, flag && index.h("span", { key: '21f885fe3f7de150dd3766d3c942a6131d420a26', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), index.h("span", { key: '08b819e1754ea9675306060ef1b8bcfa94546b09', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
+        return (index.h(index.Host, { key: 'dd134e8e86c8b6fa5fae0317982296fee5768002', class: flagClass, "aria-label": countryName, role: "img" }, flag && index.h("span", { key: '41ca5fdab521e855d0c98a90bb07a9b46866bdb5', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), index.h("span", { key: '82defab102847400d10358c4cd264cb982df1ab4', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
     }
     static get assetsDirs() { return ["./constants"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/bds-grid-item.cjs.entry.js

@@ -58,7 +58,7 @@ const BdsGridItem = class {
         return styles;
     }
     render() {
-        return (index.h(index.Host, { key: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, index.h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+        return (index.h(index.Host, { key: '4a50b7d73fa449f56a533e6357f92c039c7b73c7', style: this.getHostStyles() }, index.h("slot", { key: 'e077c11e511f232ec25456676699c56c4bbcb483' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bds-grid.cjs.entry.js

@@ -23,7 +23,7 @@ const BdsGrid = class {
         this.checkPropValues();
     }
     render() {
-        return (index.h(index.Host, { key: 'e5610c3140f86d79b275de56c8a815badccdf03d', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, index.h("slot", { key: 'ac13145d26bd923b6f5abe415b062728757d0fd5' })));
+        return (index.h(index.Host, { key: '72e2dd4c1ab75d6a7e71dc8e75456d482afbb4b8', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, index.h("slot", { key: '8c47051a287548daff2402a71aab7bd2aef50da0' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {