@baloise/ds-core 19.7.1 → 19.8.0-snapshot.1820-04df76e73

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

@@ -1,25 +1,25 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
-var animation_decorator = require('./animation.decorator-BIwrHnDv.js');
+var animation_decorator = require('./animation.decorator-DkIZPLa4.js');
 var bem = require('./bem-p0PWVN8n.js');
-require('./breakpoints.subject-Cezf6Hiu.js');
-var breakpoints_decorator = require('./breakpoints.decorator-D5xcljb0.js');
-var focus_decorator = require('./focus.decorator-DvDiL-cw.js');
+require('./breakpoints.subject-pRs2D906.js');
+var breakpoints_decorator = require('./breakpoints.decorator-79hdkcrr.js');
+var focus_decorator = require('./focus.decorator-CZBwf9wi.js');
 var focusVisible = require('./focus-visible-DFZa8IIA.js');
 var form = require('./form-BSlIiqcR.js');
-var formInput = require('./form-input-xt5ySNzH.js');
+var formInput = require('./form-input-CbbTIRR8.js');
 var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
-var windowResize_decorator = require('./window-resize.decorator-BWgUlK-I.js');
-require('./window-resize.subject-C4q-vmkp.js');
-var visibility_decorator = require('./visibility.decorator-CtF4tHb1.js');
+var windowResize_decorator = require('./window-resize.decorator-CdVeejME.js');
+require('./window-resize.subject-Cf8cq9sV.js');
+var visibility_decorator = require('./visibility.decorator-BSjbt_5t.js');
 var attributes = require('./attributes-Cp0kpySW.js');
