@baloise/ds-core 16.8.0-nightly.20241128 → 17.0.0

package/dist/collection/components/bal-popup/variants/popover-variant.renderer.js

@@ -1,4 +1,4 @@
-import { computePosition, offset, arrow, flip, shift, autoUpdate } from "@floating-ui/dom";
+import { balFloatingUi } from "../../../utils/floating-ui";
 import { balBrowser } from "../../../utils/browser";
 import { AbstractVariantRenderer } from "./abstract-variant.renderer";
 export class PopoverVariantRenderer extends AbstractVariantRenderer {
@@ -12,6 +12,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
         this.triggerEl = null;
     }
     async present(component) {
+        const lib = await balFloatingUi.load();
         //
         // identify trigger element or the the closest trigger available
         if (!component.trigger && balBrowser.hasDocument) {
@@ -40,7 +41,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
                 if (isNavMetaDesktopPopup) {
                     component.setMinWidth(this.triggerEl.clientWidth);
                 }
-                this.cleanup = autoUpdate(this.triggerEl, component.containerEl, () => {
+                this.cleanup = lib.autoUpdate(this.triggerEl, component.containerEl, () => {
                     this.update(component);
                 }, {
                     ancestorScroll: true,
@@ -57,6 +58,7 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
     async update(component) {
         var _a, _b;
         if (this.triggerEl && component.trigger && component.containerEl && component.arrowEl) {
+            const lib = await balFloatingUi.load();
             const isNavMetaDesktopPopup = this.placement === 'bottom-end' && this.triggerEl !== component.trigger;
             const referenceRect = (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             const triggerRect = (_b = component.trigger) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
@@ -64,18 +66,20 @@ export class PopoverVariantRenderer extends AbstractVariantRenderer {
             if (balBrowser.hasWindow) {
                 isInFrame = !!window.frameElement;
             }
-            computePosition(this.triggerEl, component.containerEl, {
+            lib
+                .computePosition(this.triggerEl, component.containerEl, {
                 placement: this.placement,
                 middleware: [
-                    isInFrame ? undefined : shift(),
-                    flip(),
-                    offset(this.arrow ? 16 : this.offset),
-                    arrow({
+                    isInFrame ? undefined : lib.shift(),
+                    lib.flip(),
+                    lib.offset(this.arrow ? 16 : this.offset),
+                    lib.arrow({
                         element: component.arrowEl,
                         padding: 4,
                     }),
                 ],
-            }).then(({ x, y, middlewareData, placement }) => {
+            })
+                .then(({ x, y, middlewareData, placement }) => {
                 if (component.containerEl) {
                     Object.assign(component.containerEl.style, {
                         left: `${x}px`,

package/dist/collection/components/bal-radio/bal-radio-group/bal-radio-group.js

@@ -8,6 +8,7 @@ import { inheritAttributes } from "../../../utils/attributes";
 import { ListenToMutation } from "../../../utils/mutation";
 import { defaultBalAriaForm } from "../../../utils/form";
 import { ListenToFocus } from "../../../utils/focus";
+import { ListenTo } from "../../../utils/listen";
 export class RadioGroup {
     constructor() {
         this.inputId = `bal-rg-${radioGroupIds++}`;
@@ -767,39 +768,6 @@ export class RadioGroup {
                 "methodName": "columnsMobileChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balChange",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "balFocus",
-                "method": "radioFocusListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "balBlur",
-                "method": "radioBlurListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetListener",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "onKeydown",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-radio-group'),
@@ -825,4 +793,34 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], RadioGroup.prototype, "mutationListener", null);
+__decorate([
+    ListenTo('balChange', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('balFocus', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "radioFocusListener", null);
+__decorate([
+    ListenTo('balBlur', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [CustomEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "radioBlurListener", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "resetListener", null);
+__decorate([
+    ListenTo('keydown', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], RadioGroup.prototype, "onKeydown", null);
 let radioGroupIds = 0;

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

@@ -8,6 +8,7 @@ import { inheritAttributes } from "../../utils/attributes";
 import { stopEventBubbling } from "../../utils/form-input";
 import { isSpaceKey } from "../../utils/keyboard";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 export class Radio {
     constructor() {
         this.inputId = `bal-rb-${radioIds++}`;
@@ -246,7 +247,7 @@ export class Radio {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { key: '60507e52dd83318dabc88946e1ba715acbaa668d', "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: 'fa9922580a79810d7d8072d1412d2c57583486dc', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, h("slot", null)))) : ('')));
+        return (h(Host, { key: 'd8027f12093f1564c38b859a1e4dab25e75eba64', "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '0b1a0313d4161c9f6725f7c8234f49d3678f5fa2', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, h("slot", null)))) : ('')));
     }
     static get is() { return "bal-radio"; }
     static get originalStyleUrls() {
@@ -741,15 +742,6 @@ export class Radio {
         };
     }
     static get elementRef() { return "el"; }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-radio'),
@@ -757,4 +749,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Radio.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Radio.prototype, "listenOnClick", null);
 let radioIds = 0;

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

@@ -10,6 +10,7 @@ import { raf } from "../../utils/helpers";
 import { ListenToBreakpoints } from "../../utils/breakpoints";
 import { ListenToFocus } from "../../utils/focus";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 export class Segment {
     constructor() {
         /**
@@ -297,7 +298,7 @@ export class Segment {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: '592d01f553a7e3a2ee4949dd55d18c48f595da4a', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: 'a7662329e74e8f0a33391d042929862a5f205b59', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: 'f5cf0a37669b14db14104214dd142b8bed5266d6', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '9952482b6bec65e4a7ed05b4cd34d58331805b4e', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "bal-segment"; }
     static get originalStyleUrls() {
@@ -588,21 +589,6 @@ export class Segment {
                 "methodName": "valueChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "keydown",
-                "method": "listenOnKeyDownOutside",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "listenOnKeyDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-segment'),
@@ -634,3 +620,15 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "windowResizeListener", null);
+__decorate([
+    ListenTo('keydown', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "listenOnKeyDownOutside", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "listenOnKeyDown", null);

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

@@ -10,6 +10,7 @@ import { stopEventBubbling } from "../../utils/form-input";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 const isHuman = true;
 const isNotHuman = false;
 export class Select {
@@ -680,7 +681,7 @@ export class Select {
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: 'dca3fb43d91295b5fc9568181ba400ae09e7f516', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: '4b1cc586f9d9b2a7b08a01b35e60a1b1a9f595cd', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -694,19 +695,19 @@ export class Select {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '8fa9bdba0839632f94f504e24ea07b8d47ca14f8', role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '2869e6aaf01547b342e2403f70545e085673bfa0', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '4ec4fe0d51788f74cfcc8b35656630a4639965a3', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '03e930fc6d1e0f1ad21f05c3844e852069fa7791', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '676f4fb3a84db7f648cf4847026d9ceaf90cb3cd', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '0a96668b7026a0727bb790bd8a832586fac60198', role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '171e653ec3b49ef15466a0f6c337a61573ddc86b', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '570c0f670158386819df181079f49d0d534da6c7', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '121bf963a166d7523954b199bb776accaa84ae7a', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '0bf2ba2f0ef23aaa222b547df175c5dfc4b3d6c6', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (h(Chip, { value: value }))), h("input", { key: '74c05b91312eeaa0c5a46ea8e2a6c76e461355db', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (h(Chip, { value: value }))), h("input", { key: '45872c26a2889e0dd79851bc8ea6854d9f9fe33e', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '6893385c95d7340a01ce226cccf466708d1e7ea1', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: 'dd84e4a49c36226341c8a064988c8cf4c9b5e828', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'ea92274af42677442251f3120e57399acb32b615', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '824accbd7d97809ed3b91403a959528efaf448ce', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }
@@ -1432,27 +1433,6 @@ export class Select {
                 "methodName": "valueWatcher"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-select'),
@@ -1460,4 +1440,22 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Select.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Select.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Select.prototype, "resetHandler", null);
+__decorate([
+    ListenTo('keydown', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Select.prototype, "handleKeyDown", null);
 let selectIds = 0;

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

@@ -14,6 +14,7 @@ import { ListenToMutation } from "../../utils/mutation";
 import { ListenToResize } from "../../utils/resize";
 import { TabNav } from "./components/tab-nav";
 import { toKebabCase } from "../../utils/string";
+import { ListenTo } from "../../utils/listen";
 export class Tabs {
     constructor() {
         this.tabsId = `bal-tabs-${TabsIds++}`;
@@ -571,13 +572,13 @@ export class Tabs {
         const contentPart = expanded ? 'content expanded' : 'content';
         const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
         const isLinkList = !this.isTabList;
-        return (h(Host, { key: '2748abe8138c1a8ad87f21ce163abaeca2a3650f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
+        return (h(Host, { key: '5cf2cfcf105000a24aabdb6bec167155bfe64d91', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
                 .filter(t => this.isTabActive(t))
                 .map(t => t.value)
                 .join(','), "data-label": this.store
                 .filter(t => this.isTabActive(t))
                 .map(t => t.label)
-                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { key: 'a7857053a0031ee29600d94cb6738d873c2a74dd', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '1fe37a10f65b658786696a88ae0250ff190e303f', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '9bacd91f9753ffe5c2491bda5d04201a6bab42e1' })))));
+                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { key: '9b07748ace351ce78cd552229f2694e349592d3d', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '099b85a0205426e163c8b43320cb007c7ea1afc9', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '6262221556c0f514b4c42138796b7d92097887d0' })))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {
@@ -1164,27 +1165,6 @@ export class Tabs {
                 "methodName": "valueChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "balWillAnimate",
-                "method": "listenToWillAnimate",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "balDidAnimate",
-                "method": "listenToDidAnimate",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
-                "name": "keydown",
-                "method": "listenToKeyDown",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-tabs'),
@@ -1210,6 +1190,24 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Tabs.prototype, "resizeListener", null);
+__decorate([
+    ListenTo('balWillAnimate', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToWillAnimate", null);
+__decorate([
+    ListenTo('balDidAnimate', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToDidAnimate", null);
+__decorate([
+    ListenTo('keydown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "listenToKeyDown", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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

@@ -1,9 +1,11 @@
+import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
 import { getInputTarget, inputHandleBlur, inputHandleChange, inputHandleClick, inputHandleFocus, inputHandleHostClick, inputHandleReset, inputListenOnClick, inputSetBlur, inputSetFocus, } from "../../utils/form-input";
 import { debounceEvent } from "../../utils/helpers";
 import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenTo } from "../../utils/listen";
 export class Textarea {
     constructor() {
         this.inputId = `bal-textarea-${TextareaIds++}`;
@@ -105,7 +107,7 @@ export class Textarea {
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { key: '581f1a13571bfdfe83d08114821035ddd51d2446', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '73c7b3119651ff679aa65312b73a1840301ce037', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '1ab58aaee7ac3f58719dad38b8a1e6a920f7b5fe' }))));
+        return (h(Host, { key: 'ad09331d104fcf7279b9cc2c403fa4d032b47c32', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '00278cc7b951ca19e01dd9157506185782eb8ee4', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '70ac340a5c61d29a355e115bdec0635eca4367dc' }))));
     }
     static get is() { return "bal-textarea"; }
     static get originalStyleUrls() {
@@ -656,20 +658,17 @@ export class Textarea {
                 "methodName": "debounceChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Textarea.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], Textarea.prototype, "resetHandler", null);
 let TextareaIds = 0;

package/dist/collection/components/bal-time-input/bal-time-input.js

@@ -10,6 +10,7 @@ import { BEM } from "../../utils/bem";
 import { i18nBalTimeInput } from "./bal-time-input.i18n";
 import { defaultBalAriaForm } from "../../utils/form";
 import { Logger } from "../../utils/log";
+import { ListenTo } from "../../utils/listen";
 export class TimeInput {
     constructor() {
         this.inputId = `bal-time-input-${timeInputIds++}`;
@@ -130,7 +131,7 @@ export class TimeInput {
         const value = this.focused ? this.getRawValue() : this.getFormattedValue();
         const block = BEM.block('time-input');
         const native = block.element('native');
-        return (h(Host, { key: '0c7874f83c267aa444d6bb4ea38e2c9815e9f673', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '5899915ba6c27ea056882af19e829844bd8a8a8b', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '2de51b908e7d92e4bd1987c056e296a21298b228', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: '876f2dbff9fe3153f7d33b1825b289772eeefb26', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
+        return (h(Host, { key: '67ec2306c4cf0a9e6b5cee8af80f930e5dc4ee33', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("bal-input-group", { key: '1873f5acc2647eb4b4d4f2634693caafadb98341', disabled: this.disabled || this.readonly, invalid: this.invalid }, h("input", Object.assign({ key: '846d18705dd58f61a418cb4c25fab603e3c9264d', type: "time", class: Object.assign({ 'input': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'has-focus': this.focused, 'show-placeholder': !this.focused && (this.value === '' || this.value === undefined), 'has-value': this.value !== '' && this.value !== undefined }, native.class()), ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: `${i18nBalTimeInput[this.language].hours}:${i18nBalTimeInput[this.language].minutes}`, value: value, onInput: ev => this.onInput(ev), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes)), h("bal-icon", { key: 'd34d154f6bafaa5fe925a9333796e5c2b1c41dfc', "is-right": true, color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : 'primary', name: "clock" }))));
     }
     static get is() { return "bal-time-input"; }
     static get originalStyleUrls() {
@@ -549,21 +550,6 @@ export class TimeInput {
                 "methodName": "debounceChanged"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenOnClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "resetHandler",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }];
-    }
 }
 __decorate([
     Logger('bal-time-input'),
@@ -571,6 +557,18 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], TimeInput.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "listenOnClick", null);
+__decorate([
+    ListenTo('reset', { capture: true, target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [UIEvent]),
+    __metadata("design:returntype", void 0)
+], TimeInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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

@@ -5,7 +5,7 @@ import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { balDevice } from "../../utils/device";
 import { showContainerElement, showArrowElement, hideContainerElement, hideArrowElement } from "./bal-tooltip.util";
-import { computePosition, offset, arrow, flip, autoUpdate, shift } from "@floating-ui/dom";
+import { balFloatingUi } from "../../utils/floating-ui";
 export class Tooltip {
     constructor() {
         this.tooltipId = `bal-to-${tooltipIds++}`;
@@ -91,7 +91,8 @@ export class Tooltip {
             showArrowElement(this.arrowEl);
             this.trigger.classList.add('bal-tooltip-trigger');
             this.presented = true;
-            this.cleanup = autoUpdate(this.trigger, this.containerEl, () => {
+            const lib = await balFloatingUi.load();
+            this.cleanup = lib.autoUpdate(this.trigger, this.containerEl, () => {
                 this.update();
             }, {
                 ancestorScroll: true,
@@ -133,18 +134,21 @@ export class Tooltip {
             if (balBrowser.hasWindow) {
                 isInFrame = !!window.frameElement;
             }
-            computePosition(this.trigger, this.containerEl, {
+            const lib = await balFloatingUi.load();
+            lib
+                .computePosition(this.trigger, this.containerEl, {
                 placement: this.placement,
                 middleware: [
-                    isInFrame ? undefined : shift(),
-                    flip(),
-                    offset(8),
-                    arrow({
+                    isInFrame ? undefined : lib.shift(),
+                    lib.flip(),
+                    lib.offset(8),
+                    lib.arrow({
                         element: this.arrowEl,
                         padding: 4,
                     }),
                 ],
-            }).then(({ x, y, middlewareData, placement }) => {
+            })
+                .then(({ x, y, middlewareData, placement }) => {
                 const side = placement.split('-')[0];
                 const staticSide = {
                     top: 'bottom',
@@ -191,7 +195,7 @@ export class Tooltip {
         const arrowBlock = block.element('arrow');
         const innerBlock = block.element('inner');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '17ce8485cb74140d3b2c0c6a043d680fb370e37a', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '2df7d9e5f12031787b7af31dc3043b76c7aae23d', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: 'a81880ae861f24c2fe3e6fdde65bf530e1e29302', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '21cca7b1709eece74086aa7a882c6238c41f0bd6', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: '3d20f385b37e1ad8142c0a6d006a9a6c5c77822d', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", { key: 'bbef5163cf536490c18577abd5aa9e1bac026c66' }))))));
+        return (h(Host, { key: 'be527a1b6a3bc6c4958692998c35a935ec529484', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}` }, h("div", { key: '1ef5d833c3796839e5f265651867d2a3d17c0251', class: Object.assign({}, containerBlock.class()), ref: containerEl => (this.containerEl = containerEl) }, h("div", { key: '0f29a68c79453bbde28ed48464e91b49caf46ada', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '71509e320a90d1e5e8fd92fc689352bd352a5557', layout: "vertical", class: Object.assign({}, innerBlock.class()) }, h("div", { key: '56628c0fce715db27e5a39385d7b698aabc070e1', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-tooltip-content" }, h("slot", { key: 'a303a3a3b414eaddd6cba0a3ee585451a29be532' }))))));
     }
     static get is() { return "bal-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/constants/version.constant.js

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '16.8.0-nightly.20241128';
+export const VERSION = '17.0.0';