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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { b as balBrowser } from './browser-a8073d92.js';
@@ -6,7 +6,8 @@ import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { j as debounce } from './helpers-72ae7307.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { f as focusableQueryString } from './focus-visible-f0cdd043.js';
-import { a as autoUpdate, c as computePosition, s as shift, f as flip, o as offset, b as arrow } from './floating-ui.dom.esm-f1cf1077.js';
+import { L as ListenTo } from './listen-d1712e70.js';
+import { b as balFloatingUi } from './floating-ui-82413f23.js';
 import { c as isEscapeKey } from './keyboard.helpers-b2dd6393.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -143,6 +144,7 @@ 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) {
@@ -171,7 +173,7 @@ 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,
@@ -188,6 +190,7 @@ 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();
@@ -195,18 +198,20 @@ 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`,
@@ -602,7 +607,7 @@ const Popup = class {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '94a942ab716ff0b0fefd31e04c92c1f0be176598', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '8b6d28b5958988c0fb2b9278d1d59f13afe5b246', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '26a502edb497ba77d5fad9f9feb402436de104b2', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: 'df69191a8a452dbf85048664718644c5e24821ee', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '01d214cdd0ea995faac81e0e2e19cea33669ea5a', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '9fc3386a415c72948f1bd08d4057e12d54e8d7a3', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '2f60e7e5e7c33d5b7928d4d1e605d758aa1966b8' }))))));
+        return (h(Host, { key: 'bf7416d06bf9b78fb1f45474dbadbdaef3716fa9', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '907ceff3eeb00380ba075a1c942c9593fa66d828', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'a07c2e70f1964142896ab0e2dddda63212d6e7a6', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: '09fbe89593e72dfa5eda05ce017dbfdaa368ab6c', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '486d20a16eef12b6398235a15d6771924d9909b2', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'd7210ff5af9647dbe4d176e00c7af06943bdd51a', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '974459f017b51844019872313636f7055357f2e1' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -617,6 +622,36 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popup.prototype, "createLogger", null);
+__decorate([
+    ListenTo('click', { target: 'window' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnGlobalClick", null);
+__decorate([
+    ListenTo('keydown', { target: 'document' }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnKeyDown", null);
+__decorate([
+    ListenTo('mousedown'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnMouseDown", null);
+__decorate([
+    ListenTo('mouseup'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [MouseEvent]),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnMouseUp", null);
+__decorate([
+    ListenTo('click'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], Popup.prototype, "listenOnComponentClick", null);
 let popupIds = 0;
 Popup.style = BalPopupStyle0;
 

package/dist/esm/bal-progress-bar.entry.js

@@ -1,16 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { n as raf } from './helpers-72ae7307.js';
-import { b as balBreakpoints } from './breakpoints.subject-9d4798ac.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f94354b6.js';
-import { L as ListenToWindowResize } from './window-resize.decorator-d57a9812.js';
+import { b as balBreakpoints } from './breakpoints.subject-ae98d0fa.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-9981606e.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-a88002f7.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-c10e9c85.js';
+import './tokens.esm-ed9fb455.js';
 
 const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-background-purple:var(--bal-color-purple-2);--bal-progress-bar-background-yellow:var(--bal-color-yellow-2);--bal-progress-bar-background-red:var(--bal-color-red-2);--bal-progress-bar-background-green:var(--bal-color-green-2);--bal-progress-bar-line-color-primary:var(--bal-color-primary);--bal-progress-bar-line-color-purple:var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow:var(--bal-color-yellow-6);--bal-progress-bar-line-color-red:var(--bal-color-red-6);--bal-progress-bar-line-color-green:var(--bal-color-green-6);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}";
 const BalProgressBarStyle0 = balProgressBarCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { s as stopEventBubbling } from './form-input-264ad739.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { i as isDescendant, u as hasTagName } from './helpers-72ae7307.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
@@ -7,6 +7,7 @@ import { L as Logger } from './log-dfd1c19f.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import { d as isSpaceKey } from './keyboard.helpers-b2dd6393.js';
 import { L as ListenToFocus } from './focus.decorator-dc333802.js';
 import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
@@ -260,7 +261,7 @@ const Radio = class {
             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)))) : ('')));
     }
     get el() { return getElement(this); }
 };
@@ -270,6 +271,12 @@ __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;
 Radio.style = BalRadioStyle0;
 
@@ -596,6 +603,36 @@ __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;
 
 export { Radio as bal_radio, RadioGroup as bal_radio_group };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, w as writeTask, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, w as writeTask, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
@@ -6,18 +6,19 @@ import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
 import { n as raf, k as addEventListener, r as removeEventListener } from './helpers-72ae7307.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import { d as isSpaceKey, b as isEnterKey, a as isArrowUpKey, e as isArrowLeftKey, i as isArrowDownKey, f as isArrowRightKey, g as isHomeKey, h as isEndKey } from './keyboard.helpers-b2dd6393.js';
 import { L as ListenToFocus } from './focus.decorator-dc333802.js';
-import { L as ListenToWindowResize } from './window-resize.decorator-d57a9812.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f94354b6.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-a88002f7.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-9981606e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './listener-04842ae9.js';
-import './breakpoints.subject-9d4798ac.js';
+import './breakpoints.subject-ae98d0fa.js';
 import './device-8c6d2881.js';
-import './tokens.esm-c10e9c85.js';
+import './tokens.esm-ed9fb455.js';
 
 const balSegmentCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment{display:-ms-flexbox;display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{-ms-flex-direction:column;flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;-ms-flex:1;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{-ms-flex:1;flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
 const BalSegmentStyle0 = balSegmentCss;
@@ -315,7 +316,7 @@ const Segment = class {
     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 })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -353,6 +354,18 @@ __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);
 Segment.style = BalSegmentStyle0;
 
 const balSegmentItemCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment-item{display:block;position:relative;height:auto;text-decoration:none;text-overflow:ellipsis;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.bal-segment-item--disabled{cursor:default !important;pointer-events:none !important}.bal-segment-item__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:2.5rem;min-width:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1;padding-top:.375rem;padding-bottom:.375rem;padding-left:20px;padding-right:20px;outline:none;border-color:rgba(0,0,0,0);border-width:var(--bal-border-width-normal);border-style:solid;border-radius:var(--bal-radius-normal);background:rgba(0,0,0,0);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);color:var(--bal-segment-item-text-color);overflow:hidden;position:relative;contain:content;pointer-events:none;cursor:pointer;z-index:2}.bal-segment-item__button--vertical{padding-left:.75rem;padding-right:.75rem}.bal-segment-item__button span{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-regular)}.bal-segment-item__button{will-change:color,padding;-webkit-transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{content:\"\";position:absolute;background:var(--bal-segment-item-divider-background);border-radius:var(--bal-radius-normal)}.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{top:2px;bottom:2px;right:-1px;width:2px}.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{left:2px;right:2px;bottom:-1px;height:2px}.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{background:var(--bal-segment-item-divider-background-invalid)}.bal-segment-item__indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;border-radius:var(--bal-radius-normal);background:var(--bal-segment-item-indicator-background);top:0;left:0}.bal-segment-item__indicator--vertical{-webkit-transform-origin:top;transform-origin:top}.bal-segment-item__indicator--invalid{background:var(--bal-segment-item-indicator-background-invalid)}.bal-segment-item__indicator--background{min-width:100%;min-height:100%;-webkit-transform:none;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;-webkit-transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__indicator--checked{opacity:1}.bal-segment-item:active .bal-segment-item__indicator{min-width:calc(100% - 4px);min-height:calc(100% - 4px);top:2px !important;bottom:2px !important;left:2px !important;right:2px !important}.bal-segment-item__button__icon{position:absolute !important;opacity:0;width:0 !important;-webkit-transform:translateX(0.1rem);transform:translateX(0.1rem);pointer-events:none !important;cursor:inherit;will-change:transform,opacity}.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical){left:10px}.bal-segment-item__button__icon--vertical{right:10px}.bal-segment-item__button__icon--animated{opacity:1;width:.875rem !important;-webkit-transform:translateX(-4px);transform:translateX(-4px);-webkit-transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__button--checked{color:var(--bal-segment-item-text-color-checked);padding-right:40px}.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical){padding-left:26px;padding-right:12px}@media (hover: hover)and (pointer: fine){.bal-segment-item:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-hovered)}}.bal-segment-item:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-pressed)}.bal-segment--keyboard .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,.bal-segment--keyboard .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled){border-color:var(--bal-segment-item-focus-border);border-width:var(--bal-border-width-normal);border-style:solid;-webkit-transition:border 300ms ease-in-out;transition:border 300ms ease-in-out}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled) .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-hovered)}}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-pressed)}.bal-segment-item__button--invalid.bal-segment-item__button--checked{color:var(--bal-color-text-white)}.bal-segment-item__button--disabled{background:rgba(0,0,0,0);color:var(--bal-segment-item-text-color-disabled)}.bal-segment-item__button--disabled.bal-segment-item__button--checked{background:var(--bal-segment-item-indicator-background-disabled);color:var(--bal-segment-item-text-color-disabled-checked)}.bal-segment-item__button__slot--hidden{display:none !important}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { m as rIC, d as waitAfterIdleCallback, f as deepReady, i as isDescendant, j as debounce } from './helpers-72ae7307.js';
@@ -8,6 +8,7 @@ import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenTo } from './listen-d1712e70.js';
 import { d as isSpaceKey, i as isArrowDownKey, a as isArrowUpKey, b as isEnterKey, c as isEscapeKey, j as isBackspaceKey } from './keyboard.helpers-b2dd6393.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
@@ -716,7 +717,7 @@ const Select = class {
      */
     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');
@@ -730,19 +731,19 @@ const Select = class {
         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)))));
     }
@@ -757,6 +758,24 @@ __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;
 Select.style = BalSelectStyle0;
 

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { f as balColorGrey4, g as balColorYellow3, h as balColorYellow5, i as balColorPurple3, j as balColorPurple6, k as balColorRed3, l as balColorRed5, m as balColorGreen3, n as balColorGreen6 } from './tokens.esm-c10e9c85.js';
+import { f as balColorGrey4, g as balColorYellow3, h as balColorYellow5, i as balColorPurple3, j as balColorPurple6, k as balColorRed3, l as balColorRed5, m as balColorGreen3, n as balColorGreen6 } from './tokens.esm-ed9fb455.js';
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
 const BalShapeStyle0 = balShapeCss;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3ab19881.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balSheetCss = ":root{--bal-sheet-radius:var(--bal-radius-large);--bal-sheet-background:var(--bal-color-white);--bal-sheet-shadow:var(--bal-shadow-normal);--bal-sheet-position-bottom:.5rem}.bal-sheet{display:block;position:fixed;bottom:var(--bal-sheet-position-bottom);left:0;right:0;width:100%;z-index:var(--bal-z-index-sticky);font-weight:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal)}.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{border-radius:var(--bal-sheet-radius);background:var(--bal-sheet-background);-webkit-box-shadow:var(--bal-sheet-shadow);box-shadow:var(--bal-sheet-shadow);padding:1rem}@media screen and (min-width: 769px),print{.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{padding:1rem 1.5rem}}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { n as raf, l as rLCP } from './helpers-72ae7307.js';
 import { L as Logger } from './log-dfd1c19f.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-3ab19881.js';
+import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { l as rLCP } from './helpers-72ae7307.js';

package/dist/esm/bal-step-item.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { a as inheritTrackingAttributes } from './attributes-4fa7040f.js';
 
 const StepItem = class {

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

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-3ab19881.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { o as debounceEvent } from './helpers-72ae7307.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
@@ -6,9 +6,9 @@ import { L as Logger } from './log-dfd1c19f.js';
 import { a as areArraysEqual } from './array-4c09dfe3.js';
 import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { n as newBalStepOption } from './bal-step.util-3905ad56.js';
-import { b as balBreakpoints } from './breakpoints.subject-9d4798ac.js';
+import { b as balBreakpoints } from './breakpoints.subject-ae98d0fa.js';
 import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f94354b6.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-9981606e.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -17,7 +17,7 @@ import './index-95ee0c4b.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-c10e9c85.js';
+import './tokens.esm-ed9fb455.js';
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = BEM.block('steps').element('nav').element('item').element('icon');

package/dist/esm/bal-tab-item_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { a as inheritTrackingAttributes } from './attributes-4fa7040f.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { a as areArraysEqual } from './array-4c09dfe3.js';
@@ -9,9 +9,10 @@ import { n as newBalTabOption } from './bal-tab.util-933315fe.js';
 import { s as stopEventBubbling } from './form-input-264ad739.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { a as getComputedPadding } from './style-ca1bd202.js';
-import { b as balBreakpoints } from './breakpoints.subject-9d4798ac.js';
+import { L as ListenTo } from './listen-d1712e70.js';
+import { b as balBreakpoints } from './breakpoints.subject-ae98d0fa.js';
 import { L as ListenToMutation } from './mutation.decorator-985cc0a1.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f94354b6.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-9981606e.js';
 import { L as ListenToResize } from './resize.decorator-f2d8461d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './index-82aff103.js';
@@ -21,7 +22,7 @@ import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-c10e9c85.js';
+import './tokens.esm-ed9fb455.js';
 
 const TabItem = class {
     constructor(hostRef) {
@@ -754,13 +755,13 @@ const Tabs = class {
         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' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -793,6 +794,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/esm/bal-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 
 const balTableCss = ".bal-table{display:block;position:static}.bal-table--is-fullwidth{display:-ms-flexbox;display:flex;width:100%}bal-checkbox .bal-radio-checkbox__label::before{top:0}bal-checkbox .bal-radio-checkbox__label::after{margin-top:0px}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ab19881.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';