@baloise/ds-core 17.2.1 → 17.2.2-nightly.20250109

package/components/bal-tabs2.js

@@ -1,34 +1,26 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { a as areArraysEqual } from './array.js';
-import { m as raf, f as deepReady, t as transitionEndAsync, j as debounce, n as debounceEvent, q as hasParent, l as rLCP, u as isChildOfEventTarget, i as isDescendant, b as waitAfterFramePaint } from './helpers.js';
+import { n as raf, h as deepReady, t as transitionEndAsync, k as debounce, o as debounceEvent, u as hasParent, m as rOnLoad, v as isChildOfEventTarget, j as isDescendant, b as waitAfterFramePaint } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { n as newBalTabOption } from './bal-tab.util.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { b as balBrowser } from './browser.js';
-import { g as getComputedPadding, d as defineCustomElement$d } from './bal-carousel2.js';
-import { L as ListenTo } from './listen.js';
-import { d as defineCustomElement$h } from './bal-badge2.js';
-import { d as defineCustomElement$g } from './bal-button2.js';
-import { d as defineCustomElement$f } from './bal-card2.js';
-import { d as defineCustomElement$e } from './bal-card-content2.js';
-import { d as defineCustomElement$c } from './bal-carousel-item2.js';
-import { d as defineCustomElement$b } from './bal-checkbox2.js';
-import { d as defineCustomElement$a } from './bal-close2.js';
-import { d as defineCustomElement$9 } from './bal-icon2.js';
-import { d as defineCustomElement$8 } from './bal-pagination2.js';
-import { d as defineCustomElement$7 } from './bal-popover2.js';
-import { d as defineCustomElement$6 } from './bal-popover-content2.js';
-import { d as defineCustomElement$5 } from './bal-select2.js';
-import { d as defineCustomElement$4 } from './bal-select-option2.js';
-import { d as defineCustomElement$3 } from './bal-spinner2.js';
-import { d as defineCustomElement$2 } from './bal-tag2.js';
-import { d as defineCustomElement$1 } from './bal-text2.js';
+import { S as SwiperUtil, g as getComputedPadding, a as getWidthOfOverflowingChildren } from './swiper.util.js';
+import { t as toKebabCase } from './string.js';
+import { d as defineCustomElement$6 } from './bal-badge2.js';
+import { d as defineCustomElement$5 } from './bal-checkbox2.js';
+import { d as defineCustomElement$4 } from './bal-dropdown2.js';
+import { d as defineCustomElement$3 } from './bal-icon2.js';
+import { d as defineCustomElement$2 } from './bal-option2.js';
+import { d as defineCustomElement$1 } from './bal-stack2.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
+import { d as defaultConfig } from './config.default.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToResize } from './resize.decorator.js';
+import { L as ListenToSwipe } from './swipe.decorator.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
 const TabSelect = ({ items, value, onSelectTab }) => {
@@ -45,9 +37,9 @@ const TabSelect = ({ items, value, onSelectTab }) => {
             onSelectTab(ev, selectedTab);
         }
     };
-    return (h("bal-select", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
+    return (h("bal-dropdown", { class: Object.assign({}, bemEl.class()), value: value, onBalChange: event => onChange(event) }, items
         .filter(tab => !tab.disabled && !tab.invisible)
-        .map(tab => (h("bal-select-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
+        .map(tab => (h("bal-option", { key: tab.value, label: tab.label, value: tab.value }, tab.label)))));
 };
 
 const TabIcon = ({ item, inverted, accordion, isAccordionOpen, isMobile, hasBubble, }) => {
@@ -61,26 +53,15 @@ const TabIcon = ({ item, inverted, accordion, isAccordionOpen, isMobile, hasBubb
         hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
 };
 
-const TabLabel = ({ item, inverted, hasBubble, isVertical, context }) => {
+const TabLabel = ({ item, inverted, hasBubble, isExpanded, isVertical, context, }) => {
     const bemEl = BEM.block('tabs').element('nav').element('item').element('label');
-    return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0)), "data-testid": "bal-tabs-item-label" },
+    return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0)), "data-testid": "bal-tabs-item-label" },
         item.label,
         item.subLabel && h("span", { class: bemEl.element('sub-label').class() }, item.subLabel),
         hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
 };
 
-const toKebabCase = (string) => {
-    if (typeof string === 'string') {
-        return string
-            .replace(/([a-z])([0-9])/g, '$1-$2')
-            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-            .replace(/[\s_]+/g, '-')
-            .toLowerCase();
-    }
-    return '';
-};
-
-const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
+const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, isExpanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
     var _a;
     const bemEl = BEM.block('tabs').element('nav').element('item');
     if (item.invisible) {
@@ -112,30 +93,34 @@ const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accord
     if (!isLinkList) {
         attrs['tabindex'] = item.active ? '0' : '-1';
     }
-    return (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(expanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }),
+    return (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }),
         item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''),
