@baloise/ds-core 19.3.0 → 19.4.0

package/dist/cjs/bal-radio_2.cjs.entry.js

@@ -1,40 +1,43 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const index_esm = require('./index.esm-a38eebac.js');
-const aria = require('./aria-7672033f.js');
-const attributes = require('./attributes-11acd153.js');
-const bem = require('./bem-81bc6a2d.js');
-const focusVisible = require('./focus-visible-a434c91f.js');
-const form = require('./form-17c98ac2.js');
-const formInput = require('./form-input-e9974433.js');
-const helpers = require('./helpers-debb881a.js');
-const log = require('./log-33398c2a.js');
-const elementStates_decorator = require('./element-states.decorator-aa5126e2.js');
-const focus_decorator = require('./focus.decorator-14a4a576.js');
-const mutation_decorator = require('./mutation.decorator-485e250e.js');
-require('./index-3b7f8988.js');
-require('./_commonjsHelpers-68cdf74f.js');
-require('./index-758765f7.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
-require('./listener-52d2e5fd.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var index_esm = require('./index.esm-CKDqUwIC.js');
+var aria = require('./aria-BzkqcV7W.js');
+var attributes = require('./attributes-Cp0kpySW.js');
+var bem = require('./bem-p0PWVN8n.js');
+var elementStates_decorator = require('./element-states.decorator-DGQNhvD6.js');
+var focusVisible = require('./focus-visible-DFZa8IIA.js');
+var form = require('./form-BSlIiqcR.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var focus_decorator = require('./focus.decorator-DFy3pFaT.js');
+var mutation_decorator = require('./mutation.decorator-DyFafPfX.js');
+require('./index-BZ67Dcnb.js');
+require('./_commonjsHelpers-BJu3ubxk.js');
+require('./index-BobQkZjn.js');
+require('./index-C413E-IK.js');
+require('./index-ifu9fMyU.js');
+require('./listener-t3ifJtK5.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 BalRadioStyle0 = balRadioCss;
 
 const Radio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balFocus = index.createEvent(this, "balFocus", 7);
-        this.balBlur = index.createEvent(this, "balBlur", 7);
-        this.balChange = index.createEvent(this, "balChange", 7);
+        this.balFocus = index.createEvent(this, "balFocus");
+        this.balBlur = index.createEvent(this, "balBlur");
+        this.balChange = index.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 = form.defaultBalAriaForm;
         this.outerElementState = {
             hovered: false,
             pressed: false,
@@ -43,6 +46,74 @@ const Radio = class {
             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);
@@ -91,32 +162,6 @@ const Radio = class {
             }
             this.keyboardMode = focusVisible.FOCUS_KEYS.includes(ev.key);
         };
-        this.wasFocused = false;
-        this.checked = false;
-        this.focused = false;
-        this.buttonTabindex = undefined;
-        this.ariaForm = form.defaultBalAriaForm;
-        this.mergedElementState = {
-            hovered: false,
-            pressed: false,
-        };
-        this.name = this.inputId;
-        this.value = undefined;
-        this.label = '';
-        this.labelHidden = false;
-        this.flat = false;
-        this.interface = 'radio';
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.nonSubmit = false;
-        this.invalid = false;
-        this.hovered = false;
-        this.pressed = false;
-        this.color = undefined;
-        this.colSize = 1;
-        this.colSizeTablet = 1;
-        this.colSizeMobile = 1;
     }
     createLogger(log) {
         this.log = log;
@@ -177,7 +222,7 @@ const Radio = class {
     listenOnClick(ev) {
         if ((this.disabled || this.readonly) &&
             ev.target &&
-            (ev.target === this.el || helpers.isDescendant(this.el, ev.target))) {
+            (ev.target === this.el || index.isDescendant(this.el, ev.target))) {
             formInput.stopEventBubbling(ev);
         }
     }
@@ -312,7 +357,7 @@ const Radio = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-radio'),
+    index.Logger('bal-radio'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -324,19 +369,71 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], Radio.prototype, "elementStateListener", null);
 let radioIds = 0;
-Radio.style = BalRadioStyle0;
+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 BalRadioGroupStyle0 = balRadioGroupCss;
 
 const RadioGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balFocus = index.createEvent(this, "balFocus", 7);
-        this.balBlur = index.createEvent(this, "balBlur", 7);
+        this.balChange = index.createEvent(this, "balChange");
+        this.balFocus = index.createEvent(this, "balFocus");
+        this.balBlur = index.createEvent(this, "balBlur");
         this.inputId = `bal-rg-${radioGroupIds++}`;
         this.inheritedAttributes = {};
+        this.ariaForm = form.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
          * ------------------------------------------------------
@@ -390,22 +487,6 @@ const RadioGroup = class {
                 this.balChange.emit(this.value);
             }
         };
-        this.ariaForm = form.defaultBalAriaForm;
-        this.options = undefined;
-        this.interface = undefined;
-        this.allowEmptySelection = false;
-        this.name = this.inputId;
-        this.vertical = false;
-        this.verticalOnMobile = false;
-        this.expanded = false;
-        this.invalid = undefined;
-        this.disabled = undefined;
-        this.readonly = undefined;
-        this.value = undefined;
-        this.columns = 1;
-        this.columnsTablet = 1;
-        this.columnsMobile = 1;
-        this.autoInvalidOff = false;
     }
     createLogger(log) {
         this.log = log;
@@ -483,19 +564,19 @@ const RadioGroup = class {
         this.onOptionChange();
     }
     listenOnClick(ev) {
-        if (helpers.isDescendant(this.el, ev.target)) {
+        if (index.isDescendant(this.el, ev.target)) {
             formInput.stopEventBubbling(ev);
         }
     }
     radioFocusListener(ev) {
         const { target } = ev;
-        if (target && helpers.isDescendant(this.el, target) && helpers.hasTagName(target, 'bal-radio')) {
+        if (target && index.isDescendant(this.el, target) && index.hasTagName(target, 'bal-radio')) {
             formInput.stopEventBubbling(ev);
         }
     }
     radioBlurListener(ev) {
         const { target } = ev;
-        if (target && helpers.isDescendant(this.el, target) && helpers.hasTagName(target, 'bal-radio')) {
+        if (target && index.isDescendant(this.el, target) && index.hasTagName(target, 'bal-radio')) {
             formInput.stopEventBubbling(ev);
         }
     }
@@ -618,7 +699,7 @@ const RadioGroup = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-radio-group'),
+    index.Logger('bal-radio-group'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -642,7 +723,7 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], RadioGroup.prototype, "mutationListener", null);
 let radioGroupIds = 0;
-RadioGroup.style = BalRadioGroupStyle0;
+RadioGroup.style = balRadioGroupCss;
 
 exports.bal_radio = Radio;
 exports.bal_radio_group = RadioGroup;

package/dist/cjs/bal-segment_2.cjs.entry.js

@@ -1,40 +1,67 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const focusVisible = require('./focus-visible-a434c91f.js');
-const form = require('./form-17c98ac2.js');
-const formInput = require('./form-input-e9974433.js');
-const helpers = require('./helpers-debb881a.js');
-const log = require('./log-33398c2a.js');
-const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
-const focus_decorator = require('./focus.decorator-14a4a576.js');
-const animation_decorator = require('./animation.decorator-40bdfb52.js');
-const visibility_decorator = require('./visibility.decorator-a218aab9.js');
-const windowResize_decorator = require('./window-resize.decorator-56853e4c.js');
-const breakpoints_decorator = require('./breakpoints.decorator-881dd92d.js');
-const attributes = require('./attributes-11acd153.js');
-require('./browser-1d542d0f.js');
-require('./config.utils-df30e424.js');
-require('./listener-52d2e5fd.js');
-require('./breakpoints.subject-485cf660.js');
-require('./device-9f97a845.js');
-require('./tokens.esm-e14cedac.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var animation_decorator = require('./animation.decorator-BeUy1FNI.js');
+var bem = require('./bem-p0PWVN8n.js');
+require('./breakpoints.subject-CidQD5zH.js');
+var breakpoints_decorator = require('./breakpoints.decorator-DLXGwQpP.js');
+var focus_decorator = require('./focus.decorator-DFy3pFaT.js');
+var focusVisible = require('./focus-visible-DFZa8IIA.js');
+var form = require('./form-BSlIiqcR.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+var windowResize_decorator = require('./window-resize.decorator-4PWq713L.js');
+require('./window-resize.subject-GSXXkOcC.js');
+var visibility_decorator = require('./visibility.decorator-C7uDX3Z3.js');
+var attributes = require('./attributes-Cp0kpySW.js');
+require('./listener-t3ifJtK5.js');
+require('./device-CoI0V6AY.js');
+require('./tokens.esm-DU04pfsc.js');
 
 const balSegmentCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment{display:-ms-flexbox;display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{-ms-flex-direction:column;flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;-ms-flex:1;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{-ms-flex:1;flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
-const BalSegmentStyle0 = balSegmentCss;
 
 const Segment = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balFocus = index.createEvent(this, "balFocus", 7);
-        this.balBlur = index.createEvent(this, "balBlur", 7);
-        this.balChange = index.createEvent(this, "balChange", 7);
-        this.balSelect = index.createEvent(this, "balSelect", 7);
-        this.balVertical = index.createEvent(this, "balVertical", 7);
+        this.balFocus = index.createEvent(this, "balFocus");
+        this.balBlur = index.createEvent(this, "balBlur");
+        this.balChange = index.createEvent(this, "balChange");
+        this.balSelect = index.createEvent(this, "balSelect");
+        this.balVertical = index.createEvent(this, "balVertical");
+        this.keyboardMode = true;
+        this.isVertical = false;
+        this.isMobile = false;
+        this.maxWidth = 0;
+        this.ariaForm = form.defaultBalAriaForm;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true`, the segment is shown red.
+         */
+        this.invalid = false;
+        /**
+         * If `true`, in Angular reactive forms the control will not be set invalid
+         */
+        this.autoInvalidOff = false;
+        /**
+         * If `true`, the user cannot interact with the segment.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the segment items are presented vertical as a list.
+         */
+        this.vertical = false;
+        /**
+         * If `true`, and is vertical then the list height is limited and scrollable.
+         */
+        this.scrollable = false;
+        /**
+         * If `true`, the element uses the whole width
+         */
+        this.expanded = false;
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -102,19 +129,6 @@ const Segment = class {
                 this.emitValueChange();
             }
         };
-        this.focusedValue = undefined;
-        this.keyboardMode = true;
-        this.isVertical = false;
-        this.isMobile = false;
-        this.maxWidth = 0;
-        this.ariaForm = form.defaultBalAriaForm;
-        this.invalid = false;
-        this.autoInvalidOff = false;
-        this.disabled = false;
-        this.vertical = false;
-        this.scrollable = false;
-        this.expanded = false;
-        this.value = undefined;
     }
     createLogger(log) {
         this.log = log;
@@ -262,7 +276,7 @@ const Segment = class {
         }
     }
     defineWidth() {
-        helpers.raf(() => {
+        index.raf(() => {
             if (this.isVertical === false) {
                 const childRect = this.el.getBoundingClientRect();
                 this.maxWidth = childRect.width;
@@ -344,7 +358,7 @@ const Segment = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-segment'),
+    index.Logger('bal-segment'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -385,10 +399,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:paramtypes", []),
     tslib_es6.__metadata("design:returntype", void 0)
 ], Segment.prototype, "windowResizeListener", null);
-Segment.style = BalSegmentStyle0;
+Segment.style = balSegmentCss;
 
 const balSegmentItemCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment-item{display:block;position:relative;height:auto;text-decoration:none;text-overflow:ellipsis;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.bal-segment-item--disabled{cursor:default !important;pointer-events:none !important}.bal-segment-item__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:2.5rem;min-width:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1;padding-top:.375rem;padding-bottom:.375rem;padding-left:20px;padding-right:20px;outline:none;border-color:rgba(0,0,0,0);border-width:var(--bal-border-width-normal);border-style:solid;border-radius:var(--bal-radius-normal);background:rgba(0,0,0,0);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);color:var(--bal-segment-item-text-color);overflow:hidden;position:relative;contain:content;pointer-events:none;cursor:pointer;z-index:2}.bal-segment-item__button--vertical{padding-left:.75rem;padding-right:.75rem}.bal-segment-item__button span{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-regular)}.bal-segment-item__button{will-change:color,padding;-webkit-transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{content:\"\";position:absolute;background:var(--bal-segment-item-divider-background);border-radius:var(--bal-radius-normal)}.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{top:2px;bottom:2px;right:-1px;width:2px}.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{left:2px;right:2px;bottom:-1px;height:2px}.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{background:var(--bal-segment-item-divider-background-invalid)}.bal-segment-item__indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;border-radius:var(--bal-radius-normal);background:var(--bal-segment-item-indicator-background);top:0;left:0}.bal-segment-item__indicator--vertical{-webkit-transform-origin:top;transform-origin:top}.bal-segment-item__indicator--invalid{background:var(--bal-segment-item-indicator-background-invalid)}.bal-segment-item__indicator--background{min-width:100%;min-height:100%;-webkit-transform:none;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;-webkit-transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__indicator--checked{opacity:1}.bal-segment-item:active .bal-segment-item__indicator{min-width:calc(100% - 4px);min-height:calc(100% - 4px);top:2px !important;bottom:2px !important;left:2px !important;right:2px !important}.bal-segment-item__button__icon{position:absolute !important;opacity:0;width:0 !important;-webkit-transform:translateX(0.1rem);transform:translateX(0.1rem);pointer-events:none !important;cursor:inherit;will-change:transform,opacity}.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical){left:10px}.bal-segment-item__button__icon--vertical{right:10px}.bal-segment-item__button__icon--animated{opacity:1;width:.875rem !important;-webkit-transform:translateX(-4px);transform:translateX(-4px);-webkit-transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__button--checked{color:var(--bal-segment-item-text-color-checked);padding-right:40px}.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical){padding-left:26px;padding-right:12px}@media (hover: hover)and (pointer: fine){.bal-segment-item:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-hovered)}}.bal-segment-item:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-pressed)}.bal-segment--keyboard .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,.bal-segment--keyboard .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled){border-color:var(--bal-segment-item-focus-border);border-width:var(--bal-border-width-normal);border-style:solid;-webkit-transition:border 300ms ease-in-out;transition:border 300ms ease-in-out}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled) .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-hovered)}}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-pressed)}.bal-segment-item__button--invalid.bal-segment-item__button--checked{color:var(--bal-color-text-white)}.bal-segment-item__button--disabled{background:rgba(0,0,0,0);color:var(--bal-segment-item-text-color-disabled)}.bal-segment-item__button--disabled.bal-segment-item__button--checked{background:var(--bal-segment-item-indicator-background-disabled);color:var(--bal-segment-item-text-color-disabled-checked)}.bal-segment-item__button__slot--hidden{display:none !important}";
-const BalSegmentItemStyle0 = balSegmentItemCss;
 
 let SegmentItemIds = 0;
 const SegmentItem = class {
@@ -398,6 +411,39 @@ const SegmentItem = class {
         this.inheritedAttributes = {};
         this.internalId = SegmentItemIds++;
         this.inputId = `bal-si-${this.internalId}`;
+        this.hasSlotContent = false;
+        this.isFocusable = false;
+        this.isVertical = false;
+        this.isLast = false;
+        this.isFirst = false;
+        this.hasEmptyValue = true;
+        this.ariaForm = form.defaultBalAriaForm;
+        /**
+         * If `true`, the user cannot interact with the segment button.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the segment is shown in red.
+         */
+        this.invalid = false;
+        /**
+         * @internal
+         * Sets focus state for key navigation
+         */
+        this.focused = false;
+        /**
+         * @internal
+         * Sets checked state for key navigation
+         */
+        this.checked = false;
+        /**
+         * Label of the segment control
+         */
+        this.label = '';
+        /**
+         * The value of the segment button.
+         */
+        this.value = 'bal-si-' + this.internalId;
         this.updateVertical = (ev) => {
             this.isVertical = ev.detail;
         };
@@ -435,19 +481,6 @@ const SegmentItem = class {
              */
             this.checkSlotContent();
         };
-        this.hasSlotContent = false;
-        this.isFocusable = false;
-        this.isVertical = false;
-        this.isLast = false;
-        this.isFirst = false;
-        this.hasEmptyValue = true;
-        this.ariaForm = form.defaultBalAriaForm;
-        this.disabled = false;
-        this.invalid = false;
-        this.focused = false;
-        this.checked = false;
-        this.label = '';
-        this.value = 'bal-si-' + this.internalId;
     }
     valueChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
@@ -466,10 +499,10 @@ const SegmentItem = class {
     componentDidLoad() {
         const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
         if (segmentEl) {
-            helpers.addEventListener(segmentEl, 'balSelect', this.updateState);
-            helpers.addEventListener(segmentEl, 'balVertical', this.updateVertical);
+            index.addEventListener(segmentEl, 'balSelect', this.updateState);
+            index.addEventListener(segmentEl, 'balVertical', this.updateVertical);
         }
-        helpers.raf(() => {
+        index.raf(() => {
             this.checkSlotContent();
             this.updateState();
         });
@@ -477,8 +510,8 @@ const SegmentItem = class {
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
         if (segmentEl) {
-            helpers.removeEventListener(segmentEl, 'balSelect', this.updateState);
-            helpers.removeEventListener(segmentEl, 'balVertical', this.updateVertical);
+            index.removeEventListener(segmentEl, 'balSelect', this.updateState);
+            index.removeEventListener(segmentEl, 'balVertical', this.updateVertical);
             this.segmentEl = null;
         }
     }
@@ -547,7 +580,7 @@ const SegmentItem = class {
         "value": ["valueChanged"]
     }; }
 };
-SegmentItem.style = BalSegmentItemStyle0;
+SegmentItem.style = balSegmentItemCss;
 
 exports.bal_segment = Segment;
 exports.bal_segment_item = SegmentItem;