@baloise/ds-core 19.8.2 → 19.8.3-nightly.20251107

package/components/bal-modal.js

@@ -1,8 +1,24 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
-import { p as prepareOverlay, d as dismiss, e as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
+import { b as balBrowser } from './browser.js';
 import { c as componentOnReady, d as deepReady, w as wait } from './helpers.js';
+import { p as prepareOverlay, d as dismiss, e as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
 import { B as BalScrollHandler } from './scroll.js';
-import { b as balBrowser } from './browser.js';
+
+const getClassMap = (classes) => {
+    const map = {};
+    getClassList(classes).forEach(c => (map[c] = true));
+    return map;
+};
+const getClassList = (classes) => {
+    if (classes !== undefined) {
+        const array = Array.isArray(classes) ? classes : classes.split(' ');
+        return array
+            .filter(c => c != null)
+            .map(c => c.trim())
+            .filter(c => c !== '');
+    }
+    return [];
+};
 
 const attachComponent = async (delegate, container, component, cssClasses, componentProps) => {
     if (delegate) {
@@ -35,28 +51,14 @@ const detachComponent = (delegate, element) => {
     return Promise.resolve();
 };
 
-const getClassMap = (classes) => {
-    const map = {};
-    getClassList(classes).forEach(c => (map[c] = true));
-    return map;
-};
-const getClassList = (classes) => {
-    if (classes !== undefined) {
-        const array = Array.isArray(classes) ? classes : classes.split(' ');
-        return array
-            .filter(c => c != null)
-            .map(c => c.trim())
-            .filter(c => c !== '');
-    }
-    return [];
-};
-
 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 Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1 {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.didPresent = createEvent(this, "balModalDidPresent", 7);
         this.willPresent = createEvent(this, "balModalWillPresent", 7);
         this.willDismiss = createEvent(this, "balModalWillDismiss", 7);
@@ -266,21 +268,21 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         return false;
     }
     render() {
-        return (h(Host, { key: 'b9f93570b2f131d733376175c270362d332b2f8c', "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: {
+        return (h(Host, { key: '2f549c1b2f23df85b241d4f791db9e7b7d6c6d99', "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: '3ba52aa812080ca4df440ed31550c63f247102ed', class: {
+            } }, h("div", { key: '611459787dc3ed3f9d88f2c7079644ff23afe385', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: 'a0e32a3bdd09f2abc90f18129f0e1ecb230774b7', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: 'c8553af2894b82528ac43390b5599478a15963b0', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: 'f38d1b9a696644b23960e2769020dbd88518914f', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '3b61064fb8f36d0b875768621867d0429329028b', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '984553311791bdbc7de71bb56ea8deef8e431012' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '0ff7a01a8236ea6ef754cd38a89f3fb7337df3b8' })))));
     }
     get el() { return this; }
     static get style() { return balModalCss; }
-}, [4, "bal-modal", {
+}, [260, "bal-modal", {
         "overlayIndex": [1026, "overlay-index"],
         "delegate": [16],
         "dataTestId": [1, "data-test-id"],
@@ -289,7 +291,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         "hasBackdrop": [4, "has-backdrop"],
         "isClosable": [4, "is-closable"],
         "component": [1],
-        "componentProps": [16, "component-props"],
+        "componentProps": [16],
         "cssClass": [1, "css-class"],
         "backdropDismiss": [4, "backdrop-dismiss"],
         "focusTrap": [4, "focus-trap"],

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

@@ -6,9 +6,11 @@ import { B as BEM } from './bem.js';
 const balNavLinkGridColCss = ".bal-nav-link-grid-col{display:block;padding:0;-ms-flex:none;flex:none;width:100%}.bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid-col{-ms-flex:none;flex:none;width:50%;padding-top:0;padding-bottom:0;padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}.bal-nav-link-grid-col .bal-nav-link-group{margin-bottom:var(--bal-space-normal);padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{padding-left:0}@media screen and (min-width: 1440px){.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{-ms-flex:none;flex:none;width:33.3333%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static){-ms-flex:none;flex:none;width:66.6666%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-large)}}.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{margin:0;width:100%}@media screen and (min-width: 1024px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{padding-left:0;padding-right:0}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{width:calc(50% - var(--bal-space-large)/2)}}";
 
 const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -31,7 +33,7 @@ const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol ext
         return (h(Host, { key: 'd7acb4f8e0e7d438e80b429883332e397da63372', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '45840d28afac2acd60020bcbb2365fc5f2942d53', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'c3938c0a946e3fdd55222635b7dc5a057fcab0d6' }))));
     }
     static get style() { return balNavLinkGridColCss; }
-}, [4, "bal-nav-link-grid-col", {
+}, [260, "bal-nav-link-grid-col", {
         "staticCol": [4, "static-col"]
     }]);
 __decorate([

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

@@ -6,9 +6,11 @@ import { B as BEM } from './bem.js';
 const balNavLinkGridCss = ".bal-nav-link-grid{--bal-column-gap:0}@media screen and (min-width: 1024px){.bal-nav-link-grid{--bal-column-gap:1.5rem}}.bal-nav-link-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:0;margin-left:calc(var(--bal-column-gap)*-1);margin-right:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid:last-child{margin-bottom:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}";
 
 const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     createLogger(log) {
         this.log = log;
@@ -22,7 +24,7 @@ const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends H
         return (h(Host, { key: 'cf120f164d237ac949800e041f354c577ec9a4c2', class: Object.assign({}, block.class()) }, h("slot", { key: 'c8b40348d598dc98dc5d1cdbd61a5dc57736041a' })));
     }
     static get style() { return balNavLinkGridCss; }
-}, [4, "bal-nav-link-grid"]);
+}, [260, "bal-nav-link-grid"]);
 __decorate([
     Logger('bal-nav-link-grid'),
     __metadata("design:type", Function),

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

@@ -6,9 +6,11 @@ import { B as BEM } from './bem.js';
 const balNavLinkGroupCss = ":root{--bal-nav-link-group-background:transparent;--bal-nav-link-group-background-grey:var(--bal-color-grey);--bal-nav-link-group-background-purple:var(--bal-color-purple);--bal-nav-link-group-background-red:var(--bal-color-red);--bal-nav-link-group-background-yellow:var(--bal-color-yellow);--bal-nav-link-group-background-green:var(--bal-color-green);--bal-nav-link-group-radius:var(--bal-radius-large)}.bal-nav-link-group{display:block;background:var(--bal-nav-link-group-background);border-radius:var(--bal-nav-link-group-radius);padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal);padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-group{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}}.bal-nav-link-group--is-grey{background:var(--bal-nav-link-group-background-grey)}.bal-nav-link-group--is-purple{background:var(--bal-nav-link-group-background-purple)}.bal-nav-link-group--is-red{background:var(--bal-nav-link-group-background-red)}.bal-nav-link-group--is-yellow{background:var(--bal-nav-link-group-background-yellow)}.bal-nav-link-group--is-green{background:var(--bal-nav-link-group-background-green)}";
 
 const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -31,7 +33,7 @@ const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends
         return (h(Host, { key: '430702a9ee2d0b8e90c22a6d5a710e1ff937fa41', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: 'cf882ef1d17029c47e2bb5cb6b7a2a68b4875492' })));
     }
     static get style() { return balNavLinkGroupCss; }
