@baloise/ds-core 19.8.3 → 19.8.4

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

@@ -641,7 +641,7 @@ const Popup = class {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: 'f933f5fcad5422883743d27d5ec884310f97feca', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '9fc15384c844fa45fe32d2be780257357d47899e', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'ee8def20d0a8fd9cdcfe587d62a17d27b1f8c065', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: '93d308f9ceef5bdf8c041d4c71f807f2310f58f0', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '5b93de3287bc6cac16769940895977ff44403d63', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()), ref: innerBlock => (this.innerEl = innerBlock) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '08dc53b3d3dea1c74d45742033594714c6f0f4d3', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content", tabindex: "-1" }, h("slot", { key: 'c9e2dc8db8ffd88e26776a2eef632d572a03c6e3' }))))));
+        return (h(Host, { key: '815e1a03c79472bb0913b4a28519802606bac73c', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'effa9ca039cb7c5b27db07f23e02a464e5f09ce9', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '343a483098c5d4b657298c3f0b5d14705a3e78bd', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: 'dbcb76dfb93527828e6f73974cbfd62225bd26c3', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '119c391a7fa3081548740bf23b57a6ae05417188', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()), ref: innerBlock => (this.innerEl = innerBlock) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-testid": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-testid": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'ff97c08a3151dc9f71552eede345d84716ea7e3b', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-testid": "bal-popup-content", tabindex: "-1" }, h("slot", { key: '21e9b66eec4627f414c4802eccc5276c20a9c536' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bal-progress-bar.entry.js

@@ -2,14 +2,14 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-Bd
 import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
 import { B as BEM } from './bem-ByiN-QjD.js';
 import { m as raf } from './helpers-BNj87EbG.js';
-import { b as balBreakpoints } from './breakpoints.subject-CLkQ75F0.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-B1jmHb1D.js';
-import { L as ListenToWindowResize } from './window-resize.decorator-Dm6C96Ro.js';
+import { b as balBreakpoints } from './breakpoints.subject-BnQp404Z.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-t_yXJIZL.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-DBJlK-45.js';
 import './browser-B1u-Mq75.js';
 import './config.utils-B7jugjyM.js';
 import './device-TtMibDFL.js';
 import './listener-CClDIhvK.js';
-import './tokens.esm-Crri2rlL.js';
+import './tokens.esm-Cf90NR4z.js';
 
 const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-background-purple:var(--bal-color-purple-2);--bal-progress-bar-background-yellow:var(--bal-color-yellow-2);--bal-progress-bar-background-red:var(--bal-color-red-2);--bal-progress-bar-background-green:var(--bal-color-green-2);--bal-progress-bar-line-color-primary:var(--bal-color-primary);--bal-progress-bar-line-color-purple:var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow:var(--bal-color-yellow-6);--bal-progress-bar-line-color-red:var(--bal-color-red-6);--bal-progress-bar-line-color-green:var(--bal-color-green-6);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}";
 
@@ -82,7 +82,7 @@ const ProgressBar = class {
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { key: '4452ea701b96a45d8c29a644c76cbb1849284ca1', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: 'c58656c6f9db6b8154681a70182e101007480a34', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
+        return (h(Host, { key: '3560c076e654839526d357edec7f7d605793d9b0', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: 'd89c4e6cf2d0c12abd70696606c47f03de988889', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
     }
     get el() { return getElement(this); }
 };

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

@@ -45,7 +45,7 @@ const RadioIcon = class {
         const disabled = !!this.disabled;
         const invalid = !!this.invalid;
         const inverted = !!this.inverted;
-        return (h(Host, { key: '0662e5a528a5dbadfaa8763a06acb7baa46b223d', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }));
+        return (h(Host, { key: '161bc840e553656a11a4f6c9aaedfa554dcdcf01', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }));
     }
 };
 RadioIcon.style = balRadioIconCss;

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

@@ -346,11 +346,11 @@ const Radio = class {
         if (this.labelHidden) {
             inputAttributes['aria-labelledby'] = labelId;
         }
-        return (h(Host, { key: '382a76b43c4967878e796e20914faaad31c1cb9b', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('button').class(this.interface === 'button')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
+        return (h(Host, { key: 'faa44091416d0505e2d84a792bd49f5eab82f897', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('button').class(this.interface === 'button')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
                 .modifier(`column-tablet-${this.colSizeTablet}`)
                 .class(this.interface === 'tile' && this.colSizeTablet > 1)), block
                 .modifier(`column-mobile-${this.colSizeMobile}`)
-                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '473e9946e24bcb342d728ea9401ca6306e6dac33', class: Object.assign({}, labelEl.class()), "data-testid": "bal-radio-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "radio", "data-testid": "bal-radio-input", name: this.name, value: value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h("bal-radio-icon", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: '443a97633b9a93c613218ff53ee97c6f37b2dc8f', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '76cb543fed4b836d6b937d8ff016f8e14e2c6dcc' })))));
+                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '3588b099302b821eccd777ae3149744f53a97834', class: Object.assign({}, labelEl.class()), "data-testid": "bal-radio-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "radio", "data-testid": "bal-radio-input", name: this.name, value: value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h("bal-radio-icon", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: '599fda9c376491dcb156c0b3fa8ecd41353027a8', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '752d10816299c2f7840ae907b426501a76ae8d23' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -10,15 +10,15 @@ import { i as isSpaceKey, a as isEnterKey, b as isArrowUpKey, c as isArrowLeftKe
 import { L as ListenToFocus } from './focus.decorator-C1s3OoqI.js';
 import { L as ListenToAnimation } from './animation.decorator-zbSqKhw6.js';
 import { L as ListenToVisibility } from './visibility.decorator-zTjPC2du.js';
-import { L as ListenToWindowResize } from './window-resize.decorator-Dm6C96Ro.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-B1jmHb1D.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-DBJlK-45.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-t_yXJIZL.js';
 import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
 import './browser-B1u-Mq75.js';
 import './config.utils-B7jugjyM.js';
 import './listener-CClDIhvK.js';
-import './breakpoints.subject-CLkQ75F0.js';
+import './breakpoints.subject-BnQp404Z.js';
 import './device-TtMibDFL.js';
-import './tokens.esm-Crri2rlL.js';
+import './tokens.esm-Cf90NR4z.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-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}";
 
@@ -350,7 +350,7 @@ const Segment = class {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: '434850dee057a04f9d328103462b800848e3befa', 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 }, h("slot", { key: 'e62020bdcef145f923e7f99cdc8ab0adc57703f7', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: '08fb99b658d704d85ab181d55d7bdbce7ee40fd8', 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 }, h("slot", { key: '432741fe51dc5c83ea241506687de13469afc149', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -575,7 +575,7 @@ const SegmentItem = class {
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (h(Host, { key: '4c8e5bfdefd09ee9fd23aa3d00b543a6db37e2f1', 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)) }, h("button", Object.assign({ key: 'e8185838fac69ee7d26cdc49a22c4e9898669ee4', 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), h("bal-icon", { key: 'b5e01c28bde95757ade654e507690de2d322a575', 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' }), h("bal-stack", { key: '32c41a13672bcf94b2cc39c41ddeb40a9ccb9da6', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: 'cf2b548c452e21e49e84079a63a2120e98149ff0', space: "none" }, h("bal-label", { key: '978e6878136444283fb9ff2179353151c23a7ddc', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '26a568d5924f66ee51873b6f5e3e083340c56ff2', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: 'f37daf19eedcdc58edd6d7ea9a4820051a3bcb01', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: '6a9472725c179e4d139e5be83b3f294d9aa776fc', 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 (h(Host, { key: '54ab8ce0ab290fcbc238087789ce0bca3caedddc', 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)) }, h("button", Object.assign({ key: 'be4e31f8a5b0da8cc9f70a867e546920127ba4b2', 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), h("bal-icon", { key: 'f6d56f256041be2a97822dcc424d887844bacc0e', 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' }), h("bal-stack", { key: '15df166b0d0d2b6a6b9447506755b9de3581c77d', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '056ba7bfb5d4f456f03f70e9f86e0269bd44a78b', space: "none" }, h("bal-label", { key: '055ca1dd2f698e5b3758fbc5535a221801d90642', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '5a4ea620046a856959a811110f9c8ec5dfefa156', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: 'ceeb6506e86bde765a45497987759479b450c16f', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: '7384e9bec0b8c8337191b79a54a18cf5cc89a55b', 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 getElement(this); }
     static get watchers() { return {

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

@@ -777,7 +777,7 @@ const Select = class {
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: '2cdffc028c1bf2c7895b2bf6acf17d4d36403b53', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: '77060284cad81e9801d4b0280b3cd1be126e2245', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -791,19 +791,19 @@ const Select = class {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '2d16928c6a3383b0f00335b5662c4699210d87ff', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => 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)) }, h("select", { key: '1a356d4c1ba7694a732495198fc2d9bbdda40dea', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '9ea8e39781ef2f49ef55e16735cb0c7852065108', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'a39326c63dbcac1ad82926f8760d5e07f070fe03', "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)) }, h("div", { key: 'e798517f1557a5be9162a4abaf0d84c5c663d881', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '6b7354e770f231706b1e15360c671adfe16a8980', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => 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)) }, h("select", { key: '4564be01db70d71812c500f75534a52166edb41a', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '7a77f7f60e2ddb3e524dfbf14021618ebf56d03b', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'c3759fb5c32e5a2737ef9b80ce9845b0071f2f74', "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)) }, h("div", { key: '9b7c8567cc7f0c463546a78cdd0b449900cbd315', 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) => (h(Chip, { value: value }))), h("input", Object.assign({ key: '3e8135f1e6297ccba9732ada6cab72d6470733bf', 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": 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 ? (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) => (h(Chip, { value: value }))), h("input", Object.assign({ key: '5defff3eda394ed0afaa105775b22231eb628fe1', 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": 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 ? (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' })) : ('')), h("bal-popover-content", { key: '22217507fdedb75779041bb7ed95e19888c1642e', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, 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' })) : ('')), h("bal-popover-content", { key: '61e479d8c8b40af29300dcc7e3611a774aff6c31', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, 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)), 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), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '8a6862c54398959fe4a020057880a154e232e1f2', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), 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), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'f96e2f463966cef35a5c76b7a4c74dd2d16d4ed8', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }
@@ -838,7 +838,7 @@ const SelectOption = class {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '8829db26394b32b2a00ba288a944358c3f4e39be', style: { display: 'none' } }, h("slot", { key: '4ba8e9b7bdf68609d2e0ca5185a4e71943e66bda' })));
+        return (h(Host, { key: 'c479330ac26bcb19ddd41e7a99e635bf3ffc6170', style: { display: 'none' } }, h("slot", { key: '009baaefc29d307403edb10160c694dcc8495164' })));
     }
 };
 __decorate([

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
-import { b as balColorGrey4, a as balColorYellow3, c as balColorYellow5, d as balColorPurple3, e as balColorPurple6, f as balColorRed3, g as balColorRed5, h as balColorGreen3, i as balColorGreen6 } from './tokens.esm-Crri2rlL.js';
+import { b as balColorGrey4, a as balColorYellow3, c as balColorYellow5, d as balColorPurple3, e as balColorPurple6, f as balColorRed3, g as balColorRed5, h as balColorGreen3, i as balColorGreen6 } from './tokens.esm-Cf90NR4z.js';
 import { B as BEM } from './bem-ByiN-QjD.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)}";
@@ -55,11 +55,11 @@ const Shape = class {
     render() {
         const block = BEM.block('shape');
         const shapes = [
-            h("g", { key: '87bcd10eb1794dd25b47e8a62bb0e612ce50ada9', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '1539b43e12735fe7ebd960309c2fd0bd17bed96b', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: 'a19747dc616fa444df90a58f8a23c2acc5e51f69', 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" }))),
-            h("g", { key: 'a619eb63257feaee21d507c6ead25166b220d17b', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: '5fa321b4284b7ab78e33b47cf8d0a0ec26ad23d1', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: 'ab11d30aa0f11eba6b17748881fa7969619e9076', 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" }))),
-            h("g", { key: '21ba9375eb288d7ca3acc8615ba435cc69866cb7', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '1a498d427c784a1183e762d0f605a3409aa3ea89', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: 'f276af5ce57e926ccde0fe6c30bced7f6c97b50b', 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" }))),
+            h("g", { key: '62a32221af7fcc15d60b43ab4aaa143fab7d311c', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: 'ad7a506509762ad7769586774fc10aa54fef80fa', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: '1f335e4e64feff4503a847358b87033f1b7d8aa2', 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" }))),
+            h("g", { key: 'f974f1f708ff05106b3afcbb3f848a1dcf4e97fb', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: 'b212b8a5220cbefd36c5e9565bb2be3685658fc0', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: '287b0c85fc2e5fb7b845288f13a2f308a3b3c8ca', 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" }))),
+            h("g", { key: 'b653bea006236af44c31c719af98b7ac04bf93ad', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '2cff6eea2c2b6891b4fef81d366869c31f87c5e6', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: '777d6655facf61980ec4ee5ea598191e5e273021', 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 (h(Host, { key: '326adc6546e10823928ca9d33272d81f44c35d62', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: 'ee375e33bc72435360e229499c992f29aa038a7c', 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 (h(Host, { key: 'cc915095d6cf923c3798033780f076c30a4b58ea', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: 'eb2afd20856fd2a7c4a318de4b0a4df1713f87b9', 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 getElement(this); }
 };

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

@@ -16,7 +16,7 @@ const Sheet = class {
         const container = block.element('container');
         const containerInner = container.element('inner');
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
-        return (h(Host, { key: '1277fe42a8e474e6e6e56524e80c172057409e68', class: Object.assign({}, block.class()) }, h("div", { key: '489dfea1ce595b5f39871bff43f2bb2183ee2d0e', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: 'f8c101d9aeb9a4e95e4723c9a7d314b6117eaa99', class: Object.assign({}, containerInner.class()) }, h("slot", { key: 'd7c4dc1e3eb207ec9c34e8b1fd92aaa9301fcd16' })))));
+        return (h(Host, { key: '75dd6a91f8ac6d45412ae20453935668cb571e7f', class: Object.assign({}, block.class()) }, h("div", { key: '75aa66d83f6a6330b9e3d36a703fb82ab11bd015', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: 'd6a97321e5db3a2c8ba252fb845228ba6371de67', class: Object.assign({}, containerInner.class()) }, h("slot", { key: 'f16331a11a842d719d494fb72db56fe0423aeb05' })))));
     }
 };
 Sheet.style = balSheetCss;

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

@@ -159,7 +159,7 @@ const Spinner = class {
      */
     render() {
         const block = BEM.block('spinner');
-        return (h(Host, { key: '60b00e36e8d9fd1862b3858f47f62265ce95c8f3', 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 (h(Host, { key: 'bf00a08aaa12fd4a3473d6f277a62abe4537ee8f', 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 getElement(this); }
     static get watchers() { return {

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

@@ -83,7 +83,7 @@ const Stack = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(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)) }, h("slot", { key: 'f96f6828740587f1238c84b08892e8459b017d37' })));
+        return (h(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)) }, h("slot", { key: '2cd538d3e31d76403cbc1bd61ac518a5f2dcc6a5' })));
     }
 };
 __decorate([

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

@@ -59,7 +59,7 @@ const Stage = class {
     render() {
         const block = BEM.block('stage');
         const element = BEM.block('stage-content');
-        return (h(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() } }, h("section", { key: '0e96a3b8597f3607c98c6689b1658110d11dfa24', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: '3c2ca52c3a5750955adab54a9f7eed4c4da08d7c' }), this.shape && (h("div", { key: 'e69202693e9d45a5258c61c121d9499bde7b4bc8', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: 'fea5cb01b1062316da0ca04a600dd5cae4f91be0', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (h(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() } }, h("section", { key: '74dee713cafc1bb4bc420b8614f6a3cd5e938600', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'db3dcfa410828da23c0fcc888f53cd110992a847' }), this.shape && (h("div", { key: '586c8b26d0d00d7073bd4dde471302037f0446ea', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: 'cf707bdfc9937d0fbe2a62080dbe2eda2771973d', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
 };
 Stage.style = balStageCss;
@@ -78,10 +78,10 @@ const StageBackLink = class {
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: '4b980500cb525ce37993b2660d3e6f47afee0f4e', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'afadcd09a4c0c669d387d12a28c712d3de376a41', class: {
+        return (h(Host, { key: 'd3f7b6738547d41aa1768247cc35dab99f910ce7', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'd176f07817f6e739a23102e3635884c2ee6b999f', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href, rel: this.rel }, h("bal-icon", { key: '764fd4ed183e8542d921d2a57e1850adc590b348', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'e3c1b6d3ede82a002ce474cb72ad888586502201' }))));
+            }, href: this.href, rel: this.rel }, h("bal-icon", { key: 'd782a08f95a20f3477e75dc80e51f7d762e34913', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '8a5305d0e2145cf91cffcb7d9c627222ad623177' }))));
     }
     get el() { return getElement(this); }
 };
@@ -92,7 +92,7 @@ const StageBody = class {
     }
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { key: '3b059393f680516ee22d093cb77927211f1b2a2a', class: Object.assign({}, block.class()) }, h("slot", { key: '739898aeda435256a9cf052dfe265d6f28115b94' })));
+        return (h(Host, { key: '9fffb6dccae32661cbe75ba02ce7963b3ef82ba5', class: Object.assign({}, block.class()) }, h("slot", { key: '11831034684ac727427e498ec4892f9ba583145f' })));
     }
     get el() { return getElement(this); }
 };
@@ -102,7 +102,7 @@ const StageFoot = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '351793d066e2d3018a0a4c40cdb2b69495127199', class: "hero-foot" }, h("slot", { key: '76c2593eac606f7aed4c15ac6148780a37555b54' })));
+        return (h(Host, { key: '9cf1ea0d02d399cfa69ecc24af4184abec3df6b0', class: "hero-foot" }, h("slot", { key: 'bbe34ad9838a7a92d50ec23a59e50548b617d902' })));
     }
     get el() { return getElement(this); }
 };
@@ -112,7 +112,7 @@ const StageHead = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '19fdb481ea37cab182e426f7582270ecdce23147', class: "hero-head" }, h("slot", { key: '69273fb5da2cd217de773a37eb5000adda15bbbf' })));
+        return (h(Host, { key: 'bdd7bfc5c154aa8fdb3c0a51ec38303faf981dd5', class: "hero-head" }, h("slot", { key: '72412afb15d629dea3c3ff8040b6e668fe92a241' })));
     }
     get el() { return getElement(this); }
 };
@@ -134,7 +134,7 @@ const StageImage = class {
     render() {
         const block = BEM.block('stage-image');
         const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
-        return (h(Host, { key: 'a39983d891acebe4f05e5387445483940d0b29dc', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
+        return (h(Host, { key: 'a328489d91f055d488a89e4e2f4297db63d2eec1', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     get el() { return getElement(this); }
 };

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

@@ -83,10 +83,10 @@ const StepItem = class {
         };
     }
     render() {
-        return (h(Host, { key: '4d22b6691427503ce62c4a0846fa1bc8639654a9', role: "tabpanel", class: {
+        return (h(Host, { key: 'a0ddc77150d56b852231c285748de238aeda360a', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: '087ec315891c96985e14d4a94181563cd57b0b8f' })));
+            } }, h("slot", { key: 'f79435da222ca19525b56983ef2fc089610a2e0d' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -6,9 +6,9 @@ import { s as stopEventBubbling } from './form-input-DYvzaBlM.js';
 import { n as debounceEvent } from './helpers-BNj87EbG.js';
 import { L as Logger } from './log-CwssmmaV.js';
 import { n as newBalStepOption } from './bal-step.util-DIC_sxLd.js';
-import { b as balBreakpoints } from './breakpoints.subject-CLkQ75F0.js';
+import { b as balBreakpoints } from './breakpoints.subject-BnQp404Z.js';
 import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-B1jmHb1D.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-t_yXJIZL.js';
 import './index-zWZxKBfo.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import './index-B4k_dH6V.js';
@@ -16,7 +16,7 @@ import './browser-B1u-Mq75.js';
 import './config.utils-B7jugjyM.js';
 import './device-TtMibDFL.js';
 import './listener-CClDIhvK.js';
-import './tokens.esm-Crri2rlL.js';
+import './tokens.esm-Cf90NR4z.js';
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = BEM.block('steps').element('nav').element('item').element('icon');

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-BdVwMG9u.js';
 import { B as BEM } from './bem-ByiN-QjD.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}";
+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-switch .bal-icon{position:absolute}.bal-switch .bal-icon .bal-switch__icon--checked{opacity:1}.bal-switch .bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";
 
 const Switch = class {
     constructor(hostRef) {

package/dist/esm/bal-tab-item_2.entry.js

@@ -10,11 +10,11 @@ import { t as toKebabCase, S as SwiperUtil, g as getComputedPadding, a as getWid
 import { n as newBalTabOption } from './bal-tab.util-BmVI6cLw.js';
 import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
 import { b as balBrowser } from './browser-B1u-Mq75.js';
-import { b as balBreakpoints } from './breakpoints.subject-CLkQ75F0.js';
+import { b as balBreakpoints } from './breakpoints.subject-BnQp404Z.js';
 import { d as defaultConfig } from './config.default-I6QXKbhg.js';
 import { L as ListenToMutation } from './mutation.decorator-DhVeNnnY.js';
 import { L as ListenToVisibility } from './visibility.decorator-zTjPC2du.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-B1jmHb1D.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-t_yXJIZL.js';
 import { L as ListenToResize } from './resize.decorator-ZKPOJfw5.js';
 import { L as ListenToSwipe } from './swipe.decorator-B_Ghrp1o.js';
 import { L as ListenToAnimation } from './animation.decorator-zbSqKhw6.js';
@@ -26,7 +26,7 @@ import './config.utils-B7jugjyM.js';
 import './keyboard.helpers-BERg8BNc.js';
 import './device-TtMibDFL.js';
 import './listener-CClDIhvK.js';
-import './tokens.esm-Crri2rlL.js';
+import './tokens.esm-Cf90NR4z.js';
 import './swipe.subject-T0VStuOK.js';
 
 const TabItem = class {
@@ -144,10 +144,10 @@ const TabItem = class {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '8faef74e951bde8c3e3be3348ce09ce614d321de', id: this.tabPanelID, class: {
+        return (h(Host, { key: 'a7ebf68e3c2fed0d2068d33afe86cb642e1f111d', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '23bfff424e8da5faee77587e5bc6f46ea7cfb109' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'cfa012ad2c5f2a14a762e8a65872d99100602c3a' })));
     }
     get el() { return getElement(this); }
 };
@@ -918,9 +918,9 @@ const Tabs = class {
             .filter(t => this.isTabActive(t))
             .map(t => t.label)
             .join(',');
-        return (h(Host, { key: 'adf5438fb91ca1ae24825612e717b22653e4b51b', 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('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated && this.isTabList)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, ariaLabel: this.inheritAttributes['aria-label'], accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated && this.isTabList, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: 'ef3a8707ffd193bb1a2ab0f76b140bd8ddf03010', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
+        return (h(Host, { key: 'df9259a96b0763c4eae688a54a657ceaea8b39a2', 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('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated && this.isTabList)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, ariaLabel: this.inheritAttributes['aria-label'], accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated && this.isTabList, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: '47ff9e0e5e38a7361a928de8dc6a42aad8ab1cb8', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
                 .modifier('hidden')
-                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: '9c2c2d354e1f9b1d71b85810e9ef5fccc1f3f683', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'ab7902280092861830088a06478049ac35befa2c' })))));
+                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'f7068bbf0aa5fb282d0ab93e3b3ffc740b8b998e', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: '12e2c4813faa77f774b5400501d114b0e9a57535' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -15,7 +15,7 @@ const Table = class {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { key: '02a18be55045376f238aeaaf4fdf0d1abd97788a', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: '33860f7409dc7b8ef772327022bed7978513a94a' })));
+        return (h(Host, { key: 'c2f174262e6fea2ff7072ba2ad9d64ef13efb6be', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'a59f7e117f987b1aae52d5e7f4f7b5e6cfbf1dc2' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -60,7 +60,7 @@ const Tag = class {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ key: '27a4f2f99a2ef7160c9239608a65fd035f07baac', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'd67ec24e9286c0cd3539c87c3aec6fe2f539d178', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '6d9edd38cb609bb1ac630a31a066ce8a8b797f10' })), h("bal-close", Object.assign({ key: '5b10ce55af2a1ef7651fed5baa8a2a21ae0d5a6c', class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: 'd426597b70777eff0f582f7d443a9bc51ced1e53', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: '3d84d8bfe73a633ebb83eaba536cb2cf4ed61c95', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '1d74104803bac4b5cf8ee296a2e9f1f9753bf762' })), h("bal-close", Object.assign({ key: 'cda8fcf97b298bbd453e7c665c4e4741e0a975ab', class: Object.assign({}, block.element('close').class()), style: {
                 display: this.closable && !this.disabled ? 'flex' : 'none',
             }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                 !this.light) ||
@@ -75,7 +75,7 @@ const TagGroup = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '131973a110ac1b917a7010d3870c48558020a618', class: "bal-tag-group" }, h("slot", { key: '3595db4a1dbe182c0890054da5ad8c33ea4a818b' })));
+        return (h(Host, { key: '0ab0e65bef811da56fe8acea596100fa62a0167a', class: "bal-tag-group" }, h("slot", { key: '405f949e333e3e0995a1ec4eb4160b8513d20785' })));
     }
 };
 

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

@@ -147,7 +147,7 @@ const Textarea = class {
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { key: 'd89d5925e65ffcf37caf62fdb8aef42361ceea7f', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '20f02fa458fd85ff4c7c880b11522011052ff2e4', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, 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": ariaBooleanToString(this.disabled), disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'dfbd0670d3a5428b393bbdfb4778dbd4de5fddcc' }))));
+        return (h(Host, { key: 'd2abd56effb14131bdbf2a744555316439a18d5f', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '3690740a7250086b52c268a7fe1fd09bf59c3ca3', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, 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": ariaBooleanToString(this.disabled), disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'd8bce218b9a67017b1de8e53e11548b9f258d217' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bal-time-input.entry.js

@@ -169,7 +169,7 @@ const TimeInput = class {
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { key: '86f8a153c77f318da2e35298216ab1b5c24ee7bd', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '32beb28a88c67c27102e682d29a705bff9fa0ebb', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: 'b96e7dd3309fa3e4e5e186000f6e3320f3fd42c0', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), 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": ariaBooleanToString(this.disabled), name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: '0b968334c8e83ee0eb538f6f2b2b07186e0676c7', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '6b1b0a24a554e6c36befcc44f888a4a6582b2ada', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("bal-input-group", { key: 'e0a53ed0fa5bc08deb818fb6e7119bef8bf5bed1', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '7ede7fc70c763cae673b67192a4ab467f0a5c7fc', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), 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": ariaBooleanToString(this.disabled), name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'cce0762bb6cb91dd62ced90ab7b8defbf75ca7ac', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -258,7 +258,7 @@ const Tooltip = class {
         const arrowBlock = block.element('arrow');
         const innerBlock = block.element('inner');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '02cb6bd433580340afae9201c14b98e78c9c37ad', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '2f5a536123df97f387c094297a5c735c3645575a', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: 'd084a2ecd2f8f920b180a833bbb2c80fb4850b83', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: 'f5245be9dbfb32546d4273140de8dfc1e5c68b69', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'bd3b5bc24f24aa70f54f1fd6d3a572d8e57fc971', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", { key: '13f425d634613314bc59c37488bc7d3d9a0e6f64' }))))));
+        return (h(Host, { key: '44b979f559f36ccc63896081b14dab984057af90', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '4e96b8f99b20385490151f810f4b336af692f968', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: 'f1f7e3f48c22e5c5187ae1c60e5fad5e95077397', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '69727e19f5dc28bb04e7e5354ea7824b748c3fe9', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'e9ee7d561604fd046b102ef895f98c385f66cb69', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-testid": "bal-tooltip-content" }, h("slot", { key: '4a317667331f69961a438d74d9eb07816c444153' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {