@baloise/ds-core 17.3.0 → 17.4.0-snapshot.1609-d2bcc38d3

package/dist/collection/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.js

@@ -1,9 +1,14 @@
 import { __decorate, __metadata } from "tslib";
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { Logger } from "../../../utils/log";
 import { isEnterKey, isSpaceKey } from "../../../utils/keyboard";
+import { stopEventBubbling } from "../../../utils/form-input";
+import { ariaBooleanToString } from "../../../utils/aria";
+import { i18nBalListItemAccordionHead } from "./bal-list-item-accordion-head.i18n";
+import { defaultConfig, ListenToConfig } from "../../../utils/config";
 export class ListItemAccordionHead {
     constructor() {
+        this.internalId = `bal-list-item-accordion-head-${ListItemAccordionHeadIds++}`;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -15,9 +20,12 @@ export class ListItemAccordionHead {
         };
         this.onKeyDown = (ev) => {
             if (isSpaceKey(ev) || isEnterKey(ev)) {
+                stopEventBubbling(ev);
                 this.onClick();
             }
         };
+        this.ariaState = {};
+        this.language = defaultConfig.language;
         this.accordionOpen = false;
         this.icon = 'plus';
     }
@@ -29,16 +37,57 @@ export class ListItemAccordionHead {
             this.balAccordionChange.emit(this.accordionOpen);
         }
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidRender() {
+        this.setLabelledby();
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async setAria(aria) {
+        this.ariaState = Object.assign({}, aria);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    setLabelledby() {
+        const bodyEl = this.el.parentElement.querySelector('bal-list-item-accordion-body');
+        if (bodyEl) {
+            bodyEl.setAria({ labelledby: this.internalId });
+        }
+    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '832f5c8044b9e4ce3cbb058bda2b6049510972de', class: {
+        return (h(Host, { key: '7f9a3df26dc5379967a99630512ccead7c8150f1', class: {
                 'bal-list__item': true,
                 'bal-list__item__accordion-head': true,
                 'bal-list__item__accordion-head--open': this.accordionOpen,
-            }, role: "button", tabindex: "0", onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '8a19cd5dd89ce0adb4301d2bfedbcdc7416457c6' }), h("bal-list-item-icon", { key: '263259acd91f67abe9114a127afbafe09e5a81b7', right: true }, h("bal-icon", { key: '10c6bf2695488123fcb5c229a94b36cbfd0c767a', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
+            }, id: this.internalId, role: "button", tabindex: "0", "aria-expanded": ariaBooleanToString(this.accordionOpen), "aria-controls": this.ariaState.controlId, title: this.accordionOpen
+                ? i18nBalListItemAccordionHead[this.language].close
+                : i18nBalListItemAccordionHead[this.language].open, "aria-label": this.accordionOpen
+                ? i18nBalListItemAccordionHead[this.language].close
+                : i18nBalListItemAccordionHead[this.language].open, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '76e6f62d4f86c4918c923c12490724a94b9c617b' }), h("bal-list-item-icon", { key: '33e7e1e1ab7111cbc012e006c85794d9b6ba0a2c', right: true }, h("bal-icon", { key: 'd73baa5d7dfb8c9db83158336fca216d9d3c5624', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
     }
     static get is() { return "bal-list-item-accordion-head"; }
     static get properties() {
@@ -90,6 +139,12 @@ export class ListItemAccordionHead {
             }
         };
     }
+    static get states() {
+        return {
+            "ariaState": {},
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "balAccordionChange",
@@ -113,6 +168,68 @@ export class ListItemAccordionHead {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: BalConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "BalConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalConfigState": {
+                            "location": "import",
+                            "path": "../../../utils/config",
+                            "id": "src/utils/config/index.ts::BalConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            },
+            "setAria": {
+                "complexType": {
+                    "signature": "(aria: BalListItemAccordionHeadAria) => Promise<void>",
+                    "parameters": [{
+                            "name": "aria",
+                            "type": "BalListItemAccordionHeadAria",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalListItemAccordionHeadAria": {
+                            "location": "local",
+                            "path": "/home/runner/work/design-system/design-system/packages/core/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx",
+                            "id": "src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx::BalListItemAccordionHeadAria"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
@@ -127,3 +244,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], ListItemAccordionHead.prototype, "createLogger", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], ListItemAccordionHead.prototype, "configChanged", null);
+let ListItemAccordionHeadIds = 0;

package/dist/collection/components/bal-list/bal-list-item-content/bal-list-item-content.js

@@ -4,10 +4,10 @@ export class ListItemContent {
         this.contentAlignment = undefined;
     }
     render() {
-        return (h(Host, { key: '18b259162c90c9d964723ead0c397808190b5a03', class: {
+        return (h(Host, { key: '62c3187a790387131619a36041500bfa8411f1ef', class: {
                 'bal-list__item__content': true,
                 [`bal-list__item__content--${this.contentAlignment}`]: this.contentAlignment !== undefined,
-            } }, h("slot", { key: 'f5f1b01681e567d907880df1c074bb6387afe692' })));
+            } }, h("slot", { key: '46b91cbcc099fadbc5d36cd38962cd269edfa061' })));
     }
     static get is() { return "bal-list-item-content"; }
     static get properties() {

package/dist/collection/components/bal-list/bal-list-item-icon/bal-list-item-icon.js

@@ -4,10 +4,10 @@ export class ListItemIcon {
         this.right = false;
     }
     render() {
-        return (h(Host, { key: '99a23b25b0d12efbbcec68c953c9a71715728264', class: {
+        return (h(Host, { key: '9fb09192dd52850fcef91ea5a331d15a4b3b5dcc', class: {
                 'bal-list__item__icon': true,
                 'bal-list__item__icon--right': this.right,
-            } }, h("slot", { key: '735c1364fabfb25f66c930771294b88588bb3dde' })));
+            } }, h("slot", { key: 'cd11e4ae80df1279bb2ba2ea033177e2853e9f78' })));
     }
     static get is() { return "bal-list-item-icon"; }
     static get properties() {

package/dist/collection/components/bal-list/bal-list-item-subtitle/bal-list-item-subtitle.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ListItemSubtitle {
     render() {
-        return (h(Host, { key: 'effd50d57869e56472d4f02227aa8d0f694fe2b2', class: "bal-list__item__subtitle" }, h("slot", { key: '78c5597788016f37e1c7f96b2bc3b8eba14a16aa' })));
+        return (h(Host, { key: '9d30c4730ecaf4111353cba87adaa659eb859623', class: "bal-list__item__subtitle" }, h("slot", { key: 'e76c009d723f41b9197c4d08dfb113221f83ff04' })));
     }
     static get is() { return "bal-list-item-subtitle"; }
 }

package/dist/collection/components/bal-list/bal-list-item-title/bal-list-item-title.js

@@ -5,7 +5,7 @@ export class ListItemTitle {
         this.visualLevel = undefined;
     }
     render() {
-        return (h(Host, { key: '4825c89e7378cd84b26a1ec9188063a2023d0df6', class: "bal-list__item__title" }, h("bal-heading", { key: 'b49ed81022742cb5ababb5acb3b4f62eb9fa00f9', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: 'c79cd06a74853e184c07a751947a974a7a2eca5d' }))));
+        return (h(Host, { key: '01c84fe56b2b55a7697123f6fe756faf6356715d', class: "bal-list__item__title" }, h("bal-heading", { key: '72c506243539016f8ea69d0c41617cf3d78db736', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: '3e92f25b24180c39db9cbe8967baac16e41e0f03' }))));
     }
     static get is() { return "bal-list-item-title"; }
     static get properties() {

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

@@ -21,7 +21,7 @@ export class List {
         const block = BEM.block('list');
         const closestListEl = this.el.closest('.bal-list');
         const nested = closestListEl !== null && closestListEl !== this.el;
-        return (h(Host, { key: '4a0b8f7cfd42f45643109f98a60f801b8c61f832', role: "list", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('nested').class(nested)), block.modifier('disabled').class(this.disabled)), block.modifier('border').class(this.border)), block.modifier(`size-${this.size || 'normal'}`).class()), block.modifier(`background-${this.background}`).class()) }, h("slot", { key: 'df4df7cfbc9c054ddb565c6712f25cd0b5970df4' })));
+        return (h(Host, { key: '54c4f5cd0a4e332a485913320b9ab8e8adcb7d23', role: "list", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('nested').class(nested)), block.modifier('disabled').class(this.disabled)), block.modifier('border').class(this.border)), block.modifier(`size-${this.size || 'normal'}`).class()), block.modifier(`background-${this.background}`).class()) }, h("slot", { key: 'a2271ad692d82f22333445639525f92b8e86a35b' })));
     }
     static get is() { return "bal-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-modal/bal-modal-body/bal-modal-body.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ModalBody {
     render() {
-        return (h(Host, { key: '4f377434dbfa5bcaf78de5bbd9c2ce0b3ef29b07', class: "bal-modal__body" }, h("slot", { key: 'cc2a53e19dd0ec2c2bccbabe0ee7f3b1d1bc1cfe' })));
+        return (h(Host, { key: '832389ef4fb2876265130421194e971d14c1d664', class: "bal-modal__body" }, h("slot", { key: '8a0e7b7bc0f015b9d1a208767214964e1a6a083d' })));
     }
     static get is() { return "bal-modal-body"; }
 }

package/dist/collection/components/bal-modal/bal-modal-header/bal-modal-header.js

@@ -12,7 +12,7 @@ export class ModalHeader {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5e6e9e2ca7d60ad7db0afe67c415879497f0a8d2', class: "bal-modal__header" }, h("div", { key: '8f9fde0e3f58ecdffdca48e9b86cfdd631fed2f1', class: "bal-modal__header__title" }, h("bal-heading", { key: '855241bb7a83ff949c38e3f7ace530791e7d06ee', level: "h2", space: "none" }, h("slot", { key: '526ce820a6160cdc093d994a00328b9297924046' }))), ((_a = this.parentModal) === null || _a === void 0 ? void 0 : _a.isClosable) ? (h("bal-close", { class: "bal-modal__header__close data-test-modal-close", onClick: this.closeHandler })) : ('')));
+        return (h(Host, { key: 'a168b477c3b25d6b634cae28dfdfe80662835c28', class: "bal-modal__header" }, h("div", { key: 'ede951e810c8dd9ee74f18bd2aaeb9938256eaa0', class: "bal-modal__header__title" }, h("bal-heading", { key: '58aa9747176c2fb610b3d5e269b5e5318e6f1545', level: "h2", space: "none" }, h("slot", { key: '35b58496692d5fafadba77727cd60a70f507b327' }))), ((_a = this.parentModal) === null || _a === void 0 ? void 0 : _a.isClosable) ? (h("bal-close", { class: "bal-modal__header__close data-test-modal-close", onClick: this.closeHandler })) : ('')));
     }
     static get is() { return "bal-modal-header"; }
     static get elementRef() { return "el"; }

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

@@ -1 +1 @@
-.bal-modal__background,.bal-modal{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{align-items:center;display:none;flex-direction:column;justify-content:flex-start;overflow:hidden;position:fixed;z-index:var(--bal-z-index-modal)}.bal-modal--is-active{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:flex !important;right:1.25rem !important;top:1.5rem !important;align-items: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:flex;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}
+.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{align-items:center;display:none;flex-direction:column;justify-content:flex-start;overflow:hidden;position:fixed;z-index:var(--bal-z-index-modal)}.bal-modal--is-active{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:flex !important;right:1.25rem !important;top:1.5rem !important;align-items: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:flex;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}

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

@@ -1,5 +1,5 @@
 import { Host, h, writeTask } from "@stencil/core";
-import { dismiss, eventMethod, prepareOverlay } from "../../utils/overlays/overlays";
+import { dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay } from "../../utils/overlays/overlays";
 import { attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { deepReady, wait } from "../../utils/helpers";
 import { getClassMap } from "../../utils/css-classes";
@@ -22,6 +22,7 @@ export class Modal {
         this.componentProps = undefined;
         this.cssClass = undefined;
         this.backdropDismiss = true;
+        this.focusTrap = true;
         this.demo = false;
     }
     connectedCallback() {
@@ -182,17 +183,17 @@ export class Modal {
         return false;
     }
     render() {
-        return (h(Host, { key: '6fb09ad213fb5ee3a62e3e166f7381000ef02380', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
+        return (h(Host, { key: '0117e63bcdf529eee9b754275b3f82335a7274b5', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented, [FOCUS_TRAP_DISABLE_CLASS]: this.focusTrap === false }, getClassMap(this.cssClass)), style: {
                 '--bal-width': `${this.modalWidth}px`,
-            } }, h("div", { key: 'cad948856ebda541aedd8f15dee694ebaad37c48', class: {
+            } }, h("div", { key: 'd566874640e88e886438f0ada7c6073c99539d8c', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '898638dcd4c7d67a988f4b145cd14a8377744829', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '654dda321cef68bb052b042f2cae54a2882e7483', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '0472b9eca55a86bac5587dd84b7b73391fe8c81b', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '9778735ba48d6db90aeb9098d3885a3813fc4c3c', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '3c0ab93e9049d0fb93fac5d2e0affe06eaae0ff5' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: 'c797ba16081d241799e8ea0d36793cd1deff1e9b' })))));
     }
     static get is() { return "bal-modal"; }
     static get originalStyleUrls() {
@@ -446,6 +447,26 @@ export class Modal {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "focusTrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "focus-trap",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "demo": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -27,10 +27,10 @@ export class NavLink {
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (h(Host, { key: '94718986eda442992d83a9b40e26bf595d523dce', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: 'cf8106036e3366712fff52d08e8c1567873014be', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
+        return (h(Host, { key: '538d4bc561eec9c4c4d88a16efbd22ccc61517ec', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: '68ac516eb7190bbc532cfd108854cf1329110984', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
                 .element('native')
                 .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: 'f9ab826645c95e02cf1b1ccfa2df34b637a67d13' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '8b705b4c113a3272dcc68d798dce816f13343363' }))));
     }
     static get is() { return "bal-nav-link"; }
     static get originalStyleUrls() {

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

@@ -12,7 +12,7 @@ export class NavLinkGrid {
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { key: '03e4b64a2041c0fb36d94fd061eb9352a38446ed', class: Object.assign({}, block.class()) }, h("slot", { key: '7f7eb07e433531b6d0dab67b4a89e7faab742b51' })));
+        return (h(Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
     }
     static get is() { return "bal-nav-link-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.js

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

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

@@ -16,7 +16,7 @@ export class NavLinkGroup {
     render() {
         const block = BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (h(Host, { key: '83e07dc3e48315f8c8196f54cda2e371eeb9d297', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: 'e54ab919fba4f5a400b753d05c9545d8368e7e9c' })));
+        return (h(Host, { key: '7594abd236200ade0063149fcbe2985e37c0ec9f', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '42ceaea3299c69ddaa535b4fb47438816e11323b' })));
     }
     static get is() { return "bal-nav-link-group"; }
     static get originalStyleUrls() {

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

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

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

@@ -50,7 +50,7 @@ export class NavMenuFlyout {
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: '60bf384edb49a6686374e4f473758745e2771945', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'a234f10624799caf4c183c608fda3ccdb3e39446', class: Object.assign({}, line.class()) }), h("div", { key: 'b96460b50a8ea76acdcbb4c464e90f4416009b2d', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '0d02f07430f4d05c58627866a131e5bee32b3e51' }))));
+        return (h(Host, { key: 'd2de6257fc31499b2d26204ee0db07a4e079144b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '6392e2be737b3f5c11dd83602f210d1a263c7a5f', class: Object.assign({}, line.class()) }), h("div", { key: 'b6d06ea36310b6ed5975f2bae2f57e65d1e29f82', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '38566fffa659f0661e3cb7ca7535c6a7f244b696' }))));
     }
     static get is() { return "bal-nav-menu-flyout"; }
     static get originalStyleUrls() {

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

@@ -57,7 +57,7 @@ export class NavMetaBar {
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: '5436cb6898cdaecac4f0304b8dd62484b5a8a231', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'f7ed5d2c6a334ad586baf75a5b87132a4460f065', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'c60750b340d6f1276d45efa7a786b142938d73a4' }))));
+        return (h(Host, { key: 'a3c7f085f3811353baca0bd93604167c3ad527d2', 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: 'c88186ebabcaa43c0493c7c5c295c5450c2a2c74', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'f1fcc2b1967db28ea405d9a5499ca47d8bc6cecd' }))));
     }
     static get is() { return "bal-nav-meta-bar"; }
     static get originalStyleUrls() {

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

@@ -277,7 +277,7 @@ export class Nav {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: 'dcde56b80395603196d61c50e390c7c3df510680', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'b986a4c340c59fd9377da61b41882bdc66a1380c', class: {
+        return (h(Host, { key: 'f4468c4973667b52c77b05cee9b3ef521c9b3a58', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '4b66d4ea07b31adb49738316ced208b1bb02c1be', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -287,7 +287,7 @@ export class Nav {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '60b9a9262fed2743ecbb0db2bc3b0d41de33c3b5' }, h("slot", { key: 'b055497b867fd6db856295fa516cc5b36a3f45fe' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
+            _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: '13c3f4f937d282ecff01ec40e10102fed0c3ab62' }, h("slot", { key: 'cad51666687cd1c41734c136f5db77bf1308d1a3' }))), 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())))) : ('')));

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

@@ -25,12 +25,12 @@ export class NavMetaButton extends NavLinkItem {
         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, href: this.href, target: this.target, aria: {
                     title: this.htmlTitle,
-                    label: this.label,
+                    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, aria: {
                 title: this.htmlTitle,
-                label: this.label,
+                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() {
@@ -38,12 +38,12 @@ export class NavMetaButton extends NavLinkItem {
             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, target: this.target, aria: {
                         title: this.htmlTitle,
-                        label: this.label,
+                        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, aria: {
                     title: this.htmlTitle,
-                    label: this.label,
+                    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));
         }
     }
@@ -52,12 +52,12 @@ export class NavMetaButton extends NavLinkItem {
             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.label,
+                        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, aria: {
                     title: this.htmlTitle,
-                    label: this.label,
+                    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));
         }
     }

package/dist/collection/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.i18n.js

@@ -0,0 +1,32 @@
+export const i18nBalNavbarBrand = {
+    en: {
+        logoButtonLabel: 'To Homepage',
+    },
+    fr: {
+        logoButtonLabel: 'Vers la page d’accueil',
+    },
+    it: {
+        logoButtonLabel: 'Alla pagina principale',
+    },
+    nl: {
+        logoButtonLabel: 'Naar de startpagina',
+    },
+    es: {
+        logoButtonLabel: 'A la página principal',
+    },
+    pt: {
+        logoButtonLabel: 'Para a página inicial',
+    },
+    sv: {
+        logoButtonLabel: 'Till startsidan',
+    },
+    fi: {
+        logoButtonLabel: 'Etusivulle',
+    },
+    de: {
+        logoButtonLabel: 'Zur Startseite',
+    },
+    pl: {
+        logoButtonLabel: 'Na stronę główną',
+    },
+};