@baloise/ds-core 19.1.0 → 19.2.0-nightly.20250623

package/dist/cjs/{tokens.esm-263be70d.js → tokens.esm-c3cc508d.js}

@@ -2,7 +2,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 04 Jun 2025 08:46:09 GMT
+ * Generated on Mon, 23 Jun 2025 06:17:57 GMT
  */
 const balColorGreen3 = "#94e3d4";
 const balColorGreen6 = "#1b5951";

package/dist/cjs/{window-resize.decorator-9a06680f.js → window-resize.decorator-9494cf0b.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const breakpoints_subject = require('./breakpoints.subject-a1180187.js');
+const breakpoints_subject = require('./breakpoints.subject-03f75770.js');
 const listener = require('./listener-52d2e5fd.js');
 const browser = require('./browser-1d542d0f.js');
 

package/dist/collection/collection-manifest.json

@@ -116,7 +116,8 @@
     "components/bal-textarea/bal-textarea.js",
     "components/bal-time-input/bal-time-input.js",
     "components/bal-toast/bal-toast.js",
-    "components/bal-tooltip/bal-tooltip.js"
+    "components/bal-tooltip/bal-tooltip.js",
+    "components/docs/bal-doc-app/bal-doc-app.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/components/bal-carousel/bal-carousel-item/bal-carousel-item.js

@@ -1,11 +1,17 @@
 import { h, Host, } from "@stencil/core";
+import DOMPurify from "dompurify";
+import { inheritAttributes } from "../../../utils/attributes";
 import { BEM } from "../../../utils/bem";
 import { rOnLoad, waitAfterFramePaint } from "../../../utils/helpers";
-import { inheritAttributes } from "../../../utils/attributes";
 import { toKebabCase } from "../../../utils/string";
 export class CarouselItem {
     constructor() {
         this.imageInheritAttributes = {};
+        this.generateSvgContent = () => {
+            if (this.svg !== undefined && this.svg.length > 0) {
+                this.svgContent = DOMPurify.sanitize(this.svg) || '';
+            }
+        };
         this.onClick = (ev) => {
             if (this.href !== undefined) {
                 this.balNavigate.emit(ev);
@@ -19,8 +25,10 @@ export class CarouselItem {
         };
         this.isOnLoadEventDone = false;
         this.containerId = '';
+        this.svgContent = '';
         this.src = undefined;
         this.label = '';
+        this.svg = '';
         this.htmlRole = 'listitem';
         this.elementType = 'button';
         this.name = undefined;
@@ -31,10 +39,16 @@ export class CarouselItem {
         this.download = undefined;
         this.color = undefined;
     }
+    svgChanged() {
+        this.generateSvgContent();
+    }
     /**
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    connectedCallback() {
+        this.generateSvgContent();
+    }
     componentDidLoad() {
         rOnLoad(() => {
             this.isOnLoadEventDone = true;
@@ -77,7 +91,7 @@ export class CarouselItem {
                 rel,
                 target,
             };
-        return (h(Host, { id: id, role: role, "aria-label": this.label, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isOnLoadEventDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
+        return (h(Host, { id: id, role: role, "aria-label": this.label, class: Object.assign({}, itemEl.class()) }, h(TagType, Object.assign({}, attrs, { class: Object.assign(Object.assign({}, button.class()), button.modifier(`color-${this.color}`).class()), part: "native", onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, ref: el => (this.buttonEl = el) }), this.isOnLoadEventDone && this.src !== undefined ? (h("img", Object.assign({ class: Object.assign({}, image.class()), draggable: false, onDragStart: () => false, "aria-hidden": "true", src: this.src }, this.imageInheritAttributes))) : this.isOnLoadEventDone && this.svgContent !== undefined ? (h("div", { class: Object.assign({}, image.class()), innerHTML: this.svgContent })) : (''), this.label !== undefined ? h("span", { class: Object.assign({}, label.class()) }, this.label) : '', h("slot", null))));
     }
     static get is() { return "bal-carousel-item"; }
     static get properties() {
@@ -121,6 +135,26 @@ export class CarouselItem {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "svg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Svg content."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "svg",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "htmlRole": {
                 "type": "string",
                 "mutable": false,
@@ -320,7 +354,8 @@ export class CarouselItem {
     static get states() {
         return {
             "isOnLoadEventDone": {},
-            "containerId": {}
+            "containerId": {},
+            "svgContent": {}
         };
     }
     static get events() {
@@ -408,4 +443,10 @@ export class CarouselItem {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "svg",
+                "methodName": "svgChanged"
+            }];
+    }
 }

package/dist/collection/components/bal-input/bal-input-util.js

@@ -119,6 +119,7 @@ export function formatBeIBAN(value) {
     }
 }
 export const MAX_LENGTH_CONTRACT_NUMBER = 10;
+export const MAX_LENGTH_BASIC_CONTRACT_NUMBER = 9;
 export const MAX_LENGTH_OFFER_NUMBER = 9;
 export const MAX_LENGTH_CLAIM_NUMBER = 11;
 export const MAX_LENGTH_BE_ENTERPRISE_NUMBER = 10;

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

@@ -3,7 +3,7 @@ import { h, Host, } from "@stencil/core";
 import { debounceEvent } from "../../utils/helpers";
 import { inheritAttributes } from "../../utils/attributes";
 import { getInputTarget, inputHandleBlur, inputHandleChange, inputHandleClick, inputHandleFocus, inputHandleHostClick, inputHandleReset, inputListenOnClick, inputSetBlur, inputSetFocus, stopEventBubbling, } from "../../utils/form-input";
-import { formatBeEnterpriseNumber, formatBeIBAN, formatClaim, formatOffer, formatPolicy, MAX_LENGTH_BE_ENTERPRISE_NUMBER, MAX_LENGTH_BE_IBAN, MAX_LENGTH_CLAIM_NUMBER, MAX_LENGTH_CONTRACT_NUMBER, MAX_LENGTH_OFFER_NUMBER, } from "./bal-input-util";
+import { formatBeEnterpriseNumber, formatBeIBAN, formatClaim, formatOffer, formatPolicy, MAX_LENGTH_BE_ENTERPRISE_NUMBER, MAX_LENGTH_BE_IBAN, MAX_LENGTH_CLAIM_NUMBER, MAX_LENGTH_CONTRACT_NUMBER, MAX_LENGTH_OFFER_NUMBER, MAX_LENGTH_BASIC_CONTRACT_NUMBER, } from "./bal-input-util";
 import isNil from "lodash.isnil";
 import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from "../../utils/constants/keys.constant";
 import { BEM } from "../../utils/bem";
@@ -35,11 +35,26 @@ export class Input {
                         switch (this.mask) {
                             case 'contract-number': {
                                 inputValue = input.value.replace(/\D/g, '');
+                                // Removing the leading zero if presented
+                                if (inputValue.charAt(0) === '0') {
+                                    inputValue = inputValue.substring(1);
+                                }
                                 if (inputValue.length > MAX_LENGTH_CONTRACT_NUMBER) {
                                     inputValue = inputValue.substring(0, MAX_LENGTH_CONTRACT_NUMBER);
                                 }
                                 return inputValue;
                             }
+                            case 'basic-contract-number': {
+                                inputValue = input.value.replace(/\D/g, '');
+                                // Removing the leading zero if presented
+                                if (inputValue.charAt(0) === '0') {
+                                    inputValue = inputValue.substring(1);
+                                }
+                                if (inputValue.length > MAX_LENGTH_BASIC_CONTRACT_NUMBER) {
+                                    inputValue = inputValue.substring(0, MAX_LENGTH_BASIC_CONTRACT_NUMBER);
+                                }
+                                return inputValue;
+                            }
                             case 'offer-number': {
                                 inputValue = input.value.replace(/\D/g, '');
                                 if (inputValue.length > MAX_LENGTH_OFFER_NUMBER) {
@@ -103,7 +118,8 @@ export class Input {
             if (input) {
                 if (input.value) {
                     switch (this.mask) {
-                        case 'contract-number': {
+                        case 'contract-number':
+                        case 'basic-contract-number': {
                             input.value = formatPolicy(this.inputValue);
                             if (cursorPositionStart < this.inputValue.length) {
                                 input.setSelectionRange(cursorPositionStart, cursorPositionEnd);
@@ -283,6 +299,7 @@ export class Input {
         if (this.mask !== undefined) {
             switch (this.mask) {
                 case 'contract-number':
+                case 'basic-contract-number':
                     value = formatPolicy(value);
                     break;
                 case 'claim-number':
@@ -305,7 +322,7 @@ export class Input {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (h(Host, { key: '448720fe0adbd7130be3148121f04bf456fe755b', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'e3b94bfae57e7aaf10f04ebf7f316a6309e306b6', class: {
+        return (h(Host, { key: 'c247683cd5ac331743d71c8872a59ccfacbcae83', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '992f567fd137664f50f73443fdc283ed7622297d', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -886,7 +903,7 @@ export class Input {
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalInputMask",
-                    "resolved": "\"be-enterprise-number\" | \"be-iban\" | \"claim-number\" | \"contract-number\" | \"offer-number\"",
+                    "resolved": "\"basic-contract-number\" | \"be-enterprise-number\" | \"be-iban\" | \"claim-number\" | \"contract-number\" | \"offer-number\"",
                     "references": {
                         "BalProps": {
                             "location": "global",
@@ -898,7 +915,7 @@ export class Input {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted with addition of Belgian enterprisenumber and IBAN.\nFormatting for 'contract-number': '99/1.234.567-1'\nFormatting for 'claim-number': ('73/001217/16.9')\nFormatting for 'offer-number': ('98/7.654.321')\nFormatting for 'be-enterprise-number': ('1234.567.890')\nFormatting for 'be-iban': ('BE68 5390 0754 7034')"
+                    "text": "Mask of the input field. It defines what the user can enter and how the format looks like. Currently, only for Switzerland formatted with addition of Belgian enterprisenumber and IBAN.\nFormatting for 'contract-number': '99/1.234.567-1'\nFormatting for 'basic-contract-number': '99/1.234.567'\nFormatting for 'claim-number': ('73/001217/16.9')\nFormatting for 'offer-number': ('98/7.654.321')\nFormatting for 'be-enterprise-number': ('1234.567.890')\nFormatting for 'be-iban': ('BE68 5390 0754 7034')"
                 },
                 "getter": false,
                 "setter": false,

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

@@ -2,7 +2,7 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { ListenToConfig } from "../../../utils/config";
-import { raf, transitionEndAsync } from "../../../utils/helpers";
+import { raf, rIC, transitionEndAsync } from "../../../utils/helpers";
 import { Logger } from "../../../utils/log";
 export class ListItem {
     constructor() {
@@ -176,7 +176,9 @@ export class ListItem {
     }
     componentDidLoad() {
         if (this.accordion) {
-            this.addEventListenerAccordionChange();
+            rIC(() => {
+                this.addEventListenerAccordionChange();
+            });
         }
     }
     disconnectedCallback() {

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

@@ -1,8 +1,8 @@
 import { __decorate, __metadata } from "tslib";
 import { Host, h } from "@stencil/core";
+import { ListenToBreakpoints, balBreakpoints } from "../../../utils/breakpoints";
 import { debounce, raf } from "../../../utils/helpers";
 import { Logger } from "../../../utils/log";
-import { ListenToBreakpoints, balBreakpoints } from "../../../utils/breakpoints";
 import { ListenToResize } from "../../../utils/resize";
 export class ListItemAccordionBody {
     constructor() {
@@ -69,7 +69,9 @@ export class ListItemAccordionBody {
      * @internal
      */
     async setAria(aria) {
-        this.ariaState = Object.assign({}, aria);
+        if (aria.labelledby && aria.labelledby !== this.ariaState.labelledby) {
+            this.ariaState.labelledby = aria.labelledby;
+        }
     }
     /**
      * PRIVATE METHODS
@@ -86,15 +88,15 @@ export class ListItemAccordionBody {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '9f844655eaa797b1df2a9c1a51aa5959c1e1f82e', id: this.internalId, role: 'region', "aria-labelledby": this.ariaState.labelledby, class: {
+        return (h(Host, { key: 'c09f940346dd1c179888f6e521febf25872e94cb', 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: 'c174c610fe9832eb84d32b31a97327da9ac393e3', class: {
+            } }, h("div", { key: '07253229c2cec50a110f5ae37d526122928a7d48', 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: '1c6cb9f879550e70ada7563d7d1758bdfd485e04' }))));
+            }, ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'ff5f45b667f6e0448ee3b4b0d3306f1d4ab25b65' }))));
     }
     static get is() { return "bal-list-item-accordion-body"; }
     static get properties() {

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

@@ -1,11 +1,11 @@
 import { __decorate, __metadata } from "tslib";
-import { Host, h, } from "@stencil/core";
-import { Logger } from "../../../utils/log";
-import { isEnterKey, isSpaceKey } from "../../../utils/keyboard";
-import { stopEventBubbling } from "../../../utils/form-input";
+import { h, Host, } from "@stencil/core";
 import { ariaBooleanToString } from "../../../utils/aria";
-import { i18nBalListItemAccordionHead } from "./bal-list-item-accordion-head.i18n";
 import { defaultConfig, ListenToConfig } from "../../../utils/config";
+import { stopEventBubbling } from "../../../utils/form-input";
+import { isEnterKey, isSpaceKey } from "../../../utils/keyboard";
+import { Logger } from "../../../utils/log";
+import { i18nBalListItemAccordionHead } from "./bal-list-item-accordion-head.i18n";
 export class ListItemAccordionHead {
     constructor() {
         this.internalId = `bal-list-item-accordion-head-${ListItemAccordionHeadIds++}`;
@@ -41,6 +41,9 @@ export class ListItemAccordionHead {
      * LIFECYCLE
      * ------------------------------------------------------
      */
+    connectedCallback() {
+        this.accordionOpenHandler(this.accordionOpen, false);
+    }
     componentDidRender() {
         this.setLabelledby();
     }
@@ -62,7 +65,9 @@ export class ListItemAccordionHead {
      * @internal
      */
     async setAria(aria) {
-        this.ariaState = Object.assign({}, aria);
+        if (aria.controlId && aria.controlId !== this.ariaState.controlId) {
+            this.ariaState.controlId = aria.controlId;
+        }
     }
     /**
      * PRIVATE METHODS
@@ -79,11 +84,11 @@ export class ListItemAccordionHead {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'a6d11324257afc12e220df8f370d440834d44118', class: {
+        return (h(Host, { key: 'fadfc7f646948cbf15bd825188e4eb539058b1ca', class: {
                 'bal-list__item': true,
                 'bal-list__item__accordion-head': true,
                 'bal-list__item__accordion-head--open': this.accordionOpen,
-            }, id: this.internalId, role: "button", tabindex: "0", "aria-expanded": ariaBooleanToString(this.accordionOpen), "aria-controls": this.ariaState.controlId, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '02735dbc43eb2a47becc83c1ddd2d7edfdfdc384' }), h("bal-list-item-icon", { key: 'f96747135e9f91523806cd6e08e34b9e98b1f4b7', right: true }, h("bal-icon", { key: '4f2a64815d96a4b0beae4a1a2b406d615e1c348f', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen, title: this.accordionOpen
+            }, id: this.internalId, role: "button", tabindex: "0", "aria-expanded": ariaBooleanToString(this.accordionOpen), "aria-controls": this.ariaState.controlId, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '4f8c16d3af44dcb8e14a4619b64e6f57c3c79128' }), h("bal-list-item-icon", { key: '6eb7ef4c6275c22ec4c65f424c04a0f62cdd88b8', right: true }, h("bal-icon", { key: '60cf159ca10b62349fab812aa649d7819ae980bb', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen, title: this.accordionOpen
                 ? i18nBalListItemAccordionHead[this.language].close
                 : i18nBalListItemAccordionHead[this.language].open }))));
     }

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

@@ -0,0 +1,87 @@
+import { isDescendant, rIC } from "../../utils/helpers";
+/**
+ * Gathers information about the tabs in the navigation.
+ * This information are shared for the tab key down handling and the flyout focus out handling.
+ */
+export const gatherTabInformation = (detail) => {
+    var _a;
+    const links = (_a = detail.linkItems.find(item => item.value === detail.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems;
+    // the selected tab in the main navigation
+    const indexOfActiveTab = links === null || links === void 0 ? void 0 : links.findIndex(link => link.value === detail.activeMenuLinkValue);
+    const indexOfNextTab = indexOfActiveTab + 1;
+    const indexOfPreviousTab = indexOfActiveTab - 1;
+    return {
+        tabs: links || [],
+        indexOfActiveTab,
+        indexOfNextTab,
+        indexOfPreviousTab,
+    };
+};
+export const handleTabKeyDown = ({ tabs, indexOfNextTab, indexOfActiveTab }, detail) => {
+    // the current focused tab in the main navigation
+    const indexOfFocusedTab = tabs === null || tabs === void 0 ? void 0 : tabs.findIndex(link => link.value === detail.item.value);
+    // if last tab is focused and would leave the tab navigation, close the flyout
+    if (!detail.isBackwards && indexOfFocusedTab === tabs.length - 1) {
+        detail.stopEventBubbling();
+        detail.closeFlyout();
+        rIC(() => {
+            focusNextElement(document.activeElement, detail.el);
+        });
+        return;
+    }
+    // only change focus to the first link in the flyout when navigating from active tab to next tab
+    if (!detail.isBackwards && indexOfFocusedTab === indexOfActiveTab) {
+        const flyout = detail.el.querySelector(`#${detail.navId}-menu-flyout`);
+        if (flyout) {
+            const firstLink = flyout.querySelector('a, button, [tabindex="0"]');
+            if (firstLink) {
+                detail.stopEventBubbling();
+                firstLink.focus({ preventScroll: true });
+            }
+        }
+    }
+    // only change focus to the last link in the flyout when navigating back from
+    // next tab (from the active tab) to active tab (has flyout open)
+    if (detail.isBackwards && indexOfFocusedTab === indexOfNextTab) {
+        const flyout = detail.el.querySelector(`#${detail.navId}-menu-flyout`);
+        if (flyout) {
+            const flyoutLinks = flyout.querySelectorAll('a, button, [tabindex="0"]');
+            const lastLink = flyoutLinks[flyoutLinks.length - 1];
+            if (lastLink) {
+                detail.stopEventBubbling();
+                lastLink.focus({ preventScroll: true });
+            }
+        }
+    }
+};
+export const handleFlyoutFocusOut = (info, detail) => {
+    const targetItem = detail.isBackwards ? info.tabs[info.indexOfActiveTab] : info.tabs[info.indexOfNextTab];
+    if (targetItem) {
+        const tab = detail.el.querySelector(`button[data-value="${targetItem.value}"], a[data-value="${targetItem.value}"]`);
+        if (tab) {
+            tab.focus({ preventScroll: true });
+        }
+    }
+};
+/**
+ * Focuses the next focusable element after the current element outside of the bal-nav element.
+ */
+const focusNextElement = (current, balNavEl) => {
+    const focusableSelectors = [
+        'a[href]',
+        'button:not([disabled])',
+        'input:not([disabled]):not([type="hidden"])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+    ];
+    const focusableElements = Array.from(document.querySelectorAll(focusableSelectors.join(',')))
+        // visible elements only
+        .filter(el => el.offsetParent !== null)
+        // exclude elements inside the bal-nav
+        .filter(el => !isDescendant(balNavEl, el));
+    const index = focusableElements.indexOf(current);
+    const next = focusableElements[index + 1];
+    if (next)
+        next.focus();
+};

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";
@@ -27,6 +28,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 +56,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() {
@@ -92,7 +98,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,6 +8,7 @@ export class NavMetaBar {
         this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
         this.previousY = 0;
         this.isHidden = false;
+        this.stayOnTopOfBackdrop = false;
         this.variant = 'primary';
         this.size = 'normal';
         this.invisible = 'none';
@@ -57,7 +58,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,6 +73,26 @@ export class NavMetaBar {
     }
     static get properties() {
         return {
+            "stayOnTopOfBackdrop": {
+                "type": "boolean",
+                "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,
+                "attribute": "stay-on-top-of-backdrop",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,

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)}