@baloise/ds-core 18.3.0 → 19.0.0-nightly.20250512

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

@@ -0,0 +1,143 @@
+import { h, Host } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+export class Switch {
+    constructor() {
+        this.checked = false;
+        this.invalid = undefined;
+        this.disabled = undefined;
+        this.hovered = false;
+        this.pressed = false;
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('switch');
+        const checked = !!this.checked;
+        const disabled = !!this.disabled;
+        const invalid = !!this.invalid;
+        return (h(Host, { key: '44e17aefdee7df228e92368c3863509a4dcd4bc8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: '1f27c8f3f92467ea80de321666e597c8ea7cde89', name: "check", color: "white", size: "small", "aria-hidden": "true", colorHovered: "white", colorPressed: "white", hovered: this.hovered, pressed: this.pressed, class: Object.assign({}, block.element('icon').modifier('checked').class(checked)) }), h("div", { key: 'd22b87a1a091669422db72acf16d48a4c4e8825f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('toggle').class()), block.element('toggle').modifier('checked').class(checked)), block.element('toggle').modifier('disabled').class(disabled)), block.element('toggle').modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) })));
+    }
+    static get is() { return "bal-switch"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./bal-switch.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-switch.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the checkbox is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the component gets a invalid red style."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "hovered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hovered",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "pressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "pressed",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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: '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()) }))));
+        return (h(Host, { key: '25b3dc4132060a98148ec87bab88ae7a15c0ed9e', class: Object.assign({}, blockEl.class()) }, h("button", { key: '2854252b5452659558e445dfb17f8b1fd7f8fc5c', 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: '9cdc282c9d9839263d6254ba75751a333517c966', 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: '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' })));
+        return (h(Host, { key: 'a7213517d4b70adbe0ba7091c1393d6dfdb62c9e', 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: 'd907c3d66bf4927b63cfa6958288e3eb38e9d4be' })));
     }
     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: '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' })));
+        return (h(Host, { key: '407b2d982f48e77a71daa015e98acb720b369860', 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: 'e9d0e88af9d336879ed87b59732a583c43bd466f' })));
     }
     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: 'fab3592ac51a609566b2c3743fa9a1a6d45de770', class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", { key: 'b76f0eef5d401046ee637948e9f9aa0cbf1fc856' }), this.required ? '*' : ''));
+        return (h(Host, { key: '114f7b7b26f2cc4a0c4ba430df1d3d17f4df786a', class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", { key: 'bba812f478c14efa78880304b42bd8a9d91a3187' }), 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: '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) })));
+        return (h(Host, { key: '63014133e16b3afbe1e7fe5842792bdc9c141169', 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: '192eb9e81205e21d2d553bbe0d975af252fc23d0' }, h("slot", { key: '1af816e5a838f87ef19091e02d9b8e80d0ab1cb2' })), h("bal-button", { key: 'feef0feb9694017038fee9838269bde53659d6e6', 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: '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' })));
+        return (h(Host, { key: 'aa8b8920767ec213d19c0ff5bd5b020afd720736', 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: '521ef64fdbd14bae75547ca851ae20e40d50a68f' })));
     }
     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: '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' }))));
+        return (h(Host, { key: '5d6a297ec24ae26e80aa64800168e0f7c184e803', class: Object.assign({}, block.class()) }, h(CalendarNav, { key: 'd59886c88f34bfb9fc17cc121d6c7262c2a15485', 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: '53fe06a5f24418668d3a77a03ee6da3e48c5c019', class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { key: 'f898ac758f1dfcaa1dbd7eb7b56c3cb339971528', 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: '011bf1c4f7ba1332b7b336ffffdf7ba4dd1f0062', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { key: '0b3c1d01fea6752b5f954083b18883e0da5a1e96', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { key: 'a4bd07270d850442b4604a75beaed04baa33c64f', class: Object.assign({}, blockFoot.class()) }, h("slot", { key: '50d760695d612864422574e13ef9cfdf352dbbcc' }))));
     }
     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: '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)));
+        return (h(Host, { key: 'd1db2d94effc57679d76eda478c58b8b249ec8f8', 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: '9f52e4756e920afd593cc0e189fb7a3a787f87f0', 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: '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 }))));
+        return (h(Host, { key: 'f6b28c8faba40da040e139ec92757837c643bc44', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '8474544891624bc816606bcbca7a9589f2740acb', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '04609fd4beddc284e8c132864cdbff1cd76e0328', 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: '4d167de602c3a6e48f6f35d7fade4e5d5b6d4706', 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: 'b0abca943beea5a541eead43d050a0c5add16216', 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: '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' })));
+        return (h(Host, { key: '60ea4a88825c99f20a5db8a458c4c27ad04d616c', 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: '307d340b0c7e0333995fc22030cd4c1794f54136' })));
     }
     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: '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
+        return (h(Host, { key: '1b075647fbe8923e1d12974c621e391e6557cc48', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'a71a4bd3a2c803b6890f89a78fdfb611fbde8f5a', 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: '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' }))));
+                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'a65ae5081e4c747a9c16fe8b499c67b23763d806', 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: '174ce02d638806795cccbc8dc9990d07f4cfe630', 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: 'e7b31122122f29e7f9dd52b4caeb797ae5584c38', 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: '86c3712230c6610e8b96280f91d5b6069d82edbf', 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: '36fdd2af649f0ccc5f7d30df90c6a1cce14eda2e', 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: 'ba4a9e84148ea1431033da83477e7563a61e0826', 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: '046f4677bcf864dcd9f6d8e5e55ff95276cd9166' }))));
     }
     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: '98ddfeb7afcbd227d2f9e6dc64b0576980604e7d', class: {
+        return (h(Host, { key: '4aecfd6cf7bc49df8feb26cd3161af9174097fcc', 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: 'cff31ea3f186c33b784f4fc9e21d8f4a058c8783' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
+            } }, h("slot", { key: 'b1d4c61b4ba0cbd96c11d5540e12dafcc4b2518e' }), 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: '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' })))));
+        return (h(Host, { key: '77490edbe70ab5796e9359501cc7c7c13b38ff35', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '51c69843812a75f1b22629fb76f25c99aeb5104e', 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: '68f54f8473467fcfbbe7dde4d1fed735f57bdcd7' }, h("slot", { key: '568fcc10257812cd18401d15819916f9ea2fb312' })))));
     }
     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: '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' }))));
