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

package/dist/esm/bal-checkbox_2.entry.js

@@ -1,731 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
-import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
-import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import { F as FOCUS_KEYS } from './focus-visible-DqCbGYzv.js';
-import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
-import { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from './form-input-DYvzaBlM.js';
-import { i as isDescendant, v as hasTagName } from './helpers-BNj87EbG.js';
-import { L as Logger } from './log-CwssmmaV.js';
-import { L as ListenToElementStates } from './element-states.decorator-B68ANq1p.js';
-import { i as isSpaceKey } from './keyboard.helpers-BERg8BNc.js';
-import { a as areArraysEqual } from './array-CDfSqLEo.js';
-import { L as ListenToFocus } from './focus.decorator-C1s3OoqI.js';
-import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
-import './browser-B1u-Mq75.js';
-import './config.utils-B7jugjyM.js';
-import './listener-CClDIhvK.js';
-import './index-zWZxKBfo.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-import './index-B4k_dH6V.js';
-
-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) {
-        registerInstance(this, hostRef);
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.balChange = createEvent(this, "balChange");
-        this.inputId = `bal-cb-${checkboxIds++}`;
-        this.inheritedAttributes = {};
-        this.keyboardMode = true;
-        this.hasLabel = true;
-        this.focused = false;
-        this.ariaForm = 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 stopEventBubbling(ev);
-            }
-            this.balFocus.emit(ev);
-            if (this.keyboardMode) {
-                this.focused = true;
-                this.wasFocused = true;
-            }
-        };
-        this.onBlur = (ev) => {
-            if (this.disabled || this.readonly) {
-                return stopEventBubbling(ev);
-            }
-            this.balBlur.emit(ev);
-            this.focused = false;
-        };
-        this.onPointerDown = () => (this.keyboardMode = false);
-        this.onKeydown = (ev) => {
-            if (!isSpaceKey(ev)) {
-                this.wasFocused = false;
-            }
-            this.keyboardMode = 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 = 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 || isDescendant(this.el, ev.target))) {
-            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() {
-        inputSetFocus(this);
-    }
-    /**
-     * Sets blur on the native `input`. Use this method instead of the global
-     * `input.blur()`.
-     * @internal
-     */
-    async setBlur() {
-        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.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';
-        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' })))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "hovered": ["hoveredChanged"],
-        "pressed": ["pressedChanged"]
-    }; }
-};
-__decorate([
-    Logger('bal-checkbox'),
-    __metadata("design:type", Function),
-    __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;
-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) {
-        registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.inputId = `bal-cg-${checkboxGroupIds++}`;
-        this.inheritedAttributes = {};
-        this.ariaForm = 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 (!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 = 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 (isDescendant(this.el, ev.target)) {
-                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 && isDescendant(this.el, target) && hasTagName(target, 'bal-checkbox')) {
-            stopEventBubbling(ev);
-        }
-    }
-    checkboxBlurListener(ev) {
-        const { target } = ev;
-        if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-checkbox')) {
-            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 (!areArraysEqual(this.value, newValue)) {
-            this.value = [...newValue];
-            this.balChange.emit(this.value);
-        }
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = 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 (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "group", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('button').class(this.interface === 'button')) }, h("slot", null), options.map(option => (h("bal-checkbox", { key: option.value, name: option.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "options": ["optionChanged"],
-        "invalid": ["invalidChanged"],
-        "disabled": ["disabledChanged"],
-        "readonly": ["readonlyChanged"],
-        "value": ["valueChanged"],
-        "columns": ["columnsChanged"],
-        "columnsTablet": ["columnsTabletChanged"],
-        "columnsMobile": ["columnsMobileChanged"]
-    }; }
-};
-__decorate([
-    Logger('bal-checkbox-group'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "createLogger", null);
-__decorate([
-    ListenToFocus(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "focusInListener", null);
-__decorate([
-    ListenToFocus(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "focusOutListener", null);
-__decorate([
-    ListenToMutation({ tags: ['bal-checkbox-group', 'bal-checkbox'], attributes: false, characterData: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], CheckboxGroup.prototype, "mutationListener", null);
-let checkboxGroupIds = 0;
-CheckboxGroup.style = balCheckboxGroupCss;
-
-export { Checkbox as bal_checkbox, CheckboxGroup as bal_checkbox_group };