-        h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, hasBubble: hasLabelBubble, inverted: inverted, context: context }),
+        h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }),
         accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
 };
 
-const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, dimInactiveElements, }) => {
+const TabNav = ({ swiper, items, tabsId, isVertical, inNavbar, isMobile, isTouch, lineActive, lineHidden, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, showSwiperControls, iconPosition, context, onSelectTab, dimInactiveElements, }) => {
     const bemEl = BEM.block('tabs').element('nav');
+    const navInnerEl = bemEl.element('inner');
+    const navContainerEl = bemEl.element('container');
+    const navLineEl = bemEl.element('line');
+    const navBorderEl = bemEl.element('border');
     const tabs = items.filter(tab => !tab.invisible);
     const isFullHeight = inNavbar && !isTouch;
     const hasSubLabelInGroup = items.some(item => {
         return item.subLabel && item.subLabel.length > 0;
     });
-    const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
-    return (h("div", { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) },
-        hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), htmlRole: 'tablist', fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling },
-            tabs.map((tab, index) => (h("bal-carousel-item", { htmlRole: '', class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) },
-                h(Button, { item: tab, index: index })))),
-            h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))),
-        !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''),
-        !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
+    const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, isExpanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
+    return (h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier('full-height').class(isFullHeight)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)), swiper.cssSwiper()) },
+        h("div", { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign({}, swiper.cssInnerSwiper()), navInnerEl.class()), navInnerEl.modifier(`full-height`).class(isFullHeight)), ref: el => (swiper.innerEl = el) },
+            h("nav", { id: swiper.containerId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, swiper.cssSwiperContainer()), navContainerEl.class()), navContainerEl.modifier(`vertical`).class(isVertical)), navContainerEl.modifier(`expanded`).class(expanded && !isVertical)), role: 'tablist', ref: el => (swiper.containerEl = el) },
+                tabs.map((tab, index) => (h(Button, { item: tab, index: index }))),
+                h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, navLineEl.class()), navLineEl.modifier(`active`).class(lineActive)), navLineEl.modifier(`inverted`).class(inverted)), navLineEl.modifier(`animated`).class(animated)), navLineEl.modifier(`vertical`).class(isVertical)), navLineEl.modifier(`hidden`).class(lineHidden)) }),
+                border ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, navBorderEl.class()), navBorderEl.modifier(`inverted`).class(inverted)), navBorderEl.modifier(`vertical`).class(isVertical)) })) : (''))),
+        showSwiperControls ? swiper.renderControls() : ''));
 };
 
