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

package/components/bal-modal.js

@@ -1,10 +1,8 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { p as prepareOverlay, d as dismiss, e as eventMethod } from './overlays.js';
-import { c as componentOnReady, f as deepReady, h as wait } from './helpers.js';
+import { c as componentOnReady, h as deepReady, i as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
-import { L as ListenTo } from './listen.js';
 
 const attachComponent = async (delegate, container, component, cssClasses, componentProps) => {
     if (delegate) {
@@ -239,17 +237,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         return false;
     }
     render() {
-        return (h(Host, { key: '798fe5316195806b60cadaf15fd2455268f62919', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
+        return (h(Host, { key: '6fb09ad213fb5ee3a62e3e166f7381000ef02380', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
                 '--bal-width': `${this.modalWidth}px`,
-            } }, h("div", { key: 'b57401f0e8383d1c1455602523ad771383a29324', class: {
+            } }, h("div", { key: 'cad948856ebda541aedd8f15dee694ebaad37c48', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '47e3429c0148724a7c102bd3f4718b4476b90c27', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '898638dcd4c7d67a988f4b145cd14a8377744829', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '5aef1c76fd9d0a62b53e1665b2a341ecac7db74a', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '0472b9eca55a86bac5587dd84b7b73391fe8c81b', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '62773246852b6a4be88dab20d93bf0a8169e1f13' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '3c0ab93e9049d0fb93fac5d2e0affe06eaae0ff5' })))));
     }
     get el() { return this; }
     static get style() { return BalModalStyle0; }
@@ -273,31 +271,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         "dismiss": [64],
         "onDidDismiss": [64],
         "onWillDismiss": [64]
-    }]);
-__decorate([
-    ListenTo('click'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", Promise)
-], Modal.prototype, "onClickCloseButton", null);
-__decorate([
-    ListenTo('mousedown'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", Promise)
-], Modal.prototype, "onMouseDown", null);
-__decorate([
-    ListenTo('mouseup'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", Promise)
-], Modal.prototype, "onMouseUp", null);
-__decorate([
-    ListenTo('keyup', { target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", Promise)
-], Modal.prototype, "handleKeyUp", null);
+    }, [[0, "click", "onClickCloseButton"], [1, "mousedown", "onMouseDown"], [1, "mouseup", "onMouseUp"], [4, "keyup", "handleKeyUp"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-nav-link-grid-col2.js

@@ -22,7 +22,7 @@ const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol ext
     render() {
         const block = BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (h(Host, { key: '570396a3ad6882891cfefebf9d92dae1137a3f48', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '86f6add382f5accf09aef4593b16281268af8241', class: Object.assign({}, innerEl.class()) }, h("slot", { key: '57160d0fd8135f4d8a4d955a019ae41b28fc2123' }))));
+        return (h(Host, { key: 'd207c87255663724d4cdefb411665804c0d614bf', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '8fa5bf2182f99d55463202ecb68aa490ac741510', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'a04eb96c4706a99724d7955aa1a0ce0ef0be4690' }))));
     }
     static get style() { return BalNavLinkGridColStyle0; }
 }, [4, "bal-nav-link-grid-col", {

package/components/bal-nav-link-grid2.js

@@ -20,7 +20,7 @@ const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends H
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
+        return (h(Host, { key: '03e4b64a2041c0fb36d94fd061eb9352a38446ed', class: Object.assign({}, block.class()) }, h("slot", { key: '7f7eb07e433531b6d0dab67b4a89e7faab742b51' })));
     }
     static get style() { return BalNavLinkGridStyle0; }
 }, [4, "bal-nav-link-grid"]);

package/components/bal-nav-link-group.js

@@ -22,7 +22,7 @@ const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends
     render() {
         const block = BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (h(Host, { key: '7594abd236200ade0063149fcbe2985e37c0ec9f', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '42ceaea3299c69ddaa535b4fb47438816e11323b' })));
+        return (h(Host, { key: '83e07dc3e48315f8c8196f54cda2e371eeb9d297', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: 'e54ab919fba4f5a400b753d05c9545d8368e7e9c' })));
     }
     static get style() { return BalNavLinkGroupStyle0; }
 }, [4, "bal-nav-link-group", {

package/components/bal-nav-link2.js

@@ -33,10 +33,10 @@ const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLEleme
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (h(Host, { key: '538d4bc561eec9c4c4d88a16efbd22ccc61517ec', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: '68ac516eb7190bbc532cfd108854cf1329110984', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
+        return (h(Host, { key: '94718986eda442992d83a9b40e26bf595d523dce', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: 'cf8106036e3366712fff52d08e8c1567873014be', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
                 .element('native')
                 .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '8b705b4c113a3272dcc68d798dce816f13343363' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: 'f9ab826645c95e02cf1b1ccfa2df34b637a67d13' }))));
     }
     static get style() { return BalNavLinkStyle0; }
 }, [4, "bal-nav-link", {

package/components/bal-nav-menu-bar2.js

@@ -32,7 +32,7 @@ const NavMenuBar = /*@__PURE__*/ proxyCustomElement(class NavMenuBar extends HTM
     render() {
         const block = BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (h(Host, { key: '4b2520319f467e9fc3cf0b7e1bece33c3e605915', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { key: '6ecb9f3e785c318c05064ab6f9e18a7c1774cd49', class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'e809ddfb4b672a29852c44ab59c82e35fa5b6ac4', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'b249113bdb2b5289a213a3ff2782cd958ac7d923' })))));
+        return (h(Host, { key: '408438f50a37356d275fd30fb3793334293553ea', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { key: '81a5b4b94fff712cdd9ee7479e40694df1f07107', class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'd45071ac59862cf928d1d21ea0510f9840255ed9', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '4d9c8f32c524223f76906671f28d3891f353e4b2' })))));
     }
     get el() { return this; }
     static get style() { return BalNavMenuBarStyle0; }

