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

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

@@ -1,52 +1,50 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { inputSetBlur, inputSetFocus, stopEventBubbling } from "../../utils/form-input";
-import { isDescendant } from "../../utils/helpers";
+import { ariaBooleanToString } from "../../utils/aria";
 import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
-import { isSpaceKey } from "../../utils/keyboard";
-import { Logger } from "../../utils/log";
+import { ListenToElementStates } from "../../utils/element-states";
 import { FOCUS_KEYS } from "../../utils/focus-visible";
 import { defaultBalAriaForm } from "../../utils/form";
-import { ariaBooleanToString } from "../../utils/aria";
+import { inputSetBlur, inputSetFocus, stopEventBubbling } from "../../utils/form-input";
+import { isDescendant } from "../../utils/helpers";
+import { isSpaceKey } from "../../utils/keyboard";
+import { Logger } from "../../utils/log";
 export class Checkbox {
     constructor() {
         this.inputId = `bal-cb-${checkboxIds++}`;
         this.inheritedAttributes = {};
         this.keyboardMode = true;
+        this.outerElementState = {
+            hovered: false,
+            pressed: false,
+        };
+        this.innerElementState = {
+            hovered: false,
+            pressed: false,
+        };
         this.initialValue = false;
-        this.onKeypress = (ev) => {
-            if (isSpaceKey(ev)) {
-                const element = ev.target;
-                if (element.href) {
-                    return;
-                }
-                if (element.nodeName === 'INPUT' && !this.disabled && !this.readonly) {
-                    this.toggleChecked();
-                    ev.preventDefault();
-                }
-                else {
-                    stopEventBubbling(ev);
-                }
-            }
+        this.setChecked = (state) => {
+            this.checked = state;
+            this.balChange.emit(this.checked);
+        };
+        this.toggleChecked = (ev) => {
+            ev.preventDefault();
+            this.setFocus();
+            this.setChecked(!this.checked);
         };
         this.onClick = (ev) => {
-            var _a;
+            if (this.disabled) {
+                return;
+            }
             const element = ev.target;
-            if (element.href) {
+            if (element && element.href) {
                 return;
             }
             if (this.wasFocused) {
                 this.focused = true;
             }
-            if (element.nodeName !== 'INPUT' && !this.disabled && !this.readonly) {
-                this.toggleChecked();
-                (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.focus();
-                ev.preventDefault();
-            }
-            else {
-                stopEventBubbling(ev);
-            }
+            this.toggleChecked(ev);
         };
         this.onFocus = (ev) => {
             if (this.disabled || this.readonly) {
@@ -78,12 +76,14 @@ export class Checkbox {
         this.buttonTabindex = undefined;
         this.ariaForm = defaultBalAriaForm;
         this.wasFocused = false;
+        this.mergedElementState = {
+            hovered: false,
+            pressed: false,
+        };
         this.name = this.inputId;
         this.label = '';
-        this.invisible = false;
         this.labelHidden = false;
         this.flat = false;
-        this.inline = false;
         this.interface = 'checkbox';
         this.value = 'on';
         this.checked = false;
@@ -95,22 +95,37 @@ export class Checkbox {
         this.invalid = false;
         this.hovered = false;
         this.pressed = false;
+        this.color = undefined;
+        this.colSize = 1;
+        this.colSizeTablet = 1;
+        this.colSizeMobile = 1;
     }
     createLogger(log) {
         this.log = log;
     }
+    hoveredChanged() {
+        this.innerElementState = {
+            hovered: this.hovered,
+            pressed: this.pressed,
+        };
+        this.mergeElementState();
+    }
+    pressedChanged() {
+        this.innerElementState = {
+            hovered: this.hovered,
+            pressed: this.pressed,
+        };
+        this.mergeElementState();
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
     connectedCallback() {
-        const groupEl = this.group;
-        const checkboxButton = this.checkboxButton;
-        if (checkboxButton || groupEl) {
+        this.hoveredChanged();
+        if (this.group) {
             this.updateState();
-        }
-        if (groupEl) {
-            groupEl.addEventListener('balChange', () => this.updateState());
+            this.group.addEventListener('balChange', () => this.updateState());
         }
         this.initialValue = this.checked;
         this.el.addEventListener('keydown', this.onKeydown);
@@ -120,6 +135,13 @@ export class Checkbox {
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
     }
+    componentWillRender() {
+        this.interactionChildElements.forEach(el => {
+            el.disabled = this.disabled || this.readonly;
+            el.invalid = this.invalid;
+            el.checked = this.checked;
+        });
+    }
     disconnectedCallback() {
         if (this.group) {
             this.group.removeEventListener('balChange', () => this.updateState());
@@ -145,6 +167,10 @@ export class Checkbox {
             this.checked = this.initialValue;
         }
     }
+    elementStateListener(info) {
+        this.outerElementState = info;
+        this.mergeElementState();
+    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
@@ -175,18 +201,8 @@ export class Checkbox {
     async getOption() {
         return this.option;
     }
-    /** @internal */
-    async setButtonTabindex(value) {
-        if (this.checkboxButton) {
-            this.buttonTabindex = -1;
-        }
-        else {
-            this.buttonTabindex = value;
-        }
-    }
     /**
      * @internal
-     * Options of the tab like label, value etc.
      */
     async updateState() {
         if (this.group && this.group.control && Array.isArray(this.group.value)) {
@@ -195,12 +211,6 @@ export class Checkbox {
                 this.checked = newChecked;
             }
         }
-        if (this.checkboxButton) {
-            this.buttonTabindex = -1;
-            if (this.checkboxButton.setChecked) {
-                this.checkboxButton.setChecked(this.checked);
-            }
-        }
     }
     /**
      * @internal
@@ -212,6 +222,12 @@ export class Checkbox {
      * GETTERS
      * ------------------------------------------------------
      */
+    get group() {
+        return this.el.closest('bal-checkbox-group');
+    }
+    get interactionChildElements() {
+        return Array.from(this.el.querySelectorAll('bal-check, bal-switch, bal-icon'));
+    }
     get option() {
         return {
             name: this.name,
@@ -225,59 +241,59 @@ export class Checkbox {
             readonly: this.readonly,
             required: this.required,
             nonSubmit: this.nonSubmit,
-            invisible: this.invisible,
             invalid: this.invalid,
         };
     }
-    get group() {
-        return this.el.closest('bal-checkbox-group');
-    }
-    get checkboxButton() {
-        return this.el.closest('bal-checkbox-button');
-    }
     /**
      * EVENT HANDLERS
      * ------------------------------------------------------
      */
-    toggleChecked() {
-        this.checked = !this.checked;
-        this.balChange.emit(this.checked);
+    mergeElementState() {
+        this.mergedElementState = {
+            hovered: this.outerElementState.hovered || this.innerElementState.hovered,
+            pressed: this.outerElementState.pressed || this.innerElementState.pressed,
+        };
+        this.interactionChildElements.forEach(el => {
+            ;
+            el.hovered = this.mergedElementState.hovered;
+            el.pressed = this.mergedElementState.pressed;
+        });
     }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        const block = BEM.block('radio-checkbox');
+        const block = BEM.block('checkbox');
         const inputEl = block.element('input');
         const labelEl = block.element('label');
-        const iconEl = block.element('icon');
         const labelTextEl = labelEl.element('text');
+        const labelIconEl = labelEl.element('icon');
         const focused = this.focused && this.buttonTabindex !== -1;
         const inputAttributes = this.inheritedAttributes;
         if (this.buttonTabindex !== undefined) {
             inputAttributes.tabIndex = this.buttonTabindex;
         }
+        const hasFormControl = !this.nonSubmit;
         const id = this.ariaForm.controlId || this.inputId;
-        let labelId = this.ariaForm.labelId || null;
-        const LabelTag = this.labelHidden ? 'span' : 'label';
-        const labelAttributes = {};
-        if (!this.labelHidden) {
-            labelId = `${labelId || ''} ${id}-lbl`.trim();
-            labelAttributes.id = `${id}-lbl`;
-            labelAttributes.htmlFor = id;
-        }
-        return (h(Host, { key: 'b60b510c06d3318f39acd764e65732a792271f26', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: 'f147f86e34a36c270faccb1c95fdf69d2a2a4eed', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, h("slot", null)))) : ('')));
+        const labelId = this.ariaForm.labelId || null;
+        const LabelTag = hasFormControl ? 'label' : 'span';
+        const Icon = this.interface === 'switch' ? 'bal-switch' : 'bal-check';
+        return (h(Host, { key: 'eaa9cf2ba9de2a203b98515939ff117c89dc16cf', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('button').class(this.interface === 'button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.mergedElementState.hovered)), block.modifier('pressed').class(this.mergedElementState.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
+                .modifier(`column-tablet-${this.colSizeTablet}`)
+                .class(this.interface === 'tile' && this.colSizeTablet > 1)), block
+                .modifier(`column-mobile-${this.colSizeMobile}`)
+                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '6fd849f4768bc7155eb5db297713bc82aeab6dfe', class: Object.assign({}, labelEl.class()), "data-testid": "bal-checkbox-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "checkbox", "data-testid": "bal-checkbox-input", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h(Icon, { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: 'ca1ec209d9211082db1d0905e599eea5e6803244', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: 'a2a3c8124d7d47bf300b229fe01e62fa198961c0' })))));
     }
     static get is() { return "bal-checkbox"; }
     static get originalStyleUrls() {
         return {
-            "$": ["radio-checkbox.sass"]
+            "$": ["bal-checkbox.sass"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["radio-checkbox.css"]
+            "$": ["bal-checkbox.css"]
         };
     }
     static get properties() {
@@ -322,26 +338,6 @@ export class Checkbox {
                 "reflect": false,
                 "defaultValue": "''"
             },
-            "invisible": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the radio is invisible, but sill active"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "invisible",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "labelHidden": {
                 "type": "boolean",
                 "mutable": false,
@@ -382,32 +378,12 @@ export class Checkbox {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "inline": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the control is displayed as inline"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "inline",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "interface": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCheckboxInterface",
-                    "resolved": "\"checkbox\" | \"select-button\" | \"switch\"",
+                    "resolved": "\"button\" | \"checkbox\" | \"switch\" | \"tile\"",
                     "references": {
                         "BalProps": {
                             "location": "global",
@@ -632,6 +608,114 @@ export class Checkbox {
                 "attribute": "pressed",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalCheckboxTileColor",
+                    "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the tile checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            },
+            "colSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalCheckboxGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-size",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "colSizeTablet": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalCheckboxGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-size-tablet",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "colSizeMobile": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalCheckboxGroupColumns",
+                    "resolved": "1 | 2 | 3 | 4",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "col-size-mobile",
+                "reflect": false,
+                "defaultValue": "1"
             }
         };
     }
@@ -641,7 +725,8 @@ export class Checkbox {
             "focused": {},
             "buttonTabindex": {},
             "ariaForm": {},
-            "wasFocused": {}
+            "wasFocused": {},
+            "mergedElementState": {}
         };
     }
     static get events() {
@@ -789,30 +874,6 @@ export class Checkbox {
                     "tags": []
                 }
             },
-            "setButtonTabindex": {
-                "complexType": {
-                    "signature": "(value: number) => Promise<void>",
-                    "parameters": [{
-                            "name": "value",
-                            "type": "number",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
             "updateState": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -829,7 +890,7 @@ export class Checkbox {
                     "text": "",
                     "tags": [{
                             "name": "internal",
-                            "text": "Options of the tab like label, value etc."
+                            "text": undefined
                         }]
                 }
             },
@@ -865,6 +926,15 @@ export class Checkbox {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "hovered",
+                "methodName": "hoveredChanged"
+            }, {
+                "propName": "pressed",
+                "methodName": "pressedChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -887,4 +957,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Checkbox.prototype, "createLogger", null);
+__decorate([
+    ListenToElementStates(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Checkbox.prototype, "elementStateListener", null);
 let checkboxIds = 0;

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

@@ -0,0 +1 @@
+:root{--bal-checkbox-switch-label-background-before: var(--bal-color-primary-1);--bal-checkbox-switch-label-background-after: var(--bal-color-primary);--bal-checkbox-switch-label-background-hover-after: var(--bal-color-light-blue-5);--bal-checkbox-switch-label-background-active-after: var(--bal-color-primary-6);--bal-checkbox-switch-label-background-pressed-after: var(--bal-color-border-primary-pressed);--bal-checkbox-switch-label-background-checked-before: var(--bal-color-success-4);--bal-checkbox-switch-label-background-checked-after: var(--bal-color-white);--bal-checkbox-switch-label-background-checked-hover-before: var(--bal-color-success-5);--bal-checkbox-switch-label-background-checked-active-before: var(--bal-color-success-6);--bal-checkbox-switch-label-background-invalid-before: var(--bal-color-danger-1);--bal-checkbox-switch-label-background-invalid-after: var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-hover-after: var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-active-after: var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-pressed-after: var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-invalid-checked-before: var(--bal-color-danger-4);--bal-checkbox-switch-label-background-invalid-checked-after: var(--bal-color-white);--bal-checkbox-switch-label-background-invalid-checked-hover-before: var(--bal-color-danger-5);--bal-checkbox-switch-label-background-invalid-checked-active-before: var(--bal-color-danger-6);--bal-checkbox-switch-label-background-invalid-checked-hovered-before: var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-checked-pressed-before: var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-disabled-hover-active-before: var(--bal-color-grey-3);--bal-checkbox-switch-label-background-disabled-hover-active-after: var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-before: var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-after: var(--bal-color-white)}.bal-switch{display:inline-flex;position:relative;justify-content:flex-start;align-items:center;cursor:pointer;user-select:none;width:2.5rem;height:1.5rem;padding:.25rem;border-radius:var(--bal-radius-rounded);overflow:hidden;background:var(--bal-checkbox-switch-label-background-before)}@media(hover: hover)and (pointer: fine){.bal-switch--hovered,.bal-switch:hover{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--hovered .bal-switch__toggle,.bal-switch:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-hover-after)}}.bal-switch--pressed,.bal-switch:active{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--pressed .bal-switch__toggle,.bal-switch:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-pressed-after)}.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-checked-before)}.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}@media(hover: hover)and (pointer: fine){.bal-switch--checked.bal-switch--hovered,.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-checked-hover-before)}.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}}.bal-switch--checked.bal-switch--pressed,.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-checked-active-before)}.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch--invalid{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-after)}@media(hover: hover)and (pointer: fine){.bal-switch--invalid.bal-switch--hovered,.bal-switch--invalid:hover{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-hover-after)}}.bal-switch--invalid.bal-switch--pressed,.bal-switch--invalid:active{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-pressed-after)}.bal-switch--invalid.bal-switch--checked.bal-switch,.bal-switch--invalid.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-invalid-checked-before)}.bal-switch--invalid.bal-switch--checked.bal-switch .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered,.bal-switch--invalid.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-invalid-checked-hovered-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed,.bal-switch--invalid.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-invalid-checked-pressed-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--disabled,.bal-switch--disabled:hover,.bal-switch--disabled:active{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-before)}.bal-switch--disabled .bal-switch__toggle,.bal-switch--disabled:hover .bal-switch__toggle,.bal-switch--disabled:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-after)}.bal-switch--disabled.bal-switch--checked,.bal-switch--disabled.bal-switch--checked:hover,.bal-switch--disabled.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-before)}.bal-switch--disabled.bal-switch--checked .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:hover .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-after)}.bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-after);border-radius:50%;position:absolute;top:.25rem;width:1rem;height:1rem;transition:transform .3s ease-in-out}.bal-switch__toggle--checked{transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-icon{position:absolute}.bal-icon .bal-switch__icon--checked{opacity:1}.bal-icon .bal-switch__icon{opacity:0;transition:opacity .3s ease-in-out}