@baloise/ds-core 19.3.0-nightly.20250704 → 19.3.0

package/components/bal-logo.animation.js

@@ -318,7 +318,7 @@ const LogoAnimationData = (color = '#000d6e') => ({
                                     t: 65,
                                     s: [-360, -0.036, 0],
                                     to: [60, 60, 0],
-                                    ti: [-6e-3, -6e-3, 0],
+                                    ti: [-0.006, -0.006, 0],
                                 },
                                 { t: 66, s: [-359.964, 0, 0] },
                             ],
@@ -2748,7 +2748,7 @@ const LogoAnimationData = (color = '#000d6e') => ({
                                     ],
                                     v: [
                                         [79.715, -3.055],
-                                        [-1e-3, -80.443],
+                                        [-0.001, -80.443],
                                         [-79.715, 0.145],
                                         [2.909, 80.443],
                                         [67.875, 52.892],

package/components/bal-logo2.js

@@ -2,12 +2,13 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 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 { l as rOnLoad } from './helpers.js';
+import { m as rOnLoad } from './helpers.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
 const balLogoCss = ".bal-logo{position:static;display:block;height:22px}.bal-logo svg{-webkit-transform:unset !important;transform:unset !important}.bal-logo svg svg,.bal-logo svg g,.bal-logo svg path,.bal-logo svg circle{fill:#000d6e}.bal-logo>div{height:22px}@media screen and (min-width: 1024px){.bal-logo--animated{margin-left:-7px}}.bal-logo--white svg svg,.bal-logo--white svg g,.bal-logo--white svg path,.bal-logo--white svg circle{fill:#fff}@media screen and (min-width: 1024px){.bal-logo{height:32px}.bal-logo>div{height:32px}}.bal-logo--size-small{height:22px}.bal-logo--size-small>div{height:22px}";
+const BalLogoStyle0 = balLogoCss;
 
 const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
     constructor() {
@@ -15,21 +16,8 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
         this.__registerHost();
         this.isTouch = balBreakpoints.isTouch;
         this.doesConfigAllowAnimation = true;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the color of the logo.
-         */
         this.color = 'blue';
-        /**
-         * Size of the logo svg
-         */
         this.size = '';
-        /**
-         * Defines if the animation should be active
-         */
         this.animated = false;
     }
     createLogger(log) {
@@ -136,7 +124,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
     static get watchers() { return {
         "animated": ["animatedWatcher"]
     }; }
-    static get style() { return balLogoCss; }
+    static get style() { return BalLogoStyle0; }
 }, [0, "bal-logo", {
         "color": [1],
         "size": [1],

package/components/bal-modal.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
 import { p as prepareOverlay, d as dismiss, e as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
-import { c as componentOnReady, d as deepReady, w as wait } from './helpers.js';
+import { c as componentOnReady, d as deepReady, a as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
 
@@ -52,6 +52,7 @@ const getClassList = (classes) => {
 };
 
 const balModalCss = ".bal-modal,.bal-modal__background{bottom:0;left:0;position:absolute;right:0;top:0}:root{--bal-modal-background:var(--bal-color-white);--bal-modal-backdrop-background:var(--bal-color-primary-6);--bal-modal-backdrop-opacity:.6;--bal-modal-radius:var(--bal-radius-large)}.bal-modal{-ms-flex-align:center;align-items:center;display:none;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:fixed;z-index:var(--bal-z-index-modal)}.bal-modal--is-active{display:-ms-flexbox;display:flex}.bal-modal__background{background:var(--bal-modal-backdrop-background);opacity:var(--bal-modal-backdrop-opacity)}.bal-modal__header__title{padding-right:2.5rem;line-height:2rem}.bal-modal__header__close{position:absolute !important;display:-ms-flexbox !important;display:flex !important;right:1.25rem !important;top:1.5rem !important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:2rem;max-width:2rem;min-height:2rem;max-height:2rem}.bal-modal__container{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:none;overflow-y:auto;-ms-overflow-y:visible;padding:.5rem}@media screen and (min-width: 769px),print{.bal-modal__container{padding:0}}.bal-modal__content{overflow:none;position:relative;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background:var(--bal-modal-background);border-radius:var(--bal-modal-radius);padding:1rem}@media screen and (min-width: 769px),print{.bal-modal__content{margin:3rem auto;width:var(--bal-modal-width, var(--bal-width, 40rem))}}.bal-modal__content .bal-modal__header{padding-bottom:1rem}.bal-modal__content .bal-modal__header__close{right:1.2rem !important;top:.7rem !important}@media screen and (min-width: 769px),print{.bal-modal__content{padding:1.5rem}.bal-modal__content .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content{padding:2.5rem}.bal-modal__content .bal-modal__header{padding-bottom:2.5rem}.bal-modal__content .bal-modal__header__close{right:2.7rem !important;top:2.2rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}.bal-modal__body>bal-button-group{padding-top:1rem}";
+const BalModalStyle0 = balModalCss;
 
 const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1 {
     constructor() {
@@ -65,47 +66,18 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         this.isClickedOutsideOnMouseUp = false;
         this.bodyScrollHandler = new BalScrollHandler();
         this.presented = false;
-        /**
-         * Defines the width of the modal body
-         */
+        this.overlayIndex = undefined;
+        this.delegate = undefined;
+        this.dataTestId = undefined;
         this.modalWidth = 640;
-        /**
-         * Defines the space/padding of the modal
-         */
         this.space = '';
-        /**
-         * If `true`, a backdrop will be displayed behind the modal.
-         */
         this.hasBackdrop = true;
-        /**
-         * If `true`, the modal can be closed with the escape key or the little close button.
-         */
         this.isClosable = true;
-        /**
-         * If `true`, the modal can be closed with the click outside of the modal
-         */
+        this.component = undefined;
+        this.componentProps = undefined;
+        this.cssClass = undefined;
         this.backdropDismiss = true;
-        /**
-         * If `true`, focus will not be allowed to move outside of this overlay.
-         * If `false`, focus will be allowed to move outside of the overlay.
-         *
-         * In most scenarios this property should remain set to `true`. Setting
-         * this property to `false` can cause severe accessibility issues as users
-         * relying on assistive technologies may be able to move focus into
-         * a confusing state. We recommend only setting this to `false` when
-         * absolutely necessary.
-         *
-         * Developers may want to consider disabling focus trapping if this
-         * overlay presents a non-Ionic overlay from a 3rd party library.
-         * Developers would disable focus trapping on the Ionic overlay
-         * when presenting the 3rd party overlay and then re-enable
-         * focus trapping when dismissing the 3rd party overlay and moving
-         * focus back to the Ionic overlay.
-         */
         this.focusTrap = true;
-        /**
-         * @internal
-         */
         this.demo = false;
     }
     connectedCallback() {
@@ -279,7 +251,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
             }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '0bdfc5b5e268ec2ade1b70753cd64517fa635290' })))));
     }
     get el() { return this; }