+        return (h(Host, { key: '049f3e7c80126a7ffbc005e6c69a1bdc8203979b', class: "bal-field-label" }, h("bal-label", { key: '269ecb6de6a5daf2f4d4504b37f3980d05b1a121', 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: 'd832133cb85456ec6b7b1a999b5459044579e783' }))));
     }
     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: '49bde33372b1fc399e3f33e2ff93d1ee2d913676', id: this.ariaForm.messageId, class: {
+        return (h(Host, { key: '61a31ecf947fffa55b3cb3e18fdf3c4fb4348437', 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: 'c6320e5e0c3652d441ac5ae882bb8b521ab20a28' })));
+            } }, h("slot", { key: '94cabb752b176e43e39e290afadeb706a7fc64cb' })));
     }
     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: '06ae9278bc96f9bd4185762f8047cdac15b9721d', id: this.fieldId, class: {
+        return (h(Host, { key: '2d5f00847eed504077334ab0a99e7d8ec2d5e933', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, h("slot", { key: '0195671b4e3f7194a3871e97ce793859b1f12b6c' }), h("span", { key: 'b2bcd598dd58e1e811b19255b3ed06638a010373', class: "bal-field-hidden" })));
+            } }, h("slot", { key: '7e84f2c3b7a5070c3d44616d4f61c798ed201708' }), h("span", { key: 'b7999bd90707cf04144c23ee94cf6ef5e8605ba1', 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: '18f647eae8f8570f3590af4ccc64e79e245c72c5', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
+        return (h(Host, { key: 'dc5b0ffa01094b304728a6bd20e8364ee410c877', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
                 'bal-file-upload': true,
-            } }, h("div", { key: '3a6dcbf5c3dee37ced17082021cc87c9f744c9d5', class: {
+            } }, h("div", { key: 'fa20226a3185331523ede065a729410b7a1469d6', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { key: 'fb8472eb739b0253f3620208db7bdf177c2ef5e9', htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, h("label", { key: 'a27ba82c67898305a907a24c1a5101c78d4c0859', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, 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 })) : ('')));
+            } }, h("input", { key: '7ee35dcb15d921f92a7055a4234d710253282f03', 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: '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: {
+        return (h(Host, { key: 'dbb10b62df792021f3ee814990225a5141906dcf', class: Object.assign({}, block.class()) }, h("footer", { key: '9bb866cae3936c2caf1cc7e63879c4681d2ee1a8', class: Object.assign({}, elInner.class()) }, h("div", { key: 'aee0462f8b07cf1c546647b67434bbbd0b0ce582', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '5b9b7a54156c1eb5dba8096c7a6add4939d0626d', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '632b26b347fe91b95d72e725db22bebcb303facf', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: 'e91b5cd73918ff9fbd7910e563b29a1396299942', color: "white" })), h("div", { key: '25a3bc1c711f33114df091fe4ed4de5f2e4298f6', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, 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: {
+            } }, h("div", { key: '0d6f3a4ef5db0a8973c2baa293d02badbf25ab8c', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: 'ffa4e67aa6d2210f5739c5114127e46f50e2f31b', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: '0d3061a89a4fe04aecbb5498fa03ce263e8447ab', 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: 'ca5e0091909a9c8fd92ca69f3d8937d0b976bee2', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '42575b0eb8ecc7e12679b28786ed27484088d01d' })), h("div", { key: '3600fe32dfeeea73ff2afac7ce8549d5e52bfb04', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '697a4f34081dbc8255b02425b2f2fcd0285670bf', 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: '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: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '3b91222ee07a7c7d5e1995f5180398272fd6d92e', 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: 'c972bc34a2dfe3d533f9c32e6ba708f30180edc6' }, h(NativeEl, Object.assign({ key: '9bb649089f07379fdc35be655b0e66a9bf5d47f5' }, attrs, { class: this.formClass }), h("slot", { key: '408363c63caecf082f6033c1bbd8e42efbf42a8e' }))));
+        return (h(Host, { key: 'ed6e199a51186247ccad8e06989ba9819e43bed2' }, h(NativeEl, Object.assign({ key: 'de4a61e1690819e10096cd1c35eecc0371d73aae' }, attrs, { class: this.formClass }), h("slot", { key: 'f35cce725fc54ad822aada77aabaf6f0babd4141' }))));
     }
     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: '2ab46fbeb219367638cc0f87690a5cd0c88adf85', class: {
+        return (h(Host, { key: '5ee1da91eaa100771f43f5ca80e01ac5a47a5d5f', 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: '6756856039fd664907f2cf396c5bbf109bc7f6bd' })));
+            } }, h("slot", { key: '498c7e5a0b163c2cb3e465cb43087db432f92650' })));
     }
     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: '0b96b788c9a67e1c943667ca40461a9276a7207a', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: '1aa7ce9b16db009f5d7d5a2fe6c6c63fede27907' })));
