@baloise/ds-core 19.9.4-nightly.20260513 → 19.9.5

package/dist/cjs/{bal-dropdown_3.cjs.entry.js → bal-check_7.cjs.entry.js}

@@ -1,29 +1,787 @@
 'use strict';
 
 var index = require('./index-feA4skrY.js');
+var bem = require('./bem-p0PWVN8n.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var aria = require('./aria-BzkqcV7W.js');
 var attributes = require('./attributes-Cp0kpySW.js');
-var bem = require('./bem-p0PWVN8n.js');
-var browser = require('./browser-BwmkTmm8.js');
+var focusVisible = require('./focus-visible-DFZa8IIA.js');
 var form = require('./form-BSlIiqcR.js');
 var formInput = require('./form-input-BwFB4Rej.js');
 var helpers = require('./helpers-HuaiWXrB.js');
 var log = require('./log-CXDMiw7o.js');
-var index$1 = require('./index-BZ67Dcnb.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+var elementStates_decorator = require('./element-states.decorator-BG2oNUsO.js');
 var array = require('./array-Db63Hhl1.js');
-var focusVisible = require('./focus-visible-DFZa8IIA.js');
+var focus_decorator = require('./focus.decorator-BL2kLsNv.js');
+var mutation_decorator = require('./mutation.decorator-BolUYaKD.js');
+var browser = require('./browser-BwmkTmm8.js');
+var index$1 = require('./index-BZ67Dcnb.js');
 var floatingUi = require('./floating-ui-BE1Qsw-b.js');
 var option = require('./option-kGk4eTdA.js');
-var aria = require('./aria-BzkqcV7W.js');
 var config_default = require('./config.default-Cko-wpRU.js');
-var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
 var config_decorator = require('./config.decorator-CUe4yCTd.js');
-var elementStates_decorator = require('./element-states.decorator-BG2oNUsO.js');
 var utils = require('./utils-Bl0u6rg1.js');
 require('./config.utils-Civnz2jT.js');
-require('./_commonjsHelpers-BJu3ubxk.js');
-require('./index-BobQkZjn.js');
 require('./listener-DspXpqzY.js');
+require('./index-BobQkZjn.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+
+const balCheckCss = ":root{--bal-check-size:1.5rem;--bal-check-border-width:2px;--bal-check-border-radius:var(--bal-radius-normal);--bal-check-color-inverted:var(--bal-color-white);--bal-check-border-color:var(--bal-color-primary);--bal-check-border-color-hovered:var(--bal-color-border-primary-hovered);--bal-check-border-color-pressed:var(--bal-color-border-primary-pressed);--bal-check-border-color-checked:var(--bal-color-primary);--bal-check-border-color-checked-hovered:var(--bal-color-border-primary-hovered);--bal-check-border-color-checked-pressed:var(--bal-color-border-primary-pressed);--bal-check-background:transparent;--bal-check-background-hovered:var(--bal-color-grey-2);--bal-check-background-pressed:var(--bal-color-grey-2);--bal-check-background-checked:var(--bal-color-primary);--bal-check-background-checked-hovered:var(--bal-color-border-primary-hovered);--bal-check-background-checked-pressed:var(--bal-color-border-primary-pressed);--bal-check-border-color-invalid:var(--bal-color-border-danger);--bal-check-border-color-invalid-hovered:var(--bal-color-border-danger-hovered);--bal-check-border-color-invalid-pressed:var(--bal-color-border-danger-pressed);--bal-check-border-color-invalid-checked:var(--bal-color-border-danger);--bal-check-border-color-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-check-border-color-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-check-background-invalid:transparent;--bal-check-background-invalid-hovered:var(--bal-color-danger-1);--bal-check-background-invalid-pressed:var(--bal-color-danger-1);--bal-check-background-invalid-checked:var(--bal-color-border-danger);--bal-check-background-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-check-background-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-check-background-disabled:var(--bal-color-grey-2);--bal-check-border-color-disabled:var(--bal-color-border-grey-dark);--bal-check-background-checked-disabled:var(--bal-color-border-grey-dark);--bal-check-border-color-checked-disabled:var(--bal-color-border-grey-dark)}.bal-check{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--bal-check-size);max-width:var(--bal-check-size);height:var(--bal-check-size);max-height:var(--bal-check-size);border-radius:var(--bal-check-border-radius);overflow:hidden;border:var(--bal-check-border-width) solid var(--bal-check-border-color);background-color:var(--bal-check-background)}@media (hover: hover)and (pointer: fine){.bal-check--hovered,.bal-check:hover{background:var(--bal-check-background-hovered);border-color:var(--bal-check-border-color-hovered)}}.bal-check--pressed,.bal-check:active{background:var(--bal-check-background-pressed);border-color:var(--bal-check-border-color-pressed)}.bal-check bal-icon{opacity:0}.bal-check--checked{background-color:var(--bal-check-background-checked);border-color:var(--bal-check-border-color-checked)}.bal-check--checked bal-icon{opacity:1}@media (hover: hover)and (pointer: fine){.bal-check--checked.bal-check--hovered,.bal-check--checked:hover{background:var(--bal-check-background-checked-hovered);border-color:var(--bal-check-border-color-checked-hovered)}}.bal-check--checked.bal-check--pressed,.bal-check--checked:active{background:var(--bal-check-background-checked-pressed);border-color:var(--bal-check-border-color-checked-pressed)}.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted)}.bal-check--invalid{border-color:var(--bal-check-border-color-invalid);background-color:var(--bal-check-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-check--invalid.bal-check--hovered,.bal-check--invalid:hover{background-color:var(--bal-check-background-invalid-hovered);border-color:var(--bal-check-border-color-invalid-hovered)}}.bal-check--invalid.bal-check--pressed,.bal-check--invalid:active{background-color:var(--bal-check-background-invalid-pressed);border-color:var(--bal-check-border-color-invalid-pressed)}.bal-check--invalid.bal-check--checked{border-color:var(--bal-check-border-color-invalid);background:var(--bal-check-background-invalid-checked)}@media (hover: hover)and (pointer: fine){.bal-check--invalid.bal-check--checked.bal-check--hovered,.bal-check--invalid.bal-check--checked:hover{background-color:var(--bal-check-background-invalid-checked-hovered);border-color:var(--bal-check-border-color-invalid-hovered)}}.bal-check--invalid.bal-check--checked.bal-check--pressed,.bal-check--invalid.bal-check--checked:active{background-color:var(--bal-check-background-invalid-checked-pressed);border-color:var(--bal-check-border-color-invalid-pressed)}.bal-check--invalid.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted)}.bal-check--disabled{cursor:default !important;background:var(--bal-check-background-disabled) !important;border-color:var(--bal-check-border-color-disabled) !important}.bal-check--disabled.bal-check--checked{background-color:var(--bal-check-background-checked-disabled) !important;border-color:var(--bal-check-border-color-checked-disabled) !important}.bal-check--disabled.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted) !important}";
+
+const Check = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
+        this.invalid = undefined;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = undefined;
+        /**
+         * If `true`, the checkbox is inverted and works on dark backgrounds.
+         */
+        this.inverted = undefined;
+        /**
+         * @internal
+         */
+        this.hovered = false;
+        /**
+         * @internal
+         */
+        this.pressed = false;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = bem.BEM.block('check');
+        const checked = !!this.checked;
+        const disabled = !!this.disabled;
+        const invalid = !!this.invalid;
+        const inverted = !!this.inverted;
+        return (index.h(index.Host, { key: 'c995184b2f4adb6f6de85e17c13ea45f992c88aa', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, index.h("bal-icon", { key: 'c93f453451f95b8ac79b25a0e9e71b6baa4e1ac9', name: "check", color: "white", colorHovered: "white", colorPressed: "white", size: "small", "aria-hidden": "true", hovered: this.hovered, pressed: this.pressed })));
+    }
+};
+Check.style = balCheckCss;
+
+const balCheckboxCss = "@media (hover: hover)and (pointer: fine){.bal-checkbox.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;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:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;gap:.5rem;-ms-flex-direction:row;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:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-x-small);-ms-flex-pack:center;justify-content:center;-ms-flex-align:start;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;-ms-flex:0 0 100%;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%;-ms-flex-align:stretch;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{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (max-width: 768px){.bal-checkbox--column-mobile-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-mobile-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-mobile-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 769px),print{.bal-checkbox--column-tablet-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-tablet-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-tablet-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}@media screen and (min-width: 1024px){.bal-checkbox--column-2{-ms-flex:0 0 calc(50% - var(--bal-space-normal)*1/2);flex:0 0 calc(50% - var(--bal-space-normal)*1/2)}.bal-checkbox--column-3{-ms-flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3);flex:0 0 calc(33.3333333333% - var(--bal-space-normal)*2/3)}.bal-checkbox--column-4{-ms-flex:0 0 calc(25% - var(--bal-space-normal)*3/4);flex:0 0 calc(25% - var(--bal-space-normal)*3/4)}}";
+
+const Checkbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.balFocus = index.createEvent(this, "balFocus");
+        this.balBlur = index.createEvent(this, "balBlur");
+        this.balChange = index.createEvent(this, "balChange");
+        this.inputId = `bal-cb-${checkboxIds++}`;
+        this.inheritedAttributes = {};
+        this.keyboardMode = true;
+        this.hasLabel = true;
+        this.focused = false;
+        this.ariaForm = form.defaultBalAriaForm;
+        /**
+         * Track focus state
+         * If `true` checkbox needs to remain focused
+         */
+        this.wasFocused = false;
+        this.outerElementState = {
+            hovered: false,
+            pressed: false,
+        };
+        this.innerElementState = {
+            hovered: false,
+            pressed: false,
+        };
+        this.mergedElementState = {
+            hovered: false,
+            pressed: false,
+        };
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * Label of the radio item.
+         */
+        this.label = '';
+        /**
+         * If `true` the checkbox has no label
+         */
+        this.labelHidden = false;
+        /**
+         * If `true` the control is no padding
+         */
+        this.flat = false;
+        /**
+         * Defines the layout of the checkbox button
+         */
+        this.interface = 'checkbox';
+        /**
+         * A DOMString representing the value of the checkbox. This is not displayed on the
+         * client-side, but on the server this is the value given to the data
+         * submitted with the checkbox's name.
+         */
+        this.value = 'on';
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        this.initialValue = false;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = false;
+        /**
+         * If `true` the element can not mutated, meaning the user can not edit the control.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * If `true`, the value will not be send with a form submit
+         */
+        this.nonSubmit = false;
+        /**
+         * If `true` the component gets a invalid style.
+         */
+        this.invalid = false;
+        /**
+         * @internal
+         */
+        this.hovered = false;
+        /**
+         * @internal
+         */
+        this.pressed = false;
+        /**
+         * @internal
+         */
+        this.colSize = 1;
+        /**
+         * @internal
+         */
+        this.colSizeTablet = 1;
+        /**
+         * @internal
+         */
+        this.colSizeMobile = 1;
+        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) => {
+            if (this.disabled) {
+                return;
+            }
+            const element = ev.target;
+            if (element && element.href) {
+                return;
+            }
+            if (this.wasFocused) {
+                this.focused = true;
+            }
+            this.toggleChecked(ev);
+        };
+        this.onFocus = (ev) => {
+            if (this.disabled || this.readonly) {
+                this.focused = false;
+                return formInput.stopEventBubbling(ev);
+            }
+            this.balFocus.emit(ev);
+            if (this.keyboardMode) {
+                this.focused = true;
+                this.wasFocused = true;
+            }
+        };
+        this.onBlur = (ev) => {
+            if (this.disabled || this.readonly) {
+                return formInput.stopEventBubbling(ev);
+            }
+            this.balBlur.emit(ev);
+            this.focused = false;
+        };
+        this.onPointerDown = () => (this.keyboardMode = false);
+        this.onKeydown = (ev) => {
+            if (!keyboard_helpers.isSpaceKey(ev)) {
+                this.wasFocused = false;
+            }
+            this.keyboardMode = focusVisible.FOCUS_KEYS.includes(ev.key);
+        };
+    }
+    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() {
+        this.hoveredChanged();
+        if (this.group) {
+            this.updateState();
+            this.group.addEventListener('balChange', () => this.updateState());
+        }
+        this.initialValue = this.checked;
+        this.el.addEventListener('keydown', this.onKeydown);
+        this.el.addEventListener('touchstart', this.onPointerDown);
+        this.el.addEventListener('mousedown', this.onPointerDown);
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = attributes.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());
+        }
+        this.el.removeEventListener('keydown', this.onKeydown);
+        this.el.removeEventListener('touchstart', this.onPointerDown);
+        this.el.removeEventListener('mousedown', this.onPointerDown);
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenOnClick(ev) {
+        if ((this.disabled || this.readonly) &&
+            ev.target &&
+            (ev.target === this.el || helpers.isDescendant(this.el, ev.target))) {
+            formInput.stopEventBubbling(ev);
+        }
+    }
+    resetHandler(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            this.checked = this.initialValue;
+        }
+    }
+    elementStateListener(info) {
+        this.outerElementState = info;
+        this.mergeElementState();
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Sets the focus on the checkbox input element.
+     */
+    async setFocus() {
+        formInput.inputSetFocus(this);
+    }
+    /**
+     * Sets blur on the native `input`. Use this method instead of the global
+     * `input.blur()`.
+     * @internal
+     */
+    async setBlur() {
+        formInput.inputSetBlur(this);
+    }
+    /**
+     * Returns the native `<input>` element used under the hood.
+     */
+    getInputElement() {
+        return Promise.resolve(this.nativeInput);
+    }
+    /**
+     * Options of the tab like label, value etc.
+     */
+    async getOption() {
+        return this.option;
+    }
+    /**
+     * @internal
+     */
+    async updateState() {
+        if (this.group && this.group.control && Array.isArray(this.group.value)) {
+            const newChecked = this.group.value.includes(this.value);
+            if (newChecked !== this.checked) {
+                this.checked = newChecked;
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    /**
+     * 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,
+            value: this.value,
+            checked: this.checked,
+            label: this.label,
+            labelHidden: this.labelHidden,
+            flat: this.flat,
+            interface: this.interface,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            required: this.required,
+            nonSubmit: this.nonSubmit,
+            invalid: this.invalid,
+        };
+    }
+    /**
+     * EVENT HANDLERS
+     * ------------------------------------------------------
+     */
+    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.BEM.block('checkbox');
+        const inputEl = block.element('input');
+        const labelEl = block.element('label');
+        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;
+        const labelId = this.ariaForm.labelId || null;
+        const LabelTag = hasFormControl ? 'label' : 'span';
+        return (index.h(index.Host, { key: 'e6718d0f01496940fbc03686159599af02e63be2', "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": aria.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 }, index.h(LabelTag, { key: '3bd8c2c8217d5e958009aeb3465bd7c8446c6960', class: Object.assign({}, labelEl.class()), "data-testid": "bal-checkbox-label" }, hasFormControl ? (index.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": aria.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' ? (index.h("div", { class: Object.assign({}, labelIconEl.class()) }, this.interface === 'switch' ? (index.h("bal-switch", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed })) : (index.h("bal-check", { 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 })))) : (''), index.h("div", { key: 'c1d1b270f076b748681da1d4fdb36380e8bfaf45', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, index.h("slot", { key: '123d7f262307eda399023cdc4ecbe6c83d352336' })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "hovered": ["hoveredChanged"],
+        "pressed": ["pressedChanged"]
+    }; }
+};
+tslib_es6.__decorate([
+    log.Logger('bal-checkbox'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Checkbox.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    elementStates_decorator.ListenToElementStates(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], Checkbox.prototype, "elementStateListener", null);
+let checkboxIds = 0;
+Checkbox.style = balCheckboxCss;
+
+const balCheckboxGroupCss = ".bal-checkbox-group{display:inline-block;position:relative;width:100%}.bal-checkbox-group__inner{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:stretch;align-items:stretch;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-normal)}.bal-checkbox-group__inner--button{-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex:1;flex:1;gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-checkbox-group__inner--button{-ms-flex-direction:row;flex-direction:row}}.bal-checkbox-group__inner--expanded{-ms-flex-align:stretch;align-items:stretch}.bal-checkbox-group__inner--expanded .bal-checkbox{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-checkbox-group__inner--expanded .bal-checkbox{width:100%}}.bal-checkbox-group__inner--button.bal-checkbox-group__inner--vertical{gap:var(--bal-space-x-small)}.bal-checkbox-group__inner--vertical{-ms-flex-direction:column;flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}@media screen and (min-width: 769px),print{.bal-checkbox-group__inner--vertical{-ms-flex-align:start;align-items:flex-start}}@media screen and (max-width: 768px){.bal-checkbox-group__inner--vertical-mobile{-ms-flex-direction:column;flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}}";
+
+const CheckboxGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.balChange = index.createEvent(this, "balChange");
+        this.balFocus = index.createEvent(this, "balFocus");
+        this.balBlur = index.createEvent(this, "balBlur");
+        this.inputId = `bal-cg-${checkboxGroupIds++}`;
+        this.inheritedAttributes = {};
+        this.ariaForm = form.defaultBalAriaForm;
+        /**
+         * Defines the layout of the checkbox button
+         */
+        this.interface = undefined;
+        /**
+         * If `true` it acts as the main form control
+         */
+        this.control = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * Displays the checkboxes vertically
+         */
+        this.vertical = false;
+        /**
+         * If `true`, the controls will be vertically on mobile devices.
+         */
+        this.verticalOnMobile = false;
+        /**
+         * Uses the whole width
+         */
+        this.expanded = false;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.invalid = undefined;
+        /**
+         * If `true`, the user cannot interact with the checkboxes.
+         */
+        this.disabled = undefined;
+        /**
+         * If `true`, the user cannot interact with the checkboxes.
+         */
+        this.readonly = undefined;
+        /**
+         * The value of the control.
+         */
+        this.value = [];
+        /**
+         * Defines the column size like the grid.
+         */
+        this.columns = 1;
+        /**
+         * Defines the column size for tablet and bigger like the grid.
+         */
+        this.columnsTablet = 1;
+        /**
+         * Defines the column size for mobile and bigger like the grid.
+         */
+        this.columnsMobile = 1;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * LISTENERS
+         * ------------------------------------------------------
+         */
+        this.hasFocus = false;
+        this.mutationObserverActive = true;
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.onClick = (ev) => {
+            if (!this.control) {
+                return;
+            }
+            const element = ev.target;
+            if (element.href) {
+                return;
+            }
+            const selectedCheckbox = ev.target && ev.target.closest('bal-checkbox');
+            if (selectedCheckbox) {
+                if (selectedCheckbox.disabled || selectedCheckbox.readonly) {
+                    return ev.stopPropagation();
+                }
+            }
+            this.updateValues();
+        };
+        this.onOptionChange = async () => {
+            this.sync();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    async optionChanged() {
+        if (this.control) {
+            this.onOptionChange();
+            this.mutationObserverActive = this.options === undefined;
+        }
+    }
+    invalidChanged(value) {
+        if (this.control) {
+            if (value !== undefined) {
+                this.getCheckboxes().forEach(child => {
+                    child.invalid = value;
+                });
+            }
+        }
+    }
+    disabledChanged(value) {
+        if (this.control) {
+            if (value !== undefined) {
+                this.getCheckboxes().forEach(child => {
+                    child.disabled = value;
+                });
+            }
+        }
+    }
+    readonlyChanged(value) {
+        if (this.control) {
+            if (value !== undefined) {
+                this.getCheckboxes().forEach(child => {
+                    child.readonly = value;
+                });
+            }
+        }
+    }
+    valueChanged(_value, oldValue) {
+        if (this.control) {
+            if (!array.areArraysEqual(this.value, oldValue)) {
+                this.onOptionChange();
+            }
+        }
+        else {
+            this.onOptionChange();
+        }
+    }
+    columnsChanged(value) {
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSize = value));
+    }
+    columnsTabletChanged(value) {
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeTablet = value));
+    }
+    columnsMobileChanged(value) {
+        this.getCheckboxes().forEach(checkbox => (checkbox.colSizeMobile = value));
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        if (this.control) {
+            this.mutationObserverActive = this.options === undefined;
+            this.valueChanged(this.value, []);
+        }
+    }
+    componentWillLoad() {
+        if (this.control) {
+            this.inheritedAttributes = attributes.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
+            this.disabledChanged(this.disabled);
+            this.invalidChanged(this.invalid);
+            this.readonlyChanged(this.readonly);
+        }
+        this.columnsChanged(this.columns);
+        this.columnsTabletChanged(this.columnsTablet);
+        this.columnsMobileChanged(this.columnsMobile);
+        this.onOptionChange();
+    }
+    focusInListener(ev) {
+        this.balFocus.emit(ev);
+    }
+    focusOutListener(ev) {
+        this.balBlur.emit(ev);
+    }
+    mutationListener() {
+        if (this.control) {
+            this.disabledChanged(this.disabled);
+            this.readonlyChanged(this.readonly);
+        }
+        this.columnsChanged(this.columns);
+        this.columnsTabletChanged(this.columnsTablet);
+        this.columnsMobileChanged(this.columnsMobile);
+        this.onOptionChange();
+    }
+    listenOnCheckboxChange(ev) {
+        if (this.control) {
+            if (helpers.isDescendant(this.el, ev.target)) {
+                formInput.stopEventBubbling(ev);
+                this.updateValues();
+            }
+        }
+    }
+    resetHandler(ev) {
+        const formElement = ev.target;
+        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
+            if (this.control) {
+                this.value = [];
+            }
+            this.onOptionChange();
+        }
+    }
+    checkboxFocusListener(ev) {
+        const { target } = ev;
+        if (target && helpers.isDescendant(this.el, target) && helpers.hasTagName(target, 'bal-checkbox')) {
+            formInput.stopEventBubbling(ev);
+        }
+    }
+    checkboxBlurListener(ev) {
+        const { target } = ev;
+        if (target && helpers.isDescendant(this.el, target) && helpers.hasTagName(target, 'bal-checkbox')) {
+            formInput.stopEventBubbling(ev);
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /** @internal */
+    async setValue(value) {
+        if (this.control) {
+            this.value = value;
+        }
+    }
+    /**
+     * Find the options properties by its value
+     */
+    async getOptionByValue(value) {
+        const options = this.options;
+        if (options) {
+            return options.find(option => option.value === value);
+        }
+        return undefined;
+    }
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    sync() {
+        if (this.control) {
+            const isChecked = (checkbox) => {
+                for (let index = 0; index < this.value.length; index++) {
+                    const valueItem = this.value[index];
+                    if (valueItem !== undefined && valueItem.toString() === checkbox.value.toString()) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            this.getCheckboxes().forEach((checkbox) => {
+                checkbox.checked = isChecked(checkbox);
+            });
+        }
+        this.getCheckboxes().forEach((checkbox) => {
+            if (this.interface) {
+                checkbox.interface = this.interface;
+            }
+        });
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    getCheckboxes() {
+        return Array.from(this.el.querySelectorAll('bal-checkbox'));
+    }
+    updateValues() {
+        // generate new value array out of the checked checkboxes
+        const newValue = [];
+        this.getCheckboxes().forEach(cb => {
+            if (cb.checked) {
+                newValue.push(cb.value);
+            }
+        });
+        if (!array.areArraysEqual(this.value, newValue)) {
+            this.value = [...newValue];
+            this.balChange.emit(this.value);
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = bem.BEM.block('checkbox-group');
+        const innerEl = block.element('inner');
+        const rawOptions = this.options || [];
+        const options = rawOptions.map(option => {
+            if (typeof option.html === 'function') {
+                return Object.assign(Object.assign({}, option), { html: option.html() });
+            }
+            return option;
+        });
+        return (index.h(index.Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": aria.ariaBooleanToString(this.invalid), onClick: this.onClick }, this.inheritedAttributes), index.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')) }, index.h("slot", null), options.map(option => (index.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 }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "options": ["optionChanged"],
+        "invalid": ["invalidChanged"],
+        "disabled": ["disabledChanged"],
+        "readonly": ["readonlyChanged"],
+        "value": ["valueChanged"],
+        "columns": ["columnsChanged"],
+        "columnsTablet": ["columnsTabletChanged"],
+        "columnsMobile": ["columnsMobileChanged"]
+    }; }
+};
+tslib_es6.__decorate([
+    log.Logger('bal-checkbox-group'),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Function]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "createLogger", null);
+tslib_es6.__decorate([
+    focus_decorator.ListenToFocus(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "focusInListener", null);
+tslib_es6.__decorate([
+    focus_decorator.ListenToFocus(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "focusOutListener", null);
+tslib_es6.__decorate([
+    mutation_decorator.ListenToMutation({ tags: ['bal-checkbox-group', 'bal-checkbox'], attributes: false, characterData: false }),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", []),
+    tslib_es6.__metadata("design:returntype", void 0)
+], CheckboxGroup.prototype, "mutationListener", null);
+let checkboxGroupIds = 0;
+CheckboxGroup.style = balCheckboxGroupCss;
 
 class DropdownAutoFillUtil {
     constructor() {
@@ -1369,6 +2127,54 @@ tslib_es6.__decorate([
 let balOptionListIds = 0;
 OptionList.style = balOptionListCss;
 
+const balSwitchCss = ":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:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.bal-switch__toggle--checked{-webkit-transform:translateX(100%);transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch .bal-icon{position:absolute}.bal-switch .bal-icon .bal-switch__icon--checked{opacity:1}.bal-switch .bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";
+
+const Switch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
+        this.invalid = undefined;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
+        this.disabled = undefined;
+        /**
+         * @internal
+         */
+        this.hovered = false;
+        /**
+         * @internal
+         */
+        this.pressed = false;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = bem.BEM.block('switch');
+        const checked = !!this.checked;
+        const disabled = !!this.disabled;
+        const invalid = !!this.invalid;
+        return (index.h(index.Host, { key: '44e17aefdee7df228e92368c3863509a4dcd4bc8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, index.h("bal-icon", { key: '1f27c8f3f92467ea80de321666e597c8ea7cde89', name: "check", color: "white", size: "small", "aria-hidden": "true", colorHovered: "white", colorPressed: "white", hovered: this.hovered, pressed: this.pressed, class: Object.assign({}, block.element('icon').modifier('checked').class(checked)) }), index.h("div", { key: 'd22b87a1a091669422db72acf16d48a4c4e8825f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('toggle').class()), block.element('toggle').modifier('checked').class(checked)), block.element('toggle').modifier('disabled').class(disabled)), block.element('toggle').modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) })));
+    }
+};
+Switch.style = balSwitchCss;
+
+exports.bal_check = Check;
+exports.bal_checkbox = Checkbox;
+exports.bal_checkbox_group = CheckboxGroup;
 exports.bal_dropdown = Dropdown;
 exports.bal_option = Option;
 exports.bal_option_list = OptionList;
+exports.bal_switch = Switch;