@baloise/ds-core 19.3.0-nightly.20250704 → 19.3.0

package/dist/esm/bal-radio-icon.entry.js

@@ -1,38 +1,17 @@
-import { H as registerInstance, M as h, N as Host } from './index-DgPiq0y0.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
+import { r as registerInstance, h, H as Host } from './index-8d2a7ce7.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
 
 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-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:.375rem;height:.375rem}.bal-radio-icon bal-icon{opacity:0}.bal-radio-icon--checked:after{background-color:#fff}.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 BalRadioIconStyle0 = balRadioIconCss;
 
 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;
     }
     /**
@@ -48,6 +27,6 @@ const RadioIcon = class {
         return (h(Host, { key: '903ec682257c7182c7e611b7f950eb95aa27498e', 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;
+RadioIcon.style = BalRadioIconStyle0;
 
 export { RadioIcon as bal_radio_icon };

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

@@ -1,41 +1,36 @@
-import { L as Logger, H as registerInstance, P as createEvent, t as isDescendant, M as h, N as Host, O as getElement, Z as hasTagName } from './index-DgPiq0y0.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 { L as ListenToElementStates } from './element-states.decorator-Dk8OIOdm.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-DyU_I7Nf.js';
-import { L as ListenToFocus } from './focus.decorator-MIxVqnNR.js';
-import { L as ListenToMutation } from './mutation.decorator-CFRV3n5T.js';
-import './index-zWZxKBfo.js';
-import './_commonjsHelpers-BFTU3MAI.js';
-import './index-B4k_dH6V.js';
-import './index-BU7FUSdu.js';
-import './index-D6JOtC1P.js';
-import './listener-BRXdr5Mk.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { i as isSpaceKey } from './index.esm-9079680d.js';
+import { a as ariaBooleanToString } from './aria-ea150568.js';
+import { i as inheritAttributes } from './attributes-a3e70948.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { F as FOCUS_KEYS } from './focus-visible-c1d6b5b8.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
+import { s as stopEventBubbling, c as inputSetFocus, d as inputSetBlur } from './form-input-1ebdb905.js';
+import { i as isDescendant, v as hasTagName } from './helpers-51d51cc5.js';
+import { L as Logger } from './log-dfd1c19f.js';
+import { L as ListenToElementStates } from './element-states.decorator-d99dc83c.js';
+import { L as ListenToFocus } from './focus.decorator-988245d7.js';
+import { L as ListenToMutation } from './mutation.decorator-6a69cedb.js';
+import './index-95ee0c4b.js';
+import './_commonjsHelpers-1c8beb5f.js';
+import './index-bba06972.js';
+import './browser-a8073d92.js';
+import './config.utils-f3793464.js';
+import './listener-04842ae9.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) {
         registerInstance(this, hostRef);
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.balChange = createEvent(this, "balChange");
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.balChange = createEvent(this, "balChange", 7);
         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,
@@ -44,74 +39,6 @@ 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);
@@ -160,6 +87,32 @@ const Radio = class {
             }
             this.keyboardMode = FOCUS_KEYS.includes(ev.key);
         };
+        this.wasFocused = false;
+        this.checked = false;
+        this.focused = false;
+        this.buttonTabindex = undefined;
+        this.ariaForm = 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;
@@ -367,71 +320,19 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Radio.prototype, "elementStateListener", null);
 let radioIds = 0;
-Radio.style = balRadioCss;
+Radio.style = BalRadioStyle0;
 
 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) {
         registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange");
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
+        this.balChange = createEvent(this, "balChange", 7);
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
         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
          * ------------------------------------------------------
@@ -485,6 +386,22 @@ const RadioGroup = class {
                 this.balChange.emit(this.value);
             }
         };
+        this.ariaForm = 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;
@@ -721,6 +638,6 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], RadioGroup.prototype, "mutationListener", null);
 let radioGroupIds = 0;
-RadioGroup.style = balRadioGroupCss;
+RadioGroup.style = BalRadioGroupStyle0;
 
 export { Radio as bal_radio, RadioGroup as bal_radio_group };

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

@@ -1,65 +1,36 @@
-import { L as Logger, H as registerInstance, P as createEvent, Q as raf, V as writeTask, M as h, N as Host, O as getElement, R as addEventListener, S as removeEventListener } from './index-DgPiq0y0.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
-import { L as ListenToAnimation } from './animation.decorator-BRrK54mN.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
-import './breakpoints.subject-D2jditew.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-B9fGMzyI.js';
-import { L as ListenToFocus } from './focus.decorator-MIxVqnNR.js';
-import { F as FOCUS_KEYS } from './focus-visible-DqCbGYzv.js';
-import { d as defaultBalAriaForm } from './form-FCLKfv6B.js';
-import { s as stopEventBubbling } from './form-input-DyU_I7Nf.js';
-import { d as isSpaceKey, b as isEnterKey, a as isArrowUpKey, e as isArrowLeftKey, i as isArrowDownKey, f as isArrowRightKey, g as isHomeKey, h as isEndKey } from './keyboard.helpers-D1VPLQ5z.js';
-import { L as ListenToWindowResize } from './window-resize.decorator-B1fuKglH.js';
-import './window-resize.subject-Dl0mHA8u.js';
-import { L as ListenToVisibility } from './visibility.decorator-B1BbAwZf.js';
-import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
-import './listener-BRXdr5Mk.js';
-import './device-dF5vUTps.js';
-import './tokens.esm-B0bmgb-_.js';
+import { r as registerInstance, c as createEvent, w as writeTask, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { F as FOCUS_KEYS } from './focus-visible-c1d6b5b8.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
+import { s as stopEventBubbling } from './form-input-1ebdb905.js';
+import { o as raf, l as addEventListener, r as removeEventListener } from './helpers-51d51cc5.js';
+import { L as Logger } from './log-dfd1c19f.js';
+import { d as isSpaceKey, b as isEnterKey, a as isArrowUpKey, e as isArrowLeftKey, i as isArrowDownKey, f as isArrowRightKey, g as isHomeKey, h as isEndKey } from './keyboard.helpers-159e517d.js';
+import { L as ListenToFocus } from './focus.decorator-988245d7.js';
+import { L as ListenToAnimation } from './animation.decorator-7fca988f.js';
+import { L as ListenToVisibility } from './visibility.decorator-5db91610.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-03b1ed50.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-4de4315f.js';
+import { i as inheritAttributes } from './attributes-a3e70948.js';
+import './browser-a8073d92.js';
+import './config.utils-f3793464.js';
+import './listener-04842ae9.js';
+import './breakpoints.subject-2f68e834.js';
+import './device-8c6d2881.js';
+import './tokens.esm-4409ffbb.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) {
         registerInstance(this, hostRef);
-        this.balFocus = createEvent(this, "balFocus");
-        this.balBlur = createEvent(this, "balBlur");
-        this.balChange = createEvent(this, "balChange");
-        this.balSelect = createEvent(this, "balSelect");
-        this.balVertical = createEvent(this, "balVertical");
-        this.keyboardMode = true;
-        this.isVertical = false;
-        this.isMobile = false;
-        this.maxWidth = 0;
-        this.ariaForm = 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;
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.balChange = createEvent(this, "balChange", 7);
+        this.balSelect = createEvent(this, "balSelect", 7);
+        this.balVertical = createEvent(this, "balVertical", 7);
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -127,6 +98,19 @@ const Segment = class {
                 this.emitValueChange();
             }
         };
+        this.focusedValue = undefined;
+        this.keyboardMode = true;
+        this.isVertical = false;
+        this.isMobile = false;
+        this.maxWidth = 0;
+        this.ariaForm = 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;
@@ -397,9 +381,10 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "windowResizeListener", null);
-Segment.style = balSegmentCss;
+Segment.style = BalSegmentStyle0;
 
 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 {
@@ -409,39 +394,6 @@ 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 = 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;
         };
@@ -479,6 +431,19 @@ 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 = 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) {
@@ -578,6 +543,6 @@ const SegmentItem = class {
         "value": ["valueChanged"]
     }; }
 };
-SegmentItem.style = balSegmentItemCss;
+SegmentItem.style = BalSegmentItemStyle0;
 
 export { Segment as bal_segment, SegmentItem as bal_segment_item };