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

package/dist/collection/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.js

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from "tslib";
-import { h, Host } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
+import { isDescendant } from "../../../utils/helpers";
 import { Logger } from "../../../utils/log";
 import { ListenToResize } from "../../../utils/resize";
 import { BalScrollHandler } from "../../../utils/scroll";
@@ -8,6 +9,13 @@ export class NavMenuFlyout {
     constructor() {
         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) {
@@ -27,6 +35,11 @@ export class NavMenuFlyout {
      * LISTENERS
      * ------------------------------------------------------
      */
+    onFocusLeave(event) {
+        if (this.el && event.relatedTarget && !isDescendant(this.el, event.relatedTarget)) {
+            this.balFocusOut.emit(event);
+        }
+    }
     resizeListener() {
         if (this.isFlyoutScrollable()) {
             this.bodyScrollHandler.disable();
@@ -50,7 +63,7 @@ export class NavMenuFlyout {
     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' }))));
     }
     static get is() { return "bal-nav-menu-flyout"; }
     static get originalStyleUrls() {
@@ -67,6 +80,7 @@ export class NavMenuFlyout {
         return {
             "navId": {
                 "type": "string",
+                "attribute": "nav-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -81,7 +95,6 @@ export class NavMenuFlyout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "nav-id",
                 "reflect": false,
                 "defaultValue": "`bal-nav-x${NavMenuFlyOutIds++}`"
             }
@@ -92,7 +105,39 @@ export class NavMenuFlyout {
             "isHidden": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "balFocusOut",
+                "name": "balFocusOut",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the flyout loses focus"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalNavFlyoutFocusOutDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "focusout",
+                "method": "onFocusLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     Logger('bal-nav-menu-flyout'),

package/dist/collection/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.css

@@ -1 +1 @@
-: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:flex;align-items:center;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar__container{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);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);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);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;transition: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{transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{transform:translateY(-5rem)}
+: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:flex;align-items:center;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar__container{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);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);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);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;transition: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{transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{transform:translateY(-5rem)}

package/dist/collection/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.js

@@ -8,9 +8,29 @@ export class NavMetaBar {
         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) {
@@ -57,7 +77,7 @@ export class NavMetaBar {
      */
     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' }))));
     }
     static get is() { return "bal-nav-meta-bar"; }
     static get originalStyleUrls() {
@@ -72,8 +92,29 @@ export class NavMetaBar {
     }
     static get properties() {
         return {
+            "stayOnTopOfBackdrop": {
+                "type": "boolean",
+                "attribute": "stay-on-top-of-backdrop",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the bar should stay on top of the backdrop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "variant": {
                 "type": "string",
+                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarVariant",
@@ -93,12 +134,12 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarSize",
@@ -118,12 +159,12 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'normal'"
             },
             "invisible": {
                 "type": "string",
+                "attribute": "invisible",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarInvisible",
@@ -143,12 +184,12 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "invisible",
                 "reflect": false,
                 "defaultValue": "'none'"
             },
             "position": {
                 "type": "string",
+                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaBarPosition",
@@ -168,7 +209,6 @@ export class NavMetaBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "position",
                 "reflect": false,
                 "defaultValue": "'none'"
             }

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

@@ -1 +1 @@
-@media(hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{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{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:flex;justify-content:space-between;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:flex;justify-content:space-between;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:flex;justify-content:space-between;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:flex;justify-content:space-between;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:flex;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)}
+@media(hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{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{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:flex;justify-content:space-between;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:flex;justify-content:space-between;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:flex;justify-content:space-between;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:flex;justify-content:space-between;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:flex;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)}

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

@@ -4,10 +4,12 @@ import { BEM } from "../../utils/bem";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
 import { balBrowser } from "../../utils/browser";
 import { ListenToConfig, defaultConfig, } from "../../utils/config";
-import { waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
+import { stopEventBubbling } from "../../utils/form-input";
+import { isDescendant, waitAfterIdleCallback, waitForComponent } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { ListenToMutation } from "../../utils/mutation";
 import { BalScrollHandler } from "../../utils/scroll";
+import { gatherTabInformation, handleFlyoutFocusOut, handleTabKeyDown } from "./bal-nav-focus.util";
 import { i18nNavBars } from "./bal-nav.i18n";
 import { NavMetaButton } from "./models/bal-nav-meta-button";
 import { NavMetaLinkItem } from "./models/bal-nav-meta-link-item";
@@ -15,7 +17,22 @@ export class Nav {
     constructor() {
         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
@@ -95,18 +112,6 @@ export class Nav {
             }
             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;
@@ -277,20 +282,53 @@ export class Nav {
         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;
@@ -333,6 +371,7 @@ export class Nav {
         return {
             "logo": {
                 "type": "unknown",
+                "attribute": "logo",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavLogoLink",
@@ -355,6 +394,7 @@ export class Nav {
             },
             "options": {
                 "type": "unknown",
+                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavOptions",
@@ -378,6 +418,7 @@ export class Nav {
             },
             "buttons": {
                 "type": "unknown",
+                "attribute": "buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalNavMetaButtons",

package/dist/collection/components/bal-nav/models/bal-nav-menu-link-item.js

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+import { isTabKey } from "../../../utils/keyboard";
+import { AccordionButton } from "../components/accordion-button";
+import { OverviewLink } from "../components/overview-link";
 import { NavLinkItem } from "./bal-nav-link-item";
 import { NavSectionLinkItem } from "./bal-nav-section-link-item";
 import { NavServiceLinkItem } from "./bal-nav-service-link-item";
-import { AccordionButton } from "../components/accordion-button";
-import { OverviewLink } from "../components/overview-link";
-import { BEM } from "../../../utils/bem";
 export class NavMenuLinkItem extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -35,9 +36,9 @@ export 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", { 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, "no-panel": true, onBalNavigate: ev => {
+        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 => {
                 context === null || context === void 0 ? void 0 : context.onClick();
                 if (this.onClick) {
                     this.onClick(ev.detail);

package/dist/collection/components/bal-nav/models/bal-nav-meta-button.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { NavLinkItem } from "./bal-nav-link-item";
 import { balBrowser } from "../../../utils/browser";
+import { NavLinkItem } from "./bal-nav-link-item";
 export class NavMetaButton extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -23,42 +23,24 @@ export 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, aria: {
-                    title: this.htmlTitle,
-                    label: 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, a11yTitle: this.htmlTitle, a11yLabel: 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, 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));
+        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));
     }
     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, aria: {
-                        title: this.htmlTitle,
-                        label: 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, a11yTitle: this.htmlTitle, a11yLabel: 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, 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));
+            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));
         }
     }
     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, aria: {
-                        title: this.htmlTitle,
-                        label: 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, a11yTitle: this.htmlTitle, a11yLabel: 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, 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));
+            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));
         }
     }
     resetTouchBottomMetaBar() {

package/dist/collection/components/bal-nav/models/bal-nav-meta-link-item.js

@@ -26,9 +26,9 @@ export class NavMetaLinkItem extends NavLinkItem {
     }
     render(context) {
         if (this.isLink) {
-            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, 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, "no-panel": true, onBalNavigate: ev => {
+        return (h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 if (this.onClick) {
                     this.onClick(ev.detail);
                 }