package/components/bal-nav-menu-flyout2.js

@@ -56,7 +56,7 @@ const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout exten
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: 'd2de6257fc31499b2d26204ee0db07a4e079144b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '6392e2be737b3f5c11dd83602f210d1a263c7a5f', class: Object.assign({}, line.class()) }), h("div", { key: 'b6d06ea36310b6ed5975f2bae2f57e65d1e29f82', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '38566fffa659f0661e3cb7ca7535c6a7f244b696' }))));
+        return (h(Host, { key: '60bf384edb49a6686374e4f473758745e2771945', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'a234f10624799caf4c183c608fda3ccdb3e39446', class: Object.assign({}, line.class()) }), h("div", { key: 'b96460b50a8ea76acdcbb4c464e90f4416009b2d', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '0d02f07430f4d05c58627866a131e5bee32b3e51' }))));
     }
     get el() { return this; }
     static get style() { return BalNavMenuFlyoutStyle0; }

package/components/bal-nav-meta-bar2.js

@@ -3,7 +3,6 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.js';
-import { L as ListenTo } from './listen.js';
 
 const balNavMetaBarCss = ":root{--bal-nav-meta-bar-variant-primary-background:var(--bal-color-primary);--bal-nav-meta-bar-variant-primary-shadow:none;--bal-nav-meta-bar-variant-white-background:var(--bal-color-white);--bal-nav-meta-bar-variant-white-shadow:0 5px 15px rgba(0,0,0,.1);--bal-nav-meta-bar-variant-grey-background:var(--bal-color-grey-2);--bal-nav-meta-bar-variant-grey-shadow:none}.bal-nav-meta-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-meta-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-meta-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-meta-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-meta-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav-meta-bar--size-normal{padding-top:.5rem;padding-bottom:.5rem;height:4rem;max-height:4rem}.bal-nav-meta-bar--size-small{min-height:3rem}.bal-nav-meta-bar--position-fixed-top{position:fixed;top:0;left:0;width:100%}.bal-nav-meta-bar--position-fixed-bottom{position:fixed;bottom:0;left:0;width:100%}.bal-nav-meta-bar--variant-primary{background:var(--bal-nav-meta-bar-variant-primary-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow);box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow)}.bal-nav-meta-bar--variant-grey{background:var(--bal-nav-meta-bar-variant-grey-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow);box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow)}.bal-nav-meta-bar--variant-white{background:var(--bal-nav-meta-bar-variant-white-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-white-shadow);box-shadow:var(--bal-nav-meta-bar-variant-white-shadow)}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-mobile{display:hidden !important;visibility:hidden !important}}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}.bal-nav-meta-bar .button-label{word-break:keep-all !important}.bal-nav-meta-bar-transform{will-change:transition;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out;position:fixed;display:block;width:100%;top:0;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar-transform-small{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{-webkit-transform:translateY(-5rem);transform:translateY(-5rem)}";
 const BalNavMetaBarStyle0 = balNavMetaBarCss;
