@baloise/ds-core 16.8.0 → 17.0.0

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, { class: Object.assign({}, blockEl.class()) }, h("button", { 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", { 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: '28a807ed717bd60d6534beee83086e87165c6b8f', class: Object.assign({}, blockEl.class()) }, h("button", { key: 'f74d31fca4b77c4a39365cb43ff44279fbfcfe65', 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: '49e49cf68edacc7d69e8d7c42abfb98ff1281f28', 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, { 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", null)));
+        return (h(Host, { key: 'f5838f89492ab4147c9654d4490780ac55f64437', 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: '07907466799f1bc60d530215fd92b7e2c2636e6f' })));
     }
     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, { 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", null)));
+        return (h(Host, { key: 'a2c7f920fdafc6672964f3a34785f9e1bf10f7e3', 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: 'e34d2d90b08bd824b54cd636beee7702c2e57192' })));
     }
     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, { class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", null), this.required ? '*' : ''));
+        return (h(Host, { key: '1c156284930b724997e295912bfebfba138649a2', class: Object.assign({}, BEM.block('data-label').class()) }, h("slot", { key: 'b39c528fb8f45324a056c9b7305bb4ce8fea47c6' }), 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, { 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", null, h("slot", null)), h("bal-button", { 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: 'a3694b08f08f4bfd2a6de223ae7c27453cdc7f02', 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: 'f26f3535658c7a2aacd45b71d0c7feab05703bbb' }, h("slot", { key: 'd2b482f904a0312555cc24cc22db7126e1b8da6c' })), h("bal-button", { key: 'c3357978fa4d4fdbc65825e8dd0d87d3b22af10b', 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, { 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", null)));
+        return (h(Host, { key: '864257bdb7de053ad8905c5ed5bd0b2bb9dd5793', 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: '2480dde04221d364d9a6f16a3469d6238762bf86' })));
     }
     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, { class: Object.assign({}, block.class()) }, h(CalendarNav, { 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", { class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { 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, { name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { class: Object.assign({}, blockFoot.class()) }, h("slot", null))));
+        return (h(Host, { key: '248e291f860cdb55eb13cce3afa9fd453efd9bb1', class: Object.assign({}, block.class()) }, h(CalendarNav, { key: 'b22fb7f5d3459b29b1bc7ad10925f797964a1bf2', 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: 'e7348e9fe457bd309ecf8645ae1af0138d6ea156', class: Object.assign({}, blockBody.class()) }, h(CalendarGrid, { key: '87bab404d1e8777b818c4d4df0d49092b29e96ff', 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: '106142481bd53e6d24e91ef0245fe336704c0578', name: "year", isVisible: this.isYearListVisible, girdHeight: girdHeight, list: this.years, ref: el => (this.yearListEl = el), onSelect: item => this.onClickYear(item.value) }), h(CalendarList, { key: '9341dbb8c0f7ce5713a9cbdb5e4a22d3db83b43a', name: "month", isVisible: this.isMonthListVisible, girdHeight: girdHeight, list: this.months, onSelect: item => this.onClickMonth(item.value) })), h("div", { key: '5e74571cea6b858964554f3065eb40092535f1dd', class: Object.assign({}, blockFoot.class()) }, h("slot", { key: 'c3cc4f4f43d40b095ad03fe23a8645282e658765' }))));
     }
     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

@@ -30,7 +30,7 @@ export class DateCalendarCell {
      */
     render() {
         const block = BEM.block('date-calendar-cell');
-        return (h(Host, { 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": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, h("time", { dateTime: this.isoDate }, this.day)));
+        return (h(Host, { key: 'f3e32c2777dee61702819acd5839608ae8f28c0c', 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": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', title: this.fullDate, onClick: (ev) => this.onClick(ev, this.isoDate) }, h("time", { key: '3e9df0253eb9828eacd3fe73f6ce58bfc500e3d4', 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

@@ -1,7 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { isSpaceKey } from "@baloise/web-app-utils";
-import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
+import { isSpaceKey } from "../../utils/keyboard";
 import { i18nBalDate } from "./bal-date.i18n";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
@@ -11,6 +10,8 @@ import { stopEventBubbling } from "../../utils/form-input";
 import { ListenToConfig, defaultConfig } from "../../utils/config";
 import { debounceEvent } from "../../utils/helpers";
 import { defaultBalAriaForm } from "../../utils/form";
+import { balFloatingUi } from "../../utils/floating-ui";
+import { ListenTo } from "../../utils/listen";
 export class Date {
     constructor() {
         this.inputId = `bal-da-${dateIds++}`;
@@ -225,10 +226,11 @@ export class Date {
      */
     async expand() {
         if (this.referenceEl && this.floatingEl) {
+            const lib = await balFloatingUi.load();
             this.balPopoverPrepare.emit(this.inputId);
             this.balWillAnimate.emit();
             this.isExpanded = true;
-            this.popupCleanup = autoUpdate(this.referenceEl, this.floatingEl, () => {
+            this.popupCleanup = lib.autoUpdate(this.referenceEl, this.floatingEl, () => {
                 this.updatePosition(this.referenceEl, this.floatingEl);
             });
         }
@@ -245,11 +247,14 @@ export class Date {
         }
         return this.isExpanded;
     }
-    updatePosition(referenceEl, floatingEl) {
-        computePosition(referenceEl, floatingEl, {
+    async updatePosition(referenceEl, floatingEl) {
+        const lib = await balFloatingUi.load();
+        lib
+            .computePosition(referenceEl, floatingEl, {
             placement: 'bottom-start',
-            middleware: [offset(4), flip({ crossAxis: false })],
-        }).then(({ x, y }) => {
+            middleware: [lib.offset(4), lib.flip({ crossAxis: false })],
+        })
+            .then(({ x, y }) => {
             Object.assign(floatingEl.style, {
                 left: `${x}px`,
                 top: `${y}px`,
@@ -265,7 +270,7 @@ export class Date {
         const block = BEM.block('date');
         const blockIcon = block.element('icon');
         const blockPopup = block.element('popup');
-        return (h(Host, { id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ 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, 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": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { 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", { 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: '0e4243022c01b88366ad8f8b750da6de3b9ecfc3', id: this.inputId, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '86132e01d44f18bbd89efa002117b20bbf754837', invalid: this.invalid, readonly: this.readonly, disabled: this.disabled, ref: el => (this.referenceEl = el) }, h("bal-input-date", Object.assign({ key: '07737ec9049d123c3966bc00e6ccb918cca23236', 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, 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": this.isExpanded ? 'true' : 'false' })) : ('')), h("div", { key: 'c2102abdd6b594154520b4df8cb8419c81dfd6f1', 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: 'be87d5e2a31943b1661aea0d6012db8dcd7002b2', 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() {
@@ -1012,33 +1017,6 @@ export class Date {
                 "methodName": "debounceChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenToKeydown",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keyup",
-                "method": "listenOnKeyup",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "listenOnclick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "balPopoverPrepare",
-                "method": "listenOnPopoverPrepare",
-                "target": "body",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-date'),
@@ -1046,6 +1024,30 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Date.prototype, "createLogger", null);
+__decorate([
+    ListenTo('keydown', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenToKeydown", null);
+__decorate([
+    ListenTo('keyup', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenOnKeyup", null);
+__decorate([
+    ListenTo('click', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenOnclick", null);
+__decorate([
+    ListenTo('balPopoverPrepare', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", Promise)
+], Date.prototype, "listenOnPopoverPrepare", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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, { 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", null)));
+        return (h(Host, { key: '8478d5e9ab81d7062675e8a83f5da79efe9e2554', 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: '30d8100818dcddd6a2d8d21df17f41965d12d4f8' })));
     }
     static get is() { return "bal-divider"; }
     static get originalStyleUrls() {

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from "@baloise/web-app-utils";
+import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey } from "../../utils/keyboard";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { stopEventBubbling } from "../../utils/form-input";
@@ -8,7 +8,8 @@ import { inheritAttributes } from "../../utils/attributes";
 import { DropdownEventsUtil, DropdownFormSubmitUtil, DropdownOptionUtil, DropdownPopupUtil, DropdownValueUtil, DropdownOptionList, DropdownFocusUtil, DropdownIcon, DropdownNativeSelect, DropdownInput, DropdownValue, DropdownAutoFillUtil, } from "../../utils/dropdown";
 import { ListenToConfig, defaultConfig, } from "../../utils/config";
 import { defaultBalAriaForm } from "../../utils/form";
-import { waitAfterIdleCallback } from "../../utils/helpers";
+import { addEventListener, removeEventListener, waitAfterIdleCallback } from "../../utils/helpers";
+import { balBrowser } from "../../utils/browser";
 export class Dropdown {
     constructor() {
         this.inputId = `bal-dropdown-${balDropdownIds++}`;
@@ -22,6 +23,20 @@ export class Dropdown {
         this.formSubmitUtil = new DropdownFormSubmitUtil();
         this.focusUtil = new DropdownFocusUtil();
         this.autoFillUtil = new DropdownAutoFillUtil();
+        /**
+         * LIFECYCLE
+         * ------------------------------------------------------
+         */
+        this.hasConnected = false;
+        this.listenToOptionChange = (ev) => {
+            this.optionUtil.listenToOptionChange(ev);
+        };
+        this.listenOnClickOutside = (ev) => {
+            this.eventsUtil.handleOutsideClick(ev);
+        };
+        this.resetHandler = (ev) => {
+            this.formSubmitUtil.handle(ev);
+        };
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -144,18 +159,33 @@ export class Dropdown {
     valueChanged(newValue, oldValue) {
         this.valueUtil.valueChanged(newValue, oldValue);
     }
-    /**
-     * LIFECYCLE
-     * ------------------------------------------------------
-     */
     connectedCallback() {
-        this.eventsUtil.connectedCallback(this);
-        this.valueUtil.connectedCallback(this);
-        this.popupUtil.connectedCallback(this);
-        this.optionUtil.connectedCallback(this);
-        this.formSubmitUtil.connectedCallback(this);
-        this.focusUtil.connectedCallback(this);
-        this.autoFillUtil.connectedCallback(this);
+        if (!this.hasConnected) {
+            this.eventsUtil.connectedCallback(this);
+            this.valueUtil.connectedCallback(this);
+            this.popupUtil.connectedCallback(this);
+            this.optionUtil.connectedCallback(this);
+            this.formSubmitUtil.connectedCallback(this);
+            this.focusUtil.connectedCallback(this);
+            this.autoFillUtil.connectedCallback(this);
+        }
+        addEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (balBrowser.hasDocument) {
+            addEventListener(document, 'click', this.listenOnClickOutside);
+            addEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
+        }
+        this.hasConnected = true;
+    }
+    disconnectedCallback() {
+        removeEventListener(this.el, 'balOptionChange', this.listenToOptionChange);
+        if (balBrowser.hasDocument) {
+            removeEventListener(document, 'click', this.listenOnClickOutside);
+            removeEventListener(document, 'reset', this.resetHandler, {
+                capture: true,
+            });
+        }
     }
     async componentWillRender() {
         this.inheritedAttributes = inheritAttributes(this.el, ['tabindex']);
@@ -179,15 +209,6 @@ export class Dropdown {
         this.region = state.region;
         this.httpFormSubmit = state.httpFormSubmit;
     }
-    async listenToOptionChange(ev) {
-        this.optionUtil.listenToOptionChange(ev);
-    }
-    listenOnClickOutside(ev) {
-        this.eventsUtil.handleOutsideClick(ev);
-    }
-    resetHandler(ev) {
-        this.formSubmitUtil.handle(ev);
-    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
@@ -248,7 +269,7 @@ export class Dropdown {
      */
     render() {
         const block = BEM.block('dropdown');
-        return (h(Host, { class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), 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)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { class: 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())) }, h(DropdownValue, { filled: this.valueUtil.isFilled(), 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, { name: this.name, 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, { 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, { icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { 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", null))));
+        return (h(Host, { key: 'fea0abd6ec54fd7724201d2f772a93949932bd44', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: '259704fb0bec9453131bad395e084fba43aa03dd', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(this.hasFocus)), 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)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: '7fddec690d760b4c38ea29221468a7d14df18d5d', class: 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())) }, h(DropdownValue, { key: 'e73533861ddd53aac505fdc78bf051a0449cf655', filled: this.valueUtil.isFilled(), 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: '7299e6b670a1b2283b1383040d9a75f29c76fe84', name: this.name, 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: '97da430cab5eef476c4404eb27dcc65edf0b8d6e', 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: 'c2d77ffd50a1062f772123954fd95b44200b04c3', icon: this.icon, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: this.valueUtil.isFilled(), disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: 'd4c82b91392692aad6a1095fa6b25bad7ecefffa', 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: '1d9732ce6013922a304a7d52b34e79a128fb22d3' }))));
     }
     static get is() { return "bal-dropdown"; }
     static get originalStyleUrls() {
@@ -845,27 +866,6 @@ export class Dropdown {
                 "methodName": "valueChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balOptionChange",
-                "method": "listenToOptionChange",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "click",
-                "method": "listenOnClickOutside",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-dropdown'),

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, { class: {
+        return (h(Host, { key: 'bcb91952d67d6c7d2677845d6f9167ed5fe1bcff', 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", null), this.buildIconLeftTemplate, this.buildIconRightTemplate));
+            } }, h("slot", { key: '0d4aca610ab427ed32a31542ae81223b4d656dfa' }), 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, { class: Object.assign({}, block.class()) }, h("bal-hint", { 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", null, h("slot", null)))));
+        return (h(Host, { key: '9c47fdbb402b9b7f4012d2f2160fe99356f58b99', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '8cea3277913207cca651bcad4cb22fa9b8fad2f4', 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: '1523a364269414bb277bba0d0bcc1c8ba946a2cd' }, h("slot", { key: '952fa5ac1cb907233cc9ea4c179c859991ed7c4b' })))));
     }
     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, { class: "bal-field-label" }, h("bal-label", { 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", null))));
+        return (h(Host, { key: 'b1ed98ad14b6cb6e3e4642a04d71d93fe6c97e83', class: "bal-field-label" }, h("bal-label", { key: 'fdec2d6fd449841320b4646e925c09c05c39739c', 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: '04b0fb018f316044503e8ffa540441c0e1624807' }))));
     }
     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, { id: this.ariaForm.messageId, class: {
+        return (h(Host, { key: '962c48c52992d5689c6de2ce866863bdd8436a68', 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", null)));
+            } }, h("slot", { key: 'e82266f5abc43308bf05401fd24f581e2138c3c4' })));
     }
     static get is() { return "bal-field-message"; }
     static get properties() {

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

@@ -12,7 +12,6 @@ export class Field {
             'bal-number-input',
             'bal-textarea',
             'bal-select',
-            'bal-datepicker',
             'bal-checkbox',
             'bal-radio',
             'bal-input-group',
@@ -118,7 +117,6 @@ export class Field {
             'bal-field-control bal-radio-group',
             'bal-field-control bal-number-input',
             'bal-field-control bal-time-input',
-            'bal-field-control bal-datepicker',
             'bal-field-control bal-input-slider',
             'bal-field-control bal-input-stepper',
             'bal-field-control bal-textarea',
@@ -168,12 +166,12 @@ export class Field {
         components.forEach(c => callback(c));
     }
     render() {
-        return (h(Host, { id: this.fieldId, class: {
+        return (h(Host, { key: '61d8be020fb71526ad0175d75880eb155cb15623', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, h("slot", null), h("span", { class: "bal-field-hidden" })));
+            } }, h("slot", { key: 'b174f1bdd65a1fb7b63b833c3bf8532e1733d708' }), h("span", { key: '570886a9234a9e3a2ef941a419d35d5451d0227a', class: "bal-field-hidden" })));
     }
     static get is() { return "bal-field"; }
     static get originalStyleUrls() {

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

@@ -1,5 +1,5 @@
 import { __decorate, __metadata } from "tslib";
-import { areArraysEqual } from "@baloise/web-app-utils";
+import { areArraysEqual } from "../../utils/array";
 import { Host, h } from "@stencil/core";
 import { inputHandleBlur, inputHandleFocus, inputHandleHostClick, inputSetBlur, inputSetFocus, stopEventBubbling, } from "../../utils/form-input";
 import { Logger } from "../../utils/log";
@@ -7,6 +7,7 @@ import { FileListComponent } from "./components/file-list";
 import { toFileArray, toFileList } from "./utils/file-list.util";
 import { validateFileArray } from "./utils/file-validation.util";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 export class FileUpload {
     constructor() {
         this.fileUploadId = `bal-file-upload-${FileUploadIds++}`;
@@ -201,16 +202,16 @@ export class FileUpload {
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (h(Host, { onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '474742770b56c2c9200dc402db53bb4266592c72', onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
                 'bal-file-upload': true,
-            } }, h("div", { class: {
+            } }, h("div", { key: '8ce2bbbf975c8fb0dfa9b177d1a107401b7d0a33', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, h("label", { key: 'c1e836840cf74f73702af305f1d99ebca2de52b8', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, h("input", { 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": this.disabled ? 'true' : null, 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: '3ae311e7c1c0e550b3551e9f1e70ce65c54c0c83', 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": this.disabled ? 'true' : null, 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() {
@@ -781,15 +782,6 @@ export class FileUpload {
                 "methodName": "onValueChange"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-file-upload'),
@@ -797,4 +789,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], FileUpload.prototype, "createLogger", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], FileUpload.prototype, "resetHandler", null);
 let FileUploadIds = 0;

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

@@ -87,18 +87,18 @@ export class Footer {
         const elIcon = elLanguage.element('icon');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { class: Object.assign({}, block.class()) }, h("footer", { class: Object.assign({}, elInner.class()) }, h("div", { class: Object.assign({}, elInnerWrapper.class()) }, h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { class: Object.assign({}, elLogo.class()) }, h("bal-logo", { color: "white" })), h("div", { class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: '92247adf5c1f59dd1dd83184368dcf6bd34d7a67', class: Object.assign({}, block.class()) }, h("footer", { key: '41a39bb0693ff7d61d6cf331dbd91d1923feed24', class: Object.assign({}, elInner.class()) }, h("div", { key: 'd68120abd008a0a2746c00a055037bc4e2b21865', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: 'b61b0e9cc643139dfeb7f935b8a29beb50e9dda6', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '41a5007f0e8a4069d540c34cf3603b732ab1f2e4', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: '97df5a202cd54287a97343b304e895b096c6c454', color: "white" })), h("div", { key: 'e93ac339f277de74477fc598eb6a1628dd9d70d4', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: 'bal-dropdown__rear', name: "web", color: "white", onClick: el => {
+            } }, h("div", { key: 'c9dede4f4cd0d9e62a533632422e07e912df22e1', class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", { key: '7666a59e6f1a78b5c6c77c2e4f97cfc698ad59cc' }, h("bal-icon", { key: 'fd170603ffd0c8ba4debdf9cad85bfce0741a444', class: 'bal-dropdown__rear', name: "web", color: "white", onClick: el => {
                 var _a;
                 stopEventBubbling(el);
                 (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.open();
-            } }), h("bal-dropdown", { ref: el => (this.selectEl = el), value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("div", { class: Object.assign({}, elSlot.class()) }, h("slot", null)), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }), h("bal-dropdown", { key: '4fcc14f8473e4a35b1fd0f5df6ce550b611c5d84', ref: el => (this.selectEl = el), value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("div", { key: '16878b31dfaec22a49c3dbd7369a6527f0890e42', class: Object.assign({}, elSlot.class()) }, h("slot", { key: 'e4855a9897a36f4bdb6759e29337e234658eb3dc' })), h("div", { key: '4ce76b3d2c4b1bb672a0c059f773d30beffdbd4b', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '4a1f975285422c0fce884e087416053830b73d57', 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", { 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: '3cd4ce1eb946f2de35ebd6683f127c17f669e92c', 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, null, h(NativeEl, Object.assign({}, attrs, { class: this.formClass }), h("slot", null))));
+        return (h(Host, { key: '6e18df8ae00274664abd91bce9318de7c9fbd1e3' }, h(NativeEl, Object.assign({ key: '48bee97b1a0e11629d70a562ff7020cb753a258a' }, attrs, { class: this.formClass }), h("slot", { key: '8dae2c5837fead69d624ae443934bb7fa6f7dfe8' }))));
     }
     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, { class: {
+        return (h(Host, { key: 'dcfd707ec14153525343b28de33215360552d67d', 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", null)));
+            } }, h("slot", { key: 'eb9686534cb834601ec756657e8576dc0aaac9b4' })));
     }
     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, { class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", null)));
+        return (h(Host, { key: '35f3c7ca48f2c64d89c90909bca5894d6f578e64', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'dde03d5928d665ada0f41230ff6c01e8f20c1dd1' })));
     }
     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, { 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, { 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", null))));
+        return (h(Host, { key: '8086cde36ed3f4ca517135aad6210dccc9e59039', 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: '7ed342b861b33bdcb93daec513e593c531e891b5', 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: 'b189e37f7d994616493e86512f6748c85d00ba18' }))));
     }
     static get is() { return "bal-heading"; }
     static get originalStyleUrls() {