@baloise/ds-core 17.2.4 → 17.2.5

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

@@ -10,6 +10,7 @@ import { ListenToMutation } from "../../utils/mutation";
 import { ListenToResize } from "../../utils/resize";
 import { ListenToConfig, defaultConfig } from "../../utils/config";
 import { SwiperUtil } from "../../utils/swiper";
+import { ListenToVisibility } from "../../utils/visibility";
 export class Carousel {
     constructor() {
         this.swiper = new SwiperUtil();
@@ -59,9 +60,6 @@ export class Carousel {
         this.onStepsChange();
         this.onValueChange();
     }
-    componentDidLoad() {
-        this.swiper.componentDidLoad();
-    }
     disconnectedCallback() {
         this.swiper.disconnectedCallback();
     }
@@ -78,6 +76,9 @@ export class Carousel {
     mutationListener() {
         this.swiper.notifyChange();
     }
+    visibilityListener() {
+        this.swiper.notifyChange();
+    }
     swipeListener({ left, right }) {
         if (left) {
             this.next();
@@ -138,7 +139,7 @@ export class Carousel {
         const block = BEM.block('carousel');
         const inner = block.element('inner');
         const container = inner.element('container');
-        return (h(Host, { key: '602093b19519df2cf7769648d4b18b9643e3ddfb', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: 'a647f525baae8af7c92568beee41e270bb4bf175', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: 'c304226a1093b5fd6256742e68792c91a07fc67d', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: 'f07155dae50350e67e207dc238a61f52779ffab6' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
+        return (h(Host, { key: '89263d584f6952e1e8b22c1158ab814f3d8d601e', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiper()), block.class()), block.modifier(this.interface).class(this.interface !== '')), block.modifier(`full-height`).class(this.fullHeight)), block.modifier('controls-sticky').class(this.controlsSticky)), block.modifier(`controls-tabs`).class(this.controls === 'tabs')) }, this.controls === 'tabs' ? (h(TabControl, { value: this.value, items: this.swiper.getAllControlItems(), containerId: this.swiper.containerId, onControlChange: item => this.swiper.onControlChange(item.value) })) : (''), h("div", { key: 'fb631d4a11c0e094c65e42fec8742cfe15b0bcf8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssInnerSwiper()), inner.class()), inner.modifier(`is-${this.aspectRatio}`).class()), inner.modifier(`inverted`).class(this.inverted)), inner.modifier(`full-height`).class(this.fullHeight)), ref: el => (this.swiper.innerEl = el) }, h("div", { key: '793f837d4e6ae7e636fcf33a523c610e7639423d', id: this.swiper.containerId, role: this.controls === 'tabs' ? '' : 'list', class: Object.assign(Object.assign(Object.assign(Object.assign({}, this.swiper.cssSwiperContainer()), container.class()), container.modifier(`border`).class(this.border)), container.modifier(`is-${this.aspectRatio}`).class()), ref: el => (this.swiper.containerEl = el) }, h("slot", { key: '7786bb252ef257147b3a9b1f357587710d8d0d21' }), this.border ? (h("div", { id: `${this.swiper.id}-border`, "aria-hidden": "true", class: Object.assign(Object.assign({}, container.element('border').class()), container.element('border').modifier('inverted').class(this.inverted)), ref: el => (this.swiper.borderEl = el) })) : (''))), this.swiper.renderControls()));
     }
     static get is() { return "bal-carousel"; }
     static get originalStyleUrls() {
@@ -578,6 +579,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Carousel.prototype, "mutationListener", null);
+__decorate([
+    ListenToVisibility(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Carousel.prototype, "visibilityListener", null);
 __decorate([
     ListenToSwipe(),
     __metadata("design:type", Function),

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

@@ -1 +1 @@
-:root{--bal-hint-content-background: var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{user-select:none;cursor:pointer}@media(hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}
+:root{--bal-hint-content-background: var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{user-select:none;cursor:pointer}@media(hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:flex;gap:1.5rem;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}

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

@@ -6,10 +6,12 @@ import { isArrowDownKey, isArrowUpKey, isSpaceKey, isHomeKey, isEndKey, isArrowL
 import { stopEventBubbling } from "../../utils/form-input";
 import { FOCUS_KEYS } from "../../utils/focus-visible";
 import { ListenToWindowResize } from "../../utils/resize";
-import { isDescendant, raf } from "../../utils/helpers";
+import { raf } from "../../utils/helpers";
 import { ListenToBreakpoints } from "../../utils/breakpoints";
 import { ListenToFocus } from "../../utils/focus";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ListenToVisibility } from "../../utils/visibility";
+import { ListenToAnimation } from "../../utils/animation";
 export class Segment {
     constructor() {
         /**
@@ -129,12 +131,15 @@ export class Segment {
     focusOutListener(ev) {
         this.balBlur.emit(ev);
     }
-    listenToDidAnimate(ev) {
-        if (ev && ev.target && isDescendant(ev.target, this.el)) {
-            const childRect = this.el.getBoundingClientRect();
-            this.maxWidth = childRect.width;
-            this.windowResizeListener();
-        }
+    animationListener() {
+        const childRect = this.el.getBoundingClientRect();
+        this.maxWidth = childRect.width;
+        this.windowResizeListener();
+    }
+    visibilityListener() {
+        const childRect = this.el.getBoundingClientRect();
+        this.maxWidth = childRect.width;
+        this.windowResizeListener();
     }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
@@ -304,7 +309,7 @@ export class Segment {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: '4c6bee1fb3f114c0459fdb9ef6610a618de332f3', 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: '98c4e333f66632968b120605f66f38e5de5ff34c', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: 'e28612fc58901cc642d00f702e7638eca4611e68', 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: '6c720184db8d50c4ba2cb386c406ea131f6f49c6', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "bal-segment"; }
     static get originalStyleUrls() {
@@ -609,12 +614,6 @@ export class Segment {
     }
     static get listeners() {
         return [{
-                "name": "balWillAnimate",
-                "method": "listenToDidAnimate",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }, {
                 "name": "keydown",
                 "method": "listenOnKeyDownOutside",
                 "target": "document",
@@ -647,6 +646,18 @@ __decorate([
     __metadata("design:paramtypes", [FocusEvent]),
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "focusOutListener", null);
+__decorate([
+    ListenToAnimation(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "animationListener", null);
+__decorate([
+    ListenToVisibility(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "visibilityListener", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),

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

@@ -1 +1 @@
-@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__line{position:absolute;background:var(--bal-tabs-tab-nav-line-background);border-radius:var(--bal-tabs-tab-nav-line-radius);left:1px;z-index:1}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical){bottom:0;min-width:5rem}.bal-tabs__nav__line--hidden{display:none}.bal-tabs__nav__line--vertical{top:0;min-height:2.5rem}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical).bal-tabs__nav__line--active{height:var(--bal-border-width-normal)}.bal-tabs__nav__line--vertical.bal-tabs__nav__line--active{width:var(--bal-border-width-normal)}.bal-tabs__nav__line--animated{will-change:min-width,width,min-height,height,transform;transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-tabs__nav__line--inverted{background:var(--bal-tabs-tab-nav-line-background-inverted)}@media screen and (min-width: 769px),print{.bal-tabs__nav--vertical-col-one-third{flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{flex:none;width:75%}.bal-tabs__nav--vertical-col-full{flex:none;width:100%}}.bal-tabs__nav__container--expanded{display:flex;width:100%;min-width:100%;flex:1}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item{display:flex;position:relative;box-sizing:border-box;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;cursor:default;gap:.5rem;padding:.25rem .75rem;border-radius:var(--bal-tabs-tab-button-radius);min-width:3rem;min-height:3rem;user-select:none;-webkit-user-drag:none;background-color:rgba(0,0,0,0);border:unset;width:auto}@media screen and (min-width: 769px),print{.bal-tabs__nav__item{flex-direction:row;min-height:3.5rem}}@media screen and (max-width: 768px){.bal-tabs__nav__item--group-has-sub-label{height:5rem}}.bal-tabs__nav__item--dim-inactive-elements:not(.bal-tabs__nav__item--active){opacity:.6}.bal-tabs__nav__item--display-svg{flex-direction:row}@media screen and (max-width: 768px){.bal-tabs__nav__item--display-svg:not(.bal-tabs__nav__item--display-svg.bal-tabs__nav__item--active){flex:0 0 auto;min-width:3rem;width:6rem;padding:.25rem}}.bal-tabs__nav__item--accordion{flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{flex-direction:column}.bal-tabs__nav__item--clickable{cursor:pointer;pointer-events:all}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-active)}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-active)}.bal-tabs__nav__item--vertical{flex-direction:row;align-items:center;justify-content:flex-start;min-height:2.5rem;padding:.5rem 1rem}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--first{padding-left:0}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--last{padding-right:0}.bal-tabs__nav__item--context-meta{min-height:3rem;height:3rem}.bal-tabs__nav__item--context-navigation{min-height:3rem;height:3rem}@media screen and (min-width: 1024px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1280px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1440px){.bal-tabs__nav__item--context-navigation{min-height:5rem;height:5rem}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__icon{position:relative}.bal-tabs__nav__item__icon__bubble{position:absolute;right:-0.75rem;top:-0.25rem}@media screen and (min-width: 769px),print{.bal-tabs__nav__item__icon__bubble{right:-0.625rem;top:-0.25rem}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__label{display:block;position:relative;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);text-align:center;hyphens:auto;white-space:nowrap;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--with-svg{text-align:left;display:flex;flex-direction:column}@media screen and (max-width: 768px){.bal-tabs__nav__item__label--with-svg:not(.bal-tabs__nav__item__label--active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0}}.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-disabled)}.bal-tabs__nav__item__label--inverted{font-family:var(--bal-font-family-text);color:var(--bal-tabs-tab-label-text-color-inverted)}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-inverted-disabled)}.bal-tabs__nav__item__label--inverted{font-weight:var(--bal-font-weight-regular);letter-spacing:.1085px}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--active{font-weight:var(--bal-font-weight-bold);letter-spacing:0}.bal-tabs__nav__item__label__bubble{position:absolute;right:-0.5rem;top:-0.5rem}.bal-tabs__nav__item__label--vertical{text-align:left;width:auto;white-space:normal}.bal-tabs__nav__item__label--expanded{white-space:normal}.bal-tabs__nav__item__label--context-meta{font-size:var(--bal-text-size-small)}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}:root{--bal-tabs-tab-nav-border-background: var(--bal-color-border);--bal-tabs-tab-nav-border-background-inverted: var(--bal-color-border-inverted);--bal-tabs-tab-nav-line-background: var(--bal-color-border-primary);--bal-tabs-tab-nav-line-background-inverted: var(--bal-color-border-inverted);--bal-tabs-tab-button-radius: var(--bal-radius-normal);--bal-tabs-tab-nav-border-radius: var(--bal-radius-rounded);--bal-tabs-tab-nav-line-radius: var(--bal-radius-rounded);--bal-tabs-tab-button-label-text-color-hover: var(--bal-color-light-blue-5);--bal-tabs-tab-button-icon-text-color-hover: var(--bal-color-light-blue-5);--bal-tabs-tab-button-label-text-color-active: var(--bal-color-primary-6);--bal-tabs-tab-button-icon-text-color-active: var(--bal-color-primary-6);--bal-tabs-tab-button-label-text-color-inverted-hover: var(--bal-color-light-blue-2);--bal-tabs-tab-button-icon-text-color-inverted-hover: var(--bal-color-light-blue-2);--bal-tabs-tab-button-label-text-color-inverted-active: var(--bal-color-text-info);--bal-tabs-tab-button-icon-text-color-inverted-active: var(--bal-color-text-info);--bal-tabs-tab-label-text-color: var(--bal-color-text-primary);--bal-tabs-tab-label-text-color-disabled: var(--bal-color-text-grey);--bal-tabs-tab-label-text-color-inverted: var(--bal-color-text-white);--bal-tabs-tab-label-text-color-inverted-disabled: var(--bal-color-text-primary-light)}.bal-swiper{position:relative}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;position:relative;overflow:clip;list-style:none;padding:0;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:flex;box-sizing:content-box;transition-property:transform;transition-duration:0ms;transform:translate3d(0px, 0px, 0px)}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:flex;justify-content:center;width:100%;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;top:calc(50% - 24px);z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;top:calc(50% - 1rem);z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:"";left:0;background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:"";right:0;background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-tabs{display:block;min-width:0}.bal-tabs--fullwidth{width:100%}.bal-tabs--vertical{display:block}@media screen and (min-width: 769px),print{.bal-tabs--vertical{display:flex}}@media screen and (min-width: 769px),print{.bal-tabs--navbar{height:100%}}.bal-tab-item{width:100%;display:none}.bal-tab-item--active{display:block}.bal-tabs--accordion .bal-tabs__content{overflow:hidden}.bal-tabs--accordion.bal-tabs--collapsed .bal-tabs__content{display:none}.bal-tabs__content{width:100%}.bal-tabs__content--vertial{width:auto;flex:1}.bal-tabs__content--hidden{display:none}.bal-tabs__nav--full-height,.bal-tabs__nav__inner--full-height{height:100%}.bal-tabs__nav__border{position:absolute;background:var(--bal-tabs-tab-nav-border-background);border-radius:var(--bal-tabs-tab-nav-border-radius);height:var(--bal-border-width-normal);left:1px;right:1px;bottom:0}.bal-tabs__nav__border--hidden{display:none}.bal-tabs__nav__border--vertical{width:var(--bal-border-width-normal);height:100%;top:0;right:auto}.bal-tabs__nav__border--inverted{background:var(--bal-tabs-tab-nav-border-background-inverted)}
+@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__line{position:absolute;background:var(--bal-tabs-tab-nav-line-background);border-radius:var(--bal-tabs-tab-nav-line-radius);left:1px;z-index:1}.bal-tabs__nav__line--hidden{display:none}.bal-tabs__nav__line--vertical{top:0;min-height:2.5rem}.bal-tabs__nav__line--vertical.bal-tabs__nav__line--active{width:var(--bal-border-width-normal)}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical){bottom:0;min-width:5rem}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical).bal-tabs__nav__line--active{height:var(--bal-border-width-normal)}.bal-tabs__nav__line--animated{will-change:min-width,width,min-height,height,transform;transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-tabs__nav__line--inverted{background:var(--bal-tabs-tab-nav-line-background-inverted)}@media screen and (min-width: 769px),print{.bal-tabs__nav--vertical-col-one-third{flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{flex:none;width:75%}.bal-tabs__nav--vertical-col-full{flex:none;width:100%}}.bal-tabs__nav__container--expanded{position:relative;display:flex;width:100%;min-width:100%;flex:1}.bal-tabs__nav__container--vertical{overflow:hidden}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item{display:flex;position:relative;box-sizing:border-box;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;text-decoration:none;cursor:default;gap:.5rem;padding:.25rem .75rem;border-radius:var(--bal-tabs-tab-button-radius);min-width:3rem;min-height:3rem;user-select:none;-webkit-user-drag:none;background-color:rgba(0,0,0,0);border:unset;width:auto}@media screen and (min-width: 769px),print{.bal-tabs__nav__item{flex-direction:row;min-height:3.5rem}}@media screen and (max-width: 768px){.bal-tabs__nav__item--group-has-sub-label{height:5rem}}.bal-tabs__nav__item--dim-inactive-elements:not(.bal-tabs__nav__item--active){opacity:.6}.bal-tabs__nav__item--display-svg{flex-direction:row}@media screen and (max-width: 768px){.bal-tabs__nav__item--display-svg:not(.bal-tabs__nav__item--display-svg.bal-tabs__nav__item--active){flex:0 0 auto;min-width:3rem;width:6rem;padding:.25rem}}.bal-tabs__nav__item--accordion{flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{flex-direction:column}.bal-tabs__nav__item--clickable{cursor:pointer;pointer-events:all}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-active)}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-active)}.bal-tabs__nav__item--vertical{flex-direction:row;align-items:center;justify-content:flex-start;min-height:2.5rem;padding:.5rem 1rem}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--first{padding-left:0}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--last{padding-right:0}.bal-tabs__nav__item--context-meta{min-height:3rem;height:3rem}.bal-tabs__nav__item--context-navigation{min-height:3rem;height:3rem}@media screen and (min-width: 1024px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1280px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1440px){.bal-tabs__nav__item--context-navigation{min-height:5rem;height:5rem}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__icon{position:relative}.bal-tabs__nav__item__icon__bubble{position:absolute;right:-0.75rem;top:-0.25rem}@media screen and (min-width: 769px),print{.bal-tabs__nav__item__icon__bubble{right:-0.625rem;top:-0.25rem}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__label{display:block;position:relative;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);text-align:center;hyphens:auto;white-space:nowrap;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--with-svg{text-align:left;display:flex;flex-direction:column}@media screen and (max-width: 768px){.bal-tabs__nav__item__label--with-svg:not(.bal-tabs__nav__item__label--active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0}}.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-disabled)}.bal-tabs__nav__item__label--inverted{font-family:var(--bal-font-family-text);color:var(--bal-tabs-tab-label-text-color-inverted)}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-inverted-disabled)}.bal-tabs__nav__item__label--inverted{font-weight:var(--bal-font-weight-regular);letter-spacing:.1085px}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--active{font-weight:var(--bal-font-weight-bold);letter-spacing:0}.bal-tabs__nav__item__label__bubble{position:absolute;right:-0.5rem;top:-0.5rem}.bal-tabs__nav__item__label--vertical{text-align:left;width:auto;white-space:normal}.bal-tabs__nav__item__label--expanded{white-space:normal}.bal-tabs__nav__item__label--context-meta{font-size:var(--bal-text-size-small)}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{box-shadow:var(--bal-focus-shadow-inset) !important}}@media(hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}:root{--bal-tabs-tab-nav-border-background: var(--bal-color-border);--bal-tabs-tab-nav-border-background-inverted: var(--bal-color-border-inverted);--bal-tabs-tab-nav-line-background: var(--bal-color-border-primary);--bal-tabs-tab-nav-line-background-inverted: var(--bal-color-border-inverted);--bal-tabs-tab-button-radius: var(--bal-radius-normal);--bal-tabs-tab-nav-border-radius: var(--bal-radius-rounded);--bal-tabs-tab-nav-line-radius: var(--bal-radius-rounded);--bal-tabs-tab-button-label-text-color-hover: var(--bal-color-light-blue-5);--bal-tabs-tab-button-icon-text-color-hover: var(--bal-color-light-blue-5);--bal-tabs-tab-button-label-text-color-active: var(--bal-color-primary-6);--bal-tabs-tab-button-icon-text-color-active: var(--bal-color-primary-6);--bal-tabs-tab-button-label-text-color-inverted-hover: var(--bal-color-light-blue-2);--bal-tabs-tab-button-icon-text-color-inverted-hover: var(--bal-color-light-blue-2);--bal-tabs-tab-button-label-text-color-inverted-active: var(--bal-color-text-info);--bal-tabs-tab-button-icon-text-color-inverted-active: var(--bal-color-text-info);--bal-tabs-tab-label-text-color: var(--bal-color-text-primary);--bal-tabs-tab-label-text-color-disabled: var(--bal-color-text-grey);--bal-tabs-tab-label-text-color-inverted: var(--bal-color-text-white);--bal-tabs-tab-label-text-color-inverted-disabled: var(--bal-color-text-primary-light)}.bal-swiper{position:relative;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:flex;box-sizing:content-box;transition-property:transform;transition-duration:0ms;transform:translate3d(0px, 0px, 0px)}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:flex;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:"";left:0;background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:"";right:0;background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-tabs{display:flex;flex-direction:column;min-width:0}.bal-tabs--fullwidth{width:100%}.bal-tabs--vertical{flex-direction:column;gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-tabs--vertical{flex-direction:row;gap:var(--bal-space-normal)}}@media screen and (min-width: 769px),print{.bal-tabs--navbar{height:100%}}.bal-tab-item{width:100%;display:none}.bal-tab-item--active{display:block}.bal-tabs--accordion .bal-tabs__content{overflow:hidden}.bal-tabs--accordion.bal-tabs--collapsed .bal-tabs__content{display:none}.bal-tabs__content{width:100%}.bal-tabs__content--vertical{width:auto;flex:1}.bal-tabs__content--hidden{display:none}.bal-tabs__nav--full-height,.bal-tabs__nav__inner--full-height{height:100%}.bal-tabs__nav__border{position:absolute;background:var(--bal-tabs-tab-nav-border-background);border-radius:var(--bal-tabs-tab-nav-border-radius);height:var(--bal-border-width-normal);left:1px;right:1px;bottom:0;min-width:100%}.bal-tabs__nav__border--hidden{display:none}.bal-tabs__nav__border--vertical{min-width:var(--bal-border-width-normal);max-width:var(--bal-border-width-normal);width:var(--bal-border-width-normal);height:100%;top:0;right:auto}.bal-tabs__nav__border--inverted{background:var(--bal-tabs-tab-nav-border-background-inverted)}

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

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import { Host, h, } from "@stencil/core";
 import { areArraysEqual } from "../../utils/array";
-import { debounce, debounceEvent, deepReady, hasParent, isChildOfEventTarget, isDescendant, raf, rOnLoad, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
+import { debounce, debounceEvent, deepReady, hasParent, isDescendant, raf, rOnLoad, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
 import { defaultConfig, ListenToConfig } from "../../utils/config";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
@@ -16,6 +16,8 @@ import { TabNav } from "./components/tab-nav";
 import { toKebabCase } from "../../utils/string";
 import { SwiperUtil } from "../../utils/swiper";
 import { ListenToSwipe } from "../../utils/swipe";
+import { ListenToVisibility } from "../../utils/visibility";
+import { ListenToAnimation } from "../../utils/animation";
 export class Tabs {
     constructor() {
         this.tabsId = `bal-tabs-${TabsIds++}`;
@@ -139,8 +141,13 @@ export class Tabs {
                             const borderElement = this.getBorderElement();
                             const carouselElement = this.getCarouselElement();
                             if (borderElement && carouselElement) {
-                                const containerMaxWidth = getWidthOfOverflowingChildren(carouselElement);
-                                borderElement.style.setProperty('width', `${containerMaxWidth}px`);
+                                if (this.expanded) {
+                                    borderElement.style.setProperty('width', `100%`);
+                                }
+                                else {
+                                    const containerMaxWidth = getWidthOfOverflowingChildren(carouselElement);
+                                    borderElement.style.setProperty('width', `${containerMaxWidth}px`);
+                                }
                             }
                             await waitForTransition;
                             this.balDidAnimate.emit(this.value);
@@ -317,7 +324,6 @@ export class Tabs {
         this.updateSwiper();
     }
     componentDidLoad() {
-        this.swiper.componentDidLoad();
         this.onOptionChange();
         rOnLoad(() => {
             this.enableLineRender = true;
@@ -331,6 +337,9 @@ export class Tabs {
         this.onOptionChange();
         this.swiper.notifyChange();
     }
+    visibilityListener() {
+        this.swiper.notifyChange();
+    }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
         this.isTablet = breakpoints.tablet;
@@ -338,7 +347,7 @@ export class Tabs {
     }
     resizeListener(info) {
         this.swiper.notifyChange();
-        if ((!this.isVertical && info.width) || (this.isVertical && info.height)) {
+        if ((!this.isVertical() && info.width) || (this.isVertical() && info.height)) {
             this.animateLine();
         }
     }
@@ -350,14 +359,9 @@ export class Tabs {
             this.swiper.previous();
         }
     }
-    listenToWillAnimate(ev) {
-        isChildOfEventTarget(ev, this.el, () => this.animateLine());
-    }
-    listenToDidAnimate(ev) {
-        isChildOfEventTarget(ev, this.el, () => {
-            this.isUsedInNavbar(ev);
-            this.animateLine();
-        });
+    animationListener(info) {
+        this.isUsedInNavbar(info.target);
+        this.animateLine();
     }
     listenToKeyDown(ev) {
         if (this.isTabList) {
@@ -446,7 +450,6 @@ export class Tabs {
         return this.el.querySelector(`#${this.tabsId}-border`);
     }
     getCarouselElement() {
-        // return this.el.querySelector(`#${this.tabsId}-carousel`)
         return this.el.querySelector(`#${this.swiper.containerId}`);
     }
     /**
@@ -466,10 +469,9 @@ export class Tabs {
             this.swiper.disable();
         }
     }
-    isUsedInNavbar(ev) {
-        const target = ev.target;
+    isUsedInNavbar(target) {
         const parentNavbar = target.closest('bal-navbar');
-        const isNavbarOpen = ev.target;
+        const isNavbarOpen = target;
         if (parentNavbar && isDescendant(parentNavbar, this.el)) {
             this.isNavbarOpen = isNavbarOpen;
         }
@@ -601,9 +603,9 @@ export class Tabs {
             .filter(t => this.isTabActive(t))
             .map(t => t.label)
             .join(',');
-        return (h(Host, { key: 'dcc4d98f0313e3ce2652590c48ef6e71a953ce67', 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": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: 'd5481e5593ebf83618b226ff27ddf583cf3cc653', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
+        return (h(Host, { key: '8d867bd044fecb683137fd045a25a4d00977d715', 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": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: 'a8082250c734922919296b24c9467199b9a23930', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
                 .modifier('hidden')
-                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'b4053d5ff5e3191a0eeac1f12bae0f9b1fb98688', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'fd8457eae65ec8cccd8ba821b3ec91794d242107' })))));
+                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'ab8af83ca427a58fdbd1fc5474798879cec06ef3', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: '50ed58aacd364ec3fe3b57d1775490d4335d1729' })))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {
@@ -1257,18 +1259,6 @@ export class Tabs {
     }
     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,
@@ -1289,6 +1279,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], Tabs.prototype, "mutationListener", null);
+__decorate([
+    ListenToVisibility(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "visibilityListener", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),
@@ -1307,6 +1303,12 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], Tabs.prototype, "swipeListener", null);
+__decorate([
+    ListenToAnimation(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "animationListener", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

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

@@ -15,7 +15,7 @@ export const TabSelect = ({ items, value, onSelectTab }) => {
             onSelectTab(ev, selectedTab);
         }
     };
-    return (h("bal-dropdown", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
+    return (h("bal-select", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
         .filter(tab => !tab.disabled && !tab.invisible)
-        .map(tab => (h("bal-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
+        .map(tab => (h("bal-select-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
 };

package/dist/collection/utils/animation/animation.decorator.js

@@ -0,0 +1,23 @@
+import { BalAnimationSubject } from "./animation.subject";
+export function ListenToAnimation() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, componentDidLoad, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            if (!this._balAnimationSubject) {
+                this._balAnimationSubject = new BalAnimationSubject();
+            }
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.componentDidLoad = function () {
+            this._balAnimationSubject.attach(this);
+            return componentDidLoad && componentDidLoad.call(this);
+        };
+        target.disconnectedCallback = function () {
+            if (this._balAnimationSubject) {
+                this._balAnimationSubject.detach();
+                this._balAnimationSubject = undefined;
+            }
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}

package/dist/collection/utils/animation/animation.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/animation/animation.listener.js

@@ -0,0 +1,30 @@
+import { addEventListener, removeEventListener, debounce, isChildOfEventTarget } from "../helpers";
+import { ListenerAbstract } from "../types/listener";
+export class BalAnimationListener extends ListenerAbstract {
+    constructor() {
+        super(...arguments);
+        this.debouncedNotify = debounce(target => this.notify({ target }), 42);
+        this.callbackWillAnimate = (ev) => {
+            isChildOfEventTarget(ev, this.el, target => this.debouncedNotify(target));
+        };
+        this.callbackDidAnimate = (ev) => {
+            isChildOfEventTarget(ev, this.el, target => this.debouncedNotify(target));
+        };
+    }
+    connect(el) {
+        super.connect(el);
+        const win = window;
+        if (win) {
+            addEventListener(win, 'balWillAnimate', this.callbackWillAnimate, { passive: true });
+            addEventListener(win, 'balDidAnimate', this.callbackDidAnimate, { passive: true });
+        }
+    }
+    disconnect() {
+        super.disconnect();
+        const win = window;
+        if (win) {
+            removeEventListener(win, 'balWillAnimate', this.callbackWillAnimate);
+            removeEventListener(win, 'balDidAnimate', this.callbackDidAnimate);
+        }
+    }
+}

package/dist/collection/utils/animation/animation.subject.js

@@ -0,0 +1,20 @@
+import { BalAnimationListener } from "./animation.listener";
+import { SingleSubject } from "../types/signal";
+export class BalAnimationSubject extends SingleSubject {
+    constructor() {
+        super((observer, data) => {
+            observer.animationListener(data);
+        });
+        this.listener = new BalAnimationListener();
+    }
+    attach(observer) {
+        super.attach(observer);
+        this.listener.connect(observer.el);
+        this.listener.add(info => super.notify(info));
+    }
+    detach() {
+        super.detach();
+        this.listener.disconnect();
+    }
+}
+export const balAnimationSubject = new BalAnimationSubject();

package/dist/collection/utils/animation/index.js

@@ -0,0 +1,2 @@
+export * from './animation.decorator';
+export * from './animation.interfaces';

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

@@ -1,2 +1,2 @@
 // generated by .build/version.js
-export const VERSION = '17.2.4';
+export const VERSION = '17.2.5';

package/dist/collection/utils/helpers.js

@@ -253,7 +253,7 @@ export const isChildOfEventTarget = async (ev, el, callback) => {
             target = target.closest('bal-navbar');
         }
         if (target && isDescendant(target, el)) {
-            callback();
+            callback(target);
         }
     }
 };

package/dist/collection/utils/resize/resize.listener.js

@@ -1,10 +1,10 @@
 import { balBrowser } from "../browser";
-import { debounce, rIC } from "../helpers";
+import { debounce } from "../helpers";
 import { ListenerAbstract } from "../types/listener";
 export class BalResizeListener extends ListenerAbstract {
     constructor() {
         super(...arguments);
-        this.debouncedNotify = debounce((info) => this.notify(info), 10);
+        this.debouncedNotify = debounce((info) => this.notify(info), 42);
     }
     connect(el) {
         var _a;
@@ -31,10 +31,10 @@ export class BalResizeListener extends ListenerAbstract {
                         const widthChanged = this.lastWidth !== entry.contentRect.width;
                         const heightChanged = this.lastHeight !== entry.contentRect.height;
                         if (widthChanged || heightChanged) {
-                            rIC(() => this.debouncedNotify({
+                            this.debouncedNotify({
                                 width: widthChanged,
                                 height: heightChanged,
-                            }));
+                            });
                             this.lastWidth = entry.contentRect.width;
                             this.lastHeight = entry.contentRect.height;
                         }

package/dist/collection/utils/resize/resize.subject.js

@@ -1,9 +1,10 @@
+import { rIC } from "../helpers";
 import { SingleSubject } from "../types/signal";
 import { BalResizeListener } from "./resize.listener";
 export class BalResizeSubject extends SingleSubject {
     constructor() {
         super((observer, data) => {
-            observer.resizeListener(data);
+            rIC(() => observer.resizeListener(data));
         });
         this.listener = new BalResizeListener();
     }

package/dist/collection/utils/swiper/controls/dot-control.js

@@ -13,5 +13,5 @@ export const DotControl = ({ value, items, containerId, onControlChange }) => {
         }
         onControlChange(items[selectedValue]);
     };
-    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('tabs').class()) }, h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
+    return (h("div", { class: Object.assign(Object.assign({}, controls.class()), controls.modifier('dots').class()) }, h("bal-pagination", { "aria-controls": containerId, interface: "small", value: value + 1, totalPages: items.length, onBalChange: onChange })));
 };

package/dist/collection/utils/swiper/swiper.util.js

@@ -114,23 +114,6 @@ export class SwiperUtil {
         addEventListener(window, 'touchstart', this.pointerDown);
         addEventListener(window, 'mousedown', this.pointerDown);
     }
-    componentDidLoad() {
-        const observer = new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    this.notifyChange();
-                }
-            });
-        }, {
-            root: null, // Use the viewport as the container
-            threshold: 0.5, // Trigger when 50% of the element is visible
-        });
-        // Target the element you want to observe
-        const targetElement = this.component.el;
-        if (targetElement) {
-            observer.observe(targetElement);
-        }
-    }
     disconnectedCallback() {
         removeEventListener(window, 'keydown', this.listenToKeyDown);
         removeEventListener(this.component.el, 'focusin', this.updateFocus);

package/dist/collection/utils/visibility/index.js

@@ -0,0 +1,2 @@
+export * from './visibility.interfaces';
+export * from './visibility.decorator';

package/dist/collection/utils/visibility/visibility.decorator.js

@@ -0,0 +1,23 @@
+import { BalVisibilitySubject } from "./visibility.subject";
+export function ListenToVisibility() {
+    return function (target, _propertyKey, _descriptor) {
+        const { connectedCallback, componentDidLoad, disconnectedCallback } = target;
+        target.connectedCallback = function () {
+            if (!this._balVisibilitySubject) {
+                this._balVisibilitySubject = new BalVisibilitySubject();
+            }
+            return connectedCallback && connectedCallback.call(this);
+        };
+        target.componentDidLoad = function () {
+            this._balVisibilitySubject.attach(this);
+            return componentDidLoad && componentDidLoad.call(this);
+        };
+        target.disconnectedCallback = function () {
+            if (this._balVisibilitySubject) {
+                this._balVisibilitySubject.detach();
+                this._balVisibilitySubject = undefined;
+            }
+            return disconnectedCallback && disconnectedCallback.call(this);
+        };
+    };
+}

package/dist/collection/utils/visibility/visibility.interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/visibility/visibility.listener.js

@@ -0,0 +1,41 @@
+import { deepReady, waitAfterFramePaint } from "../helpers";
+import { ListenerAbstract } from "../types/listener";
+export class BalVisibilityListener extends ListenerAbstract {
+    constructor() {
+        super(...arguments);
+        this.waitAfterFramePrint = false;
+        this.intersectionObserver = undefined;
+        this.intersectionCallback = (records) => {
+            const isIntersecting = records.some(record => record.isIntersecting);
+            if (isIntersecting) {
+                this.notify();
+            }
+        };
+    }
+    async connect(el) {
+        super.connect(el);
+        if (typeof IntersectionObserver === 'undefined') {
+            return;
+        }
+        if (this.waitAfterFramePrint) {
+            await deepReady(el);
+            await waitAfterFramePaint();
+        }
+        this.destroyMutationObserver();
+        this.intersectionObserver = new IntersectionObserver(this.intersectionCallback, {
+            root: null, // Use the viewport as the container
+            threshold: 0.5, // Trigger when 50% of the element is visible
+        });
+        this.intersectionObserver.observe(el);
+    }
+    disconnect() {
+        super.disconnect();
+        this.destroyMutationObserver();
+    }
+    destroyMutationObserver() {
+        if (this.intersectionObserver !== undefined) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = undefined;
+        }
+    }
+}