@baloise/ds-core 18.2.0-nightly.20250328 → 18.3.0

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

@@ -22,7 +22,7 @@ const Card = class {
         return isEmpty(this.color) ? '' : `is-${this.inverted ? 'blue' : this.color}`;
     }
     render() {
-        return (h(Host, { key: '60405d26b29d82993d5853b66126448c24da76de', class: {
+        return (h(Host, { key: 'c96cc43fa0044fd8ac34cd617a90ed88ec7073c5', class: {
                 'bal-card': true,
                 [`bal-card--${this.colorTypeClass}`]: !isEmpty(this.color),
                 [`bal-card--is-${this.space}`]: this.space !== '',
@@ -32,7 +32,7 @@ const Card = class {
                 'bal-card--is-selected': this.selected,
                 'bal-card--is-square': this.square,
                 'bal-card--has-fullheight': this.fullheight,
-            } }, h("slot", { key: 'a196556a24c3847732c405aa7f811403b7b25474' })));
+            } }, h("slot", { key: '50ade35417dafda765c509bd8f97157d7932a0b4' })));
     }
 };
 Card.style = BalCardStyle0;
@@ -43,7 +43,7 @@ const CardActions = class {
         this.position = '';
     }
     render() {
-        return (h(Host, { key: '0ddde50f0b230e34ec5808381cee4512b3c819cf', class: "bal-card-actions" }, h("bal-button-group", { key: '55e2c1c888eb0a1c818565ae3d0e6d564a1320b1', class: "m-none", position: this.position }, h("slot", { key: 'c41d4ff9870e800acb34d11a0de30769f960ad02' }))));
+        return (h(Host, { key: 'a7cfd2bf8e431e2bd0fb357e11ab28391f3a76c1', class: "bal-card-actions" }, h("bal-button-group", { key: '15606e2e6831e3d3e7977b948bd9b14582c71d5d', class: "m-none", position: this.position }, h("slot", { key: '384f7646c468defca583a7ef7cbe2edf93ea74fa' }))));
     }
 };
 
@@ -59,7 +59,7 @@ const CardButton = class {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: 'e10a38993a05b081e6963578ca58394ffed6b85c', class: "bal-card-button" }, h("bal-button", { key: '8d6a175f3ada4e3f3327cdb1bfc766ccef081a8a', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: '7c0dd79bcbafccfbdf696fe95b209a8343080ddc' }))));
+        return (h(Host, { key: '2571a681907e53e8496930e90e42b7c83d8f772b', class: "bal-card-button" }, h("bal-button", { key: 'abb149ebb28f13a448cec0fff003feb7efd43e16', color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", { key: 'b51a474d03b133ab2174004d08b8129032344ecb' }))));
     }
 };
 
@@ -68,7 +68,7 @@ const CardContent = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '45545a634067cee8d1d28d05291d8cef0299d416', class: "bal-card-content" }, h("slot", { key: '2d647c7e9bc7a95f9aa0f0d0b16fec7f6eb3383c' })));
+        return (h(Host, { key: '63fb6b5e72ad6c3fa30ba68f6d9bdf0e1833df76', class: "bal-card-content" }, h("slot", { key: '851ba08103e95a1c0536523a449d1f317543092c' })));
     }
 };
 
