@baloise/ds-core 18.3.0 → 19.0.0-nightly.20250512

package/dist/collection/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.js

@@ -1,15 +1,15 @@
 import { __decorate, __metadata } from "tslib";
-import { areArraysEqual } from "../../../utils/array";
 import { h, Host, } from "@stencil/core";
-import { stopEventBubbling } from "../../../utils/form-input";
-import { hasTagName, isDescendant } from "../../../utils/helpers";
+import { ariaBooleanToString } from "../../../utils/aria";
+import { areArraysEqual } from "../../../utils/array";
 import { inheritAttributes } from "../../../utils/attributes";
 import { BEM } from "../../../utils/bem";
+import { ListenToFocus } from "../../../utils/focus";
+import { defaultBalAriaForm } from "../../../utils/form";
+import { stopEventBubbling } from "../../../utils/form-input";
+import { hasTagName, isDescendant } from "../../../utils/helpers";
 import { Logger } from "../../../utils/log";
 import { ListenToMutation } from "../../../utils/mutation";
-import { defaultBalAriaForm } from "../../../utils/form";
-import { ListenToFocus } from "../../../utils/focus";
-import { ariaBooleanToString } from "../../../utils/aria";
 export class CheckboxGroup {
     constructor() {
         this.inputId = `bal-cg-${checkboxGroupIds++}`;
@@ -32,24 +32,13 @@ export class CheckboxGroup {
             if (element.href) {
                 return;
             }
-            ev.preventDefault();
             const selectedCheckbox = ev.target && ev.target.closest('bal-checkbox');
             if (selectedCheckbox) {
                 if (selectedCheckbox.disabled || selectedCheckbox.readonly) {
                     return ev.stopPropagation();
                 }
             }
-            // generate new value array out of the checked checkboxes
-            const newValue = [];
-            this.getCheckboxes().forEach(cb => {
-                if (cb.checked) {
-                    newValue.push(cb.value);
-                }
-            });
-            if (!areArraysEqual(this.value, newValue)) {
-                this.value = [...newValue];
-                this.balChange.emit(this.value);
-            }
+            this.updateValues();
         };
         this.onOptionChange = async () => {
             this.sync();
@@ -86,9 +75,6 @@ export class CheckboxGroup {
                 this.getCheckboxes().forEach(child => {
                     child.invalid = value;
                 });
-                this.getCheckboxButtons().forEach(child => {
-                    child.invalid = value;
-                });
             }
         }
     }
@@ -98,9 +84,6 @@ export class CheckboxGroup {
                 this.getCheckboxes().forEach(child => {
                     child.disabled = value;
                 });
-                this.getCheckboxButtons().forEach(child => {
-                    child.disabled = value;
-                });
             }
         }
     }
@@ -110,9 +93,6 @@ export class CheckboxGroup {
                 this.getCheckboxes().forEach(child => {
                     child.readonly = value;
                 });
-                this.getCheckboxButtons().forEach(child => {
-                    child.readonly = value;
-                });
             }
         }
     }