-const balTabsCss = "@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav{display:block;position:relative;-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (min-width: 769px),print{.bal-tabs__nav--vertical-col-one-quarter{-ms-flex:none;flex:none;width:25%}.bal-tabs__nav--vertical-col-one-third{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{-ms-flex:none;flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{-ms-flex:none;flex:none;width:75%}.bal-tabs__nav--vertical-col-full{-ms-flex:none;flex:none;width:100%}}.bal-tabs__nav--vertical{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.bal-tabs__nav--full-height{height:100%}.bal-tabs__nav--expanded{display:-ms-flexbox;display:flex}.bal-tabs__nav__carousel__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.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--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)}.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--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;-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-tabs__nav__line--inverted{background:var(--bal-tabs-tab-nav-line-background-inverted)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item{display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;background-color:rgba(0,0,0,0);border:unset}@media screen and (min-width: 769px),print{.bal-tabs__nav__item{-ms-flex-direction:row;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{-ms-flex-direction:row;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){-ms-flex:0 0 auto;flex:0 0 auto;min-width:3rem;width:6rem;padding:.25rem}}.bal-tabs__nav__item--accordion{-ms-flex-direction:row;flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{-ms-flex-direction:column;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{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;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{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;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;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--with-svg{text-align:left;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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--context-meta{font-size:var(--bal-text-size-small)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;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-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:-ms-flexbox;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__tabs__content{width:100%}.bal-tabs--animated{-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-tabs--animated .bal-tabs__tabs__content{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-tabs--accordion .bal-tabs__tabs__content{overflow:hidden;will-change:max-height}.bal-tabs--accordion.bal-tabs--collapsing .bal-tabs__tabs__content{max-height:0 !important}.bal-tabs--accordion.bal-tabs--collapsed .bal-tabs__tabs__content{display:none}.bal-tabs--accordion.bal-tabs--expanding .bal-tabs__tabs__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-tabs--accordion .bal-tabs,.bal-tabs--accordion .bal-tabs__tabs__content{-webkit-transition:none !important;transition:none !important}}";
+const balTabsCss = "@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;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;-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-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{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{-ms-flex:none;flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{-ms-flex:none;flex:none;width:75%}.bal-tabs__nav--vertical-col-full{-ms-flex:none;flex:none;width:100%}}.bal-tabs__nav__container--expanded{display:-ms-flexbox;display:flex;width:100%;min-width:100%;-ms-flex:1;flex:1}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item{display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:center;justify-content:center;-ms-flex-align: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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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{-ms-flex-direction:row;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{-ms-flex-direction:row;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){-ms-flex:0 0 auto;flex:0 0 auto;min-width:3rem;width:6rem;padding:.25rem}}.bal-tabs__nav__item--accordion{-ms-flex-direction:row;flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{-ms-flex-direction:column;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{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;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{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;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;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--with-svg{text-align:left;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;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{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;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;-ms-touch-action:pan-y;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:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;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:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 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:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));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:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));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:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-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:-ms-flexbox;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;-ms-flex:1;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)}";
 const BalTabsStyle0 = balTabsCss;
 
 const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
@@ -146,6 +131,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
         this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
         this.tabsId = `bal-tabs-${TabsIds++}`;
