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 { i as isSpaceKey } from './index.esm-Btc0yydR.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 { L as ListenToFocus } from './focus.decorator-C1s3OoqI.js';
import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
import './index-zWZxKBfo.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './index-B4k_dH6V.js';
import './index-BU7FUSdu.js';
import './index-D6JOtC1P.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.js';
import './listener-CClDIhvK.js';

const balRadioCss = "@media (hover: hover)and (pointer: fine){.bal-radio.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-radio-symbol-size:1.5rem;--bal-radio-symbol-border-width:2px;--bal-radio-symbol-background:transparent;--bal-radio-label-min-height:1.5rem;--bal-radio-button-background-hover:var(--bal-color-grey-2);--bal-radio-button-background-active:var(--bal-color-grey-2);--bal-radio-button-background-checked:var(--bal-color-primary);--bal-radio-button-background-checked-hover:var(--bal-color-light-blue-5);--bal-radio-button-background-checked-active:var(--bal-color-primary-6);--bal-radio-button-background-invalid:var(--bal-color-danger-1);--bal-radio-button-background-invalid-hover:var(--bal-color-danger-1);--bal-radio-button-background-invalid-active:var(--bal-color-danger-1);--bal-radio-button-background-invalid-checked:var(--bal-color-border-danger);--bal-radio-button-background-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-button-background-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-button-background-disabled-hover-active:var(--bal-color-grey-2);--bal-radio-button-background-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-button-background:transparent;--bal-radio-button-background-checked-green:var(--bal-color-green-1);--bal-radio-button-background-checked-purple:var(--bal-color-purple-1);--bal-radio-button-background-checked-red:var(--bal-color-red-1);--bal-radio-button-background-checked-yellow:var(--bal-color-yellow-1);--bal-radio-button-background-disabled:var(--bal-color-grey-1);--bal-radio-button-background-hover:var(--bal-color-grey-1);--bal-radio-button-border-color:var(--bal-color-primary);--bal-radio-button-border-color-hover:var(--bal-color-light-blue-5);--bal-radio-button-border-color-active:var(--bal-color-primary-6);--bal-radio-button-border-color-invalid:var(--bal-color-border-danger);--bal-radio-button-border-color-invalid-hover:var(--bal-color-danger-5);--bal-radio-button-border-color-invalid-active:var(--bal-color-danger-6);--bal-radio-button-border-color-invalid-checked:var(--bal-color-border-danger);--bal-radio-button-border-color-invalid-checked-hover:var(--bal-color-danger-5);--bal-radio-button-border-color-invalid-checked-active:var(--bal-color-danger-6);--bal-radio-button-border-color-disabled-hover-active:var(--bal-color-border-grey-dark);--bal-radio-button-border-color-disabled-checked-hover-active:var(--bal-color-border-grey-dark);--bal-radio-tile-background:transparent;--bal-radio-tile-background-hover:var(--bal-color-grey-1);--bal-radio-tile-background-disabled:var(--bal-color-grey-1);--bal-radio-tile-background-invalid-hover:var(--bal-color-danger-1);--bal-radio-tile-background-invalid-active:var(--bal-color-danger-1);--bal-radio-tile-background-checked-green:var(--bal-color-green-1);--bal-radio-tile-background-checked-purple:var(--bal-color-purple-1);--bal-radio-tile-background-checked-red:var(--bal-color-red-1);--bal-radio-tile-background-checked-yellow:var(--bal-color-yellow-1);--bal-radio-tile-border-style:var(--bal-form-field-control-border-style);--bal-radio-tile-border-radius:var(--bal-form-field-control-radius);--bal-radio-tile-border-width:var(--bal-form-field-control-border-width);--bal-radio-tile-padding:var(--bal-text-size-medium);--bal-radio-tile-border-color:var(--bal-color-border);--bal-radio-tile-border-color-hover:var(--bal-color-border-primary-hovered);--bal-radio-tile-border-color-active:var(--bal-color-border-primary-pressed);--bal-radio-tile-border-color-invalid-hover:var(--bal-color-border-danger-hovered);--bal-radio-tile-border-color-invalid-active:var(--bal-color-border-danger-pressed);--bal-radio-tile-border-color-checked:var(--bal-color-border-primary);--bal-radio-tile-border-color-invalid:var(--bal-color-border-danger);--bal-radio-tile-border-color-disabled:var(--bal-color-border-grey-dark)}.bal-radio{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-radio-symbol-size);border-radius:var(--bal-radius-normal);cursor:pointer}.bal-radio .bal-radio__label{cursor:pointer}.bal-radio--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-radio.bal-radio--flat{min-height:var(--bal-radio-symbol-size)}.bal-radio:not(.bal-radio--flat){min-height:3rem}.bal-radio--invalid{color:var(--bal-form-field-label-danger-color)}.bal-radio--disabled,.bal-radio--disabled .bal-radio__label{color:var(--bal-form-field-label-disabled-color);cursor:default}.bal-radio__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-radio__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-radio__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-radio__label__text--hidden{display:none}.bal-radio__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-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--hovered .bal-radio__label__text,.bal-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid):hover .bal-radio__label__text{color:var(--bal-color-text-primary-hovered)}.bal-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--hovered .bal-radio__label__icon,.bal-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid):hover .bal-radio__label__icon{color:var(--bal-color-text-primary-hovered)}}.bal-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--pressed .bal-radio__label__text,.bal-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid):active .bal-radio__label__text{color:var(--bal-color-text-primary-pressed)}.bal-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--pressed .bal-radio__label__icon,.bal-radio:not(.bal-radio--button):not(.bal-radio--disabled):not(.bal-radio--invalid):active .bal-radio__label__icon{color:var(--bal-color-text-primary-pressed)}@media (hover: hover)and (pointer: fine){.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled).bal-radio--hovered .bal-radio__label__text,.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled):hover .bal-radio__label__text{color:var(--bal-color-text-danger-hovered)}.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled).bal-radio--hovered .bal-radio__label__icon,.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled):hover .bal-radio__label__icon{color:var(--bal-color-text-danger-hovered)}}.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled).bal-radio--pressed .bal-radio__label__text,.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled):active .bal-radio__label__text{color:var(--bal-color-text-danger-pressed)}.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled).bal-radio--pressed .bal-radio__label__icon,.bal-radio--invalid:not(.bal-radio--button):not(.bal-radio--disabled):active .bal-radio__label__icon{color:var(--bal-color-text-danger-pressed)}.bal-radio--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-radio-button-border-color)}.bal-radio--button.bal-radio--checked{background:var(--bal-radio-button-background-checked);color:var(--bal-color-white)}.bal-radio--button.bal-radio--checked .bal-radio__label__text,.bal-radio--button.bal-radio--checked .bal-radio__label__text .link{color:var(--bal-color-white)}.bal-radio--button.bal-radio--invalid{border-color:var(--bal-color-border-danger);color:var(--bal-color-text-danger-hovered);background:var(--bal-color-danger-1)}.bal-radio--button.bal-radio--invalid.bal-radio--checked{color:var(--bal-color-white);background:var(--bal-color-border-danger)}.bal-radio--button.bal-radio--invalid.bal-radio--checked .bal-radio__label__text,.bal-radio--button.bal-radio--invalid.bal-radio--checked .bal-radio__label__text .link{color:var(--bal-color-white)}.bal-radio--button.bal-radio--disabled{border-color:var(--bal-color-grey-4);background:var(--bal-color-grey-2)}.bal-radio--button.bal-radio--disabled .bal-radio__label__text{color:var(--bal-color-text-grey)}.bal-radio--button.bal-radio--disabled.bal-radio--checked{background:var(--bal-color-grey-4);color:var(--bal-color-white)}.bal-radio--button.bal-radio--disabled.bal-radio--checked .bal-radio__label__text,.bal-radio--button.bal-radio--disabled.bal-radio--checked .bal-radio__label__text .link{color:var(--bal-color-white)}@media (hover: hover)and (pointer: fine){.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--hovered,.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid):hover{background:var(--bal-color-grey-2);border-color:var(--bal-color-border-primary-hovered)}.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--hovered .bal-radio__label__text,.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid):hover .bal-radio__label__text{color:var(--bal-color-text-primary-hovered)}}.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--pressed,.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid):active{background:var(--bal-color-grey-2);border-color:var(--bal-color-border-primary-pressed)}.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--pressed .bal-radio__label__text,.bal-radio--button:not(.bal-radio--disabled):not(.bal-radio--invalid):active .bal-radio__label__text{color:var(--bal-color-text-primary-pressed)}@media (hover: hover)and (pointer: fine){.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--hovered,.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid):hover{background:var(--bal-color-border-primary-hovered);border-color:var(--bal-color-border-primary-hovered)}.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--hovered .bal-radio__label__text,.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid):hover .bal-radio__label__text{color:var(--bal-color-white)}}.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--pressed,.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid):active{background:var(--bal-color-border-primary-pressed);border-color:var(--bal-color-border-primary-pressed)}.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--pressed .bal-radio__label__text,.bal-radio--button.bal-radio--checked:not(.bal-radio--disabled):not(.bal-radio--invalid):active .bal-radio__label__text{color:var(--bal-color-white)}@media (hover: hover)and (pointer: fine){.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled).bal-radio--hovered,.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled):hover{background:var(--bal-color-danger-1);border-color:var(--bal-color-border-danger-hovered)}.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled).bal-radio--hovered .bal-radio__label__text,.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled):hover .bal-radio__label__text{color:var(--bal-color-text-danger-hovered)}}.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled).bal-radio--pressed,.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled):active{background:var(--bal-color-danger-1);border-color:var(--bal-color-border-danger-pressed)}.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled).bal-radio--pressed .bal-radio__label__text,.bal-radio--button.bal-radio--invalid:not(.bal-radio--disabled):active .bal-radio__label__text{color:var(--bal-color-text-danger-pressed)}@media (hover: hover)and (pointer: fine){.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled).bal-radio--hovered,.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled):hover{background:var(--bal-color-border-danger-hovered);border-color:var(--bal-color-border-danger-hovered)}.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled).bal-radio--hovered .bal-radio__label__text,.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled):hover .bal-radio__label__text{color:var(--bal-color-white)}}.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled).bal-radio--pressed,.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled):active{background:var(--bal-color-border-danger-pressed);border-color:var(--bal-color-border-danger-pressed)}.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled).bal-radio--pressed .bal-radio__label__text,.bal-radio--button.bal-radio--invalid.bal-radio--checked:not(.bal-radio--disabled):active .bal-radio__label__text{color:var(--bal-color-white)}.bal-radio--tile{display:block;-ms-flex:0 0 100%;flex:0 0 100%;background:var(--bal-radio-tile-background);border-style:var(--bal-radio-tile-border-style);border-radius:var(--bal-radio-tile-border-radius);border-width:var(--bal-radio-tile-border-width);border-color:var(--bal-radio-tile-border-color);padding:var(--bal-radio-tile-padding)}.bal-radio--tile .bal-radio__label{height:100%;-ms-flex-align:stretch;align-items:stretch}.bal-radio--tile.bal-radio--checked{border-color:var(--bal-radio-tile-border-color-checked)}.bal-radio--tile.bal-radio--invalid{border-color:var(--bal-radio-tile-border-color-invalid)}.bal-radio--tile.bal-radio--disabled{background:var(--bal-radio-tile-background-disabled);border-color:var(--bal-radio-tile-border-color-disabled);cursor:default}@media (hover: hover)and (pointer: fine){.bal-radio--tile:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--hovered,.bal-radio--tile:not(.bal-radio--disabled):not(.bal-radio--invalid):hover{background:var(--bal-radio-tile-background-hover);border-color:var(--bal-radio-tile-border-color-hover)}}.bal-radio--tile:not(.bal-radio--disabled):not(.bal-radio--invalid).bal-radio--pressed,.bal-radio--tile:not(.bal-radio--disabled):not(.bal-radio--invalid):active{background:var(--bal-radio-tile-background-hover);border-color:var(--bal-radio-tile-border-color-active)}@media (hover: hover)and (pointer: fine){.bal-radio--tile.bal-radio--invalid:not(.bal-radio--disabled).bal-radio--hovered,.bal-radio--tile.bal-radio--invalid:not(.bal-radio--disabled):hover{background:var(--bal-radio-tile-background-invalid-hover);border-color:var(--bal-radio-tile-border-color-invalid-hover)}}.bal-radio--tile.bal-radio--invalid:not(.bal-radio--disabled).bal-radio--pressed,.bal-radio--tile.bal-radio--invalid:not(.bal-radio--disabled):active{background:var(--bal-radio-tile-background-invalid-active);border-color:var(--bal-radio-tile-border-color-invalid-active)}.bal-radio--tile-color-green:not(.bal-radio--disabled).bal-radio--checked,.bal-radio--tile-color-green:not(.bal-radio--disabled).bal-radio--checked.bal-radio--hovered,.bal-radio--tile-color-green:not(.bal-radio--disabled).bal-radio--checked:hover{background:var(--bal-radio-tile-background-checked-green)}.bal-radio--tile-color-red:not(.bal-radio--disabled).bal-radio--checked,.bal-radio--tile-color-red:not(.bal-radio--disabled).bal-radio--checked.bal-radio--hovered,.bal-radio--tile-color-red:not(.bal-radio--disabled).bal-radio--checked:hover{background:var(--bal-radio-tile-background-checked-red)}.bal-radio--tile-color-purple:not(.bal-radio--disabled).bal-radio--checked,.bal-radio--tile-color-purple:not(.bal-radio--disabled).bal-radio--checked.bal-radio--hovered,.bal-radio--tile-color-purple:not(.bal-radio--disabled).bal-radio--checked:hover{background:var(--bal-radio-tile-background-checked-purple)}.bal-radio--tile-color-yellow:not(.bal-radio--disabled).bal-radio--checked,.bal-radio--tile-color-yellow:not(.bal-radio--disabled).bal-radio--checked.bal-radio--hovered,.bal-radio--tile-color-yellow:not(.bal-radio--disabled).bal-radio--checked:hover{background:var(--bal-radio-tile-background-checked-yellow)}@media screen and (min-width: 769px),print{.bal-radio--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-radio--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-radio--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-radio--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-radio--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-radio--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-radio--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-radio--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-radio--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-radio--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-radio--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-radio--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 Radio = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balFocus = createEvent(this, "balFocus");
        this.balBlur = createEvent(this, "balBlur");
        this.balChange = createEvent(this, "balChange");
        this.inputId = `bal-rb-${radioIds++}`;
        this.inheritedAttributes = {};
        this.keyboardMode = true;
        /**
         * Track focus state
         * If `true` checkbox needs to remain focused
         */
        this.wasFocused = false;
        this.checked = false;
        this.focused = false;
        this.ariaForm = defaultBalAriaForm;
        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 radio has no label
         */
        this.labelHidden = false;
        /**
         * If `true` the control is no padding
         */
        this.flat = false;
        /**
         * Defines the layout of the radio button
         */
        this.interface = 'radio';
        /**
         * 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`, 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.checked = true;
            this.setChecked(this.checked);
        };
        this.onClick = (ev) => {
            if (this.disabled) {
                return;
            }
            const element = ev.target;
            if (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.value === undefined) {
            this.value = this.inputId;
        }
        if (this.group) {
            this.updateState();
            this.group.addEventListener('balChange', this.updateState);
        }
        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);
        }
    }
    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);
    }
    /** @internal */
    async setButtonTabindex(value) {
        this.buttonTabindex = value;
    }
    /**
     * Returns the native `<input>` element used under the hood.
     */
    async getInputElement() {
        return Promise.resolve(this.nativeInput);
    }
    /**
     * Options of the tab like label, value etc.
     */
    async getOption() {
        return this.option;
    }
    /**
     * @internal
     * Options of the tab like label, value etc.
     */
    async updateState() {
        if (this.group) {
            const newChecked = this.group.value === 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-radio-group');
    }
    get interactionChildElements() {
        return Array.from(this.el.querySelectorAll('bal-radio-icon, bal-icon'));
    }
    get option() {
        return {
            name: this.name,
            value: this.value,
            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 BINDING
     * ------------------------------------------------------
     */
    mergeElementState() {
        this.mergedElementState = {
            hovered: this.outerElementState.hovered || this.innerElementState.hovered,
            pressed: this.outerElementState.pressed || this.innerElementState.pressed,
        };
        this.interactionChildElements.forEach(el => {
            el.hovered = this.mergedElementState.hovered;
            el.pressed = this.mergedElementState.pressed;
        });
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('radio');
        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 value = typeof this.value === 'boolean' ? JSON.stringify(this.value) : this.value;
        const hasFormControl = !this.nonSubmit;
        const id = this.ariaForm.controlId || this.inputId;
        const labelId = this.ariaForm.labelId || null;
        const LabelTag = hasFormControl ? 'label' : 'span';
        const inputAttributes = this.inheritedAttributes;
        if (this.buttonTabindex !== undefined) {
            inputAttributes.tabIndex = this.buttonTabindex;
        }
        if (this.labelHidden) {
            inputAttributes['aria-labelledby'] = labelId;
        }
        return (h(Host, { key: 'faa44091416d0505e2d84a792bd49f5eab82f897', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": this.disabled ? 'true' : null, "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({ 'bal-focused': focused }, block.class()), block.modifier('button').class(this.interface === 'button')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), 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.hovered)), block.modifier('pressed').class(this.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: '3588b099302b821eccd777ae3149744f53a97834', class: Object.assign({}, labelEl.class()), "data-testid": "bal-radio-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "radio", "data-testid": "bal-radio-input", name: this.name, value: 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("bal-radio-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: '599fda9c376491dcb156c0b3fa8ecd41353027a8', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '752d10816299c2f7840ae907b426501a76ae8d23' })))));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "hovered": ["hoveredChanged"],
        "pressed": ["pressedChanged"]
    }; }
};
__decorate([
    Logger('bal-radio'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], Radio.prototype, "createLogger", null);
__decorate([
    ListenToElementStates(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], Radio.prototype, "elementStateListener", null);
let radioIds = 0;
Radio.style = balRadioCss;

const balRadioGroupCss = ".bal-radio-group{display:inline-block;position:relative;width:100%}.bal-radio-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-radio-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-radio-group__inner--button{-ms-flex-direction:row;flex-direction:row}}.bal-radio-group__inner--expanded{-ms-flex-align:stretch;align-items:stretch}.bal-radio-group__inner--expanded .bal-radio{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-radio-group__inner--expanded .bal-radio{width:100%}}.bal-radio-group__inner--button.bal-radio-group__inner--vertical{gap:var(--bal-space-x-small)}.bal-radio-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-radio-group__inner--vertical{-ms-flex-align:start;align-items:flex-start}}@media screen and (max-width: 768px){.bal-radio-group__inner--vertical-mobile{-ms-flex-direction:column;flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}}";

const RadioGroup = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.balChange = createEvent(this, "balChange");
        this.balFocus = createEvent(this, "balFocus");
        this.balBlur = createEvent(this, "balBlur");
        this.inputId = `bal-rg-${radioGroupIds++}`;
        this.inheritedAttributes = {};
        this.ariaForm = defaultBalAriaForm;
        /**
         * Defines the layout of the radio button
         */
        this.interface = undefined;
        /**
         * If `true`, the radios can be deselected.
         */
        this.allowEmptySelection = 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 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 element can not mutated, meaning the user can not edit the control.
         */
        this.readonly = undefined;
        /**
         * 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;
        this.onOptionChange = async () => {
            this.setRadioTabindex(this.value);
            this.setRadioChecked();
        };
        /**
         * PRIVATE METHODS
         * ------------------------------------------------------
         */
        this.setRadioTabindex = (value) => {
            const radios = this.getRadios();
            // Get the first radio that is not disabled and the checked one
            const first = radios.find(radio => !radio.disabled);
            const checked = radios.find(radio => radio.value === value && !radio.disabled);
            if (!first && !checked) {
                return;
            }
            // If an enabled checked radio exists, set it to be the focusable radio
            // otherwise we default to focus the first radio
            const focusable = checked || first;
            for (const radio of radios) {
                const tabindex = radio === focusable ? 0 : -1;
                radio.setButtonTabindex(tabindex);
            }
        };
        /**
         * EVENT BINDING
         * ------------------------------------------------------
         */
        this.onClick = (ev) => {
            const element = ev.target;
            if (element.href) {
                return;
            }
            ev.preventDefault();
            const selectedRadio = ev.target && ev.target.closest('bal-radio');
            if (selectedRadio && !selectedRadio.disabled && !selectedRadio.readonly) {
                const currentValue = this.value;
                const newValue = selectedRadio.value;
                if (newValue !== currentValue) {
                    this.value = newValue;
                }
                else if (this.allowEmptySelection) {
                    this.value = undefined;
                }
                this.balChange.emit(this.value);
            }
        };
    }
    createLogger(log) {
        this.log = log;
    }
    async optionChanged() {
        this.onOptionChange();
        this.mutationObserverActive = this.options === undefined;
    }
    invalidChanged(value) {
        if (value !== undefined) {
            this.getRadios().forEach(radio => {
                radio.invalid = value;
            });
        }
    }
    disabledChanged(value) {
        if (value !== undefined) {
            this.getRadios().forEach(radio => {
                radio.disabled = value;
            });
        }
    }
    readonlyChanged(value) {
        if (value !== undefined) {
            this.getRadios().forEach(radio => {
                radio.readonly = value;
            });
        }
    }
    valueChanged() {
        this.onOptionChange();
    }
    columnsChanged(value) {
        this.getRadios().forEach(radio => (radio.colSize = value));
    }
    columnsTabletChanged(value) {
        this.getRadios().forEach(radio => (radio.colSizeTablet = value));
    }
    columnsMobileChanged(value) {
        this.getRadios().forEach(radio => (radio.colSizeMobile = value));
    }
    /**
     * LIFECYCLE
     * ------------------------------------------------------
     */
    connectedCallback() {
        this.initialValue = this.value;
        this.mutationObserverActive = this.options === undefined;
    }
    componentWillLoad() {
        this.setRadioInterface();
        this.disabledChanged(this.disabled);
        this.readonlyChanged(this.readonly);
        this.invalidChanged(this.invalid);
        this.columnsChanged(this.columns);
        this.columnsTabletChanged(this.columnsTablet);
        this.columnsMobileChanged(this.columnsMobile);
        this.onOptionChange();
        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title']);
    }
    focusInListener(ev) {
        this.balFocus.emit(ev);
    }
    focusOutListener(ev) {
        this.balBlur.emit(ev);
    }
    mutationListener() {
        this.setRadioInterface();
        this.disabledChanged(this.disabled);
        this.readonlyChanged(this.readonly);
        this.invalidChanged(this.invalid);
        this.columnsChanged(this.columns);
        this.columnsTabletChanged(this.columnsTablet);
        this.columnsMobileChanged(this.columnsMobile);
        this.onOptionChange();
    }
    listenOnClick(ev) {
        if (isDescendant(this.el, ev.target)) {
            stopEventBubbling(ev);
        }
    }
    radioFocusListener(ev) {
        const { target } = ev;
        if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-radio')) {
            stopEventBubbling(ev);
        }
    }
    radioBlurListener(ev) {
        const { target } = ev;
        if (target && isDescendant(this.el, target) && hasTagName(target, 'bal-radio')) {
            stopEventBubbling(ev);
        }
    }
    resetListener(ev) {
        const formElement = ev.target;
        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.el)) {
            this.value = this.initialValue;
        }
    }
    onKeydown(ev) {
        if (ev.target && !this.el.contains(ev.target)) {
            return;
        }
        // Get all radios inside of the radio group and then
        // filter out disabled radios since we need to skip those
        const radios = this.getRadios().filter(radio => !radio.disabled);
        const targetRadio = ev.target.closest('bal-radio');
        // Only move the radio if the current focus is in the radio group
        if (targetRadio && radios.includes(targetRadio)) {
            const index = radios.findIndex(radio => radio === targetRadio);
            const current = radios[index];
            let next;
            // If hitting arrow down or arrow right, move to the next radio
            // If we're on the last radio, move to the first radio
            if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
                next = index === radios.length - 1 ? radios[0] : radios[index + 1];
            }
            // If hitting arrow up or arrow left, move to the previous radio
            // If we're on the first radio, move to the last radio
            if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
                next = index === 0 ? radios[radios.length - 1] : radios[index - 1];
            }
            if (next && radios.includes(next)) {
                next.setFocus(ev);
                this.value = next.value;
                this.balChange.emit(this.value);
            }
            // Update the radio group value when a user presses the
            // space bar on top of a selected radio
            if (['Space'].includes(ev.code)) {
                this.value = this.allowEmptySelection && this.value !== undefined ? undefined : current.value;
                this.balChange.emit(this.value);
                // Prevent browsers from jumping
                // to the bottom of the screen
                ev.preventDefault();
            }
        }
    }
    /**
     * PUBLIC METHODS
     * ------------------------------------------------------
     */
    /** @internal */
    async setValue(value) {
        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);
    }
    setRadioInterface() {
        this.getRadios().forEach((radio) => {
            if (this.interface) {
                radio.interface = this.interface;
            }
        });
    }
    setRadioChecked() {
        this.getRadios().forEach((radio) => {
            if (radio.updateState) {
                radio.updateState();
            }
        });
    }
    /**
     * GETTERS
     * ------------------------------------------------------
     */
    getRadios() {
        return Array.from(this.el.querySelectorAll('bal-radio'));
    }
    /**
     * RENDER
     * ------------------------------------------------------
     */
    render() {
        const block = BEM.block('radio-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: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), 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-radio", { key: option.value, name: option.name || this.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-radio-group'),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Function]),
    __metadata("design:returntype", void 0)
], RadioGroup.prototype, "createLogger", null);
__decorate([
    ListenToFocus(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], RadioGroup.prototype, "focusInListener", null);
__decorate([
    ListenToFocus(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Object]),
    __metadata("design:returntype", void 0)
], RadioGroup.prototype, "focusOutListener", null);
__decorate([
    ListenToMutation({ tags: ['bal-radio-group', 'bal-radio'], attributes: false, characterData: false }),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], RadioGroup.prototype, "mutationListener", null);