-    static get style() { return balModalCss; }
+    static get style() { return BalModalStyle0; }
 }, [4, "bal-modal", {
         "overlayIndex": [1026, "overlay-index"],
         "delegate": [16],
@@ -289,7 +261,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         "hasBackdrop": [4, "has-backdrop"],
         "isClosable": [4, "is-closable"],
         "component": [1],
-        "componentProps": [16, "component-props"],
+        "componentProps": [16],
         "cssClass": [1, "css-class"],
         "backdropDismiss": [4, "backdrop-dismiss"],
         "focusTrap": [4, "focus-trap"],

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

@@ -4,18 +4,12 @@ import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';
 
 const balNavLinkGridColCss = ".bal-nav-link-grid-col{display:block;padding:0;-ms-flex:none;flex:none;width:100%}.bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid-col{-ms-flex:none;flex:none;width:50%;padding-top:0;padding-bottom:0;padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}.bal-nav-link-grid-col .bal-nav-link-group{margin-bottom:var(--bal-space-normal);padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{padding-left:0}@media screen and (min-width: 1440px){.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{-ms-flex:none;flex:none;width:33.3333%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static){-ms-flex:none;flex:none;width:66.6666%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-large)}}.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{margin:0;width:100%}@media screen and (min-width: 1024px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{padding-left:0;padding-right:0}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{width:calc(50% - var(--bal-space-large)/2)}}";
+const BalNavLinkGridColStyle0 = balNavLinkGridColCss;
 
 const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the static column which is always aligned to the right
-         */
         this.staticCol = false;
     }
     createLogger(log) {
@@ -30,7 +24,7 @@ const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol ext
         const innerEl = block.element('inner');
         return (h(Host, { key: 'b4cba3fc9a569b19d2921f0f728d8865b97ccd55', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '36c2d569a02ea2dc1adb8ecedaab21576f61c0dc', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'c99e184492ca2665cdebad028cd3ab3e97d3249a' }))));
     }