-require('./listener-eTGFjyDz.js');
-require('./device-D_5TdgdC.js');
-require('./tokens.esm-DM_5VKOq.js');
+require('./listener-DF05gYXF.js');
+require('./device-DsW7kV5n.js');
+require('./tokens.esm-BKrVe6he.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 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-body-color);--bal-segment-item-text-color-checked:var(--bal-body-color);--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 Segment = class {
     constructor(hostRef) {
@@ -349,7 +349,7 @@ const Segment = class {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = bem.BEM.block('segment');
-        return (index.h(index.Host, { key: '6a865befe5aedec24d5ae099fb90cbbb207ae074', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, index.h("slot", { key: 'a7cde4e933396438d919bc03535ac56ee2780e20', onSlotchange: this.onSlottedItemsChange })));
+        return (index.h(index.Host, { key: '5ee36ef41fd3e9f9467955506f660e48e6b479d9', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, index.h("slot", { key: '75d585d050944a7764c809d55924671083187692', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -402,7 +402,7 @@ tslib_es6.__decorate([
 ], Segment.prototype, "windowResizeListener", null);
 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 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-body-color);--bal-segment-item-text-color-checked:var(--bal-body-color);--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-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-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}";
 
 let SegmentItemIds = 0;
 const SegmentItem = class {
@@ -574,7 +574,7 @@ const SegmentItem = class {
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (index.h(index.Host, { key: '55e0754b091fb723f2e5d90f7bdb50190abbea52', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, index.h("button", Object.assign({ key: '8b7d3b58c59e02b98eeb131696fc0b0540780353', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), index.h("bal-icon", { key: 'a8da51b21fe49d7e7dc56d1089710a905ebf5df7', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), index.h("bal-stack", { key: '47d5eb2ef471654c05343ae83b4ac2b4fb0e9839', space: "x-small", layout: 'horizontal' }, index.h("bal-content", { key: '833e34ce4261d88906d220ac92acf68691aa5d88', space: "none" }, index.h("bal-label", { key: 'a7fffd217d6823c4234c76f2e4a7fc645148a453', htmlId: `bal-si-${this.internalId}-label` }, label), index.h("span", { key: '695a0cf23d40a0b19ef4a76248838b27dbe481be', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', index.h("slot", { key: '2fb05a58ea4850f5196804f69fb0d84e3dc1145e', onSlotchange: this.onSlottedItemsChange }))))), index.h("div", { key: 'a6b5024e4e04af2be2d7830a656bdf0c2cb213a1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+        return (index.h(index.Host, { key: 'a6a61e3339b5d03770243c20346f9bafdb6bedc5', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, index.h("button", Object.assign({ key: 'a78d765adcac3e0375ca53b53f3d241634021517', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), index.h("bal-icon", { key: 'f029351aea2b372df532599247be187233ee6b15', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), index.h("bal-stack", { key: 'ec9ffa5e9d2862037fc7317739d9db00f80c5e44', space: "x-small", layout: 'horizontal' }, index.h("bal-content", { key: 'f0701161053b8ef8a6936bb2eca44a42861d6291', space: "none" }, index.h("bal-label", { key: 'e41da682352e552d391121e4982e76548a58e4e3', htmlId: `bal-si-${this.internalId}-label` }, label), index.h("span", { key: '7622ef0e5a57ade0ff6083ff1cf90d0052cefce8', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', index.h("slot", { key: '00b60da405e8851d2eb74ad0bc84fb30cfdf65e0', onSlotchange: this.onSlottedItemsChange }))))), index.h("div", { key: 'd352c73452902b703e9b5bb3e2586e79bde451de', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
 var index$1 = require('./index-BZ67Dcnb.js');
 var aria = require('./aria-BzkqcV7W.js');
 var array = require('./array-Db63Hhl1.js');
+var attributes = require('./attributes-Cp0kpySW.js');
 var bem = require('./bem-p0PWVN8n.js');
 var form = require('./form-BSlIiqcR.js');
-var formInput = require('./form-input-xt5ySNzH.js');
+var formInput = require('./form-input-CbbTIRR8.js');
 var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
 var utils = require('./utils-Bl0u6rg1.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
@@ -33,7 +34,7 @@ const watchForOptions = (containerEl, tagName, onChange) => {
     return mutation;
 };
 
-const balSelectCss = ":root{--bal-select-control-background:var(--bal-color-white);--bal-select-control-background-hover:var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-select-control-input-background:var(--bal-color-grey-1);--bal-select-control-native-input-background:transparent;--bal-select-control-native-input-background-hover:transparent;--bal-select-control-input-inverted-footer-background:transparent;--bal-select-control-input-inverted-footer-background-hover:transparent;--bal-select-control-input-multiple-background:transparent;--bal-select-control-input-multiple-background-read-only-selection:transparent;--bal-select-control-input-option-background:transparent;--bal-select-control-input-option-background-selected:var(--bal-color-primary-1);--bal-select-control-input-option-background-focused:var(--bal-color-grey-3);--bal-select-control-input-option-background-hover:var(--bal-color-grey-3);--bal-select-control-border-radius:var(--bal-form-field-control-radius);--bal-select-popover-border-color:var(--bal-color-grey-2);--bal-select-control-border-color:var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused:var(--bal-color-primary);--bal-select-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within:var(--bal-color-primary);--bal-select-option-border-top-color:var(--bal-color-grey-2);--bal-select-popover-empty-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color-focused:var(--bal-color-primary);--bal-select-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-select-option-content-label-text-color:var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{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-select__control{display:-ms-flexbox;display:flex;border-width:.125rem;border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;-webkit-box-shadow:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;-webkit-box-shadow:none !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);-ms-flex:1;flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:-moz-read-only{-moz-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only{-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}";
+const balSelectCss = ":root{--bal-select-control-background:var(--bal-color-white);--bal-select-control-background-hover:var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-select-control-input-background:var(--bal-form-field-control-background-hover);--bal-select-control-native-input-background:transparent;--bal-select-control-native-input-background-hover:transparent;--bal-select-control-input-inverted-footer-background:transparent;--bal-select-control-input-inverted-footer-background-hover:transparent;--bal-select-control-input-multiple-background:transparent;--bal-select-control-input-multiple-background-read-only-selection:transparent;--bal-select-control-input-option-background:transparent;--bal-select-control-input-option-background-selected:var(--bal-color-primary-1);--bal-select-control-input-option-background-focused:var(--bal-color-grey-3);--bal-select-control-input-option-background-hover:var(--bal-color-grey-3);--bal-select-control-border-radius:var(--bal-form-field-control-radius);--bal-select-popover-border-color:var(--bal-color-grey-2);--bal-select-control-border-color:var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused:var(--bal-color-primary);--bal-select-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within:var(--bal-color-primary);--bal-select-option-border-top-color:var(--bal-color-grey-2);--bal-select-popover-empty-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color-focused:var(--bal-color-primary);--bal-select-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-select-option-content-label-text-color:var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{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-select__control{display:-ms-flexbox;display:flex;border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;-webkit-box-shadow:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;-webkit-box-shadow:none !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);-ms-flex:1;flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:-moz-read-only{-moz-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only{-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}";
 
 const isHuman = true;
 const isNotHuman = false;
@@ -50,6 +51,7 @@ const Select = class {
         this.didInit = false;
         this.inputId = `bal-select-${selectIds++}`;
         this.initialValue = [];
+        this.inheritedAttributes = {};
         this.hasFocus = false;
         this.inputValue = '';
         this.focusIndex = -1;
@@ -297,6 +299,7 @@ const Select = class {
         });
     }
     componentWillLoad() {
+        this.inheritedAttributes = attributes.inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
         this.waitForOptionsAndThenUpdateRawValues();
         this.isInsideOfFooter();
         if (!index$1.isNil(this.rawValue) && this.options.size > 0 && utils.length(this.rawValue) === 1) {
@@ -772,7 +775,7 @@ const Select = class {
      */
     render() {
         var _a;
-        const Chip = (props) => (index.h("bal-tag", { key: '69e00b5d661f1917fb6cbcf8919a8ce9670a25dd', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (index.h("bal-tag", { key: 'ddb984b0edd1a0fbbad814a5d29c83ce7276a07a', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = utils.getValues(this.rawValue);
         const block = bem.BEM.block('select');
         const nativeEl = block.element('native');
@@ -786,19 +789,19 @@ const Select = class {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (index.h(index.Host, { key: '3d670b9aa3467ee96c65e2b1a98beda836cac095', role: "listbox", onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { key: '1d438d1034af395d0f99bed2443bb66de288bb0a', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { key: '8dc177324409d7bfdd75e3f375acd00c41ac11e8', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { key: 'eaa30ce518119e5ced60fc093e887167c4e83c69', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { key: '4c6b0c807a1c25712d128216909e137af0d3cbf8', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (index.h(index.Host, { key: '43659a2cc50a3585620a99974377c422d3e2f0f2', role: "listbox", onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { key: '5d2d9ab75815fbe0b2db6ea82261beac097ab111', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { key: '0c42dacf94a09088cbca90c527ff99bba37708fa', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { key: 'b1c5567689ad59809fa36559603761223368914b', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { key: '93632751c2b8b472578e80012934949069c4961c', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (index.h(Chip, { value: value }))), index.h("input", { key: '1d7fb70f81b7c0ae5fad2f77089ba2a8b04da050', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (index.h(Chip, { value: value }))), index.h("input", Object.assign({ key: '2d6b493fc30aa1e1a4355e94ba15f9d404372ba7', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) }, this.inheritedAttributes))), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { key: '756cb6d1ff62300a2b7b7d6c1250195da8fa3849', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { key: 'f861f2aed280b9a55b932239e546561769d085cc', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { key: '7f49f62da3e7a1edd769f41e43fddda83a50f52b', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { key: '0941cb2d8007029c663852d61913bb0ca926ce32', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }
@@ -833,7 +836,7 @@ const SelectOption = class {
         this.log = log;
     }
     render() {
-        return (index.h(index.Host, { key: 'c479330ac26bcb19ddd41e7a99e635bf3ffc6170', style: { display: 'none' } }, index.h("slot", { key: '009baaefc29d307403edb10160c694dcc8495164' })));
+        return (index.h(index.Host, { key: '8829db26394b32b2a00ba288a944358c3f4e39be', style: { display: 'none' } }, index.h("slot", { key: '4ba8e9b7bdf68609d2e0ca5185a4e71943e66bda' })));
     }
 };
 tslib_es6.__decorate([

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
+var tokens_esm = require('./tokens.esm-BKrVe6he.js');
 var bem = require('./bem-p0PWVN8n.js');
-var tokens_esm = require('./tokens.esm-DM_5VKOq.js');
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
 
@@ -57,11 +57,11 @@ const Shape = class {
     render() {
         const block = bem.BEM.block('shape');
         const shapes = [
-            index.h("g", { key: '7ffce26f2f8ff376d6f4a4281293b0cbce3d455e', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, index.h("g", { key: '7f37e580d4a84007d6cec7b29850252a71fbd7db', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, index.h("path", { key: '7e655256f9c76c6ed82b5dc1628d25065dc16161', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
-            index.h("g", { key: '8720ba7f09f080a1e94475e8db5b465d280cd1cc', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, index.h("g", { key: 'a471219e03f4af9f3b72ac7548e8a234fd798b41', id: "ae3574e0-2065-4681-8937-4318b8656147" }, index.h("path", { key: 'a0f545ab74264f3389f45ca3fbd8544427046216', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
-            index.h("g", { key: '3aabfd5d30f05b9ca4c03970a539bd4fce699d40', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, index.h("g", { key: 'cb78639d0529e2df4f8028c8838d3251ecdec578', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, index.h("path", { key: 'b891158c547001cf3a2af9a6752739d2002b2ad2', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
+            index.h("g", { key: 'f3d8b7f5467b02d0c279dd48f806f7ecdda43055', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, index.h("g", { key: '20989a8f4a0ffacd98d5ea3fb635b9bb57c283ea', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, index.h("path", { key: 'abe93f2fd25f250d863e91738929ed09b705dc22', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
+            index.h("g", { key: 'baab4800b5fd2e7b4da6354a8ea70977892f27e9', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, index.h("g", { key: '50b59b033a31199c8bfa1ffeb3dad71a8ec09939', id: "ae3574e0-2065-4681-8937-4318b8656147" }, index.h("path", { key: '7b8dcc70a852a9d19576339cb77001159eb459ff', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
+            index.h("g", { key: '49ce3b1e67abf972cf5d85fc4fd7179789dc7475', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, index.h("g", { key: '178eeae1141014cd9d350efa16127287f9b3e693', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, index.h("path", { key: '5ddcf393f950bfac964f513641488157e4cbc864', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
         ];
-        return (index.h(index.Host, { key: '12322c170148297bfb743e359817b27490530d9a', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, index.h("svg", { key: '701ece673d80f3096f3a447de10904f2f5560a37', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
+        return (index.h(index.Host, { key: '37c01095b5cb62aba5f08a63f68912c222f2455d', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, index.h("svg", { key: '1a3508b2371190cbd682acdc0b35eba831b1bb9e', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var bem = require('./bem-p0PWVN8n.js');
 
 const balSheetCss = ":root{--bal-sheet-radius:var(--bal-radius-large);--bal-sheet-background:var(--bal-color-white);--bal-sheet-shadow:var(--bal-shadow-normal);--bal-sheet-position-bottom:.5rem}.bal-sheet{display:block;position:fixed;bottom:var(--bal-sheet-position-bottom);left:0;right:0;width:100%;z-index:var(--bal-z-index-sticky);font-weight:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal)}.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{border-radius:var(--bal-sheet-radius);background:var(--bal-sheet-background);-webkit-box-shadow:var(--bal-sheet-shadow);box-shadow:var(--bal-sheet-shadow);padding:1rem}@media screen and (min-width: 769px),print{.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{padding:1rem 1.5rem}}";
@@ -18,7 +18,7 @@ const Sheet = class {
         const container = block.element('container');
         const containerInner = container.element('inner');
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
-        return (index.h(index.Host, { key: '75dd6a91f8ac6d45412ae20453935668cb571e7f', class: Object.assign({}, block.class()) }, index.h("div", { key: '75aa66d83f6a6330b9e3d36a703fb82ab11bd015', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, index.h("div", { key: 'd6a97321e5db3a2c8ba252fb845228ba6371de67', class: Object.assign({}, containerInner.class()) }, index.h("slot", { key: 'f16331a11a842d719d494fb72db56fe0423aeb05' })))));
+        return (index.h(index.Host, { key: '1277fe42a8e474e6e6e56524e80c172057409e68', class: Object.assign({}, block.class()) }, index.h("div", { key: '489dfea1ce595b5f39871bff43f2bb2183ee2d0e', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, index.h("div", { key: 'f8c101d9aeb9a4e95e4723c9a7d314b6117eaa99', class: Object.assign({}, containerInner.class()) }, index.h("slot", { key: 'd7c4dc1e3eb207ec9c34e8b1fd92aaa9301fcd16' })))));
     }
 };
 Sheet.style = balSheetCss;

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
 var bem = require('./bem-p0PWVN8n.js');
-var config_decorator = require('./config.decorator-CAhT6DB_.js');
+var config_decorator = require('./config.decorator-XDk29pJO.js');
 
-const balSpinnerCss = "bal-spinner,.bal-spinner{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;width:4rem}bal-spinner svg,.bal-spinner svg{-webkit-transform:unset !important;transform:unset !important}.bal-spinner--small{width:2rem}.bal-spinner--circle{margin:auto;border-width:.25rem;border-style:solid;border-color:var(--bal-color-grey);border-radius:50%;border-top-color:var(--bal-color-primary);width:1.5rem;height:1.5rem}.bal-spinner--circle.bal-spinner--small{width:1.125rem;height:1.125rem;border-width:.2rem}.bal-spinner--circle.bal-spinner--animated{-webkit-animation:spinner 1.6s linear infinite;animation:spinner 1.6s linear infinite}.bal-spinner--circle.bal-spinner--color-white{border-color:var(--bal-color-white);border-top-color:var(--bal-color-primary)}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+const balSpinnerCss = ":root{--bal-spinner-circle-background:var(--bal-color-grey);--bal-spinner-circle-progress:var(--bal-color-primary);--bal-spinner-circle-background-inverted:var(--bal-color-white);--bal-spinner-circle-progress-inverted:var(--bal-color-primary)}bal-spinner,.bal-spinner{text-align:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center;width:4rem}bal-spinner svg,.bal-spinner svg{-webkit-transform:unset !important;transform:unset !important}.bal-spinner--small{width:2rem}.bal-spinner--circle{margin:auto;border-width:.25rem;border-style:solid;border-color:var(--bal-spinner-circle-background);border-radius:50%;border-top-color:var(--bal-spinner-circle-progress);width:1.5rem;height:1.5rem}.bal-spinner--circle.bal-spinner--small{width:1.125rem;height:1.125rem;border-width:.2rem}.bal-spinner--circle.bal-spinner--animated{-webkit-animation:spinner 1.6s linear infinite;animation:spinner 1.6s linear infinite}.bal-spinner--circle.bal-spinner--color-white{border-color:var(--bal-spinner-circle-background-inverted);border-top-color:var(--bal-spinner-circle-progress-inverted)}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
 
 const Spinner = class {
     constructor(hostRef) {
@@ -156,7 +156,7 @@ const Spinner = class {
      */
     render() {
         const block = bem.BEM.block('spinner');
-        return (index.h(index.Host, { key: '61330569cf09ee4964ef809792f354d060419b62', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), block.modifier(`color-${this.color}`).class(this.variation === 'circle')), role: "progressbar", "aria-hidden": "true" }));
+        return (index.h(index.Host, { key: '6986ffee4141e4096ad7e62a704697c8dfb31c18', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), block.modifier(`color-${this.color}`).class(this.variation === 'circle')), role: "progressbar", "aria-hidden": "true" }));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
 var bem = require('./bem-p0PWVN8n.js');
 
@@ -83,7 +83,7 @@ const Stack = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (index.h(index.Host, { key: '221668cc1bec71015c1616e156bd7805dc583c6c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, index.h("slot", { key: '2cd538d3e31d76403cbc1bd61ac518a5f2dcc6a5' })));
+        return (index.h(index.Host, { key: 'e5776342476f8195c6d3d3e2c2c4ad07da858eee', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, index.h("slot", { key: 'f96f6828740587f1238c84b08892e8459b017d37' })));
     }
 };
 tslib_es6.__decorate([

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var bem = require('./bem-p0PWVN8n.js');
 var attributes = require('./attributes-Cp0kpySW.js');
 
@@ -58,7 +58,7 @@ const Stage = class {
     render() {
         const block = bem.BEM.block('stage');
         const element = bem.BEM.block('stage-content');
-        return (index.h(index.Host, { key: '0a0f187c1f276c239346ce3f8cebcc0dbb78aafb', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, index.h("section", { key: '74dee713cafc1bb4bc420b8614f6a3cd5e938600', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, index.h("slot", { key: 'db3dcfa410828da23c0fcc888f53cd110992a847' }), this.shape && (index.h("div", { key: '586c8b26d0d00d7073bd4dde471302037f0446ea', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, index.h("bal-shape", { key: 'cf707bdfc9937d0fbe2a62080dbe2eda2771973d', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (index.h(index.Host, { key: '9bde68d498d4ed263cb6e7ec0f72505b66436c6a', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, index.h("section", { key: '0e96a3b8597f3607c98c6689b1658110d11dfa24', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, index.h("slot", { key: '3c2ca52c3a5750955adab54a9f7eed4c4da08d7c' }), this.shape && (index.h("div", { key: 'e69202693e9d45a5258c61c121d9499bde7b4bc8', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, index.h("bal-shape", { key: 'fea5cb01b1062316da0ca04a600dd5cae4f91be0', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
 };
 Stage.style = balStageCss;
@@ -77,10 +77,10 @@ const StageBackLink = class {
     }
     render() {
         const block = bem.BEM.block('stage-back-link');
-        return (index.h(index.Host, { key: '8a96e969901e8dbb9e29587c7bfac3aa475331f3', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, index.h("a", { key: '488c839fe831fbaf64703a0e3ad3fe80caef2968', class: {
+        return (index.h(index.Host, { key: 'f93d9145487b236e4afdefc9a0ab89aaa7d8890b', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, index.h("a", { key: 'ae854184618a0867e9a35a95a789a6510533e3a5', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href, rel: this.rel }, index.h("bal-icon", { key: '12ced75ad0f38cb7a7ef0f70b9cf5babbaf13842', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), index.h("slot", { key: 'f9bb274429697778e37dab9d89f91315230c93f3' }))));
+            }, href: this.href, rel: this.rel }, index.h("bal-icon", { key: '34c4576352710d3b2dbd269d624cfa17e6bf1b90', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), index.h("slot", { key: 'da404610d50081bba83333324ec3974c9ce5061d' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -91,7 +91,7 @@ const StageBody = class {
     }
     render() {
         const block = bem.BEM.block('stage-body');
-        return (index.h(index.Host, { key: '02186af6d627121ecd4f6e1ed64fe02f31f39c38', class: Object.assign({}, block.class()) }, index.h("slot", { key: '0c48731c5a7e2bbcdaddaf984dfa89e282ac437e' })));
+        return (index.h(index.Host, { key: '8c8f8b7fbdbf9dd9f32c0c561c93f934770b82bc', class: Object.assign({}, block.class()) }, index.h("slot", { key: 'df028b10599ec9d884c3eb2787f945219dff77e4' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -101,7 +101,7 @@ const StageFoot = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '04004ec95c9a7698132f56c9efa511c02d157965', class: "hero-foot" }, index.h("slot", { key: '1bdac86f51886901490c1a8fe74fb53f1eb3568f' })));
+        return (index.h(index.Host, { key: '580ee910be7fb627379514f23302062cc3ae04cb', class: "hero-foot" }, index.h("slot", { key: 'cd9bbca66e1bf7773ca9366c00c935c11e4422a1' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -111,7 +111,7 @@ const StageHead = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-head" }, index.h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
+        return (index.h(index.Host, { key: '13b87bdc02d0d8aa3c1295422c0f43730258404a', class: "hero-head" }, index.h("slot", { key: '19edc361f63647081375dad19e4ec33e38623e01' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -133,7 +133,7 @@ const StageImage = class {
     render() {
         const block = bem.BEM.block('stage-image');
         const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
-        return (index.h(index.Host, { key: 'b587dc5614e4d0a355712bc09fd28d2848469ca5', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (index.h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
+        return (index.h(index.Host, { key: 'bcc5678390b8facb7daf8720f7b26e7af55944fa', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (index.h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bal-step-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var attributes = require('./attributes-Cp0kpySW.js');
 
 const StepItem = class {
@@ -85,10 +85,10 @@ const StepItem = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '2345808b69d02adaa4c8398e9826accb724f0571', role: "tabpanel", class: {
+        return (index.h(index.Host, { key: '2c4f197cd8d47db462c0262b01080aff16e1e53f', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, index.h("slot", { key: 'a79cdedd49fdac1b556a92e5c905b124a9583128' })));
+            } }, index.h("slot", { key: 'a4a68d86354b4c4b14c6e35362cfe5a9b7e79b77' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,20 +1,20 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
 var bem = require('./bem-p0PWVN8n.js');
 var array = require('./array-Db63Hhl1.js');
-var formInput = require('./form-input-xt5ySNzH.js');
+var formInput = require('./form-input-CbbTIRR8.js');
 var balStep_util = require('./bal-step.util-DQcaqybX.js');
-var mutation_decorator = require('./mutation.decorator-_CRR1nB1.js');
-var breakpoints_subject = require('./breakpoints.subject-Cezf6Hiu.js');
-var breakpoints_decorator = require('./breakpoints.decorator-D5xcljb0.js');
+var mutation_decorator = require('./mutation.decorator-WOcsSbHM.js');
+var breakpoints_subject = require('./breakpoints.subject-pRs2D906.js');
+var breakpoints_decorator = require('./breakpoints.decorator-79hdkcrr.js');
 require('./index-BZ67Dcnb.js');
 require('./_commonjsHelpers-BJu3ubxk.js');
 require('./index-BobQkZjn.js');
-require('./listener-eTGFjyDz.js');
-require('./device-D_5TdgdC.js');
-require('./tokens.esm-DM_5VKOq.js');
+require('./listener-DF05gYXF.js');
+require('./device-DsW7kV5n.js');
+require('./tokens.esm-BKrVe6he.js');
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = bem.BEM.block('steps').element('nav').element('item').element('icon');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CP3lGz14.js');
+var index = require('./index-DgcsY-Zz.js');
 var bem = require('./bem-p0PWVN8n.js');
 
 const balSwitchCss = ":root{--bal-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-checkbox-switch-label-background-pressed-after:var(--bal-color-border-primary-pressed);--bal-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-pressed-after:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-checkbox-switch-label-background-invalid-checked-hovered-before:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-checked-pressed-before:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white)}.bal-switch{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.5rem;height:1.5rem;padding:.25rem;border-radius:var(--bal-radius-rounded);overflow:hidden;background:var(--bal-checkbox-switch-label-background-before)}@media (hover: hover)and (pointer: fine){.bal-switch--hovered,.bal-switch:hover{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--hovered .bal-switch__toggle,.bal-switch:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-hover-after)}}.bal-switch--pressed,.bal-switch:active{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--pressed .bal-switch__toggle,.bal-switch:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-pressed-after)}.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-checked-before)}.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}@media (hover: hover)and (pointer: fine){.bal-switch--checked.bal-switch--hovered,.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-checked-hover-before)}.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}}.bal-switch--checked.bal-switch--pressed,.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-checked-active-before)}.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch--invalid{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-after)}@media (hover: hover)and (pointer: fine){.bal-switch--invalid.bal-switch--hovered,.bal-switch--invalid:hover{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-hover-after)}}.bal-switch--invalid.bal-switch--pressed,.bal-switch--invalid:active{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-pressed-after)}.bal-switch--invalid.bal-switch--checked.bal-switch,.bal-switch--invalid.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-invalid-checked-before)}.bal-switch--invalid.bal-switch--checked.bal-switch .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered,.bal-switch--invalid.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-invalid-checked-hovered-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed,.bal-switch--invalid.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-invalid-checked-pressed-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--disabled,.bal-switch--disabled:hover,.bal-switch--disabled:active{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-before)}.bal-switch--disabled .bal-switch__toggle,.bal-switch--disabled:hover .bal-switch__toggle,.bal-switch--disabled:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-after)}.bal-switch--disabled.bal-switch--checked,.bal-switch--disabled.bal-switch--checked:hover,.bal-switch--disabled.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-before)}.bal-switch--disabled.bal-switch--checked .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:hover .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-after)}.bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-after);border-radius:50%;position:absolute;top:.25rem;width:1rem;height:1rem;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.bal-switch__toggle--checked{-webkit-transform:translateX(100%);transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-icon{position:absolute}.bal-icon .bal-switch__icon--checked{opacity:1}.bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";