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

package/components/bal-list-item-accordion-body2.js

@@ -11,10 +11,7 @@ const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
         super();
         this.__registerHost();
         this.isMobile = balBreakpoints.isMobile;
-        /**
-         * PRIVATE METHODS
-         * ------------------------------------------------------
-         */
+        this.internalId = `bal-list-item-accordion-body-${ListItemAccordionBodyIds++}`;
         this.setMinHeightForAnimation = () => {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
@@ -38,6 +35,7 @@ const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
             });
         };
         this.debounceSetMinHeightForAnimation = debounce(this.setMinHeightForAnimation.bind(this), 100);
+        this.ariaState = {};
         this.accordionGroup = undefined;
         this.contentSpace = 'none';
         this.contentAlignment = 'start';
@@ -54,6 +52,7 @@ const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
     }
     componentDidRender() {
         this.setMinHeightForAnimation();
+        this.setControlIdToHead();
     }
     /**
      * LISTENERS
@@ -65,26 +64,48 @@ const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
         this.isMobile = breakpoints.mobile;
         this.debounceSetMinHeightForAnimation();
     }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async setAria(aria) {
+        this.ariaState = Object.assign({}, aria);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    setControlIdToHead() {
+        const headEl = this.el.parentElement.querySelector('bal-list-item-accordion-head');
+        if (headEl) {
+            headEl.setAria({ controlId: this.internalId });
+        }
+    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '06ee66f63c656b78ad4810d1c100537705920540', class: {
+        return (h(Host, { key: '9f844655eaa797b1df2a9c1a51aa5959c1e1f82e', id: this.internalId, role: 'region', "aria-labelledby": this.ariaState.labelledby, class: {
                 'bal-list__item': true,
                 'bal-list__item__accordion-body': true,
                 'bal-list__item__accordion-body--grouped': this.accordionGroup !== undefined && this.accordionGroup !== '',
-            } }, h("div", { key: 'dc9e35c46f9ced8cb40e6e89785c63fb791dd42f', class: {
+            } }, h("div", { key: 'c174c610fe9832eb84d32b31a97327da9ac393e3', class: {
                 'bal-list__item__accordion-body__content': true,
                 [`bal-list__item__accordion-body__content--${this.contentAlignment}`]: this.contentAlignment !== undefined,
                 [`bal-list__item__accordion-body__content--space-${this.contentSpace}`]: this.contentSpace !== undefined,
-            }, ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '8b4d53344c8d23dacb1e7fc274837adcdc143529' }))));
+            }, ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '1c6cb9f879550e70ada7563d7d1758bdfd485e04' }))));
     }
     get el() { return this; }
 }, [4, "bal-list-item-accordion-body", {
         "accordionGroup": [1, "accordion-group"],
         "contentSpace": [1, "content-space"],
-        "contentAlignment": [1, "content-alignment"]
+        "contentAlignment": [1, "content-alignment"],
+        "ariaState": [32],
+        "setAria": [64]
     }]);
 __decorate([
     Logger('bal-list-item-accordion-body'),
@@ -104,6 +125,7 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], ListItemAccordionBody.prototype, "breakpointListener", null);
+let ListItemAccordionBodyIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-list-item-accordion-head2.js

@@ -1,15 +1,63 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { L as Logger } from './log.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-list-item-icon2.js';
 import { a as isSpaceKey, i as isEnterKey } from './keyboard.helpers.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+
+const i18nBalListItemAccordionHead = {
+    de: {
+        open: 'Öffnen',
+        close: 'Schließen',
+    },
+    en: {
+        open: 'Open',
+        close: 'Close',
+    },
+    fr: {
+        open: 'Ouvrir',
+        close: 'Fermer',
+    },
+    it: {
+        open: 'Apri',
+        close: 'Chiudi',
+    },
+    nl: {
+        open: 'Open',
+        close: 'Sluiten',
+    },
+    es: {
+        open: 'Abrir',
+        close: 'Cerrar',
+    },
+    pl: {
+        open: 'Otwórz',
+        close: 'Zamknij',
+    },
+    pt: {
+        open: 'Abrir',
+        close: 'Fechar',
+    },
+    sv: {
+        open: 'Öppna',
+        close: 'Stäng',
+    },
+    fi: {
+        open: 'Avaa',
+        close: 'Sulje',
+    },
+};
 
 const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAccordionHead extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.balAccordionChange = createEvent(this, "balAccordionChange", 7);
+        this.internalId = `bal-list-item-accordion-head-${ListItemAccordionHeadIds++}`;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -21,9 +69,12 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
         };
         this.onKeyDown = (ev) => {
             if (isSpaceKey(ev) || isEnterKey(ev)) {
+                stopEventBubbling(ev);
                 this.onClick();
             }
         };
+        this.ariaState = {};
+        this.language = defaultConfig.language;
         this.accordionOpen = false;
         this.icon = 'plus';
     }
@@ -35,16 +86,57 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
             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 }))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -52,7 +144,11 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
     }; }
 }, [4, "bal-list-item-accordion-head", {
         "accordionOpen": [1028, "accordion-open"],
-        "icon": [1]
+        "icon": [1],
+        "ariaState": [32],
+        "language": [32],
+        "configChanged": [64],
+        "setAria": [64]
     }, undefined, {
         "accordionOpen": ["accordionOpenHandler"]
     }]);
@@ -62,6 +158,13 @@ __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;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-list-item-content2.js

@@ -7,10 +7,10 @@ const ListItemContent = /*@__PURE__*/ proxyCustomElement(class ListItemContent e
         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' })));
     }
 }, [4, "bal-list-item-content", {
         "contentAlignment": [1, "content-alignment"]

package/components/bal-list-item-icon2.js

@@ -7,10 +7,10 @@ const ListItemIcon = /*@__PURE__*/ proxyCustomElement(class ListItemIcon extends
         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' })));
     }
 }, [4, "bal-list-item-icon", {
         "right": [4]

package/components/bal-list-item-subtitle2.js

@@ -6,7 +6,7 @@ const ListItemSubtitle = /*@__PURE__*/ proxyCustomElement(class ListItemSubtitle
         this.__registerHost();
     }
     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' })));
     }
 }, [4, "bal-list-item-subtitle"]);
 function defineCustomElement() {

package/components/bal-list-item-title2.js

@@ -9,7 +9,7 @@ const ListItemTitle = /*@__PURE__*/ proxyCustomElement(class ListItemTitle exten
         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' }))));
     }
 }, [4, "bal-list-item-title", {
         "level": [1],

package/components/bal-list2.js

@@ -27,7 +27,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         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' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-modal-body.js

@@ -6,7 +6,7 @@ const ModalBody = /*@__PURE__*/ proxyCustomElement(class ModalBody extends HTMLE
         this.__registerHost();
     }
     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' })));
     }
 }, [4, "bal-modal-body"]);
 function defineCustomElement$1() {

package/components/bal-modal-header.js

@@ -18,7 +18,7 @@ const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends H
     }
     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 })) : ('')));
     }
     get el() { return this; }
 }, [4, "bal-modal-header"]);