let radioGroupIds = 0;
RadioGroup.style = balRadioGroupCss;

const balRadioIconCss = ":root{--bal-radio-icon-size:1.5rem;--bal-radio-icon-border-width:2px;--bal-radio-icon-border-radius:var(--bal-radius-rounded);--bal-radio-icon-inner-width:0.375rem;--bal-radio-icon-inner-height:0.375rem;--bal-radio-icon-inner-background-checked:white;--bal-radio-icon-color-inverted:var(--bal-color-white);--bal-radio-icon-border-color:var(--bal-color-primary);--bal-radio-icon-border-color-hovered:var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-pressed:var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-checked:var(--bal-color-primary);--bal-radio-icon-border-color-checked-hovered:var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-checked-pressed:var(--bal-color-border-primary-pressed);--bal-radio-icon-background:transparent;--bal-radio-icon-background-hovered:var(--bal-color-grey-2);--bal-radio-icon-background-pressed:var(--bal-color-grey-2);--bal-radio-icon-background-checked:var(--bal-color-primary);--bal-radio-icon-background-checked-hovered:var(--bal-color-border-primary-hovered);--bal-radio-icon-background-checked-pressed:var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-invalid:var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-hovered:var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-pressed:var(--bal-color-border-danger-pressed);--bal-radio-icon-border-color-invalid-checked:var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-radio-icon-background-invalid:transparent;--bal-radio-icon-background-invalid-hovered:var(--bal-color-danger-1);--bal-radio-icon-background-invalid-pressed:var(--bal-color-danger-1);--bal-radio-icon-background-invalid-checked:var(--bal-color-border-danger);--bal-radio-icon-background-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-radio-icon-background-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-radio-icon-background-disabled:var(--bal-color-grey-2);--bal-radio-icon-border-color-disabled:var(--bal-color-border-grey-dark);--bal-radio-icon-background-checked-disabled:var(--bal-color-border-grey-dark);--bal-radio-icon-border-color-checked-disabled:var(--bal-color-border-grey-dark)}.bal-radio-icon{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-radio-icon-size);max-width:var(--bal-radio-icon-size);height:var(--bal-radio-icon-size);max-height:var(--bal-radio-icon-size);border-radius:var(--bal-radio-icon-border-radius);overflow:hidden;border:var(--bal-radio-icon-border-width) solid var(--bal-radio-icon-border-color);background-color:var(--bal-radio-icon-background)}@media (hover: hover)and (pointer: fine){.bal-radio-icon--hovered,.bal-radio-icon:hover{background:var(--bal-radio-icon-background-hovered);border-color:var(--bal-radio-icon-border-color-hovered)}}.bal-radio-icon--pressed,.bal-radio-icon:active{background:var(--bal-radio-icon-background-pressed);border-color:var(--bal-radio-icon-border-color-pressed)}.bal-radio-icon:after{display:block;content:\"\";background-color:rgba(0,0,0,0);border-radius:var(--bal-radio-icon-border-radius);width:var(--bal-radio-icon-inner-width, 0.375rem);height:var(--bal-radio-icon-inner-height, 0.375rem)}.bal-radio-icon bal-icon{opacity:0}.bal-radio-icon--checked:after{background-color:var(--bal-radio-icon-inner-background-checked)}.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked);border-color:var(--bal-radio-icon-border-color-checked)}.bal-radio-icon--checked bal-icon{opacity:1}@media (hover: hover)and (pointer: fine){.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--checked:hover{background:var(--bal-radio-icon-background-checked-hovered);border-color:var(--bal-radio-icon-border-color-checked-hovered)}}.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--checked:active{background:var(--bal-radio-icon-background-checked-pressed);border-color:var(--bal-radio-icon-border-color-checked-pressed)}.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--invalid{border-color:var(--bal-radio-icon-border-color-invalid);background-color:var(--bal-radio-icon-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--hovered,.bal-radio-icon--invalid:hover{background-color:var(--bal-radio-icon-background-invalid-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--pressed,.bal-radio-icon--invalid:active{background-color:var(--bal-radio-icon-background-invalid-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked{border-color:var(--bal-radio-icon-border-color-invalid);background:var(--bal-radio-icon-background-invalid-checked)}@media (hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--invalid.bal-radio-icon--checked:hover{background-color:var(--bal-radio-icon-background-invalid-checked-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--invalid.bal-radio-icon--checked:active{background-color:var(--bal-radio-icon-background-invalid-checked-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--disabled{cursor:default !important;background:var(--bal-radio-icon-background-disabled) !important;border-color:var(--bal-radio-icon-border-color-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked-disabled) !important;border-color:var(--bal-radio-icon-border-color-checked-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted) !important}";

const RadioIcon = class {
    constructor(hostRef) {
        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.block('radio-icon');
        const checked = !!this.checked;
        const disabled = !!this.disabled;
        const invalid = !!this.invalid;
        const inverted = !!this.inverted;
        return (h(Host, { key: '161bc840e553656a11a4f6c9aaedfa554dcdcf01', 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)) }));
    }
};
RadioIcon.style = balRadioIconCss;

export { Radio as bal_radio, RadioGroup as bal_radio_group, RadioIcon as bal_radio_icon };
