@baloise/ds-core 18.2.0 → 18.3.0

package/dist/collection/components/bal-carousel/bal-carousel.js

@@ -144,7 +144,7 @@ export class Carousel {
         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()));
     }
     static get is() { return "bal-carousel"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-checkbox/bal-checkbox-button/bal-checkbox-button.js

@@ -170,7 +170,7 @@ export class CheckboxButton {
         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' }))));
     }
     static get is() { return "bal-checkbox-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-checkbox/bal-checkbox.js

@@ -267,7 +267,7 @@ export class Checkbox {
             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)))) : ('')));
     }
     static get is() { return "bal-checkbox"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-close/bal-close.js

@@ -22,7 +22,7 @@ export class Close {
         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()) }))));
     }
     static get is() { return "bal-close"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-content/bal-content.js

@@ -32,7 +32,7 @@ export class Content {
         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' })));
     }
     static get is() { return "bal-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-data/bal-data-item/bal-data-item.js

@@ -7,7 +7,7 @@ export class DataItem {
     }
     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' })));
     }
     static get is() { return "bal-data-item"; }
     static get properties() {

package/dist/collection/components/bal-data/bal-data-label/bal-data-label.js

@@ -5,7 +5,7 @@ export class DataLabel {
         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 ? '*' : ''));
     }
     static get is() { return "bal-data-label"; }
     static get properties() {

package/dist/collection/components/bal-data/bal-data-value/bal-data-value.js

@@ -17,7 +17,7 @@ export class DataValue {
     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) })));
     }
     static get is() { return "bal-data-value"; }
     static get properties() {

package/dist/collection/components/bal-data/bal-data.js

@@ -24,7 +24,7 @@ export class Data {
     }
     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' })));
     }
     static get is() { return "bal-data"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-date/bal-date-calendar/bal-date-calendar.js

@@ -240,7 +240,7 @@ export class DateCalendar {
         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' }))));
     }
     static get is() { return "bal-date-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bal-date/bal-date-calendar-cell/bal-date-calendar-cell.js

@@ -31,7 +31,7 @@ export class DateCalendarCell {
      */
     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)));
     }
     static get is() { return "bal-date-calendar-cell"; }
     static get properties() {

package/dist/collection/components/bal-date/bal-date.js

@@ -271,7 +271,7 @@ export class Date {
         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 }))));
     }
     static get is() { return "bal-date"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-divider/bal-divider.js

@@ -22,7 +22,7 @@ export class Divider {
         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' })));
     }
     static get is() { return "bal-divider"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-dropdown/bal-dropdown.js

@@ -285,13 +285,13 @@ export class Dropdown {
         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' }))));
     }
     static get is() { return "bal-dropdown"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-field/bal-field-control/bal-field-control.js

@@ -19,14 +19,14 @@ export class FieldControl {
         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));
     }
     static get is() { return "bal-field-control"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/bal-field/bal-field-hint/bal-field-hint.js

@@ -8,7 +8,7 @@ export class FieldHint {
     }
     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' })))));
     }
     static get is() { return "bal-field-hint"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/bal-field/bal-field-label/bal-field-label.js

@@ -32,7 +32,7 @@ export class FieldLabel {
      * ------------------------------------------------------
      */
     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' }))));
     }
     static get is() { return "bal-field-label"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/bal-field/bal-field-message/bal-field-message.js

@@ -16,14 +16,14 @@ export class FieldMessage {
         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' })));
     }
     static get is() { return "bal-field-message"; }
     static get properties() {

package/dist/collection/components/bal-field/bal-field.js

@@ -166,12 +166,12 @@ export class Field {
         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" })));
     }
     static get is() { return "bal-field"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-file-upload/bal-file-upload.js

@@ -202,16 +202,16 @@ export class FileUpload {
      */
     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 })) : ('')));
     }
     static get is() { return "bal-file-upload"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-footer/bal-footer.js

@@ -90,14 +90,14 @@ export class Footer {
         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/collection/components/bal-form/bal-form.js

@@ -23,7 +23,7 @@ export class Form {
                 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' }))));
     }
     static get is() { return "bal-form"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-form-grid/bal-form-col/bal-form-col.js

@@ -5,7 +5,7 @@ export class FormCol {
         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,
@@ -15,7 +15,7 @@ export class FormCol {
                 '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' })));
     }
     static get is() { return "bal-form-col"; }
     static get properties() {

package/dist/collection/components/bal-form-grid/bal-form-grid.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class FormGrid {
     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' })));
     }
     static get is() { return "bal-form-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-heading/bal-heading.js

@@ -80,7 +80,7 @@ export class Heading {
         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' }))));
     }
     static get is() { return "bal-heading"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-hint/bal-hint-text/bal-hint-text.js

@@ -6,7 +6,7 @@ export class HintText {
         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' }))));
     }
     static get is() { return "bal-hint-text"; }
 }

package/dist/collection/components/bal-hint/bal-hint-title/bal-hint-title.js

@@ -6,7 +6,7 @@ export class HintTitle {
         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' })))));
     }
     static get is() { return "bal-hint-title"; }
 }

package/dist/collection/components/bal-icon/bal-icon.css

@@ -1 +1 @@
-:root,:host{--bal-icon-color-grey: var(--bal-color-grey-5);--bal-icon-color-grey-light: var(--bal-color-border-grey-dark);--bal-icon-color-grey-dark: var(--bal-color-grey-6);--bal-icon-color-success: var(--bal-color-success);--bal-icon-color-success-dark: var(--bal-color-success-5);--bal-icon-color-success-darker: var(--bal-color-success-6);--bal-icon-color-warning: var(--bal-color-warning);--bal-icon-color-warning-dark: var(--bal-color-warning-5);--bal-icon-color-warning-darker: var(--bal-color-warning-6);--bal-icon-color-danger: var(--bal-color-danger);--bal-icon-color-danger-dark: var(--bal-color-danger-5);--bal-icon-color-danger-darker: var(--bal-color-danger-6);--bal-icon-color-primary: var(--bal-color-primary);--bal-icon-color-primary-dark: var(--bal-color-primary-6);--bal-icon-color-blue: var(--bal-color-primary);--bal-icon-color-light-blue: var(--bal-color-light-blue-5);--bal-icon-color-primary-light: var(--bal-color-primary-3);--bal-icon-color-white: var(--bal-color-white)}.bal-icon{display:flex;justify-content:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:inline-flex}.bal-icon__inner{display:block;position:static;transition:transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-grey-dark svg,.bal-icon--is-grey-dark g,.bal-icon--is-grey-dark path,.bal-icon--is-grey-dark circle{fill:var(--bal-icon-color-grey-dark)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{align-items:center;color:inherit;display:inline-flex;vertical-align:top;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{flex-grow:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:flex}
+:root,:host{--bal-icon-color-grey: var(--bal-color-grey-5);--bal-icon-color-grey-light: var(--bal-color-border-grey-dark);--bal-icon-color-grey-dark: var(--bal-color-grey-6);--bal-icon-color-success: var(--bal-color-success);--bal-icon-color-success-dark: var(--bal-color-success-5);--bal-icon-color-success-darker: var(--bal-color-success-6);--bal-icon-color-warning: var(--bal-color-warning);--bal-icon-color-warning-dark: var(--bal-color-warning-5);--bal-icon-color-warning-darker: var(--bal-color-warning-6);--bal-icon-color-danger: var(--bal-color-danger);--bal-icon-color-danger-dark: var(--bal-color-danger-5);--bal-icon-color-danger-darker: var(--bal-color-danger-6);--bal-icon-color-primary: var(--bal-color-primary);--bal-icon-color-primary-dark: var(--bal-color-primary-6);--bal-icon-color-blue: var(--bal-color-primary);--bal-icon-color-light-blue: var(--bal-color-light-blue-5);--bal-icon-color-primary-light: var(--bal-color-primary-3);--bal-icon-color-white: var(--bal-color-white)}.bal-icon{display:flex;justify-content:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:inline-flex}.bal-icon__inner{display:block;position:static;transition:transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--tile{background:var(--bal-color-purple-1);border-radius:var(--bal-radius-normal);height:2rem;width:2rem;max-height:2rem}@media screen and (min-width: 769px),print{.bal-icon--tile{height:3.5rem;width:3.5rem;max-height:3.5rem}}.bal-icon--tile-color-green{background:var(--bal-color-green-1)}.bal-icon--tile-color-red{background:var(--bal-color-red-1)}.bal-icon--tile-color-yellow{background:var(--bal-color-yellow-1)}.bal-icon__inner--tile{width:2rem;max-height:2rem}@media screen and (min-width: 769px),print{.bal-icon__inner--tile{width:3rem;max-height:3rem}}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-grey-dark svg,.bal-icon--is-grey-dark g,.bal-icon--is-grey-dark path,.bal-icon--is-grey-dark circle{fill:var(--bal-icon-color-grey-dark)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{align-items:center;color:inherit;display:inline-flex;vertical-align:top;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{flex-grow:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:flex}