-}, [4, "bal-nav-link-group", {
+}, [260, "bal-nav-link-group", {
         "color": [1]
     }]);
 __decorate([

package/components/bal-nav-link2.js

@@ -6,9 +6,11 @@ import { B as BEM } from './bem.js';
 const balNavLinkCss = "@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-link-text-color:var(--bal-link-color);--bal-nav-link-text-color-hover:var(--bal-link-color-hover);--bal-nav-link-text-color-active:var(--bal-link-color-active)}.bal-nav-link{display:block}.bal-nav-link:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-nav-link--variant-title:not(:last-child){margin-bottom:var(--bal-space-normal) !important}.bal-nav-link--variant-overview:not(:last-child){margin-bottom:0 !important}@media screen and (min-width: 1024px){.bal-nav-link--variant-overview:not(:last-child){margin-bottom:var(--bal-space-normal) !important}}.bal-nav-link__native{display:inline;color:var(--bal-nav-link-text-color);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);font-family:var(--bal-font-family-text);text-align:left;padding:0;border:none;background:none}.bal-nav-link__native--variant-title{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);text-decoration:none;margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link__native--variant-title{font-size:var(--bal-text-size-xx-large)}}.bal-nav-link__native--variant-overview{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-nav-link__native--selected{-webkit-text-decoration:var(--bal-link-text-decoration) !important;text-decoration:var(--bal-link-text-decoration) !important;text-decoration-thickness:1px !important;text-underline-offset:2px !important}button.bal-nav-link__native,a.bal-nav-link__native{cursor:pointer}@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:hover,a.bal-nav-link__native:hover{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-hover);text-underline-offset:2px}}button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{border-radius:var(--bal-radius-normal)}button.bal-nav-link__native:active,a.bal-nav-link__native:active{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-active);text-underline-offset:2px}";
 
 const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -54,7 +56,7 @@ const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLEleme
                 .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '78c3c18fbb008c69c4f2f1fd7667a34e8c172dae' }))));
     }
     static get style() { return balNavLinkCss; }