-    static get style() { return balNavLinkGridColCss; }
+    static get style() { return BalNavLinkGridColStyle0; }
 }, [4, "bal-nav-link-grid-col", {
         "staticCol": [4, "static-col"]
     }]);

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

@@ -4,6 +4,7 @@ import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';
 
 const balNavLinkGridCss = ".bal-nav-link-grid{--bal-column-gap:0}@media screen and (min-width: 1024px){.bal-nav-link-grid{--bal-column-gap:1.5rem}}.bal-nav-link-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:0;margin-left:calc(var(--bal-column-gap)*-1);margin-right:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid:last-child{margin-bottom:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}";
+const BalNavLinkGridStyle0 = balNavLinkGridCss;
 
 const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends HTMLElement {
     constructor() {
@@ -21,7 +22,7 @@ const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends H
         const block = BEM.block('nav-link-grid');
         return (h(Host, { key: '7e58a9b6c677d60837d56404af5f6b03a7d96073', class: Object.assign({}, block.class()) }, h("slot", { key: '4e7abb8d92056b3f99b42ebad4c1d7752cffca4e' })));
     }
-    static get style() { return balNavLinkGridCss; }
+    static get style() { return BalNavLinkGridStyle0; }
 }, [4, "bal-nav-link-grid"]);
 __decorate([
     Logger('bal-nav-link-grid'),

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

@@ -4,18 +4,12 @@ import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';
 
 const balNavLinkGroupCss = ":root{--bal-nav-link-group-background:transparent;--bal-nav-link-group-background-grey:var(--bal-color-grey);--bal-nav-link-group-background-purple:var(--bal-color-purple);--bal-nav-link-group-background-red:var(--bal-color-red);--bal-nav-link-group-background-yellow:var(--bal-color-yellow);--bal-nav-link-group-background-green:var(--bal-color-green);--bal-nav-link-group-radius:var(--bal-radius-large)}.bal-nav-link-group{display:block;background:var(--bal-nav-link-group-background);border-radius:var(--bal-nav-link-group-radius);padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal);padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-group{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}}.bal-nav-link-group--is-grey{background:var(--bal-nav-link-group-background-grey)}.bal-nav-link-group--is-purple{background:var(--bal-nav-link-group-background-purple)}.bal-nav-link-group--is-red{background:var(--bal-nav-link-group-background-red)}.bal-nav-link-group--is-yellow{background:var(--bal-nav-link-group-background-yellow)}.bal-nav-link-group--is-green{background:var(--bal-nav-link-group-background-green)}";
+const BalNavLinkGroupStyle0 = balNavLinkGroupCss;
 
 const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the color of the group
-         */
         this.color = '';
     }
     createLogger(log) {
@@ -30,7 +24,7 @@ const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends
         const hasColor = this.color !== '';
         return (h(Host, { key: '12c1c4d22dc3827a4c186c6591b7b043f1dd378b', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '0c503bfaa7b2587f50936cc3d699e5a1bd9995a7' })));
     }
-    static get style() { return balNavLinkGroupCss; }
+    static get style() { return BalNavLinkGroupStyle0; }
 }, [4, "bal-nav-link-group", {
         "color": [1]
     }]);

package/components/bal-nav-link2.js