@@ -127,13 +107,13 @@ export class CheckboxGroup {
         }
     }
     columnsChanged(value) {
-        this.getCheckboxButtons().forEach(checkboxButton => (checkboxButton.colSize = value));
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSize = value));
     }
     columnsTabletChanged(value) {
-        this.getCheckboxButtons().forEach(checkboxButton => (checkboxButton.colSizeTablet = value));
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeTablet = value));
     }
     columnsMobileChanged(value) {
-        this.getCheckboxButtons().forEach(checkboxButton => (checkboxButton.colSizeMobile = value));
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeMobile = value));
     }
     /**
      * LIFECYCLE
@@ -142,12 +122,14 @@ export class CheckboxGroup {
     connectedCallback() {
         if (this.control) {
             this.mutationObserverActive = this.options === undefined;
+            this.valueChanged(this.value, []);
         }
     }
     componentWillLoad() {
         if (this.control) {
             this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
             this.disabledChanged(this.disabled);
+            this.invalidChanged(this.invalid);
             this.readonlyChanged(this.readonly);
         }
         this.columnsChanged(this.columns);
@@ -171,10 +153,11 @@ export class CheckboxGroup {
         this.columnsMobileChanged(this.columnsMobile);
         this.onOptionChange();
     }
-    listenOnClick(ev) {
+    listenOnCheckboxChange(ev) {
         if (this.control) {
             if (isDescendant(this.el, ev.target)) {
                 stopEventBubbling(ev);
+                this.updateValues();
             }
         }
     }
@@ -257,15 +240,25 @@ export class CheckboxGroup {
     getCheckboxes() {
         return Array.from(this.el.querySelectorAll('bal-checkbox'));
     }
-    getCheckboxButtons() {
-        return Array.from(this.el.querySelectorAll('bal-checkbox-button'));
+    updateValues() {
+        // generate new value array out of the checked checkboxes
+        const newValue = [];
+        this.getCheckboxes().forEach(cb => {
+            if (cb.checked) {
+                newValue.push(cb.value);
+            }
+        });
+        if (!areArraysEqual(this.value, newValue)) {
+            this.value = [...newValue];
+            this.balChange.emit(this.value);
+        }
     }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        const block = BEM.block('radio-checkbox-group');
+        const block = BEM.block('checkbox-group');
         const innerEl = block.element('inner');
         const rawOptions = this.options || [];
         const options = rawOptions.map(option => {
@@ -274,9 +267,19 @@ export class CheckboxGroup {
             }
             return option;
         });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-disabled": ariaBooleanToString(this.disabled), "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
+        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('button').class(this.interface === 'button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
     }
     static get is() { return "bal-checkbox-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-checkbox-group.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-checkbox-group.css"]
+        };
+    }
     static get properties() {
         return {
             "options": {
@@ -307,7 +310,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxGroupInterface",
-                    "resolved": "\"checkbox\" | \"select-button\" | \"switch\"",
+                    "resolved": "\"button\" | \"checkbox\" | \"switch\" | \"tile\"",
                     "references": {
                         "BalProps": {
                             "location": "global",
@@ -784,7 +787,7 @@ export class CheckboxGroup {
     static get listeners() {
         return [{
                 "name": "balChange",
-                "method": "listenOnClick",
+                "method": "listenOnCheckboxChange",
                 "target": "document",
                 "capture": true,
                 "passive": false

package/dist/collection/components/bal-checkbox/bal-checkbox.css

@@ -0,0 +1 @@
+@media(hover: hover)and (pointer: fine){.bal-checkbox.bal-focused{box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-checkbox-symbol-size: 1.5rem;--bal-checkbox-symbol-border-width: 2px;--bal-checkbox-symbol-background: transparent;--bal-checkbox-label-min-height: 1.5rem;--bal-checkbox-button-background-hover: var(--bal-color-grey-2);--bal-checkbox-button-background-active: var(--bal-color-grey-2);--bal-checkbox-button-background-checked: var(--bal-color-primary);--bal-checkbox-button-background-checked-hover: var(--bal-color-light-blue-5);--bal-checkbox-button-background-checked-active: var(--bal-color-primary-6);--bal-checkbox-button-background-invalid: var(--bal-color-danger-1);--bal-checkbox-button-background-invalid-hover: var(--bal-color-danger-1);--bal-checkbox-button-background-invalid-active: var(--bal-color-danger-1);--bal-checkbox-button-background-invalid-checked: var(--bal-color-border-danger);--bal-checkbox-button-background-invalid-checked-hover: var(--bal-color-danger-5);--bal-checkbox-button-background-invalid-checked-active: var(--bal-color-danger-6);--bal-checkbox-button-background-disabled-hover-active: var(--bal-color-grey-2);--bal-checkbox-button-background-disabled-checked-hover-active: var(--bal-color-border-grey-dark);--bal-checkbox-button-background: transparent;--bal-checkbox-button-background-checked-green: var(--bal-color-green-1);--bal-checkbox-button-background-checked-purple: var(--bal-color-purple-1);--bal-checkbox-button-background-checked-red: var(--bal-color-red-1);--bal-checkbox-button-background-checked-yellow: var(--bal-color-yellow-1);--bal-checkbox-button-background-disabled: var(--bal-color-grey-1);--bal-checkbox-button-background-hover: var(--bal-color-grey-1);--bal-checkbox-button-border-color: var(--bal-color-primary);--bal-checkbox-button-border-color-hover: var(--bal-color-light-blue-5);--bal-checkbox-button-border-color-active: var(--bal-color-primary-6);--bal-checkbox-button-border-color-invalid: var(--bal-color-border-danger);--bal-checkbox-button-border-color-invalid-hover: var(--bal-color-danger-5);--bal-checkbox-button-border-color-invalid-active: var(--bal-color-danger-6);--bal-checkbox-button-border-color-invalid-checked: var(--bal-color-border-danger);--bal-checkbox-button-border-color-invalid-checked-hover: var(--bal-color-danger-5);--bal-checkbox-button-border-color-invalid-checked-active: var(--bal-color-danger-6);--bal-checkbox-button-border-color-disabled-hover-active: var(--bal-color-border-grey-dark);--bal-checkbox-button-border-color-disabled-checked-hover-active: var(--bal-color-border-grey-dark);--bal-checkbox-tile-background: transparent;--bal-checkbox-tile-background-hover: var(--bal-color-grey-1);--bal-checkbox-tile-background-disabled: var(--bal-color-grey-1);--bal-checkbox-tile-background-invalid-hover: var(--bal-color-danger-1);--bal-checkbox-tile-background-invalid-active: var(--bal-color-danger-1);--bal-checkbox-tile-background-checked-green: var(--bal-color-green-1);--bal-checkbox-tile-background-checked-purple: var(--bal-color-purple-1);--bal-checkbox-tile-background-checked-red: var(--bal-color-red-1);--bal-checkbox-tile-background-checked-yellow: var(--bal-color-yellow-1);--bal-checkbox-tile-border-style: var(--bal-form-field-control-border-style);--bal-checkbox-tile-border-radius: var(--bal-form-field-control-radius);--bal-checkbox-tile-border-width: var(--bal-form-field-control-border-width);--bal-checkbox-tile-padding: var(--bal-text-size-medium);--bal-checkbox-tile-border-color: var(--bal-color-border);--bal-checkbox-tile-border-color-hover: var(--bal-color-border-primary-hovered);--bal-checkbox-tile-border-color-active: var(--bal-color-border-primary-pressed);--bal-checkbox-tile-border-color-invalid-hover: var(--bal-color-border-danger-hovered);--bal-checkbox-tile-border-color-invalid-active: var(--bal-color-border-danger-pressed);--bal-checkbox-tile-border-color-checked: var(--bal-color-border-primary);--bal-checkbox-tile-border-color-invalid: var(--bal-color-border-danger);--bal-checkbox-tile-border-color-disabled: var(--bal-color-border-grey-dark)}.bal-checkbox{position:relative;display:inline-flex;justify-content:flex-start;align-items:center;outline:none;min-width:var(--bal-checkbox-symbol-size);border-radius:var(--bal-radius-normal);cursor:pointer}.bal-checkbox .bal-checkbox__label{cursor:pointer}.bal-checkbox--invisible{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-checkbox.bal-checkbox--flat{min-height:var(--bal-checkbox-symbol-size)}.bal-checkbox:not(.bal-checkbox--flat){min-height:3rem}.bal-checkbox--invalid{color:var(--bal-form-field-label-danger-color)}.bal-checkbox--disabled,.bal-checkbox--disabled .bal-checkbox__label{color:var(--bal-form-field-label-disabled-color);cursor:default}.bal-checkbox__input{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden;width:100%;height:100%}.bal-checkbox__label{display:flex;justify-content:flex-start;align-items:center;gap:.5rem;flex-direction:row}.bal-checkbox__label__text{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:left;contain:layout style;font-family:var(--bal-font-family-text);padding-top:.25rem;padding-bottom:.25rem;width:100%}.bal-checkbox__label__text--hidden{display:none}.bal-checkbox__label__icon{display:flex;justify-content:center;align-items:center}@media(hover: hover)and (pointer: fine){.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__text{color:var(--bal-color-text-primary-hovered)}.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__icon,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__icon{color:var(--bal-color-text-primary-hovered)}}.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__text{color:var(--bal-color-text-primary-pressed)}.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__icon,.bal-checkbox:not(.bal-checkbox--button):not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__icon{color:var(--bal-color-text-primary-pressed)}@media(hover: hover)and (pointer: fine){.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):hover .bal-checkbox__label__text{color:var(--bal-color-text-danger-hovered)}.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__icon,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):hover .bal-checkbox__label__icon{color:var(--bal-color-text-danger-hovered)}}.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):active .bal-checkbox__label__text{color:var(--bal-color-text-danger-pressed)}.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__icon,.bal-checkbox--invalid:not(.bal-checkbox--button):not(.bal-checkbox--disabled):active .bal-checkbox__label__icon{color:var(--bal-color-text-danger-pressed)}.bal-checkbox--button{flex-direction:column;flex-wrap:wrap;gap:var(--bal-space-x-small);justify-content:center;align-items:flex-start;padding-left:.75rem;padding-right:.75rem;min-width:3rem;border-width:2px;border-style:var(--bal-form-field-control-border-style);border-radius:var(--bal-form-field-control-radius);border-color:var(--bal-checkbox-button-border-color)}.bal-checkbox--button.bal-checkbox--checked{background:var(--bal-checkbox-button-background-checked);color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--checked .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--checked .bal-checkbox__label__text .link{color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--invalid{border-color:var(--bal-color-border-danger);color:var(--bal-color-text-danger-hovered);background:var(--bal-color-danger-1)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked{color:var(--bal-color-white);background:var(--bal-color-border-danger)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked .bal-checkbox__label__text .link{color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--disabled{border-color:var(--bal-color-grey-4);background:var(--bal-color-grey-2)}.bal-checkbox--button.bal-checkbox--disabled .bal-checkbox__label__text{color:var(--bal-color-text-grey)}.bal-checkbox--button.bal-checkbox--disabled.bal-checkbox--checked{background:var(--bal-color-grey-4);color:var(--bal-color-white)}.bal-checkbox--button.bal-checkbox--disabled.bal-checkbox--checked .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--disabled.bal-checkbox--checked .bal-checkbox__label__text .link{color:var(--bal-color-white)}@media(hover: hover)and (pointer: fine){.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover{background:var(--bal-color-grey-2);border-color:var(--bal-color-border-primary-hovered)}.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__text{color:var(--bal-color-text-primary-hovered)}}.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active{background:var(--bal-color-grey-2);border-color:var(--bal-color-border-primary-pressed)}.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__text{color:var(--bal-color-text-primary-pressed)}@media(hover: hover)and (pointer: fine){.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover{background:var(--bal-color-border-primary-hovered);border-color:var(--bal-color-border-primary-hovered)}.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover .bal-checkbox__label__text{color:var(--bal-color-white)}}.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active{background:var(--bal-color-border-primary-pressed);border-color:var(--bal-color-border-primary-pressed)}.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--checked:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active .bal-checkbox__label__text{color:var(--bal-color-white)}@media(hover: hover)and (pointer: fine){.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--hovered,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):hover{background:var(--bal-color-danger-1);border-color:var(--bal-color-border-danger-hovered)}.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):hover .bal-checkbox__label__text{color:var(--bal-color-text-danger-hovered)}}.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--pressed,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):active{background:var(--bal-color-danger-1);border-color:var(--bal-color-border-danger-pressed)}.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid:not(.bal-checkbox--disabled):active .bal-checkbox__label__text{color:var(--bal-color-text-danger-pressed)}@media(hover: hover)and (pointer: fine){.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--hovered,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):hover{background:var(--bal-color-border-danger-hovered);border-color:var(--bal-color-border-danger-hovered)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--hovered .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):hover .bal-checkbox__label__text{color:var(--bal-color-white)}}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--pressed,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):active{background:var(--bal-color-border-danger-pressed);border-color:var(--bal-color-border-danger-pressed)}.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled).bal-checkbox--pressed .bal-checkbox__label__text,.bal-checkbox--button.bal-checkbox--invalid.bal-checkbox--checked:not(.bal-checkbox--disabled):active .bal-checkbox__label__text{color:var(--bal-color-white)}.bal-checkbox--tile{display:block;flex:0 0 100%;background:var(--bal-checkbox-tile-background);border-style:var(--bal-checkbox-tile-border-style);border-radius:var(--bal-checkbox-tile-border-radius);border-width:var(--bal-checkbox-tile-border-width);border-color:var(--bal-checkbox-tile-border-color);padding:var(--bal-checkbox-tile-padding)}.bal-checkbox--tile .bal-checkbox__label{height:100%;align-items:stretch}.bal-checkbox--tile.bal-checkbox--checked{border-color:var(--bal-checkbox-tile-border-color-checked)}.bal-checkbox--tile.bal-checkbox--invalid{border-color:var(--bal-checkbox-tile-border-color-invalid)}.bal-checkbox--tile.bal-checkbox--disabled{background:var(--bal-checkbox-tile-background-disabled);border-color:var(--bal-checkbox-tile-border-color-disabled);cursor:default}@media(hover: hover)and (pointer: fine){.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--hovered,.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):hover{background:var(--bal-checkbox-tile-background-hover);border-color:var(--bal-checkbox-tile-border-color-hover)}}.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid).bal-checkbox--pressed,.bal-checkbox--tile:not(.bal-checkbox--disabled):not(.bal-checkbox--invalid):active{background:var(--bal-checkbox-tile-background-hover);border-color:var(--bal-checkbox-tile-border-color-active)}@media(hover: hover)and (pointer: fine){.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--hovered,.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled):hover{background:var(--bal-checkbox-tile-background-invalid-hover);border-color:var(--bal-checkbox-tile-border-color-invalid-hover)}}.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled).bal-checkbox--pressed,.bal-checkbox--tile.bal-checkbox--invalid:not(.bal-checkbox--disabled):active{background:var(--bal-checkbox-tile-background-invalid-active);border-color:var(--bal-checkbox-tile-border-color-invalid-active)}.bal-checkbox--tile-color-green:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-green:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-green:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-green)}.bal-checkbox--tile-color-red:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-red:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-red:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-red)}.bal-checkbox--tile-color-purple:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-purple:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-purple:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-purple)}.bal-checkbox--tile-color-yellow:not(.bal-checkbox--disabled).bal-checkbox--checked,.bal-checkbox--tile-color-yellow:not(.bal-checkbox--disabled).bal-checkbox--checked.bal-checkbox--hovered,.bal-checkbox--tile-color-yellow:not(.bal-checkbox--disabled).bal-checkbox--checked:hover{background:var(--bal-checkbox-tile-background-checked-yellow)}@media screen and (min-width: 769px),print{.bal-checkbox--column-2{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-4{flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-checkbox--column-mobile-2{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-mobile-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-mobile-4{flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-checkbox--column-tablet-2{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-tablet-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-tablet-4{flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-checkbox--column-2{flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-3{flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-4{flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}