-}, [4, "bal-nav-link", {
+}, [260, "bal-nav-link", {
         "variant": [1],
         "selected": [4],
         "clickable": [4],

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

@@ -6,9 +6,11 @@ import { L as Logger } from './log.js';
 const balNavMenuBarCss = ":root{--bal-nav-menu-bar-background:var(--bal-color-white);--bal-nav-menu-bar-radius:var(--bal-radius-large);--bal-nav-menu-bar-shadow:0 5px 15px rgba(0,0,0,.1)}.bal-nav-menu-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-menu-bar__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-menu-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 1440px){.bal-nav-menu-bar{position:fixed;margin-top:1rem}}.bal-nav-menu-bar--position-fixed-top{position:fixed}.bal-nav-menu-bar__inner{background:var(--bal-nav-menu-bar-background);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{min-height:64px}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow);min-height:80px}}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;min-height:80px}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container::before{position:absolute;content:\"\";height:100%;top:0;left:1rem;right:1rem;background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{-ms-flex-item-align:start;align-self:flex-start;z-index:1;height:auto;margin-top:.8em}@media screen and (min-width: 1024px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1rem}}@media screen and (min-width: 1440px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1.5rem}}.bal-nav-menu-bar-body-padding{padding-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-padding{padding-top:7rem}}.bal-nav-menu-bar-body-margin{margin-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-margin{margin-top:7rem}}.bal-nav-menu-bar-fixed-body-padding{padding-top:8rem}.bal-nav-menu-bar-fixed-body-margin{margin-top:8rem}";
 
 const NavMenuBar = /*@__PURE__*/ proxyCustomElement(class NavMenuBar extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.navMenuBarId = `bal-nav-menu-bar-${NavMenuBarIds++}`;
         this.isHidden = false;
         /**
@@ -41,11 +43,11 @@ 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: '1d3156e1e56a298106c03aa04a7ce6e7e720fa09', 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: '1e1855a00bf27d97cd6740bbf1bf6c27b688b8fd', class: Object.assign({}, innerBlock.class()) }, h("div", { key: '96ada15dbc1e40a0f364d05de09692c483a57c44', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '1a3229dd01d5da1cfc3e9ff15ae995ddd6fb2c93' })))));
+        return (h(Host, { key: 'c512c5c56732da21be09b4f425cadf3e59cd42f9', 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: '79c4e0d458b0a7ced671b8fe9268d10748f676f8', class: Object.assign({}, innerBlock.class()) }, h("div", { key: '565d5c9f36f2e1d835f1e918308d7b4435cf650a', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'ab610c474c6c6a9e1b15036a298aa3b273ae4207' })))));
     }
     get el() { return this; }
     static get style() { return balNavMenuBarCss; }
-}, [4, "bal-nav-menu-bar", {
+}, [260, "bal-nav-menu-bar", {
         "invisible": [1],
         "position": [1],
         "isHidden": [32]

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

@@ -3,16 +3,17 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { i as isDescendant } from './helpers.js';
 import { L as Logger } from './log.js';
-import './window-resize.subject.js';
-import { L as ListenToResize } from './resize.decorator.js';
 import { B as BalScrollHandler } from './scroll.js';
+import { L as ListenToResize } from './resize.decorator.js';
 
 const balNavMenuFlyoutCss = ":root{--bal-nav-menu-flyout-border-background:var(--bal-color-grey)}.bal-nav-menu-flyout{position:relative;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;padding-bottom:2.5rem;overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 90px - 48px - 16px);width:calc(100% + 1rem + 1rem);margin-left:-1rem;margin-right:-1rem}.bal-nav-menu-flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-menu-flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav-menu-flyout .bal-nav-menu-flyout__line{position:-webkit-sticky;position:sticky;width:100%;left:0;top:0;height:1px;background-color:var(--bal-color-grey);margin-bottom:2.5rem}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-flyout .bal-nav-menu-flyout__line{width:calc(100% - 2rem);left:1rem}}@media screen and (min-width: 769px),print{.bal-nav-menu-flyout{width:calc(100% + 2.5rem + 2.5rem);margin-left:-2.5rem;margin-right:-2.5rem}}@media screen and (min-width: 1024px){.bal-nav-menu-flyout{width:calc(100% + 3rem + 3rem);margin-left:-3rem;margin-right:-3rem}}@media screen and (min-width: 1440px){.bal-nav-menu-flyout{max-height:calc(var(--bal-app-height, 100%) - 96px - 48px - 16px)}}";
 
 const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balFocusOut = createEvent(this, "balFocusOut", 7);
         this.bodyScrollHandler = new BalScrollHandler();
         this.isHidden = false;
@@ -70,11 +71,11 @@ const NavMenuFlyout = /*@__PURE__*/ proxyCustomElement(class NavMenuFlyout exten
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: '08fec06021b7342e57f8b473e8b3945e9f9b1fdd', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'e0ac894e2f7f9f598e83f9b356d6b6650517dae8', class: Object.assign({}, line.class()) }), h("div", { key: '1849d0a2e87299ed182eb4d3adf167f129dc50f5', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'd4b6906e2747d25c10426c295cce3f6a64ee5fb3' }))));
+        return (h(Host, { key: '5b8b721ba798c1b821379db4eb80bb99d03cbc5b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'b17ee85558e1fcd48d98f1b1744f7484f105e5dc', class: Object.assign({}, line.class()) }), h("div", { key: 'b864ab407819d5169e5ac03108d15f1cd0383715', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '2e517d14555faa2f42447ea55208c3580882fa7b' }))));
     }
     get el() { return this; }
     static get style() { return balNavMenuFlyoutCss; }
-}, [4, "bal-nav-menu-flyout", {
+}, [260, "bal-nav-menu-flyout", {
         "navId": [1, "nav-id"],
         "isHidden": [32]
     }, [[0, "focusout", "onFocusLeave"]]]);

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

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.js';
+import { L as Logger } from './log.js';
 
 const balNavMetaBarCss = ":root{--bal-nav-meta-bar-variant-primary-background:var(--bal-color-primary);--bal-nav-meta-bar-variant-primary-shadow:none;--bal-nav-meta-bar-variant-white-background:var(--bal-color-white);--bal-nav-meta-bar-variant-white-shadow:0 5px 15px rgba(0,0,0,.1);--bal-nav-meta-bar-variant-grey-background:var(--bal-color-grey-2);--bal-nav-meta-bar-variant-grey-shadow:none}.bal-nav-meta-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:100%}.bal-nav-meta-bar__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-meta-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-meta-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-meta-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-meta-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-meta-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav-meta-bar--size-normal{padding-top:.5rem;padding-bottom:.5rem;height:4rem;max-height:4rem}.bal-nav-meta-bar--size-small{min-height:3rem}.bal-nav-meta-bar--position-fixed-top{position:fixed;top:0;left:0;width:100%}.bal-nav-meta-bar--position-fixed-bottom{position:fixed;bottom:0;left:0;width:100%}.bal-nav-meta-bar--variant-primary{background:var(--bal-nav-meta-bar-variant-primary-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow);box-shadow:var(--bal-nav-meta-bar-variant-primary-shadow)}.bal-nav-meta-bar--variant-grey{background:var(--bal-nav-meta-bar-variant-grey-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow);box-shadow:var(--bal-nav-meta-bar-variant-grey-shadow)}.bal-nav-meta-bar--variant-white{background:var(--bal-nav-meta-bar-variant-white-background);-webkit-box-shadow:var(--bal-nav-meta-bar-variant-white-shadow);box-shadow:var(--bal-nav-meta-bar-variant-white-shadow)}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-mobile{display:hidden !important;visibility:hidden !important}}@media screen and (max-width: 768px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-meta-bar--hidden-tablet{display:hidden !important;visibility:hidden !important}}@media screen and (max-width: 1023px){.bal-nav>.bal-nav-meta-bar{z-index:calc(var(--bal-z-index-popup) + 1) !important}}.bal-nav-meta-bar .button-label{word-break:keep-all !important}.bal-nav-meta-bar-transform{will-change:transition;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out;position:fixed;display:block;width:100%;top:var(--bal-nav-top, 0rem);z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar-transform-small{-webkit-transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 3rem)));transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 3rem)))}.bal-nav-meta-bar-transform-normal{-webkit-transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 5rem)));transform:translateY(calc(-1 * (var(--bal-nav-top, 0rem) + 5rem)))}";
 
 const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
         this.previousY = 0;
         this.isHidden = false;
@@ -82,11 +84,11 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: 'b0bcf370b580af4b1b08e3db52fdcd63d73b6626', 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: 'e6d3b94907abfa645139d6f680f70fc5c4120704', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'd8f228c8191c61245dcf96f54270e021609a9296' }))));
+        return (h(Host, { key: '25684e02977f5a4d967d30008b547d8cf44e3226', 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: 'f57d830449b096a918c3c95afdc3c10bfe0aebab', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'bff11fca547605a1f0f1993fd7ffefa4b3c500a6' }))));
     }
     get el() { return this; }
     static get style() { return balNavMetaBarCss; }