@@ -4,31 +4,17 @@ import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';
 
 const balNavLinkCss = "@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-link-text-color:var(--bal-link-color);--bal-nav-link-text-color-hover:var(--bal-link-color-hover);--bal-nav-link-text-color-active:var(--bal-link-color-active)}.bal-nav-link{display:block}.bal-nav-link:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-nav-link--variant-title:not(:last-child){margin-bottom:var(--bal-space-normal) !important}.bal-nav-link--variant-overview:not(:last-child){margin-bottom:0 !important}@media screen and (min-width: 1024px){.bal-nav-link--variant-overview:not(:last-child){margin-bottom:var(--bal-space-normal) !important}}.bal-nav-link__native{display:inline;color:var(--bal-nav-link-text-color);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);font-family:var(--bal-font-family-text);text-align:left;padding:0;border:none;background:none}.bal-nav-link__native--variant-title{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);text-decoration:none;margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link__native--variant-title{font-size:var(--bal-text-size-xx-large)}}.bal-nav-link__native--variant-overview{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-nav-link__native--selected{-webkit-text-decoration:var(--bal-link-text-decoration) !important;text-decoration:var(--bal-link-text-decoration) !important;text-decoration-thickness:1px !important;text-underline-offset:2px !important}button.bal-nav-link__native,a.bal-nav-link__native{cursor:pointer}@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:hover,a.bal-nav-link__native:hover{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-hover);text-underline-offset:2px}}button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{border-radius:var(--bal-radius-normal)}button.bal-nav-link__native:active,a.bal-nav-link__native:active{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-active);text-underline-offset:2px}";
+const BalNavLinkStyle0 = balNavLinkCss;
 
 const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines the variant of the link
-         */
         this.variant = '';
-        /**
-         * If `true` the link gets selected with a underline
-         */
         this.selected = false;
-        /**
-         * If `true` the link can be clickable
-         */
         this.clickable = false;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
+        this.rel = undefined;
+        this.href = undefined;
         this.target = '_self';
     }
     createLogger(log) {
@@ -53,7 +39,7 @@ const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLEleme
                 .modifier('selected')
                 .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '9189d57ba3a0f78af5c2ac4232c9231d6096ae02' }))));
     }