package/components/bal-modal.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
-import { p as prepareOverlay, d as dismiss, e as eventMethod } from './overlays.js';
+import { p as prepareOverlay, d as dismiss, e as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
 import { c as componentOnReady, h as deepReady, i as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
@@ -51,7 +51,7 @@ const getClassList = (classes) => {
     return [];
 };
 
-const balModalCss = ".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{-ms-flex-align:center;align-items:center;display:none;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:fixed;z-index:var(--bal-z-index-modal)}.bal-modal--is-active{display:-ms-flexbox;display:flex}.bal-modal__background{background:var(--bal-modal-backdrop-background);opacity:var(--bal-modal-backdrop-opacity)}.bal-modal__header__title{padding-right:2.5rem;line-height:2rem}.bal-modal__header__close{position:absolute !important;display:-ms-flexbox !important;display:flex !important;right:1.25rem !important;top:1.5rem !important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:2rem;max-width:2rem;min-height:2rem;max-height:2rem}.bal-modal__container{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:none;overflow-y:auto;-ms-overflow-y:visible;padding:.5rem}@media screen and (min-width: 769px),print{.bal-modal__container{padding:0}}.bal-modal__content{overflow:none;position:relative;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background:var(--bal-modal-background);border-radius:var(--bal-modal-radius);padding:1rem}@media screen and (min-width: 769px),print{.bal-modal__content{margin:3rem auto;width:var(--bal-modal-width, var(--bal-width, 40rem))}}.bal-modal__content .bal-modal__header{padding-bottom:1rem}.bal-modal__content .bal-modal__header__close{right:1.2rem !important;top:.7rem !important}@media screen and (min-width: 769px),print{.bal-modal__content{padding:1.5rem}.bal-modal__content .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content{padding:2.5rem}.bal-modal__content .bal-modal__header{padding-bottom:2.5rem}.bal-modal__content .bal-modal__header__close{right:2.7rem !important;top:2.2rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}.bal-modal__body>bal-button-group{padding-top:1rem}";
+const balModalCss = ".bal-modal,.bal-modal__background{bottom:0;left:0;position:absolute;right:0;top:0}:root{--bal-modal-background:var(--bal-color-white);--bal-modal-backdrop-background:var(--bal-color-primary-6);--bal-modal-backdrop-opacity:.6;--bal-modal-radius:var(--bal-radius-large)}.bal-modal{-ms-flex-align:center;align-items:center;display:none;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start;overflow:hidden;position:fixed;z-index:var(--bal-z-index-modal)}.bal-modal--is-active{display:-ms-flexbox;display:flex}.bal-modal__background{background:var(--bal-modal-backdrop-background);opacity:var(--bal-modal-backdrop-opacity)}.bal-modal__header__title{padding-right:2.5rem;line-height:2rem}.bal-modal__header__close{position:absolute !important;display:-ms-flexbox !important;display:flex !important;right:1.25rem !important;top:1.5rem !important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:2rem;max-width:2rem;min-height:2rem;max-height:2rem}.bal-modal__container{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:none;overflow-y:auto;-ms-overflow-y:visible;padding:.5rem}@media screen and (min-width: 769px),print{.bal-modal__container{padding:0}}.bal-modal__content{overflow:none;position:relative;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background:var(--bal-modal-background);border-radius:var(--bal-modal-radius);padding:1rem}@media screen and (min-width: 769px),print{.bal-modal__content{margin:3rem auto;width:var(--bal-modal-width, var(--bal-width, 40rem))}}.bal-modal__content .bal-modal__header{padding-bottom:1rem}.bal-modal__content .bal-modal__header__close{right:1.2rem !important;top:.7rem !important}@media screen and (min-width: 769px),print{.bal-modal__content{padding:1.5rem}.bal-modal__content .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content{padding:2.5rem}.bal-modal__content .bal-modal__header{padding-bottom:2.5rem}.bal-modal__content .bal-modal__header__close{right:2.7rem !important;top:2.2rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-small{padding:1rem}.bal-modal__content--has-spacing-small .bal-modal__header{padding-bottom:1rem}.bal-modal__content--has-spacing-small .bal-modal__header__close{right:1.1rem !important;top:.7rem !important}}@media screen and (min-width: 769px),print{.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}@media screen and (min-width: 1024px){.bal-modal__content--has-spacing-medium{padding:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header{padding-bottom:1.5rem}.bal-modal__content--has-spacing-medium .bal-modal__header__close{right:1.6rem !important;top:1.2rem !important}}.bal-modal__body>bal-button-group{padding-top:1rem}";
 const BalModalStyle0 = balModalCss;
 
 const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1 {
@@ -77,6 +77,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         this.componentProps = undefined;
         this.cssClass = undefined;
         this.backdropDismiss = true;
+        this.focusTrap = true;
         this.demo = false;
     }
     connectedCallback() {
@@ -237,17 +238,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         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' })))));
     }
     get el() { return this; }
     static get style() { return BalModalStyle0; }
@@ -263,6 +264,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         "componentProps": [16],
         "cssClass": [1, "css-class"],
         "backdropDismiss": [4, "backdrop-dismiss"],
+        "focusTrap": [4, "focus-trap"],
         "demo": [4],
         "presented": [32],
         "open": [64],

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

@@ -22,7 +22,7 @@ const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol ext
     render() {
         const block = BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (h(Host, { key: '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 style() { return BalNavLinkGridColStyle0; }
 }, [4, "bal-nav-link-grid-col", {

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

@@ -20,7 +20,7 @@ const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends H
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { key: '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 style() { return BalNavLinkGridStyle0; }
 }, [4, "bal-nav-link-grid"]);

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

@@ -22,7 +22,7 @@ const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends
     render() {
         const block = BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (h(Host, { key: '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 style() { return BalNavLinkGroupStyle0; }
 }, [4, "bal-nav-link-group", {

package/components/bal-nav-link2.js

@@ -33,10 +33,10 @@ const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLEleme
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (h(Host, { key: '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 style() { return BalNavLinkStyle0; }
 }, [4, "bal-nav-link", {

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

@@ -32,7 +32,7 @@ const NavMenuBar = /*@__PURE__*/ proxyCustomElement(class NavMenuBar extends HTM
     render() {
         const block = BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (h(Host, { key: '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' })))));
     }
     get el() { return this; }
     static get style() { return BalNavMenuBarStyle0; }

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

@@ -56,7 +56,7 @@ const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout exten
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: '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' }))));
     }
     get el() { return this; }
     static get style() { return BalNavMenuFlyoutStyle0; }

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

@@ -63,7 +63,7 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
      */
     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' }))));
     }
     get el() { return this; }
     static get style() { return BalNavMetaBarStyle0; }

package/components/bal-nav.js

@@ -280,12 +280,12 @@ 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() {
@@ -293,12 +293,12 @@ 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));
         }
     }
@@ -307,12 +307,12 @@ 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));
         }
     }
@@ -650,7 +650,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: '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({
@@ -660,7 +660,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '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())))) : ('')));