+        this.swiper = new SwiperUtil();
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -205,23 +191,26 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
                 }
             }
             else {
-                if (element.offsetLeft) {
+                if (element.offsetLeft !== undefined && element.offsetLeft !== null) {
                     if (this.expanded) {
                         return element.offsetLeft;
                     }
                     return element.offsetLeft + padding.left;
                 }
-                const carouselItem = element.closest('bal-carousel-item');
-                if (carouselItem) {
+                const item = element.closest('.bal-tabs__nav__item');
+                if (item) {
                     if (this.expanded) {
-                        return carouselItem.offsetLeft;
+                        return item.offsetLeft;
                     }
-                    return carouselItem.offsetLeft + padding.left;
+                    return item.offsetLeft + padding.left;
                 }
             }
             return 0;
         };
-        this.animateLine = async () => {
+        this.animateLine = async (initial = false) => {
+            if (!this.enableLineRender) {
+                return;
+            }
             if (!this.shouldAnimate()) {
                 return;
             }
@@ -262,7 +251,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
                             const borderElement = this.getBorderElement();
                             const carouselElement = this.getCarouselElement();
                             if (borderElement && carouselElement) {
-                                const containerMaxWidth = carouselElement.clientWidth;
+                                const containerMaxWidth = getWidthOfOverflowingChildren(carouselElement);
                                 borderElement.style.setProperty('width', `${containerMaxWidth}px`);
                             }
                             await waitForTransition;
@@ -284,71 +273,21 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         };
         this.expandAccordion = (initialUpdate = false) => {
             this.isAccordionOpen = true;
-            const { contentEl, contentElWrapper } = this;
-            if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
-                this.accordionState = 4 /* AccordionState.Expanded */;
-                return;
-            }
             if (this.accordionState === 4 /* AccordionState.Expanded */) {
                 return;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            if (this.shouldAnimate()) {
-                raf(() => {
-                    this.accordionState = 8 /* AccordionState.Expanding */;
-                    this.currentRaf = raf(async () => {
-                        const contentHeight = contentElWrapper.offsetHeight;
-                        const waitForTransition = transitionEndAsync(contentEl, 300);
-                        contentEl.style.setProperty('max-height', `${contentHeight}px`);
-                        this.balWillAnimate.emit(this.value);
-                        await waitForTransition;
-                        this.accordionState = 4 /* AccordionState.Expanded */;
-                        contentEl.style.removeProperty('max-height');
-                        this.balDidAnimate.emit(this.value);
-                    });
-                });
-            }
-            else {
-                this.accordionState = 4 /* AccordionState.Expanded */;
-                this.balWillAnimate.emit(this.value);
-                this.balDidAnimate.emit(this.value);
-            }
+            this.accordionState = 4 /* AccordionState.Expanded */;
+            this.balWillAnimate.emit(this.value);
+            this.balDidAnimate.emit(this.value);
         };
         this.collapseAccordion = (initialUpdate = false) => {
             this.isAccordionOpen = false;
-            const { contentEl } = this;
-            if (initialUpdate || contentEl === undefined) {
-                this.accordionState = 1 /* AccordionState.Collapsed */;
-                return;
-            }
             if (this.accordionState === 1 /* AccordionState.Collapsed */) {
                 return;
             }
-            if (this.currentRaf !== undefined) {
-                cancelAnimationFrame(this.currentRaf);
-            }
-            if (this.shouldAnimate()) {
-                this.currentRaf = raf(async () => {
-                    const contentHeight = contentEl.offsetHeight;
-                    contentEl.style.setProperty('max-height', `${contentHeight}px`);
-                    raf(async () => {
-                        const waitForTransition = transitionEndAsync(contentEl, 300);
-                        this.accordionState = 2 /* AccordionState.Collapsing */;
-                        this.balWillAnimate.emit(this.value);
-                        await waitForTransition;
-                        this.accordionState = 1 /* AccordionState.Collapsed */;
-                        contentEl.style.removeProperty('max-height');
-                        this.balDidAnimate.emit(this.value);
-                    });
-                });
-            }
-            else {
-                this.accordionState = 1 /* AccordionState.Collapsed */;
-                this.balWillAnimate.emit(this.value);
-                this.balDidAnimate.emit(this.value);
-            }
+            this.accordionState = 1 /* AccordionState.Collapsed */;
+            this.balWillAnimate.emit(this.value);
+            this.balDidAnimate.emit(this.value);
         };
         this.shouldAnimate = () => {
             if (typeof window === 'undefined') {
@@ -401,9 +340,12 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         this.isNavbarOpen = false;
         this.inNavbar = false;
         this.inNavbarLight = false;
-        this.isLargestContentfulPaintDone = false;
+        this.enableLineRender = false;
+        this.hasAnimated = false;
+        this.index = 0;
         this.isMobile = balBreakpoints.isMobile;
         this.isTablet = balBreakpoints.isTablet;
+        this.language = defaultConfig.language;
         this.store = [];
         this.animated = true;
         this.float = 'left';
@@ -433,9 +375,15 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         this.onOptionChange();
         this.mutationObserverActive = this.options === undefined;
     }
+    expandedChanged() {
+        this.updateSwiper();
+    }
     debounceChanged() {
         this.balChange = debounceEvent(this.balChange, this.debounce);
     }
+    verticalChanged() {
+        this.updateSwiper();
+    }
     async valueChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
             this.onOptionChange();
@@ -446,6 +394,9 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
      * ------------------------------------------------------
      */
     connectedCallback() {
+        this.swiper.connectedCallback(this);
+        this.swiper.controls = 'small';
+        this.updateSwiper();
         this.inNavbar = hasParent('bal-navbar', this.el);
         if (this.inNavbar) {
             const parentNavbar = this.el.closest('bal-navbar');
@@ -471,29 +422,53 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
             }
         }
     }
+    componentDidRender() {
+        this.animateLine();
+    }
+    componentWillRender() {
+        this.updateSwiper();
+    }
     componentDidLoad() {
         this.onOptionChange();
-        rLCP(() => {
-            this.isLargestContentfulPaintDone = true;
+        rOnLoad(() => {
+            this.enableLineRender = true;
+            this.animateLine(true);
         });
     }
+    disconnectedCallback() {
+        this.swiper.disconnectedCallback();
+    }
     mutationListener() {
         this.onOptionChange();
+        this.swiper.notifyChange();
     }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
         this.isTablet = breakpoints.tablet;
-        this.animateLine();
+        this.swiper.notifyChange();
     }
-    resizeListener() {
-        this.animateLine();
+    resizeListener(info) {
+        this.swiper.notifyChange();
+        if ((!this.isVertical && info.width) || (this.isVertical && info.height)) {
+            this.animateLine();
+        }
+    }
+    swipeListener({ left, right }) {
+        if (left) {
+            this.swiper.next();
+        }
+        else if (right) {
+            this.swiper.previous();
+        }
     }
     listenToWillAnimate(ev) {
         isChildOfEventTarget(ev, this.el, () => this.animateLine());
     }
     listenToDidAnimate(ev) {
-        isChildOfEventTarget(ev, this.el, () => this.animateLine());
-        this.isUsedInNavbar(ev);
+        isChildOfEventTarget(ev, this.el, () => {
+            this.isUsedInNavbar(ev);
+            this.animateLine();
+        });
     }
     listenToKeyDown(ev) {
         if (this.isTabList) {
@@ -515,14 +490,6 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
             }
         }
     }
-    isUsedInNavbar(ev) {
-        const target = ev.target;
-        const parentNavbar = target.closest('bal-navbar');
-        const isNavbarOpen = ev.target;
-        if (parentNavbar && isDescendant(parentNavbar, this.el)) {
-            this.isNavbarOpen = isNavbarOpen;
-        }
-    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
@@ -562,16 +529,62 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
             this.collapseAccordion();
         }
     }
+    swiperOnChange(index) {
+        this.index = index;
+    }
     /**
-     * PRIVATE METHODS
+     * GETTERS
      * ------------------------------------------------------
      */
+    swiperGetAllChildrenElements() {
+        return Array.from(this.el.querySelectorAll('.bal-tabs__nav__item'));
+    }
     get isTabList() {
         return this.store.filter(tab => !!tab.href).length === 0;
     }
     get items() {
         return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`));
     }
+    getTargetElement(value) {
+        const selector = `[data-tabs="${this.tabsId}"]`;
+        const elements = Array.from(this.el.querySelectorAll(selector));
+        return elements.filter(element => element.getAttribute('data-value') == value)[0];
+    }
+    getLineElement() {
+        return this.el.querySelector(`#${this.tabsId}-line`);
+    }
+    getBorderElement() {
+        return this.el.querySelector(`#${this.tabsId}-border`);
+    }
+    getCarouselElement() {
+        // return this.el.querySelector(`#${this.tabsId}-carousel`)
+        return this.el.querySelector(`#${this.swiper.containerId}`);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    updateSwiper() {
+        if (this.overflow) {
+            if (this.expanded || this.isVertical()) {
+                this.swiper.disable();
+            }
+            else {
+                this.swiper.activate();
+            }
+        }
+        else {
+            this.swiper.disable();
+        }
+    }
+    isUsedInNavbar(ev) {
+        const target = ev.target;
+        const parentNavbar = target.closest('bal-navbar');
+        const isNavbarOpen = ev.target;
+        if (parentNavbar && isDescendant(parentNavbar, this.el)) {
+            this.isNavbarOpen = isNavbarOpen;
+        }
+    }
     isTabActive(tab) {
         return tab.value === this.value;
     }
@@ -600,20 +613,6 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         const isTouch = isMobile || isTablet;
         return isVertical || (isTouch && this.inNavbar);
     }
-    getTargetElement(value) {
-        const selector = `[data-tabs="${this.tabsId}"]`;
-        const elements = Array.from(this.el.querySelectorAll(selector));
-        return elements.filter(element => element.getAttribute('data-value') == value)[0];
-    }
-    getLineElement() {
-        return this.el.querySelector(`#${this.tabsId}-line`);
-    }
-    getBorderElement() {
-        return this.el.querySelector(`#${this.tabsId}-border`);
-    }
-    getCarouselElement() {
-        return this.el.querySelector(`#${this.tabsId}-carousel`);
-    }
     /**
      * PRIVATE Tab Navigation with Arrow Keys
      * ------------------------------------------------------
@@ -672,8 +671,13 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         }
     }
     async focus(tab) {
-        await waitAfterFramePaint();
         const hasKeyboardFocus = this.el.querySelector(`button.bal-focused`) !== null;
+        if (this.swiper.isActive()) {
+            const options = await this.getOptions();
+            const index = options.findIndex(option => option.value === tab.value);
+            this.swiper.updateIndex(index);
+        }
+        await waitAfterFramePaint();
         if (hasKeyboardFocus) {
             const tabEl = this.el.querySelector(`#${this.tabsId}-button-${toKebabCase(tab.value)}`);
             if (tabEl) {
@@ -687,30 +691,37 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
      */
     render() {
         const block = BEM.block('tabs');
+        const contentEl = block.element('content');
         const isMobile = this.isMobile;
         const isTablet = this.isTablet;
         const isTouch = isMobile || isTablet;
         const isInverted = (this.inNavbar && !isTouch && !this.inNavbarLight) || (!this.inNavbar && this.inverted);
         const isVertical = this.isVertical();
-        const hasCarousel = this.isLargestContentfulPaintDone && !isVertical && this.overflow && !this.expanded;
-        const isSelect = this.isLargestContentfulPaintDone && isMobile && this.selectOnMobile;
+        const hasBorder = this.border || (this.inNavbar && isTouch);
+        const isSelect = isMobile && this.selectOnMobile;
         const tabs = this.store.map(tab => (Object.assign(Object.assign({}, tab), { active: tab.value === this.value })));
         const expanded = this.accordionState === 4 /* AccordionState.Expanded */ || this.accordionState === 8 /* AccordionState.Expanding */;
         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: 'dfe8fd6f11b4d884bf8e7605653b637526412382', 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, dimInactiveElements: this.dimInactiveElements })), h("div", { key: '0aac73b494d835402ac6654a6a281593917c355a', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '77c68b5ce4d763f99bacff6e8395f9cd4c03e430', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '822c8efa61f9e44fc42e6f8ba31b5286967d7181' })))));