-    static get style() { return balNavLinkCss; }
+    static get style() { return BalNavLinkStyle0; }
 }, [4, "bal-nav-link", {
         "variant": [1],
         "selected": [4],

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

@@ -4,6 +4,7 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 
 const balNavMenuBarCss = ":root{--bal-nav-menu-bar-background:var(--bal-color-white);--bal-nav-menu-bar-radius:var(--bal-radius-large);--bal-nav-menu-bar-shadow:0 5px 15px rgba(0,0,0,.1)}.bal-nav-menu-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-menu-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-menu-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 1440px){.bal-nav-menu-bar{position:fixed;margin-top:1rem}}.bal-nav-menu-bar--position-fixed-top{position:fixed}.bal-nav-menu-bar__inner{background:var(--bal-nav-menu-bar-background);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{min-height:64px}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow);min-height:80px}}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;min-height:80px}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container::before{position:absolute;content:\"\";height:100%;top:0;left:1rem;right:1rem;background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{-ms-flex-item-align:start;align-self:flex-start;z-index:1;height:auto;margin-top:.8em}@media screen and (min-width: 1024px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1rem}}@media screen and (min-width: 1440px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1.5rem}}.bal-nav-menu-bar-body-padding{padding-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-padding{padding-top:7rem}}.bal-nav-menu-bar-body-margin{margin-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-margin{margin-top:7rem}}.bal-nav-menu-bar-fixed-body-padding{padding-top:8rem}.bal-nav-menu-bar-fixed-body-margin{margin-top:8rem}";
+const BalNavMenuBarStyle0 = balNavMenuBarCss;
 
 const NavMenuBar = /*@__PURE__*/ proxyCustomElement(class NavMenuBar extends HTMLElement {
     constructor() {
@@ -11,17 +12,7 @@ const NavMenuBar = /*@__PURE__*/ proxyCustomElement(class NavMenuBar extends HTM
         this.__registerHost();
         this.navMenuBarId = `bal-nav-menu-bar-${NavMenuBarIds++}`;
         this.isHidden = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Tells when to hide the bar
-         */
         this.invisible = 'none';
-        /**
-         * Defines the position of the bar
-         */
         this.position = 'none';
     }
     createLogger(log) {
@@ -44,7 +35,7 @@ const NavMenuBar = /*@__PURE__*/ proxyCustomElement(class NavMenuBar extends HTM
         return (h(Host, { key: 'c2ea73c8876d06127c4fee24edf6a2ecc623f199', 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: 'd59d5d00f628748b91964b61692cca01d609a005', class: Object.assign({}, innerBlock.class()) }, h("div", { key: '3afd6861fef7c4d6e2b3d41bd7e626daa4aa06b1', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '380e064513ba797a10145e73bdc76dfe81dafaf6' })))));
     }
     get el() { return this; }
-    static get style() { return balNavMenuBarCss; }
+    static get style() { return BalNavMenuBarStyle0; }
 }, [4, "bal-nav-menu-bar", {
         "invisible": [1],
         "position": [1],

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

@@ -3,11 +3,11 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { i as isDescendant } from './helpers.js';
 import { L as Logger } from './log.js';
-import './window-resize.subject.js';
-import { L as ListenToResize } from './resize.decorator.js';
 import { B as BalScrollHandler } from './scroll.js';
+import { L as ListenToResize } from './resize.decorator.js';
 
 const balNavMenuFlyoutCss = ":root{--bal-nav-menu-flyout-border-background:var(--bal-color-grey)}.bal-nav-menu-flyout{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;padding-bottom:2.5rem;overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 90px - 48px - 16px);width:calc(100% + 1rem + 1rem);margin-left:-1rem;margin-right:-1rem}.bal-nav-menu-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-menu-flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-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-menu-flyout .bal-nav-menu-flyout__line{position:-webkit-sticky;position:sticky;width:100%;left:0;top:0;height:1px;background-color:var(--bal-color-grey);margin-bottom:2.5rem}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-flyout .bal-nav-menu-flyout__line{width:calc(100% - 2rem);left:1rem}}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout{width:calc(100% + 2.5rem + 2.5rem);margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1024px){.bal-nav-menu-flyout{width:calc(100% + 3rem + 3rem);margin-left:-3rem;margin-right:-3rem}}@media screen and (min-width: 1440px){.bal-nav-menu-flyout{max-height:calc(var(--bal-app-height, 100%) - 96px - 48px - 16px)}}";
+const BalNavMenuFlyoutStyle0 = balNavMenuFlyoutCss;
 
 const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout extends HTMLElement {
     constructor() {
@@ -16,13 +16,6 @@ const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout exten
         this.balFocusOut = createEvent(this, "balFocusOut", 7);
         this.bodyScrollHandler = new BalScrollHandler();
         this.isHidden = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * This is used to connect the flyout to the aria controls
-         * */
         this.navId = `bal-nav-x${NavMenuFlyOutIds++}`;
     }
     createLogger(log) {
@@ -73,7 +66,7 @@ const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout exten
         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 this; }
-    static get style() { return balNavMenuFlyoutCss; }
+    static get style() { return BalNavMenuFlyoutStyle0; }
 }, [4, "bal-nav-menu-flyout", {
         "navId": [1, "nav-id"],
         "isHidden": [32]

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

@@ -5,6 +5,7 @@ import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.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}}@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 = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTMLElement {
     constructor() {
@@ -13,29 +14,10 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
         this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
         this.previousY = 0;
         this.isHidden = false;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * Defines if the bar should stay on top of the backdrop
-         */
         this.stayOnTopOfBackdrop = false;
-        /**
-         * Defines the color variant
-         */
         this.variant = 'primary';
-        /**
-         * Defines the height of the bar
-         */
         this.size = 'normal';
-        /**
-         * Tells when to hide the bar
-         */
         this.invisible = 'none';
-        /**
-         * Defines the position of the bar
-         */
         this.position = 'none';
     }
     createLogger(log) {
@@ -85,7 +67,7 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
         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 this; }
-    static get style() { return balNavMetaBarCss; }
+    static get style() { return BalNavMetaBarStyle0; }
 }, [4, "bal-nav-meta-bar", {
         "stayOnTopOfBackdrop": [4, "stay-on-top-of-backdrop"],
         "variant": [1],

package/components/bal-nav.js

@@ -1,17 +1,12 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { b as balBrowser } from './browser.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { n as rIC, i as isDescendant, f as waitForComponent, b as waitAfterIdleCallback } from './helpers.js';
+import { p as rIC, i as isDescendant, w as waitForComponent, e as waitAfterIdleCallback } from './helpers.js';
 import { L as Logger } from './log.js';
-import { L as ListenToMutation } from './mutation.decorator.js';
 import { B as BalScrollHandler } from './scroll.js';
-import { e as isTabKey } from './keyboard.helpers.js';
+import { b as isTabKey } from './keyboard.helpers.js';
 import { d as defineCustomElement$t } from './bal-badge2.js';
 import { d as defineCustomElement$s } from './bal-button2.js';
 import { d as defineCustomElement$r } from './bal-checkbox2.js';
@@ -40,6 +35,11 @@ import { d as defineCustomElement$5 } from './bal-spinner2.js';
 import { d as defineCustomElement$4 } from './bal-stack2.js';
 import { d as defineCustomElement$3 } from './bal-tabs2.js';
 import { d as defineCustomElement$2 } from './bal-tag2.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenToConfig } from './config.decorator.js';
 
 /**
  * Gathers information about the tabs in the navigation.
@@ -278,24 +278,42 @@ class NavMetaButton extends NavLinkItem {
     }
     renderAtMetaBar() {
         if (this.isLink) {
-            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.label));
+            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                } }, this.label));
         }
-        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
+        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
+                title: this.htmlTitle,
+                label: this.ariaLabel || this.label,
+            }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
     }
     renderAtTouchTopMetaBar() {
         if (this.touchPlacement === 'top') {
             if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.icon ? '' : this.label));
+                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
+                        title: this.htmlTitle,
+                        label: this.ariaLabel || this.label,
+                    } }, this.icon ? '' : this.label));
             }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
         }
     }
     renderAtTouchBottomMetaBar() {
         if (this.touchPlacement === 'bottom') {
             if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, href: this.href, target: this.target }, this.label));
+                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
+                        title: this.htmlTitle,
+                        label: this.ariaLabel || this.label,
+                    }, href: this.href, target: this.target }, this.label));
             }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
         }
     }
     resetTouchBottomMetaBar() {
@@ -431,9 +449,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", { a11yControls: 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, 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", { a11yControls: 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 => {
+        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);
@@ -470,9 +488,9 @@ class NavMetaLinkItem extends NavLinkItem {
     }
     render(context) {
         if (this.isLink) {
-            return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
         }
-        return (h("bal-tab-item", { a11yControls: 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, onBalNavigate: ev => {
                 if (this.onClick) {
                     this.onClick(ev.detail);
                 }
@@ -482,6 +500,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: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 = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
     constructor() {
@@ -490,22 +509,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         this.balNavItemClick = createEvent(this, "balNavItemClick", 7);
         this.navId = `bal-nav-${NavIds++}`;
         this.bodyScrollHandler = new BalScrollHandler();
-        this.isTouch = balBreakpoints.isTouch;
-        this.isDesktop = balBreakpoints.isDesktop;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.isFlyoutActive = false;
         this.hasRenderedWithFlyoutActive = false;
-        /**
-         * Link level structure.
-         */
-        this.options = [];
-        this.linkItems = [];
-        /**
-         * Link level structure.
-         */
-        this.buttons = [];
-        this.metaButtons = [];
         this.mutationObserverActive = true;
         /**
          * EVENT BINDING
@@ -585,6 +589,18 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
             }
             this.activeMenuLinkValue = value;
         };
+        this.isTouch = balBreakpoints.isTouch;
+        this.isDesktop = balBreakpoints.isDesktop;
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        this.isFlyoutActive = false;
+        this.activeMetaLinkValue = undefined;
+        this.activeMenuLinkValue = undefined;
+        this.logo = undefined;
+        this.options = [];
+        this.linkItems = [];
+        this.buttons = [];
+        this.metaButtons = [];
     }
     createLogger(log) {
         this.log = log;
@@ -834,7 +850,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         "options": ["optionChanged"],
         "buttons": ["buttonChanged"]
     }; }
-    static get style() { return balNavCss; }
+    static get style() { return BalNavStyle0; }
 }, [4, "bal-nav", {
         "logo": [16],
         "options": [16],