-}, [4, "bal-nav-meta-bar", {
+}, [260, "bal-nav-meta-bar", {
         "stayOnTopOfBackdrop": [4, "stay-on-top-of-backdrop"],
         "variant": [1],
         "size": [1],

package/components/bal-nav.js

@@ -1,15 +1,10 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { b as balBrowser } from './browser.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { m as rIC, i as isDescendant, f as waitForComponent, b as waitAfterIdleCallback } from './helpers.js';
+import { n as rIC, i as isDescendant, f as waitForComponent, b as waitAfterIdleCallback } from './helpers.js';
 import { L as Logger } from './log.js';
-import { L as ListenToMutation } from './mutation.decorator.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { s as sanitizeSvg } from './svg.js';
 import { e as isTabKey } from './keyboard.helpers.js';
@@ -41,6 +36,11 @@ import { d as defineCustomElement$5 } from './bal-spinner2.js';
 import { d as defineCustomElement$4 } from './bal-stack2.js';
 import { d as defineCustomElement$3 } from './bal-tabs2.js';
 import { d as defineCustomElement$2 } from './bal-tag2.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenToConfig } from './config.decorator.js';
 
 /**
  * Gathers information about the tabs in the navigation.
@@ -248,8 +248,7 @@ class NavLinkItem {
     }
     renderTouch(_context) {
         const block = BEM.block('nav');
-        return (h("li", null,
-            h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
+        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
     }
     render(_context) {
         return (h("bal-nav-link", { role: "listitem", href: this.href, rel: this.rel, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
@@ -335,10 +334,7 @@ let NavMetaButtonIDs = 0;
 
 const AccordionButton = ({ id, label, level, open, link, href, rel, target, onClick, }) => {
     const block = BEM.block('nav');
-    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, rel: rel, target: target, onClick: ev => onClick(ev) },
-        h("span", null, label))) : (h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) },
-        h("span", null, label),
-        h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
+    return link ? (h("a", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), href: href, rel: rel, target: target, onClick: ev => onClick(ev) }, h("span", null, label))) : (h("button", { id: id, class: Object.assign({}, block.element(`mobile-${level}-item`).class()), onClick: ev => onClick(ev) }, h("span", null, label), h("bal-icon", { name: "nav-go-down", size: "small", turn: open })));
 };
 
 const OverviewLink = ({ item, isMenu, onClick, isVisible }) => {
@@ -349,10 +345,7 @@ const OverviewLink = ({ item, isMenu, onClick, isVisible }) => {
     return (h("a", { class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-overview-link').class()), block.element('mobile-overview-link').modifier('menu').class(!!isMenu)), block
             .element('mobile-overview-link')
             .modifier('invisible')
-            .class(isVisible === false)), href: item.href, rel: item.rel, target: item.target, onClick: ev => onClick(ev) },
-        item.label,
-        " ",
-        item.label ? '➞' : ''));
+            .class(isVisible === false)), href: item.href, rel: item.rel, target: item.target, onClick: ev => onClick(ev) }, item.label, " ", item.label ? '➞' : ''));
 };
 
 class NavSectionLinkItem extends NavLinkItem {
@@ -373,14 +366,10 @@ class NavSectionLinkItem extends NavLinkItem {
     renderTouch(_context) {
         const block = BEM.block('nav');
         const hasItems = this.linkItems && this.linkItems.length > 0;
-        return (h("li", null,
-            h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label),
-            hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
+        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
     }
     render(_context) {
-        return (h("bal-nav-link-group", { role: "list" },
-            h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label),
-            this.linkItems.map(item => item.render())));
+        return (h("bal-nav-link-group", { role: "list" }, h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label), this.linkItems.map(item => item.render())));
     }
 }
 let NavSectionLinkItemIDs = 0;
@@ -401,14 +390,10 @@ class NavServiceLinkItem extends NavLinkItem {
     renderTouch(_context) {
         const block = BEM.block('nav');
         const hasItems = this.linkItems && this.linkItems.length > 0;
-        return (h("li", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('mobile-service-item').class()), block.element('mobile-service-item').modifier(`color-${this.color}`).class()), block.element('mobile-service-item').modifier('selected').class(this.active)), block.element('mobile-service-item').modifier('clickable').class(this.clickable)) },
-            h("a", { id: this.id, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label),
-            hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
+        return (h("li", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('mobile-service-item').class()), block.element('mobile-service-item').modifier(`color-${this.color}`).class()), block.element('mobile-service-item').modifier('selected').class(this.active)), block.element('mobile-service-item').modifier('clickable').class(this.clickable)) }, h("a", { id: this.id, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
     }
     render(_context) {
-        return (h("bal-nav-link-group", { color: this.color, role: "list" },
-            h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label),
-            this.linkItems.map(item => item.render())));
+        return (h("bal-nav-link-group", { color: this.color, role: "list" }, h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label), this.linkItems.map(item => item.render())));
     }
 }
 let NavServiceLinkItemIDs = 0;
@@ -432,17 +417,13 @@ class NavMenuLinkItem extends NavLinkItem {
         const hasSectionLinkItems = this.sectionLinkItems && this.sectionLinkItems.length > 0;
         const hasServiceLinkItems = this.serviceLinkItems && this.serviceLinkItems.length > 0;
         const isSelected = (context === null || context === void 0 ? void 0 : context.activeMenuLinkValue) === this.value;
-        return (h("li", null,
-            h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, rel: this.rel, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }),
-            h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true, isVisible: isSelected }),
-            hasSectionLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-section-list').class()), block
-                    .element('mobile-section-list')
-                    .modifier('invisible')
-                    .class(isSelected === false)) }, this.sectionLinkItems.map(item => item.renderTouch()))) : (''),
-            hasServiceLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-service-list').class()), block
-                    .element('mobile-service-list')
-                    .modifier('invisible')
-                    .class(isSelected === false)) }, this.serviceLinkItems.map(item => item.renderTouch()))) : ('')));
+        return (h("li", null, h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, rel: this.rel, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }), h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true, isVisible: isSelected }), hasSectionLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-section-list').class()), block
+                .element('mobile-section-list')
+                .modifier('invisible')
+                .class(isSelected === false)) }, this.sectionLinkItems.map(item => item.renderTouch()))) : (''), hasServiceLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-service-list').class()), block
+                .element('mobile-service-list')
+                .modifier('invisible')
+                .class(isSelected === false)) }, this.serviceLinkItems.map(item => item.renderTouch()))) : ('')));
     }
     render(context) {
         const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
@@ -474,15 +455,10 @@ class NavMetaLinkItem extends NavLinkItem {
     renderTouch(context) {
         const block = BEM.block('nav');
         const isSelected = (context === null || context === void 0 ? void 0 : context.activeMetaLinkValue) === this.value;
-        return (h("li", null,
-            h(AccordionButton, { id: this.id, level: "meta", label: this.label, open: isSelected, link: this.mainLinkItems.length > 0 ? false : this.isLink, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onAccordionClick(ev) }),
-            isSelected ? h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev) }) : '',
-            isSelected ? (h("hr", { class: Object.assign(Object.assign({}, block.element('line').class()), block.element('line').modifier('up').class()) })) : (''),
-            isSelected && this.mainLinkItems && this.mainLinkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-menu-list').class()) }, this.mainLinkItems.map(item => item.renderTouch({
-                activeMetaLinkValue: context.activeMetaLinkValue,
-                activeMenuLinkValue: context.activeMenuLinkValue,
-            })))) : (''),
-            h("hr", { class: Object.assign({}, block.element('line').class()) })));
+        return (h("li", null, h(AccordionButton, { id: this.id, level: "meta", label: this.label, open: isSelected, link: this.mainLinkItems.length > 0 ? false : this.isLink, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onAccordionClick(ev) }), isSelected ? h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev) }) : '', isSelected ? (h("hr", { class: Object.assign(Object.assign({}, block.element('line').class()), block.element('line').modifier('up').class()) })) : (''), isSelected && this.mainLinkItems && this.mainLinkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-menu-list').class()) }, this.mainLinkItems.map(item => item.renderTouch({
+            activeMetaLinkValue: context.activeMetaLinkValue,
+            activeMenuLinkValue: context.activeMenuLinkValue,
+        })))) : (''), h("hr", { class: Object.assign({}, block.element('line').class()) })));
     }
     render(context) {
         if (this.isLink) {
@@ -500,9 +476,11 @@ let NavMetaLinkItemIDs = 0;
 const balNavCss = "@media (hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-top:0rem;--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{position:relative;background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem - var(--bal-nav-top, 0rem));overflow-y:auto;z-index:calc(var(--bal-z-index-navigation) - 1)}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
 
 const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balNavItemClick = createEvent(this, "balNavItemClick", 7);
         this.navId = `bal-nav-${NavIds++}`;
         this.bodyScrollHandler = new BalScrollHandler();
@@ -771,7 +749,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: 'dae60e87a7091b449e1f75eab64b12ce35fb05ea', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '649fcb126503a271bc248ee96e68b425a923e5d3', class: {
+        return (h(Host, { key: 'bd3aaf8839666e5d482640dfa9274b799036fec3', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '0ff02ba7e1ad39d2707e84f500768385cd8058f6', 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", { inverted: true, context: "meta", value: this.activeMetaLinkValue, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -814,7 +792,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
                     });
                 }
             } }, 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: '6499f09da6ff07093492b342ee5851600eccd391' }, h("slot", { key: '83f00bc33f0587edf5145def059525712b62637d' }))), 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: '5d7ce9a508ca9c83120c8f288c946ff42001d41d' }, h("slot", { key: 'a05f492433abe803c255ed42ecd52faf35f42f38' }))), 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", { stayOnTopOfBackdrop: true, variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -860,7 +838,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         "buttons": ["buttonChanged"]
     }; }
     static get style() { return balNavCss; }
-}, [4, "bal-nav", {
+}, [260, "bal-nav", {
         "logo": [16],
         "options": [16],
         "buttons": [16],

package/components/bal-navbar-brand.js

@@ -2,14 +2,14 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { b as balBrowser } from './browser.js';
-import { d as defaultConfig } from './config.default.js';
-import { L as ListenToConfig } from './config.decorator.js';
 import { w as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-logo2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
 
 const i18nBalNavbarBrand = {
     en: {
@@ -45,9 +45,11 @@ const i18nBalNavbarBrand = {
 };
 
 const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balNavigate = createEvent(this, "balNavigate", 7);
         this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
         this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
@@ -150,13 +152,13 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
                 .modifier('small')
                 .class(this.logoSize === 'small')), src: this.logo, alt: "Logo" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
         const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
-        return (h(Host, { key: '7094feb6286adb3f8ca239f2083915b0c515f558', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'd34d073da6df76bb8ee23cf2f0e252e25770e8ae', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '1fe4bf6cff6641d027a9ead60bd7bb6a7b9aca9d' })), h("bal-button", { key: '2c873463b3cf67369769f82e8aa7c524240ad38e', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: 'e2534fabd7b620bef928e4e5e224295832bc5665', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '72f3cb42aee12c085ecbc2ecd0a7ef4adbe6e306', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: 'e2e58abba878ec1f05624e319a3c8965680aebac' })), h("bal-button", { key: 'd98c54c44c7739518eb62da8fa53df3291592c12', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));
     }
     get el() { return this; }
-}, [4, "bal-navbar-brand", {
+}, [260, "bal-navbar-brand", {
         "href": [1],
         "rel": [1],
         "logoClickable": [4, "logo-clickable"],