@@ -64,7 +63,7 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: 'c78fff46b1798a4d4d2a26152b1005694c2a3534', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'a0ba3a8f0942a67fc2d1d6e795b288f9dd12d621', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '7428dc9ba14777bf263aa62c5a91634efdbc70d5' }))));
+        return (h(Host, { key: '5436cb6898cdaecac4f0304b8dd62484b5a8a231', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'f7ed5d2c6a334ad586baf75a5b87132a4460f065', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'c60750b340d6f1276d45efa7a786b142938d73a4' }))));
     }
     get el() { return this; }
     static get style() { return BalNavMetaBarStyle0; }
@@ -74,19 +73,13 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
         "invisible": [1],
         "position": [1],
         "isHidden": [32]
-    }]);
+    }, [[9, "scroll", "handleScroll"]]]);
 __decorate([
     Logger('bal-meta-bar'),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NavMetaBar.prototype, "createLogger", null);
-__decorate([
-    ListenTo('scroll', { target: 'window', passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "handleScroll", null);
 let NavMetaBarIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/components/bal-nav.js

@@ -5,41 +5,30 @@ import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers.js';
-import { L as ListenTo } from './listen.js';
-import { d as defineCustomElement$z } from './bal-badge2.js';
-import { d as defineCustomElement$y } from './bal-button2.js';
-import { d as defineCustomElement$x } from './bal-card2.js';
-import { d as defineCustomElement$w } from './bal-card-content2.js';
-import { d as defineCustomElement$v } from './bal-carousel2.js';
-import { d as defineCustomElement$u } from './bal-carousel-item2.js';
-import { d as defineCustomElement$t } from './bal-checkbox2.js';
-import { d as defineCustomElement$s } from './bal-close2.js';
-import { d as defineCustomElement$r } from './bal-heading2.js';
-import { d as defineCustomElement$q } from './bal-icon2.js';
-import { d as defineCustomElement$p } from './bal-list2.js';
-import { d as defineCustomElement$o } from './bal-list-item2.js';
-import { d as defineCustomElement$n } from './bal-list-item-accordion-body2.js';
-import { d as defineCustomElement$m } from './bal-list-item-accordion-head2.js';
-import { d as defineCustomElement$l } from './bal-list-item-content2.js';
-import { d as defineCustomElement$k } from './bal-list-item-icon2.js';
-import { d as defineCustomElement$j } from './bal-list-item-title2.js';
-import { d as defineCustomElement$i } from './bal-logo2.js';
-import { d as defineCustomElement$h } from './bal-nav-link2.js';
-import { d as defineCustomElement$g } from './bal-nav-link-grid2.js';
-import { d as defineCustomElement$f } from './bal-nav-link-grid-col2.js';
-import { d as defineCustomElement$e } from './bal-nav-menu-bar2.js';
-import { d as defineCustomElement$d } from './bal-nav-menu-flyout2.js';
-import { d as defineCustomElement$c } from './bal-nav-meta-bar2.js';
-import { d as defineCustomElement$b } from './bal-pagination2.js';
-import { d as defineCustomElement$a } from './bal-popover2.js';
-import { d as defineCustomElement$9 } from './bal-popover-content2.js';
-import { d as defineCustomElement$8 } from './bal-select2.js';
-import { d as defineCustomElement$7 } from './bal-select-option2.js';
-import { d as defineCustomElement$6 } from './bal-spinner2.js';
-import { d as defineCustomElement$5 } from './bal-stack2.js';
-import { d as defineCustomElement$4 } from './bal-tabs2.js';
-import { d as defineCustomElement$3 } from './bal-tag2.js';
-import { d as defineCustomElement$2 } from './bal-text2.js';
+import { d as defineCustomElement$p } from './bal-badge2.js';
+import { d as defineCustomElement$o } from './bal-button2.js';
+import { d as defineCustomElement$n } from './bal-checkbox2.js';
+import { d as defineCustomElement$m } from './bal-dropdown2.js';
+import { d as defineCustomElement$l } from './bal-heading2.js';
+import { d as defineCustomElement$k } from './bal-icon2.js';
+import { d as defineCustomElement$j } from './bal-list2.js';
+import { d as defineCustomElement$i } from './bal-list-item2.js';
+import { d as defineCustomElement$h } from './bal-list-item-accordion-body2.js';
+import { d as defineCustomElement$g } from './bal-list-item-accordion-head2.js';
+import { d as defineCustomElement$f } from './bal-list-item-content2.js';
+import { d as defineCustomElement$e } from './bal-list-item-icon2.js';
+import { d as defineCustomElement$d } from './bal-list-item-title2.js';
+import { d as defineCustomElement$c } from './bal-logo2.js';
+import { d as defineCustomElement$b } from './bal-nav-link2.js';
+import { d as defineCustomElement$a } from './bal-nav-link-grid2.js';
+import { d as defineCustomElement$9 } from './bal-nav-link-grid-col2.js';
+import { d as defineCustomElement$8 } from './bal-nav-menu-bar2.js';
+import { d as defineCustomElement$7 } from './bal-nav-menu-flyout2.js';
+import { d as defineCustomElement$6 } from './bal-nav-meta-bar2.js';
+import { d as defineCustomElement$5 } from './bal-option2.js';
+import { d as defineCustomElement$4 } from './bal-spinner2.js';
+import { d as defineCustomElement$3 } from './bal-stack2.js';
+import { d as defineCustomElement$2 } from './bal-tabs2.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';
@@ -385,7 +374,7 @@ const i18nNavBars = {
     },
 };
 
-const balNavCss = "@media (hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
+const balNavCss = "@media (hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
 const BalNavStyle0 = balNavCss;
 
 const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
@@ -657,7 +646,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: '9850048bcb764e760f50c6f54f39a094e8113da4', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'c6b2985da610cdbaee3f8cdd9be9f7e5d3f9c026', class: {
+        return (h(Host, { key: 'dcde56b80395603196d61c50e390c7c3df510680', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'b986a4c340c59fd9377da61b41882bdc66a1380c', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -667,7 +656,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '9e8d533088aea08856b7b6a03a7fec62fdab2698' }, h("slot", { key: 'daba1f88b1d7d20049682646c7cdd5cfe289d9f9' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
+            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '60b9a9262fed2743ecbb0db2bc3b0d41de33c3b5' }, h("slot", { key: 'b055497b867fd6db856295fa516cc5b36a3f45fe' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
             activeMetaLinkValue: this.activeMetaLinkValue,
             activeMenuLinkValue: this.activeMenuLinkValue,
         })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -718,7 +707,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         "linkItems": [32],
         "metaButtons": [32],
         "configChanged": [64]
-    }, undefined, {
+    }, [[0, "balChange", "listenToPopupChanges"], [5, "click", "clickOnOutside"]], {
         "options": ["optionChanged"],
         "buttons": ["buttonChanged"]
     }]);
@@ -728,18 +717,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Nav.prototype, "createLogger", null);
-__decorate([
-    ListenTo('balChange'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Nav.prototype, "listenToPopupChanges", null);
-__decorate([
-    ListenTo('click', { target: 'document', passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", Promise)
-], Nav.prototype, "clickOnOutside", null);
 __decorate([
     ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
     __metadata("design:type", Function),
@@ -763,7 +740,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-nav", "bal-badge", "bal-button", "bal-card", "bal-card-content", "bal-carousel", "bal-carousel-item", "bal-checkbox", "bal-close", "bal-heading", "bal-icon", "bal-list", "bal-list-item", "bal-list-item-accordion-body", "bal-list-item-accordion-head", "bal-list-item-content", "bal-list-item-icon", "bal-list-item-title", "bal-logo", "bal-nav-link", "bal-nav-link-grid", "bal-nav-link-grid-col", "bal-nav-menu-bar", "bal-nav-menu-flyout", "bal-nav-meta-bar", "bal-pagination", "bal-popover", "bal-popover-content", "bal-select", "bal-select-option", "bal-spinner", "bal-stack", "bal-tabs", "bal-tag", "bal-text"];
+    const components = ["bal-nav", "bal-badge", "bal-button", "bal-checkbox", "bal-dropdown", "bal-heading", "bal-icon", "bal-list", "bal-list-item", "bal-list-item-accordion-body", "bal-list-item-accordion-head", "bal-list-item-content", "bal-list-item-icon", "bal-list-item-title", "bal-logo", "bal-nav-link", "bal-nav-link-grid", "bal-nav-link-grid-col", "bal-nav-menu-bar", "bal-nav-menu-flyout", "bal-nav-meta-bar", "bal-option", "bal-spinner", "bal-stack", "bal-tabs"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav":
             if (!customElements.get(tagName)) {
@@ -771,171 +748,121 @@ function defineCustomElement$1() {
             }
             break;
         case "bal-badge":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$z();
-            }
-            break;
-        case "bal-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$y();
-            }
-            break;
-        case "bal-card":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$x();
-            }
-            break;
-        case "bal-card-content":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$w();
-            }
-            break;
-        case "bal-carousel":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$v();
-            }
-            break;
-        case "bal-carousel-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$u();
-            }
-            break;
-        case "bal-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$t();
-            }
-            break;
-        case "bal-close":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$s();
-            }
-            break;
-        case "bal-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$r();
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$q();
-            }
-            break;
-        case "bal-list":
             if (!customElements.get(tagName)) {
                 defineCustomElement$p();
             }
             break;
-        case "bal-list-item":
+        case "bal-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$o();
             }
             break;
-        case "bal-list-item-accordion-body":
+        case "bal-checkbox":
             if (!customElements.get(tagName)) {
                 defineCustomElement$n();
             }
             break;
-        case "bal-list-item-accordion-head":
+        case "bal-dropdown":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }
             break;