+        return (h(Host, { key: '7dd05e54b6f2070956b4630a542c249734981731', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'd9490a9e4153d985dad9258dc795ea1b092930f4' })));
     }
     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: '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' }))));
+        return (h(Host, { key: '0a723b1f41cbd6af93aecd84ce5ee39ef6c29d24', 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: '16e782645408fb537c1f466ee547301f61b71b24', 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: 'c9a7f343eada2e03fe4b58f70ffb9856842b1137' }))));
     }
     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: '55e5c7e590c542d9231cd4847c386a31ff2f8431', class: Object.assign({}, elText.class()) }, h("p", { key: '336d4b62922364184fc23ac302da56543dfb5ec1', class: Object.assign({}, elTextField.class()) }, h("slot", { key: '1a94c41250826a0b958a3a52401a67355ed8059e' }))));
+        return (h(Host, { key: '24898db6c3c51d19a7df6552a2e0f370c8812f95', class: Object.assign({}, elText.class()) }, h("p", { key: '2ff7501b81213d1a553f2a9a9c98df6d9577e5e8', class: Object.assign({}, elTextField.class()) }, h("slot", { key: 'e2f5ecd78ad99fc53713576807011f39884ad7fb' }))));
     }
     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: '3e147e9af600461b10a755bcfd830be1f54604e4', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '462cf6ae7ccef24756799c66677bc3b03809868e', class: Object.assign({}, elHeading.class()) }, h("span", { key: 'e3034bb3b60388ba96d93b2658115aa5c8aa3bee' }, h("slot", { key: 'd3030ef06a0d6372f6e643e742bdd3b015299239' })))));
+        return (h(Host, { key: '6304fd03629ecdbaeff48777da6e9950a02e02bf', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '5cdfc4c2319f7b8b17f23d02aeae7cbc534134af', class: Object.assign({}, elHeading.class()) }, h("span", { key: '6e5ce498f0574fe356778d87fb98f59b446bd8e3' }, h("slot", { key: '9604fad3ee38908e2a51ab295e7d17dad7b3d7fc' })))));
     }
     static get is() { return "bal-hint-title"; }
 }

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

@@ -1 +1 @@
-: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{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:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{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}
+@media(hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){box-shadow:var(--bal-focus-shadow) !important}}: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{user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint__content{background:var(--bal-hint-content-background);display:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{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}

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

@@ -107,7 +107,12 @@ export class Hint {
         const padding = this.isMobile ? 0 : 8;
         const offsetY = this.isMobile ? 0 : 16;
         const TriggerIcon = () => {
-            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "data-testid": "bal-hint-trigger", "bal-popover-trigger": true, "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onClick: () => this.toggle(), onKeyDown: event => (isEnterKey(event) || isSpaceKey(event)) && this.toggle() }));
+            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "data-testid": "bal-hint-trigger", "bal-popover-trigger": true, "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onClick: () => this.toggle(), onKeyDown: event => {
+                    if (isEnterKey(event) || isSpaceKey(event)) {
+                        event.preventDefault();
+                        this.toggle();
+                    }
+                } }));
         };
         const HintContent = () => {
             return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));