+        const dataValue = this.store
+            .filter(t => this.isTabActive(t))
+            .map(t => t.value)
+            .join(',');
+        const dataLabel = this.store
+            .filter(t => this.isTabActive(t))
+            .map(t => t.label)
+            .join(',');
+        return (h(Host, { key: 'cf91cfa4c30b4501c3cd47f997d2e8556f5036f4', 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: '89cda7dd3a5b8d75d57e504576ef887d2d514989', 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: '36543cb85d8b5cc83f49c4e5a0a3ce25f58ebf71', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'd702ea7e556ae03dfdcab0d48542f7e5c1563fe5' })))));
     }
     get el() { return this; }
     static get watchers() { return {
         "options": ["optionChanged"],
+        "expanded": ["expandedChanged"],
         "debounce": ["debounceChanged"],
+        "vertical": ["verticalChanged"],
         "value": ["valueChanged"]
     }; }
     static get style() { return BalTabsStyle0; }
@@ -739,9 +750,12 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "isNavbarOpen": [32],
         "inNavbar": [32],
         "inNavbarLight": [32],
-        "isLargestContentfulPaintDone": [32],
+        "enableLineRender": [32],
+        "hasAnimated": [32],
+        "index": [32],
         "isMobile": [32],
         "isTablet": [32],