@@ -80,7 +80,7 @@ const CardSubtitle = class {
         this.color = '';
     }
     render() {
-        return (h(Host, { key: '3926fde414f565f08d192a020366edf1757c6922', class: "bal-card-subtitle" }, h("bal-text", { key: 'a04132e568b034e371f6805e77dbcfe21d9e9489', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", { key: '037e237cdaced982f0b3ba0074016aa4777ffbde' }))));
+        return (h(Host, { key: '2a1250f5456d84296fa7280216852cef5913d2ca', class: "bal-card-subtitle" }, h("bal-text", { key: 'b92d1f51cfa1df3e69b9c96fe64267223d100c74', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", { key: '4d53171704d63d9e5c6bd0bc58a32ddeb74fa02a' }))));
     }
 };
 
@@ -90,7 +90,7 @@ const CardTitle = class {
         this.inverted = false;
     }
     render() {
-        return (h(Host, { key: 'b12a4f08d1a78e31aa306b20ee59a8826249b5b0', class: "bal-card-title" }, h("bal-heading", { key: 'a22c6af75f714e70f1efd36f0671a6e623a9ef31', level: "h3", space: "none", inverted: this.inverted }, h("slot", { key: '11483681e586eac535db5244f4c85a87d0ddce42' }))));
+        return (h(Host, { key: '480825eb5bb7479126da292aaa53a4fa74a8cd95', class: "bal-card-title" }, h("bal-heading", { key: 'c193388a8ade59840457b375b4a8715bef3e2328', level: "h3", space: "none", inverted: this.inverted }, h("slot", { key: '8c01ab5b70d5aabef47a5693b827fa8e23192c92' }))));
     }
 };
 

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

@@ -4,11 +4,11 @@ import { B as BEM } from './bem-8c7d2eb0.js';
 import { a as ariaBooleanToString } from './aria-ea150568.js';
 import { t as toKebabCase, S as SwiperUtil } from './swiper.util-01fa2dd9.js';
 import { s as stopEventBubbling } from './form-input-263e6f5b.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-dbe242f7.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-3c6214ed.js';
 import { L as ListenToMutation } from './mutation.decorator-e915d053.js';
 import { L as ListenToSwipe } from './swipe.decorator-902c4936.js';
 import { L as ListenToResize } from './resize.decorator-08f6286b.js';
-import { b as balBreakpoints } from './breakpoints.subject-0f5a6df1.js';
+import { b as balBreakpoints } from './breakpoints.subject-6b4e30ba.js';
 import { d as defaultConfig } from './config.default-8e11a860.js';
 import { L as ListenToVisibility } from './visibility.decorator-ee4b6682.js';
 import { L as ListenToConfig } from './config.decorator-42dba864.js';
@@ -19,7 +19,7 @@ import './listener-04842ae9.js';
 import './browser-a8073d92.js';
 import './swipe.subject-fbdb665a.js';
 import './device-8c6d2881.js';
-import './tokens.esm-7f3b5d32.js';
+import './tokens.esm-2ce9e0f4.js';
 import './log-dfd1c19f.js';
 import './config.utils-cd529084.js';
 
@@ -174,7 +174,7 @@ const Carousel = class {
         const block = BEM.block('carousel');
         const inner = block.element('inner');
         const container = inner.element('container');
-        return (h(Host, { key: '045f46d215e6655af8a04cc992ccb0c0d2ace7b1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: '9b3a26e262678685c62bfca9b47748312548b9ae', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: '3cd4f36061c3ea702ac26cad019e4b11e39f8750', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: 'e45dad1eddb06ec65c8eceeccf67969fe92b24cb' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
+        return (h(Host, { key: '8d3018d668a5ee7d7f6db4f2c2546e720ad48577', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: 'd4fdd5af148e4fdcb1c4f0c49966398a8fa0fcd2', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: 'acb3aa06b89dcb97bd3c3a489f5143752cd35568', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: '73052ff64fa0423cb88bf96aaa771064ca3aadea' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bal-checkbox-button.entry.js

@@ -180,7 +180,7 @@ const CheckboxButton = class {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (h(Host, { key: 'df8642a22032a8ffd1a7c7db3e378027a1b926e8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '9c6c1334a44190f5d6987c32ebf45be35ff00cf9', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '288d784a482e32dba9e4a46f1806ef35a51a76c0' }))));
+        return (h(Host, { key: 'f8a1bb7fe4001ebf045aef1ccb3e618448a4d216', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '4a2f2be8dac7e4a2f344ee8d9dedb494a8666b3c', role: "checkbox", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '08c9131a641ab8198746ec93c02e4ad16e6b1adc' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -284,7 +284,7 @@ const Checkbox = class {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { key: 'c76b5ff66a33d98280bcb8168d12284561c4ef23', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, 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('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), 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('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '11958df47ddff46268cf931dd13d0d7a671e9964', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, h("slot", null)))) : ('')));
+        return (h(Host, { key: 'b60b510c06d3318f39acd764e65732a792271f26', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, 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('checkbox').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('invisible').class(this.invisible)), 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('inline').class(this.inline)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: 'f147f86e34a36c270faccb1c95fdf69d2a2a4eed', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-checkbox-input", type: "checkbox", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, "aria-hidden": ariaBooleanToString(this.nonSubmit), name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('checkbox').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)), labelEl.modifier('switch').class(this.interface === 'switch')) }, labelAttributes, { "data-testid": "bal-checkbox-label" }), this.interface === 'switch' ? (h("bal-icon", { class: Object.assign({}, iconEl.class()), name: "check", color: "white", size: "x-small", "aria-hidden": "true" })) : (''), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-checkbox-text" }, this.label, h("slot", null)))) : ('')));
     }
     get el() { return getElement(this); }
 };

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

@@ -31,7 +31,7 @@ const Close = class {
         const buttonEl = blockEl.element('button');
         const iconEl = buttonEl.element('icon');
         const label = i18nBalClose[this.language].close;
-        return (h(Host, { key: '4da9fd82693b0182a807919dd7b9194325924b0a', class: Object.assign({}, blockEl.class()) }, h("button", { key: 'ece31e634305fa395157b498ae99ca5bb0f6ea88', type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, h("bal-icon", { key: '28e3924e14e5314ed1c7a6613b2c72fb8cab1f18', name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
+        return (h(Host, { key: 'a1188dd719c155244c9248852b47b6308445c7e8', class: Object.assign({}, blockEl.class()) }, h("button", { key: '4e5e500a7ef209e58a415c79241a610ec9e072e7', type: "button", "aria-label": label, title: label, tabindex: "0", class: Object.assign(Object.assign(Object.assign({}, buttonEl.class()), buttonEl.modifier('inverted').class(this.inverted)), buttonEl.modifier(`size-${this.size}`).class(this.size !== '')), "data-testid": "bal-close" }, h("bal-icon", { key: 'c1386b6639da47ddcdd198d3abcbea110c1edc68', name: "close", size: this.size === 'small' ? 'x-small' : this.size === 'medium' ? 'medium' : 'small', inverted: this.inverted, class: Object.assign({}, iconEl.class()) }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -38,7 +38,7 @@ const Content = class {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: '24b18681a7c127ebd58e27f2823482dfd5621cdd', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, h("slot", { key: '8e4b8d0b5a6ecf7f04f514ec6e9b26bcceed70c8' })));
+        return (h(Host, { key: 'b256d6d65dd7524c7a4eda9f939cb85c1c561362', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)) }, h("slot", { key: '19ddbdd34078c10e4abd24fcdf55d89a8e06a13a' })));
     }
 };
 __decorate([

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

@@ -30,7 +30,7 @@ const Data = class {
     }
     render() {
         const block = BEM.block('data');
-        return (h(Host, { key: '9bdc9220125ff24bbcab99d72bf9018524989a8e', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, h("slot", { key: 'a75c460214454acad179a1141b1e44dcbeeaf200' })));
+        return (h(Host, { key: 'e30b81fa59a7c0307096cac83ffcb9a252f2a48a', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('has-border').class(this.border)), block.modifier('is-horizontal').class(this.horizontal)) }, h("slot", { key: '6f5d92953c3b6b0f0a04a2ccf79ebdda28be93e1' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -47,7 +47,7 @@ const DataItem = class {
     }
     render() {
         const element = BEM.block('data-item');
-        return (h(Host, { key: '24c06c3548592591c65dc69655730d6e03d321ab', class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, h("slot", { key: '7a50f83aa8460be4acd5b0026d6986a43ff38f1f' })));
+        return (h(Host, { key: '6e89ce9ba7c11d28186c5515161d90a10c932876', class: Object.assign(Object.assign(Object.assign({}, element.class()), element.modifier('is-disabled').class(this.disabled)), element.modifier('has-border').class(this.border)) }, h("slot", { key: '97fba77127fd9e4f707251fc0c64bc360ff54baf' })));
     }
 };
 
@@ -57,7 +57,7 @@ const DataLabel = class {
         this.required = false;
     }
     render() {
-        return (h(Host, { key: 'b7ee494c4547012e9e65cd1843904e7c62622ee9', class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", { key: '0543ceb399a3fac8da806ee36a0688851d189307' }), this.required ? '*' : ''));
+        return (h(Host, { key: 'fab3592ac51a609566b2c3743fa9a1a6d45de770', class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", { key: 'b76f0eef5d401046ee637948e9f9aa0cbf1fc856' }), this.required ? '*' : ''));
     }
 };
 
@@ -81,7 +81,7 @@ const DataValue = class {
     render() {
         const block = BEM.block('data-value');
         const buttonEl = block.element('button');
-        return (h(Host, { key: '10c0d223260009cbcfb3454f573ed72231fd5dbe', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, h("div", { key: 'cf9488e4c65fb7b7ad7f0fae106cb90b10c49125' }, h("slot", { key: '0ae1c2e3cb8b9466b55f82ea9946774468d370ae' })), h("bal-button", { key: 'ac74fa86de3c53de60c4c82b6f48480cdb5c3ed8', class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
+        return (h(Host, { key: 'bdc1abbe6bd3025c1492ec5270259ea899afabee', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-editable').class(this.editable)), block.modifier('is-multiline').class(this.multiline)) }, h("div", { key: '8e5521c8d2f750dc2f8bc6860188884f4bacfaf3' }, h("slot", { key: '31d37fec63af21c9e0fc6a64807e1a760b6b676f' })), h("bal-button", { key: '7f52ca131674700ce0020f96614a954e9e5896f8', class: Object.assign({}, buttonEl.class()), "data-testid": "bal-data-value-button", square: true, outlined: true, color: "text", size: "small", icon: "edit", disabled: this.disabled, onBalBlur: _ => this.balBlur.emit(), onBalFocus: _ => this.balFocus.emit(), onClick: ev => this.onClickHandler(ev) })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-date-calendar-cell.entry.js

@@ -37,7 +37,7 @@ const DateCalendarCell = class {
      */
     render() {
         const block = BEM.block('date-calendar-cell');
-        return (h(Host, { key: 'f1423c65e711698622eb7e3bcc05bf2d585eb96f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, h("time", { key: '379ceff0e82c46073f60ad0cd30bbe9d0cf580d1', dateTime: this.isoDate }, this.day)));
+        return (h(Host, { key: '842cdcd6256c4ee8c37eb8643acc7fb7938384ca', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('today').class(!this.disabled && this.today)), block.modifier('selected').class(!this.disabled && this.selected)), block.modifier('disabled').class(this.disabled === true)), tabIndex: -1, type: "button", role: "button", "aria-label": this.fullDate, "aria-selected": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, h("time", { key: 'ac2ad50412436932aaecbe933085b85e5fae1939', dateTime: this.isoDate }, this.day)));
     }
 };
 

package/dist/esm/bal-date-calendar_2.entry.js

@@ -444,7 +444,7 @@ const DateCalendar = class {
         const block = BEM.block('date-calendar');
         const blockBody = block.element('body');
         const blockFoot = block.element('foot');
-        return (h(Host, { key: '2d3c53228071c0a19b7195a60f655bffec5fcfc0', class: Object.assign({}, block.class()) }, h(CalendarNav, { key: '4722788040473eb1c25f3446658d7b958e874291', language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), h("div", { key: '02dcfdf4f715f41c59e2a9df96a290c27cf08ae1', class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { key: '4c46752a54d57421757d861233960d03f5ba699e', isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), h(CalendarList, { key: '30104d40aa8929886651789d7c06ad87f3e6378f', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { key: '0e2fa6041ac31f0144086d1b8026af06e3008251', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { key: '21a7d0cc3c36217f69fb4b07b42b065c3c82299d', class: Object.assign({}, blockFoot.class()) }, h("slot", { key: '8aafbfd98fd66b25e313c15864831d4538c56487' }))));
+        return (h(Host, { key: 'eaefb77fdf97dfe4bcbb09b2caf3684f31c1a4d9', class: Object.assign({}, block.class()) }, h(CalendarNav, { key: '712b86dbbf4dbedf593b51cf10400aa0437efe1d', language: this.language, monthFullNames: this.monthFullNames, month: this.month, year: this.year, isCalendarVisible: this.isCalendarVisible, isListVisible: this.isMonthListVisible || this.isYearListVisible, onClickSelectMonthAndYear: this.onClickSelectMonthAndYear, onClickPreviousMonth: this.onClickPreviousMonth, onClickNextMonth: this.onClickNextMonth }), h("div", { key: '7d587de561a4b24918ceaf54c5e22d407e2728b3', class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { key: 'b4b17a94e92013da775269113ced4b9140cb37d9', isVisible: this.isCalendarVisible, grid: this.calendarGrid, weekdays: this.weekdays, firstDayOfWeek: this.firstDayOfWeek, selectedDate: this.selectedDate, ref: el => (this.gridEl = el), onSelectDay: isoDate => this.onSelectDay(isoDate) }), h(CalendarList, { key: '5068789acc4252cbc3d15757b26a989448ed7cec', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { key: '5821497bc9fdecde1a1348e707f423053142caf6', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { key: '9298445573b3e3b193260cd65d53a2d4b531f71c', class: Object.assign({}, blockFoot.class()) }, h("slot", { key: '15fab7aa2e780d7b3f5aff2ad866ddcc3a4665c4' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1451,14 +1451,14 @@ const InputDate = class {
     render() {
         const block = BEM.block('input-date');
         const native = block.element('native');
-        return (h(Host, { key: '38b2bfc91f2249540a9f5d2536d34b917070e903', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'b689f1780889807f91d776f903712cd3e6341283', class: {
+        return (h(Host, { key: '17c98f2fa3a240bebc7ef5e766fe40602e4b1b58', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'dadfc0a5ea369ef70820cea9ed13f38c373db197', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
                 'is-clickable': this.clickable && !(this.disabled || this.readonly),
                 'bal-focusable': !this.disabled,
                 'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), 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), required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: '80414fe198d63903a23853e603053771c50448d3', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
+            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), 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), required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: '67cb4386326e64333af807af28f9161b5537d9f9', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -287,7 +287,7 @@ const Date = class {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { key: '05aca7ed04b08027762c5ef57508d5db38b0ccc6', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '4be9f4b1261ed958e71959721e254b0eaae2d11b', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '26af250c551879cc6018f0c7105ef149fb5e1df9', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: 'bd3a743349853f2d02cd6eab24a0f4cf8bb66896', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: '562fe8d5b1dadc617fe1e5de53a636fc5cdd5b01', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
+        return (h(Host, { key: 'c5e83ababf39d1ae281d5c4431e1f85d4bef5a5c', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '519bd01f611ab9b629a8fac99946b7d8214970bd', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '564e29d2af3a0a67c6e7fa11d7349f2c225f9d08', name: this.name, required: this.required, placeholder: this.placeholder, value: this.value, min: this.min, max: this.max, invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, allowInvalidValue: this.allowInvalidValue, autocomplete: this.autocomplete, onClick: this.onInputClick, onBalInput: this.onInputInput, onBalChange: this.onInputChange, onBalFocus: this.onInputFocus, onBalBlur: this.onInputBlur, onBalKeyPress: this.onKeyPress, ref: el => (this.inputEl = el) }, this.inheritedAttributes)), !this.freeSolo ? (h("bal-icon", { name: "date", role: "button", tabindex: -1, class: Object.assign(Object.assign({}, blockIcon.class()), blockIcon.modifier('clickable').class(!this.disabled && !this.readonly)), "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', onClick: this.onIconClick, "aria-label": i18nBalDate[this.language].toggleDatepicker, "aria-haspopup": "true", "aria-expanded": ariaBooleanToString(this.isExpanded) })) : ('')), h("div", { key: '1488dceb9ac13271c5f32568a6b5ac283d778ddc', role: "dialog", class: Object.assign(Object.assign({}, blockPopup.class()), blockPopup.modifier('visible').class(this.isExpanded)), ref: el => (this.floatingEl = el), "aria-hidden": `${this.isExpanded !== true}`, "aria-presented": `${this.isExpanded === true}` }, h("bal-date-calendar", { key: '71d92c077111c858413a164796fb1beb296e1e36', value: this.calendarValue, min: this.min, max: this.max, minYearProp: this.minYearProp, maxYearProp: this.maxYearProp, defaultDate: this.defaultDate, allowedDates: this.allowedDates, onBalChange: this.onCalendarChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -28,7 +28,7 @@ const Divider = class {
         const space = !!this.space;
         const color = !!this.color;
         const borderStyle = !!this.borderStyle;
-        return (h(Host, { key: '21f73f3c69f25be339fbd8cdd02a65690d4e36a9', role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, h("slot", { key: '133fd38632e8361528ce8ade456196a8384ddc95' })));
+        return (h(Host, { key: 'a30a0bffab73e52c2ffc3c2e9c40cb5982a6cb3e', role: "separator", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`layout-${this.layout}`).class(layout)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`color-${this.color}`).class(color)), block.modifier(`border-style-${this.borderStyle}`).class(borderStyle)) }, h("slot", { key: '7e5c590639624403dcfecad33353f5638538089d' })));
     }
 };
 __decorate([

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

@@ -685,13 +685,13 @@ const Dropdown = class {
         const hasTheme = this.theme !== '';
         const theme = `theme-${this.theme}`;
         const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus;
-        return (h(Host, { key: '6fe4a66e63dba61d168848cc3b8d5ad3206596ba', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: '5bf5613a1d65889935a9c2b40601e57240372be2', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
+        return (h(Host, { key: 'd542547c9ea4d8c0e93404f06bba38f2a24a2b0c', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'dd8a54fb503ce4b10e274eb6cf04f2a483be4bb6', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
                 .element('root')
                 .modifier(theme + '-filled')
                 .class(isFilled && hasTheme)), block
                 .element('root')
                 .modifier(theme + '-expanded')
-                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'db5194514ee8922cd756b51d3dcb68188f78a450', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '8a7eb020f59052fcdf991dd613887b9258697c25', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: 'b02e555f1a0a2ce147ac2a7ef3db8d9f9dac6b69', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: '6283de0a1f10181bef9d514577d2a1fc7ca34b2b', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'c8f75c6e7c42a9cb5850c6f93573adc5f4bf08fc', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: 'a6f50cf28c3019d3f33abb9ac3b10f81a763349a', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '157a4cbaaae69efae17de54a543a56be62e3e949' }))));
+                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: '72806d82158ce264fefb0575073ffd87d5b361d8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '00d613402a9e7aff5f331ea7d8489963cf8a7601', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: '2eb879e6afc9f0839229783af4e85aeaa03ad1ee', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: '4a9e1f1df0bc46ecdb55e6f5677341649881e676', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: '069802867ebe29c43b3089f6318e27f86c96fa2e', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: '1f38d9f77dd291b6584062e593abf7d1ca31cfd4', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '76808a4794198ca8a25696fcbe43830dab6369e0' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -176,12 +176,12 @@ const Field = class {
         components.forEach(c => callback(c));
     }
     render() {
-        return (h(Host, { key: 'aa44641fd9ed39d382713f6ffc8946e8eec097fa', id: this.fieldId, class: {
+        return (h(Host, { key: '06ae9278bc96f9bd4185762f8047cdac15b9721d', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, h("slot", { key: '8a7749f1adfe8f743fc026502632c44bde1c5b94' }), h("span", { key: '0cfa29c5cc6656a1ecaeeb5d3d7abe9eb2573cba', class: "bal-field-hidden" })));
+            } }, h("slot", { key: '0195671b4e3f7194a3871e97ce793859b1f12b6c' }), h("span", { key: 'b2bcd598dd58e1e811b19255b3ed06638a010373', class: "bal-field-hidden" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -223,14 +223,14 @@ const FieldControl = class {
         return '';
     }
     render() {
-        return (h(Host, { key: '9e2bbf7acff922b1ea40c55bd13e31f60d2678fa', class: {
+        return (h(Host, { key: '98ddfeb7afcbd227d2f9e6dc64b0576980604e7d', class: {
                 'bal-field-control': true,
                 'control': true,
                 'has-icons-left': !!this.iconLeft,
                 'has-icons-right': !!this.iconRight,
                 'is-loading': this.loading,
                 'bal-field-control--expanded-on-mobile': !!this.expandedOnMobile,
-            } }, h("slot", { key: '96e625c620b1af1944a0c7b23d3141a243dcb2d3' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
+            } }, h("slot", { key: 'cff31ea3f186c33b784f4fc9e21d8f4a058c8783' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
     }
 };
 
@@ -243,7 +243,7 @@ const FieldHint = class {
     }
     render() {
         const block = BEM.block('field-hint');
-        return (h(Host, { key: '0a11434dedd6e84fdbca1b7f906d1d392553d1a1', class: Object.assign({}, block.class()) }, h("bal-hint", { key: 'fa224c5994b3a3849d4c7f234f63f14b266fd0a4', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject ? h("bal-hint-title", null, this.subject) : '', h("bal-hint-text", { key: '1a7547df3e148fd0743b05e696ca8b0663b55d1c' }, h("slot", { key: '941d0903337721060c9ba0327809d9632e22d0f9' })))));
+        return (h(Host, { key: 'a7e8896780bde83769fd67a96dd86421d3728172', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '8a1a4288b2c4801e535a7fc14d8f21608b6d086c', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject ? h("bal-hint-title", null, this.subject) : '', h("bal-hint-text", { key: '367613b66170ef18930d45f3c45968cf8e7cf929' }, h("slot", { key: '833a6bee414d85d315e07bf84eeefe0fe18cdfd4' })))));
     }
 };
 
@@ -281,7 +281,7 @@ const FieldLabel = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'de7f2b5bece308123522348a754af790b2fc2bbe', class: "bal-field-label" }, h("bal-label", { key: '39d721c1e8f3fb66022dca9c4c280ff2eec412da', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: '899565faee00c89bf8e3b3e95ef2b075f2dd8e2f' }))));
+        return (h(Host, { key: '6d12cafb0250d3628ba428622af685141223d03b', class: "bal-field-label" }, h("bal-label", { key: 'b678d637d4835e8ccfb9ae04fa282d4a051238f8', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: '25d63d5194100b8f60006ed296a942fe7f0e42b5' }))));
     }
     get element() { return getElement(this); }
 };
@@ -303,14 +303,14 @@ const FieldMessage = class {
         this.ariaForm = Object.assign({}, ariaForm);
     }
     render() {
-        return (h(Host, { key: 'db4171855058eebb241a92b5cb72ed489fd4f60b', id: this.ariaForm.messageId, class: {
+        return (h(Host, { key: '49bde33372b1fc399e3f33e2ff93d1ee2d913676', id: this.ariaForm.messageId, class: {
                 'bal-field-message': true,
                 'help': true,
                 'is-danger': this.invalid,
                 'is-success': this.valid,
                 'is-disabled': this.disabled || this.readonly,
                 [`is-${this.color}`]: !!this.color,
-            } }, h("slot", { key: 'b3849d6097fd59745e026bc53fcd96c4b56f6abe' })));
+            } }, h("slot", { key: 'c6320e5e0c3652d441ac5ae882bb8b521ab20a28' })));
     }
 };
 

package/dist/esm/bal-file-upload.entry.js

@@ -335,16 +335,16 @@ const FileUpload = class {
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (h(Host, { key: '44488a9949dc4e6d3d470271dfff65ceb69de411', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
+        return (h(Host, { key: '18f647eae8f8570f3590af4ccc64e79e245c72c5', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
                 'bal-file-upload': true,
-            } }, h("div", { key: 'e64dd001851e3810155a9e14cbd74eb0102a93c7', class: {
+            } }, h("div", { key: '3a6dcbf5c3dee37ced17082021cc87c9f744c9d5', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { key: '76ba8e1bcb8837f6b07e17de62022df7cc1c1375', htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, h("label", { key: 'fb8472eb739b0253f3620208db7bdf177c2ef5e9', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, h("input", { key: '9c60d1089a18516386813e8a6704e63883045a6a', class: "file-input", type: "file", id: id, "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, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
+            } }, h("input", { key: '2cdaf0abe749a09076feec8ed707eb3a16a88eb5', class: "file-input", type: "file", id: id, "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, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -320,14 +320,14 @@ const Footer = class {
         const elWrapper = elLanguage.element('wrapper');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { key: '63b0d68bf5813a5758202dcb1d154599dc808c58', class: Object.assign({}, block.class()) }, h("footer", { key: '409eb8e6cfc4cf5a8f5b504bfd914d686458ca2d', class: Object.assign({}, elInner.class()) }, h("div", { key: 'a987f76c6aee6a7d8d376867ac58bd972ba80e05', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '3028b99426dd4019f39cdbf27ff7359c32686d79', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '558ce31d189e1cd3f942146093ce0faf994669c9', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: 'fc1c918ef12867f2e65f4e01c2266dfa524ad5c3', color: "white" })), h("div", { key: 'ec418eca7def7286a625f4ed7d40194865ca795d', class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: 'c37aa4f326e222eb718dc6e7f7acde38202c69ec', class: Object.assign({}, block.class()) }, h("footer", { key: '873cb6793243a35a22531960efd8eaab507215f4', class: Object.assign({}, elInner.class()) }, h("div", { key: '41a1d722b080704fbb4e2bf17e60b102473597bf', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: 'f83f8b6e5f98d6195a56bc0a832cfe69b1ea9431', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '2b18376073d6aff12f7ac7b8d216b5f4817f6e1f', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: '96eb73f8ba0551411ce27dd28cf2e7cad2914f8b', color: "white" })), h("div", { key: '1a9f0b4fe75b4e2d05ca37d63176de0b53d01a3c', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { key: '9ed1373bd05ab2a1eb56654c885895a3247fbd28', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '6353ac60b7ff51d29b19529fad5558133610dfec', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: 'b31f1ad5708693ec6d824075234b649ed0a0b670', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '53604c5b9b022f3cc93cc25e585f8573fdb609a4', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '768096640cb46e55904b92d8bf71bc8e0f1d14a9' })), h("div", { key: 'f376f065dfd717f806f648dca91912f88b23dbf7', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '382c7fd1cbeb51620790523a4013bbca5e1b8442', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { key: 'daf46260d6491847cef8c797840a35c3acf28ac6', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: 'bf66eab0736fe4eb66c358a51ab7e416a9b8e140', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: '0fa532d6793d095b6535af67f1ec2c4411d99cc0', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '6ade883c03b2bd6859beb27e2c1660ff6ef5957f', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'fc23e7c53029d21be656fc54b6ac8e668231e1d6' })), h("div", { key: 'c2023054e279a9839b2aeb755c3e856b767b72f2', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '2473f807e6ca82bc65df05e1ebee6e275686163e', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '2d9bc74994376502bf3adbe1de443665b4c69fb3', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: 'c9df6d4ba3df4c81cc5a97edbf591c252c70c441', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));

package/dist/esm/bal-form-col_2.entry.js

@@ -7,7 +7,7 @@ const FormCol = class {
         this.size = 'full';
     }
     render() {
-        return (h(Host, { key: '270033f8e0c603088c28bf464885d6b41a21f4a1', class: {
+        return (h(Host, { key: '2ab46fbeb219367638cc0f87690a5cd0c88adf85', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -17,7 +17,7 @@ const FormCol = class {
                 'is-8': this.size === 'two-thirds',
                 'is-3': this.size === 'one-quarter',
                 'is-9': this.size === 'three-quarters',
-            } }, h("slot", { key: 'd3081c8946b7fa00933bf5bbcffdf2b9539a4951' })));
+            } }, h("slot", { key: '6756856039fd664907f2cf396c5bbf109bc7f6bd' })));
     }
     get el() { return getElement(this); }
 };
@@ -30,7 +30,7 @@ const FormGrid = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'bac9d83dd51029045d7cebbe5995eca60961ec11', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: '0c7dad588bbe583896e624d6739aef90a0cc8ca7' })));
+        return (h(Host, { key: '0b96b788c9a67e1c943667ca40461a9276a7207a', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: '1aa7ce9b16db009f5d7d5a2fe6c6c63fede27907' })));
     }
 };
 FormGrid.style = BalFormGridStyle0;

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

@@ -30,7 +30,7 @@ const Form = class {
                 novalidate: this.novalidate,
             };
         }
-        return (h(Host, { key: '617338050bf82da77afdbf350ea10f1c160cba23' }, h(NativeEl, Object.assign({ key: 'ce9e2ab2ba0a96a2c1c9c7910cf29bd571689afd' }, attrs, { class: this.formClass }), h("slot", { key: 'ace60020692031d38ae2557ad4793dcb36cac80c' }))));
+        return (h(Host, { key: 'c972bc34a2dfe3d533f9c32e6ba708f30180edc6' }, h(NativeEl, Object.assign({ key: '9bb649089f07379fdc35be655b0e66a9bf5d47f5' }, attrs, { class: this.formClass }), h("slot", { key: '408363c63caecf082f6033c1bbd8e42efbf42a8e' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -142,7 +142,7 @@ const Heading = class {
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (h(Host, { key: '7194da832757e0b23c771c17921f29e7ab7eb69a', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: 'e1f9ef2b3a65bbc847d782ac11f298c750844963', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: '06f3010fcaf199d7c381457fc0f4814a0a452f3f' }))));
+        return (h(Host, { key: 'a503ac3dd8be0378c0efa834eb0f97403920001b', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: 'a05b099dfd2be4f80514f11ecc782a303851651e', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: 'bc68bd4ee158237fe063cf0462d3ecf925abe384' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -207,10 +207,10 @@ const Text = class {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { key: '62c52758d1905a1c3682ed5d0b73c259873ec270', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: '7ac46361899e03d0c7a8a773695793b10d13afe4', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '8aceb26482ae28d7004f4bb81bdbad288dbbea71', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'efbe450accfb6df4813866cf7f64649c08ad2f07', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '836a19b010718e67c320e06820d3200ceb8fb4c3' }))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '33ad603fa81fe33512f02b5ed716bd4ec8e675cd' }))));
     }
 };
 Text.style = BalTextStyle0;

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

@@ -3,8 +3,8 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { p as preventDefault } from './utils-9fbab1d3.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
-import { b as balBreakpoints } from './breakpoints.subject-0f5a6df1.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-dbe242f7.js';
+import { b as balBreakpoints } from './breakpoints.subject-6b4e30ba.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-3c6214ed.js';
 import { L as ListenToConfig } from './config.decorator-42dba864.js';
 import { b as isEnterKey, d as isSpaceKey } from './keyboard.helpers-159e517d.js';
 import { b as balBrowser } from './browser-a8073d92.js';
@@ -14,7 +14,7 @@ import './helpers-94c3fbac.js';
 import './config.utils-cd529084.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-7f3b5d32.js';
+import './tokens.esm-2ce9e0f4.js';
 
 const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 const BalHintStyle0 = balHintCss;
@@ -161,7 +161,7 @@ const HintText = class {
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (h(Host, { key: 'ad5de0620dc2309a1b88d269245787fb7b466e31', class: Object.assign({}, elText.class()) }, h("p", { key: 'ad41ab7b8b99f4279719d4a0f692e549fa0d6411', class: Object.assign({}, elTextField.class()) }, h("slot", { key: 'ce99f43d0b12bc93f5149c5c0022f53740cbb2da' }))));
+        return (h(Host, { key: '55e5c7e590c542d9231cd4847c386a31ff2f8431', class: Object.assign({}, elText.class()) }, h("p", { key: '336d4b62922364184fc23ac302da56543dfb5ec1', class: Object.assign({}, elTextField.class()) }, h("slot", { key: '1a94c41250826a0b958a3a52401a67355ed8059e' }))));
     }
 };
 
@@ -174,7 +174,7 @@ const HintTitle = class {
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (h(Host, { key: 'a4702af6829510708fd8941c74ff5be80d9cfe4f', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '1dd414773a51a467091d940cc05026818c508744', class: Object.assign({}, elHeading.class()) }, h("span", { key: '5763f7dcf1273965151401b18c619dc0d3451616' }, h("slot", { key: '34f65311af348ee241f8e22adad75c6d16d34768' })))));
+        return (h(Host, { key: '3e147e9af600461b10a755bcfd830be1f54604e4', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '462cf6ae7ccef24756799c66677bc3b03809868e', class: Object.assign({}, elHeading.class()) }, h("span", { key: 'e3034bb3b60388ba96d93b2658115aa5c8aa3bee' }, h("slot", { key: 'd3030ef06a0d6372f6e643e742bdd3b015299239' })))));
     }
 };
 
@@ -2292,7 +2292,7 @@ const PopoverContent = class {
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: 'c47c5a6aa96c52a4460894ab274a167be0927d35', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'dec823beec17dfe48195c3e794dbcfe4725f83d4', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'd8200f831b8569736e27486fd5e975a0f21b76e2' })), h("div", { key: '5cd3727753fa2cf5a841c11b8d48aa7eee31cf2d', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: '8c5281cc1fe731c729e6fb2859451b9872254f57', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '10fa564b011b3f0a0e1bd0c338d09970f3ce809e', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'cddf8ead7a7a6028a54b2d0a152f68a7dbeb9462' })), h("div", { key: 'acaa433bb6c396d86d927f95013fae818e694ab3', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     get el() { return getElement(this); }
 };

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

@@ -2386,7 +2386,7 @@ const Icon = class {
     render() {
         const color = this.parseColor();
         const block = BEM.block('icon');
-        return (h(Host, { key: '34b51e2b4f79d0c1fd11243aa05810cd5e34bd88', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { key: 'e1f1d2e5975eabea82bb0a1126bb349cf0a86c47', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
+        return (h(Host, { key: '7878580914412bb12603f9854d765106c7acc5ef', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { key: '3ca28f2b9329ccb31c4bc435e2c0e2b416681167', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
     }
     static get watchers() { return {
         "name": ["nameChanged"],

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

@@ -17,7 +17,7 @@ const InputGroup = class {
         const hasDanger = this.invalid;
         const disabledClass = 'is-disabled';
         const hasDisabled = this.disabled || this.readonly;
-        return (h(Host, { key: '854b61f3f42979caa696eccdb3d4587533ff82f4', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: 'e3db33ef1382a20e493614e8452fa598a00d464e' })));
+        return (h(Host, { key: '8c8a7a6391bd2bc7cf6aeedd150ad6eca58acd7c', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: 'db6bc519da1f7bf0b4dbce7d2e900c88c062eabe' })));
     }
     get el() { return getElement(this); }
 };