-        case "bal-list-item-content":
+        case "bal-heading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }
             break;
-        case "bal-list-item-icon":
+        case "bal-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }
             break;
-        case "bal-list-item-title":
+        case "bal-list":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }
             break;
-        case "bal-logo":
+        case "bal-list-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "bal-nav-link":
+        case "bal-list-item-accordion-body":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "bal-nav-link-grid":
+        case "bal-list-item-accordion-head":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "bal-nav-link-grid-col":
+        case "bal-list-item-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "bal-nav-menu-bar":
+        case "bal-list-item-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "bal-nav-menu-flyout":
+        case "bal-list-item-title":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "bal-nav-meta-bar":
+        case "bal-logo":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "bal-pagination":
+        case "bal-nav-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "bal-popover":
+        case "bal-nav-link-grid":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "bal-popover-content":
+        case "bal-nav-link-grid-col":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "bal-select":
+        case "bal-nav-menu-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "bal-select-option":
+        case "bal-nav-menu-flyout":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "bal-spinner":
+        case "bal-nav-meta-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "bal-stack":
+        case "bal-option":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "bal-tabs":
+        case "bal-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "bal-tag":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-text":
+        case "bal-tabs":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-navbar-brand.js

@@ -2,6 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { B as BEM } from './bem.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
+import { i as wait } from './helpers.js';
 import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-logo2.js';
@@ -59,6 +60,9 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
                 await navbarMenuElement.toggle(this.isMenuActive);
             }
         }
+        // wait for the default animation time to ensure
+        // the line of the tabs is at the correct position
+        await wait(300);
         this.balDidAnimate.emit(this.isMenuActive);
     }
     async onClick() {
@@ -67,7 +71,7 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
     render() {
         const navbarBrandEl = BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
-        return (h(Host, { key: 'bd905e5548b3eba587403d1de9e19578caf654fe', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'e94ee28b3f46017080ebb7dfe03ffe62bfa721da', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: 'faa690ef810fbb6444d577bc2aaad0412bbd1f92' })), h("bal-button", { key: '7ec55643796d5c32ea3cbbc70359100b5798ff66', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: '5a19618c04c539ac05ae44950d5642724f345d8f', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'bac65d94bd398e028a0bf4159df01af8e346eb7c', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '67808a0a311e2cb423d4f6cf2eaa6cb0b70062d8' })), h("bal-button", { key: '5d5a5d9602caec124e8163ebe54fc66b363d65c9', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));

package/components/bal-navbar-menu-end.js

@@ -9,7 +9,7 @@ const NavbarMenuEnd = /*@__PURE__*/ proxyCustomElement(class NavbarMenuEnd exten
     }
     render() {
         const menuEndEl = BEM.block('navbar').element('menu').element('end');
-        return (h(Host, { key: '10aa16f437f428adf6cb21c276aa16230aaad041', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'adadfb0d9bda6bb49613541c67bf9dced7a0ad4b' })));
+        return (h(Host, { key: '04f6df129b2db2428a8ee50e4c3316cf9cc143f9', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '0457213c0f02e87d1c2b30e7be6be3c0471fe3b9' })));
     }
 }, [4, "bal-navbar-menu-end", {
         "interface": [1]

package/components/bal-navbar-menu-start.js

@@ -9,7 +9,7 @@ const NavbarMenuStart = /*@__PURE__*/ proxyCustomElement(class NavbarMenuStart e
     }
     render() {
         const menuStartEl = BEM.block('navbar').element('menu').element('start');
-        return (h(Host, { key: '1d35806afa3206d429b351b9442375cd4a41133f', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '35baeb64effd472c64a148fb77fa91a604078f36' })));
+        return (h(Host, { key: '06f8898607ca2e126026864177931399c87819be', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'a1f9e79d3d0681c1c96734218cf5313f7cf95afb' })));
     }
 }, [4, "bal-navbar-menu-start", {
         "interface": [1]

package/components/bal-navbar-menu.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { f as deepReady } from './helpers.js';
+import { h as deepReady } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
@@ -36,7 +36,7 @@ const NavbarMenu = /*@__PURE__*/ proxyCustomElement(class NavbarMenu extends HTM
                 container = navbarEl.container;
             }
         }
-        return (h(Host, { key: '6b0a857bff0929177b51e75b2e5e26ad51d9dc6a', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: 'e7919137bb34c15bc676a1617a79aac4111460fc' })));
+        return (h(Host, { key: '88676dca9a4def916347757f552fa1efe174d80d', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: '47d1c81229bf002f4404123dad97df4d92042f1c' })));
     }
     get element() { return this; }
 }, [4, "bal-navbar-menu", {