+        "language": [32],
         "store": [32],
         "animated": [32],
         "configChanged": [64],
@@ -749,9 +763,11 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "getOptionByValue": [64],
         "renderLine": [64],
         "closeAccordion": [64]
-    }, undefined, {
+    }, [[8, "balWillAnimate", "listenToWillAnimate"], [8, "balDidAnimate", "listenToDidAnimate"], [0, "keydown", "listenToKeyDown"]], {
         "options": ["optionChanged"],
+        "expanded": ["expandedChanged"],
         "debounce": ["debounceChanged"],
+        "vertical": ["verticalChanged"],
         "value": ["valueChanged"]
     }]);
 __decorate([
@@ -775,27 +791,15 @@ __decorate([
 __decorate([
     ListenToResize(),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], Tabs.prototype, "resizeListener", null);
 __decorate([
-    ListenTo('balWillAnimate', { target: 'window' }),
+    ListenToSwipe(),
     __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:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], Tabs.prototype, "listenToKeyDown", null);
+], Tabs.prototype, "swipeListener", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
@@ -807,7 +811,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-tabs", "bal-badge", "bal-button", "bal-card", "bal-card-content", "bal-carousel", "bal-carousel-item", "bal-checkbox", "bal-close", "bal-icon", "bal-pagination", "bal-popover", "bal-popover-content", "bal-select", "bal-select-option", "bal-spinner", "bal-tag", "bal-text"];
+    const components = ["bal-tabs", "bal-badge", "bal-checkbox", "bal-dropdown", "bal-icon", "bal-option", "bal-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-tabs":
             if (!customElements.get(tagName)) {
@@ -815,86 +819,31 @@ function defineCustomElement() {
             }
             break;
         case "bal-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$h();
-            }
-            break;
-        case "bal-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$g();
-            }
-            break;
-        case "bal-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$f();
-            }
-            break;
-        case "bal-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$e();
-            }
-            break;
-        case "bal-carousel":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$d();
-            }
-            break;
-        case "bal-carousel-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$c();
-            }
-            break;
-        case "bal-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "bal-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "bal-pagination":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "bal-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "bal-popover-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "bal-select":
+        case "bal-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "bal-select-option":
+        case "bal-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "bal-spinner":
+        case "bal-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-tag":
+        case "bal-option":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "bal-text":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }