@baloise/ds-core 19.2.0 → 19.3.0-nightly.20250627

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

@@ -2,19 +2,108 @@ import { h, r as registerInstance, c as createEvent, H as Host, g as getElement
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { b as balBrowser } from './browser-a8073d92.js';
-import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers-94c3fbac.js';
+import { s as stopEventBubbling } from './form-input-1ebdb905.js';
+import { n as rIC, i as isDescendant, w as waitForComponent, e as waitAfterIdleCallback } from './helpers-51d51cc5.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { B as BalScrollHandler } from './scroll-521224a9.js';
-import { b as balBreakpoints } from './breakpoints.subject-76dd4b56.js';
-import { d as defaultConfig } from './config.default-8e11a860.js';
-import { L as ListenToMutation } from './mutation.decorator-e915d053.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-133a72bf.js';
-import { L as ListenToConfig } from './config.decorator-42dba864.js';
-import { L as ListenToResize } from './resize.decorator-08f6286b.js';
-import './config.utils-cd529084.js';
+import { j as isTabKey } from './keyboard.helpers-159e517d.js';
+import { b as balBreakpoints } from './breakpoints.subject-794d0e94.js';
+import { d as defaultConfig } from './config.default-53a04699.js';
+import { L as ListenToMutation } from './mutation.decorator-6a69cedb.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-fff4bba9.js';
+import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
+import { L as ListenToResize } from './resize.decorator-3c8e5ee2.js';
+import './config.utils-f3793464.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-dc280d50.js';
+import './tokens.esm-628f0bc7.js';
+
+/**
+ * Gathers information about the tabs in the navigation.
+ * This information are shared for the tab key down handling and the flyout focus out handling.
+ */
+const gatherTabInformation = (detail) => {
+    var _a;
+    const links = (_a = detail.linkItems.find(item => item.value === detail.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems;
+    // the selected tab in the main navigation
+    const indexOfActiveTab = links === null || links === void 0 ? void 0 : links.findIndex(link => link.value === detail.activeMenuLinkValue);
+    const indexOfNextTab = indexOfActiveTab + 1;
+    const indexOfPreviousTab = indexOfActiveTab - 1;
+    return {
+        tabs: links || [],
+        indexOfActiveTab,
+        indexOfNextTab,
+        indexOfPreviousTab,
+    };
+};
+const handleTabKeyDown = ({ tabs, indexOfNextTab, indexOfActiveTab }, detail) => {
+    // the current focused tab in the main navigation
+    const indexOfFocusedTab = tabs === null || tabs === void 0 ? void 0 : tabs.findIndex(link => link.value === detail.item.value);
+    // if last tab is focused and would leave the tab navigation, close the flyout
+    if (!detail.isBackwards && indexOfFocusedTab === tabs.length - 1) {
+        detail.stopEventBubbling();
+        detail.closeFlyout();
+        rIC(() => {
+            focusNextElement(document.activeElement, detail.el);
+        });
+        return;
+    }
+    // only change focus to the first link in the flyout when navigating from active tab to next tab
+    if (!detail.isBackwards && indexOfFocusedTab === indexOfActiveTab) {
+        const flyout = detail.el.querySelector(`#${detail.navId}-menu-flyout`);
+        if (flyout) {
+            const firstLink = flyout.querySelector('a, button, [tabindex="0"]');
+            if (firstLink) {
+                detail.stopEventBubbling();
+                firstLink.focus({ preventScroll: true });
+            }
+        }
+    }
+    // only change focus to the last link in the flyout when navigating back from
+    // next tab (from the active tab) to active tab (has flyout open)
+    if (detail.isBackwards && indexOfFocusedTab === indexOfNextTab) {
+        const flyout = detail.el.querySelector(`#${detail.navId}-menu-flyout`);
+        if (flyout) {
+            const flyoutLinks = flyout.querySelectorAll('a, button, [tabindex="0"]');
+            const lastLink = flyoutLinks[flyoutLinks.length - 1];
+            if (lastLink) {
+                detail.stopEventBubbling();
+                lastLink.focus({ preventScroll: true });
+            }
+        }
+    }
+};
+const handleFlyoutFocusOut = (info, detail) => {
+    const targetItem = detail.isBackwards ? info.tabs[info.indexOfActiveTab] : info.tabs[info.indexOfNextTab];
+    if (targetItem) {
+        const tab = detail.el.querySelector(`button[data-value="${targetItem.value}"], a[data-value="${targetItem.value}"]`);
+        if (tab) {
+            tab.focus({ preventScroll: true });
+        }
+    }
+};
+/**
+ * Focuses the next focusable element after the current element outside of the bal-nav element.
+ */
+const focusNextElement = (current, balNavEl) => {
+    const focusableSelectors = [
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled]):not([type="hidden"])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ];
+    const focusableElements = Array.from(document.querySelectorAll(focusableSelectors.join(',')))
+        // visible elements only
+        .filter(el => el.offsetParent !== null)
+        // exclude elements inside the bal-nav
+        .filter(el => !isDescendant(balNavEl, el));
+    const index = focusableElements.indexOf(current);
+    const next = focusableElements[index + 1];
+    if (next)
+        next.focus();
+};
 
 const i18nNavBars = {
     de: {
@@ -223,6 +312,28 @@ class NavMetaButton extends NavLinkItem {
 }
 let NavMetaButtonIDs = 0;
 
+const AccordionButton = ({ id, label, level, open, link, href, rel, target, onClick, }) => {
+    const block = BEM.block('nav');
+    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, rel: rel, target: target, onClick: ev => onClick(ev) },
+        h("span", null, label))) : (h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) },
+        h("span", null, label),
+        h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
+};
+
+const OverviewLink = ({ item, isMenu, onClick, isVisible }) => {
+    const block = BEM.block('nav');
+    if (!item) {
+        return '';
+    }
+    return (h("a", { class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-overview-link').class()), block.element('mobile-overview-link').modifier('menu').class(!!isMenu)), block
+            .element('mobile-overview-link')
+            .modifier('invisible')
+            .class(isVisible === false)), href: item.href, rel: item.rel, target: item.target, onClick: ev => onClick(ev) },
+        item.label,
+        " ",
+        item.label ? '➞' : ''));
+};
+
 class NavSectionLinkItem extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -281,28 +392,6 @@ class NavServiceLinkItem extends NavLinkItem {
 }
 let NavServiceLinkItemIDs = 0;
 
-const AccordionButton = ({ id, label, level, open, link, href, rel, target, onClick, }) => {
-    const block = BEM.block('nav');
-    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, rel: rel, target: target, onClick: ev => onClick(ev) },
-        h("span", null, label))) : (h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) },
-        h("span", null, label),
-        h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
-};
-
-const OverviewLink = ({ item, isMenu, onClick, isVisible }) => {
-    const block = BEM.block('nav');
-    if (!item) {
-        return '';
-    }
-    return (h("a", { class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-overview-link').class()), block.element('mobile-overview-link').modifier('menu').class(!!isMenu)), block
-            .element('mobile-overview-link')
-            .modifier('invisible')
-            .class(isVisible === false)), href: item.href, rel: item.rel, target: item.target, onClick: ev => onClick(ev) },
-        item.label,
-        " ",
-        item.label ? '➞' : ''));
-};
-
 class NavMenuLinkItem extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -337,9 +426,9 @@ class NavMenuLinkItem extends NavLinkItem {
     render(context) {
         const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
         if (!hasChildren && this.isLink) {
-            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, "no-panel": true }));
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
         }
-        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
+        return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), onBalNavigate: ev => {
                 context === null || context === void 0 ? void 0 : context.onClick();
                 if (this.onClick) {
                     this.onClick(ev.detail);
@@ -387,7 +476,7 @@ class NavMetaLinkItem extends NavLinkItem {
 }
 let NavMetaLinkItemIDs = 0;
 
-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 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:not(.bal-nav-meta-bar--stay-on-top),.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 = class {
@@ -658,20 +747,53 @@ const Nav = class {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: 'c384e25a9962ec11739b7594114d2ad19fd07937', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '06cf6bb549c278c98b41ef3d176ac58dfe95bacc', class: {
+        return (h(Host, { key: '6731ced264e30666493c9b66469f8656e3a632ee', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'b8b36c81b079f727699a2d037c4f687084791cfa', 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, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
+            } }, 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", { inverted: true, context: "meta", value: this.activeMetaLinkValue, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
             flyoutId: `${this.navId}-menu-flyout`,
-        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].navigation }, (_a = this.linkItems
-            .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map(item => item.render({
+        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].navigation }, (_a = this.linkItems
+            .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map((item, index) => item.render({
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
-        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation }, 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: '7b17b61ea275f90fb5016d8ec0d26dece26caa4f' }, h("slot", { key: '8ae80d7fdacd29e171f136bfe3ace823290ff068' }))), 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({
+            onTabPress: (ev) => {
+                if (this.isFlyoutActive) {
+                    const isBackwards = ev.shiftKey;
+                    const info = gatherTabInformation({
+                        activeMetaLinkValue: this.activeMetaLinkValue,
+                        activeMenuLinkValue: this.activeMenuLinkValue,
+                        linkItems: this.linkItems,
+                    });
+                    handleTabKeyDown(info, {
+                        el: this.el,
+                        navId: this.navId,
+                        isFlyoutActive: this.isFlyoutActive,
+                        isBackwards,
+                        item,
+                        stopEventBubbling: () => stopEventBubbling(ev),
+                        closeFlyout: () => this.closeFlyout(),
+                    });
+                }
+            },
+        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation, onBalFocusOut: (ev) => {
+                if (this.isFlyoutActive) {
+                    stopEventBubbling(ev);
+                    const info = gatherTabInformation({
+                        activeMetaLinkValue: this.activeMetaLinkValue,
+                        activeMenuLinkValue: this.activeMenuLinkValue,
+                        linkItems: this.linkItems,
+                    });
+                    const isBackwards = isDescendant(this.el, ev.detail.relatedTarget);
+                    handleFlyoutFocusOut(info, {
+                        el: this.el,
+                        isBackwards,
+                    });
+                }
+            } }, 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: '66321dcac9fb856d8bba914283fc1fe0d4626d35' }, h("slot", { key: '1d89fec71d39cc81c491f2422312a733e103f016' }))), 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())))) : ('')));
+        })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { stayOnTopOfBackdrop: true, variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
     }
     renderGridLinks(linkItem) {
         var _a, _b;
@@ -908,6 +1030,7 @@ const BalNavMenuFlyoutStyle0 = balNavMenuFlyoutCss;
 const NavMenuFlyout = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.balFocusOut = createEvent(this, "balFocusOut", 7);
         this.bodyScrollHandler = new BalScrollHandler();
         this.isHidden = false;
         this.navId = `bal-nav-x${NavMenuFlyOutIds++}`;
@@ -929,6 +1052,11 @@ const NavMenuFlyout = class {
      * LISTENERS
      * ------------------------------------------------------
      */
+    onFocusLeave(event) {
+        if (this.el && event.relatedTarget && !isDescendant(this.el, event.relatedTarget)) {
+            this.balFocusOut.emit(event);
+        }
+    }
     resizeListener() {
         if (this.isFlyoutScrollable()) {
             this.bodyScrollHandler.disable();
@@ -952,7 +1080,7 @@ const NavMenuFlyout = class {
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: '9d0c52ef158adb1dcdddff70f32c0b4846696577', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '3405126297ac245862a006b2fd83f147e615d001', class: Object.assign({}, line.class()) }), h("div", { key: '2a8707468c3e6886dd91e6cf792de8e0e0f97aa9', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '7c98fd49abc6e6f3ff3e2dffd49f4ec69df72788' }))));
+        return (h(Host, { key: '24fa77703681dee08738a210a21b693eb5c53679', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '12eb7c5a6d4b3b8d230f8cfbc6477e4cc47b5897', class: Object.assign({}, line.class()) }), h("div", { key: '07fe48098735ef75bce7116eabedfceb8c2903e5', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '00a8a2f20e211f8610830bd89a53e7b57bafede2' }))));
     }
     get el() { return getElement(this); }
 };
@@ -971,7 +1099,7 @@ __decorate([
 let NavMenuFlyOutIds = 0;
 NavMenuFlyout.style = BalNavMenuFlyoutStyle0;
 
-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 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}}@media screen and (max-width: 768px){.bal-nav>.bal-nav-meta-bar--stay-on-top{z-index:calc(var(--bal-z-index-popup) + 1) !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;
 
 const NavMetaBar = class {
@@ -980,6 +1108,7 @@ const NavMetaBar = class {
         this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
         this.previousY = 0;
         this.isHidden = false;
+        this.stayOnTopOfBackdrop = false;
         this.variant = 'primary';
         this.size = 'normal';
         this.invisible = 'none';
@@ -1029,7 +1158,7 @@ const NavMetaBar = class {
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: 'c7aa3ccfe8e8b41e12c2e625eac9d23aba77ded3', 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: '0ad94b6ef1580bb8ae907d0ebe53721c32cee0f8', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '9cebb426b75f0d2cd743aa9e0efc26d1c584768c' }))));
+        return (h(Host, { key: '3c91c07a7d1b760ae2843b24003d4cebc2ec57d8', id: this.navMetaBarId, class: Object.assign(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')), block.modifier(`stay-on-top`).class(this.stayOnTopOfBackdrop)) }, h("div", { key: '02333a87470f62b461875ceeae5a1b32381f4700', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '4d41ede2b111ee158255fbbc04b580695c8b1597' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -2,17 +2,17 @@ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { b as balBrowser } from './browser-a8073d92.js';
-import { i as wait, h as deepReady } from './helpers-94c3fbac.js';
+import { a as wait, d as deepReady } from './helpers-51d51cc5.js';
 import { B as BalScrollHandler } from './scroll-521224a9.js';
-import { d as defaultConfig } from './config.default-8e11a860.js';
-import { L as ListenToConfig } from './config.decorator-42dba864.js';
-import { b as balBreakpoints } from './breakpoints.subject-76dd4b56.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-133a72bf.js';
-import './config.utils-cd529084.js';
+import { d as defaultConfig } from './config.default-53a04699.js';
+import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
+import { b as balBreakpoints } from './breakpoints.subject-794d0e94.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-fff4bba9.js';
+import './config.utils-f3793464.js';
 import './log-dfd1c19f.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-dc280d50.js';
+import './tokens.esm-628f0bc7.js';
 
 const balNavbarCss = ":root{--bal-navbar-background:var(--bal-color-primary);--bal-navbar-light-background:var(--bal-color-white);--bal-navbar-active-menu-background:var(--bal-color-white);--bal-navbar-height:4rem;--bal-navbar-height-desktop:5rem;--bal-navbar-brand-title-text-color:var(--bal-color-text-white);--bal-navbar-brand-title-font-size:var(--bal-text-size-medium);--bal-navbar-brand-title-light-text-color:var(--bal-color-text-primary);--bal-navbar-brand-text-color:var(--bal-color-text-white);--bal-navbar-brand-logo-link-color:var(--bal-color-text-white)}.bal-navbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block}.bal-navbar--context-app:not(.bal-navbar--is-light),.bal-navbar--context-simple:not(.bal-navbar--is-light){background:var(--bal-navbar-background)}.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height);max-height:var(--bal-navbar-height)}@media screen and (min-width: 1024px){.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height-desktop);max-height:var(--bal-navbar-height-desktop)}}.bal-navbar__nav{display:-ms-flexbox;display:flex;height:100%;gap:1rem}.bal-navbar__brand{-ms-flex:1;flex:1;gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{-ms-flex:initial;flex:initial}}.bal-navbar__brand>a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);-o-object-fit:contain;object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__title{display:none;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-navbar__brand__title>bal-logo{display:none}@media screen and (min-width: 769px),print{.bal-navbar__brand__title{display:inline-block;font-size:var(--bal-navbar-brand-title-font-size);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);color:var(--bal-navbar-brand-title-text-color)}}@media screen and (min-width: 1024px){.bal-navbar__brand__title{font-size:var(--bal-navbar-brand-title-font-size)}}.bal-navbar__brand--context-app,.bal-navbar__brand--context-simple{color:var(--bal-navbar-brand-text-color)}.bal-navbar__brand--context-app>a,.bal-navbar__brand--context-simple>a{color:var(--bal-navbar-brand-logo-link-color)}.bal-navbar__menu{position:static;display:none;z-index:var(--bal-z-index-navigation)}@media screen and (max-width: 1023px){.bal-navbar__menu--active{position:fixed !important;display:block;background:var(--bal-navbar-active-menu-background)}}@media screen and (max-width: 1023px){.bal-navbar__menu--context-app{padding-top:1rem;padding-bottom:1rem;overflow-y:auto;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex:1;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{-ms-flex-pack:start;justify-content:flex-start}.bal-navbar__menu__end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;gap:.5rem}.bal-navbar__menu__end .button-label{word-break:keep-all !important}.bal-navbar__menu__end .bal-button-group{width:100%}@media screen and (max-width: 1023px){.bal-navbar__menu__end .bal-button-group{margin-top:2rem}}.bal-navbar__menu__end--context-simple>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.bal-navbar__menu__end>.field{-ms-flex:1;flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal)}.bal-navbar--is-light .bal-navbar__brand__title{color:var(--bal-navbar-brand-title-light-text-color)}.bal-navbar--is-light bal-logo svg svg,.bal-navbar--is-light bal-logo svg g,.bal-navbar--is-light bal-logo svg path,.bal-navbar--is-light bal-logo svg circle{fill:var(--bal-color-primary)}.bal-navbar__brand__burger.bal-button{margin-left:auto}@media screen and (min-width: 1024px){.bal-navbar__brand__burger.bal-button{display:none}}.bal-navbar__brand__burger--hidden.bal-button{display:none !important}";
 const BalNavbarStyle0 = balNavbarCss;

package/dist/esm/bal-number-input.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { f as inputHandleClick, i as inputHandleHostClick, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, k as getNativeInputValue, l as getUpcomingValue, s as stopEventBubbling, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-263e6f5b.js';
-import { p as debounceEvent } from './helpers-94c3fbac.js';
+import { f as inputHandleClick, i as inputHandleHostClick, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, k as getNativeInputValue, l as getUpcomingValue, s as stopEventBubbling, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-1ebdb905.js';
+import { p as debounceEvent } from './helpers-51d51cc5.js';
 import { i as inheritAttributes } from './attributes-a3e70948.js';
-import { g as getNegativeSymbol, a as getDecimalSeparator, b as getThousandSeparator, f as formatLocaleNumber } from './number-d75635a2.js';
+import { g as getNegativeSymbol, a as getDecimalSeparator, b as getThousandSeparator, f as formatLocaleNumber } from './number-ccf3fbd0.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { d as defaultBalAriaForm } from './form-841232ff.js';
 import { L as Logger } from './log-dfd1c19f.js';
@@ -11,10 +11,10 @@ import { l as lodash_isnil } from './index-82aff103.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant-0eb059e0.js';
 import { i as isEmpty } from './index-db06fb0e.js';
 import { a as ariaBooleanToString } from './aria-ea150568.js';
-import { d as defaultConfig } from './config.default-8e11a860.js';
-import { L as ListenToConfig } from './config.decorator-42dba864.js';
+import { d as defaultConfig } from './config.default-53a04699.js';
+import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
 import './browser-a8073d92.js';
-import './config.utils-cd529084.js';
+import './config.utils-f3793464.js';
 import './_commonjsHelpers-1c8beb5f.js';
 
 /**

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

@@ -2,17 +2,17 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { a as ariaBooleanToString } from './aria-ea150568.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-0688a178.js';
-import { s as stopEventBubbling } from './form-input-263e6f5b.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-d99dc83c.js';
+import { s as stopEventBubbling } from './form-input-1ebdb905.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { i as inheritAttributes } from './attributes-a3e70948.js';
-import { b as waitAfterFramePaint, o as raf } from './helpers-94c3fbac.js';
+import { b as waitAfterFramePaint, o as raf } from './helpers-51d51cc5.js';
 import { s as startsWith, i as includes } from './utils-9fbab1d3.js';
 import { d as defaultBalAriaForm } from './form-841232ff.js';
 import './listener-04842ae9.js';
 import './browser-a8073d92.js';
-import './config.utils-cd529084.js';
+import './config.utils-f3793464.js';
 
 const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size:1.25rem}";
 const BalOptionStyle0 = balOptionCss;

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

@@ -1,16 +1,16 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { b as balBreakpoints } from './breakpoints.subject-76dd4b56.js';
-import { d as defaultConfig } from './config.default-8e11a860.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-133a72bf.js';
-import { L as ListenToConfig } from './config.decorator-42dba864.js';
-import './helpers-94c3fbac.js';
+import { b as balBreakpoints } from './breakpoints.subject-794d0e94.js';
+import { d as defaultConfig } from './config.default-53a04699.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-fff4bba9.js';
+import { L as ListenToConfig } from './config.decorator-6795d1fe.js';
+import './helpers-51d51cc5.js';
 import './browser-a8073d92.js';
-import './config.utils-cd529084.js';
+import './config.utils-f3793464.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-dc280d50.js';
+import './tokens.esm-628f0bc7.js';
 import './log-dfd1c19f.js';
 
 function generatePaginationControl(value, totalPages, pageRange) {

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

@@ -2,12 +2,12 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { b as balBrowser } from './browser-a8073d92.js';
-import { s as stopEventBubbling } from './form-input-263e6f5b.js';
-import { k as debounce } from './helpers-94c3fbac.js';
+import { s as stopEventBubbling } from './form-input-1ebdb905.js';
+import { k as debounce } from './helpers-51d51cc5.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { b as balFloatingUi } from './floating-ui-775ee3d1.js';
+import { b as balFloatingUi } from './floating-ui-8ffbc979.js';
 import { c as isEscapeKey } from './keyboard.helpers-159e517d.js';
-import './config.utils-cd529084.js';
+import './config.utils-f3793464.js';
 
 class AbstractVariantRenderer {
     showContainerElement(component) {

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

@@ -1,15 +1,15 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { o as raf } from './helpers-94c3fbac.js';
-import { b as balBreakpoints } from './breakpoints.subject-76dd4b56.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-133a72bf.js';
-import { L as ListenToWindowResize } from './window-resize.decorator-aa625d55.js';
+import { o as raf } from './helpers-51d51cc5.js';
+import { b as balBreakpoints } from './breakpoints.subject-794d0e94.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-fff4bba9.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-49ed4e99.js';
 import './browser-a8073d92.js';
-import './config.utils-cd529084.js';
+import './config.utils-f3793464.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-dc280d50.js';
+import './tokens.esm-628f0bc7.js';
 
 const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-background-purple:var(--bal-color-purple-2);--bal-progress-bar-background-yellow:var(--bal-color-yellow-2);--bal-progress-bar-background-red:var(--bal-color-red-2);--bal-progress-bar-background-green:var(--bal-color-green-2);--bal-progress-bar-line-color-primary:var(--bal-color-primary);--bal-progress-bar-line-color-purple:var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow:var(--bal-color-yellow-6);--bal-progress-bar-line-color-red:var(--bal-color-red-6);--bal-progress-bar-line-color-green:var(--bal-color-green-6);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}";
 const BalProgressBarStyle0 = balProgressBarCss;