npm - @baloise/ds-core - Versions diffs - 19.3.0 → 19.4.0 - Mend

@baloise/ds-core 19.3.0 → 19.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1113) hide show

package/dist/cjs/bal-nav_8.cjs.entry.js CHANGED Viewed

@@ -1,26 +1,20 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-84f42282.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const bem = require('./bem-81bc6a2d.js');
-const browser = require('./browser-1d542d0f.js');
-const formInput = require('./form-input-e9974433.js');
-const helpers = require('./helpers-debb881a.js');
-const log = require('./log-33398c2a.js');
-const scroll = require('./scroll-dc37ea84.js');
-const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
-const breakpoints_subject = require('./breakpoints.subject-485cf660.js');
-const config_default = require('./config.default-7e96eb95.js');
-const mutation_decorator = require('./mutation.decorator-485e250e.js');
-const breakpoints_decorator = require('./breakpoints.decorator-881dd92d.js');
-const config_decorator = require('./config.decorator-de244188.js');
-const resize_decorator = require('./resize.decorator-e4a92322.js');
-require('./config.utils-df30e424.js');
-require('./device-9f97a845.js');
-require('./listener-52d2e5fd.js');
-require('./tokens.esm-e14cedac.js');
+var index = require('./index-COfbtsc7.js');
+var tslib_es6 = require('./tslib.es6-DrfCPgT9.js');
+var bem = require('./bem-p0PWVN8n.js');
+var breakpoints_subject = require('./breakpoints.subject-CidQD5zH.js');
+var breakpoints_decorator = require('./breakpoints.decorator-DLXGwQpP.js');
+var config_decorator = require('./config.decorator-CDkNZ1Fo.js');
+var formInput = require('./form-input-BUGd2Bkz.js');
+var mutation_decorator = require('./mutation.decorator-DyFafPfX.js');
+var scroll = require('./scroll-DY4kxt0j.js');
+var keyboard_helpers = require('./keyboard.helpers-BkZpVT-9.js');
+require('./window-resize.subject-GSXXkOcC.js');
+var resize_decorator = require('./resize.decorator-B_NiBCMZ.js');
+require('./device-CoI0V6AY.js');
+require('./listener-t3ifJtK5.js');
+require('./tokens.esm-DU04pfsc.js');
 /**
  * Gathers information about the tabs in the navigation.
@@ -47,7 +41,7 @@ const handleTabKeyDown = ({ tabs, indexOfNextTab, indexOfActiveTab }, detail) =>
     if (!detail.isBackwards && indexOfFocusedTab === tabs.length - 1) {
         detail.stopEventBubbling();
         detail.closeFlyout();
-        helpers.rIC(() => {
+        index.rIC(() => {
             focusNextElement(document.activeElement, detail.el);
         });
         return;
@@ -102,9 +96,9 @@ const focusNextElement = (current, balNavEl) => {
         // visible elements only
         .filter(el => el.offsetParent !== null)
         // exclude elements inside the bal-nav
-        .filter(el => !helpers.isDescendant(balNavEl, el));
-    const index = focusableElements.indexOf(current);
-    const next = focusableElements[index + 1];
+        .filter(el => !index.isDescendant(balNavEl, el));
+    const index$1 = focusableElements.indexOf(current);
+    const next = focusableElements[index$1 + 1];
     if (next)
         next.focus();
 };
@@ -259,46 +253,28 @@ class NavMetaButton extends NavLinkItem {
     }
     renderAtMetaBar() {
         if (this.isLink) {
-            return (index.h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                } }, this.label));
+            return (index.h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.label));
         }
-        return (index.h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                title: this.htmlTitle,
-                label: this.ariaLabel || this.label,
-            }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
+        return (index.h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
     }
     renderAtTouchTopMetaBar() {
         if (this.touchPlacement === 'top') {
             if (this.isLink) {
-                return (index.h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    } }, this.icon ? '' : this.label));
+                return (index.h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label }, this.icon ? '' : this.label));
             }
-            return (index.h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
+            return (index.h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
         }
     }
     renderAtTouchBottomMetaBar() {
         if (this.touchPlacement === 'bottom') {
             if (this.isLink) {
-                return (index.h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    }, href: this.href, target: this.target }, this.label));
+                return (index.h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, href: this.href, target: this.target }, this.label));
             }
-            return (index.h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
+            return (index.h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, a11yTitle: this.htmlTitle, a11yLabel: this.ariaLabel || this.label, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
         }
     }
     resetTouchBottomMetaBar() {
-        if (browser.balBrowser.hasDocument && this.touchPlacement === 'bottom') {
+        if (index.balBrowser.hasDocument && this.touchPlacement === 'bottom') {
             const button = document.getElementById(this.value);
             if (button && button.balPopupVariant === 'drawer') {
                 button.color = 'info';
@@ -306,7 +282,7 @@ class NavMetaButton extends NavLinkItem {
         }
     }
     resetDesktopMetaBar() {
-        if (browser.balBrowser.hasDocument) {
+        if (index.balBrowser.hasDocument) {
             const button = document.getElementById(this.value);
             if (button && button.balPopupVariant === 'popover') {
                 button.color = 'info';
@@ -430,9 +406,9 @@ class NavMenuLinkItem extends NavLinkItem {
     render(context) {
         const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
         if (!hasChildren && this.isLink) {
-            return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => keyboard_helpers.isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
+            return (index.h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, onBalKeyDown: ev => keyboard_helpers.isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), "no-panel": true }));
         }
-        return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => keyboard_helpers.isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), onBalNavigate: ev => {
+        return (index.h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalKeyDown: ev => keyboard_helpers.isTabKey(ev.detail) && (context === null || context === void 0 ? void 0 : context.onTabPress(ev.detail)), onBalNavigate: ev => {
                 context === null || context === void 0 ? void 0 : context.onClick();
                 if (this.onClick) {
                     this.onClick(ev.detail);
@@ -469,9 +445,9 @@ class NavMetaLinkItem extends NavLinkItem {
     }
     render(context) {
         if (this.isLink) {
-            return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
+            return (index.h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
         }
-        return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
+        return (index.h("bal-tab-item", { a11yControls: context.flyoutId, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 if (this.onClick) {
                     this.onClick(ev.detail);
                 }
@@ -481,15 +457,29 @@ class NavMetaLinkItem extends NavLinkItem {
 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-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{-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-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:-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 BalNavStyle0 = balNavCss;
 const Nav = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balNavItemClick = index.createEvent(this, "balNavItemClick", 7);
+        this.balNavItemClick = index.createEvent(this, "balNavItemClick");
         this.navId = `bal-nav-${NavIds++}`;
         this.bodyScrollHandler = new scroll.BalScrollHandler();
+        this.isTouch = breakpoints_subject.balBreakpoints.isTouch;
+        this.isDesktop = breakpoints_subject.balBreakpoints.isDesktop;
+        this.language = index.defaultConfig.language;
+        this.region = index.defaultConfig.region;
+        this.isFlyoutActive = false;
         this.hasRenderedWithFlyoutActive = false;
+        /**
+         * Link level structure.
+         */
+        this.options = [];
+        this.linkItems = [];
+        /**
+         * Link level structure.
+         */
+        this.buttons = [];
+        this.metaButtons = [];
         this.mutationObserverActive = true;
         /**
          * EVENT BINDING
@@ -506,7 +496,7 @@ const Nav = class {
         this.onTouchToggleFlyout = (_ev) => {
             this.closeAllPopups();
             this.toggleFlyout();
-            if (browser.balBrowser.hasWindow && window.scrollY > 0) {
+            if (index.balBrowser.hasWindow && window.scrollY > 0) {
                 window.scrollTo(0, 0);
             }
             if (this.isFlyoutActive) {
@@ -518,7 +508,7 @@ const Nav = class {
         };
         this.onPopupOpen = (triggers) => {
             if (this.isTouch) {
-                if (browser.balBrowser.hasWindow && window.scrollY > 0) {
+                if (index.balBrowser.hasWindow && window.scrollY > 0) {
                     window.scrollTo(0, 0);
                 }
             }
@@ -569,18 +559,6 @@ const Nav = class {
             }
             this.activeMenuLinkValue = value;
         };
-        this.isTouch = breakpoints_subject.balBreakpoints.isTouch;
-        this.isDesktop = breakpoints_subject.balBreakpoints.isDesktop;
-        this.language = config_default.defaultConfig.language;
-        this.region = config_default.defaultConfig.region;
-        this.isFlyoutActive = false;
-        this.activeMetaLinkValue = undefined;
-        this.activeMenuLinkValue = undefined;
-        this.logo = undefined;
-        this.options = [];
-        this.linkItems = [];
-        this.buttons = [];
-        this.metaButtons = [];
     }
     createLogger(log) {
         this.log = log;
@@ -714,8 +692,8 @@ const Nav = class {
         if ('NavMenuLinkItem' === item.type) {
             this.activeMenuLinkValue = this.activeMenuLinkValue === item.value ? undefined : item.value;
         }
-        await helpers.waitForComponent(this.el);
-        await helpers.waitAfterIdleCallback();
+        await index.waitForComponent(this.el);
+        await index.waitAfterIdleCallback();
         const elementToScroll = this.el.querySelector(`#${item.id}`);
         if (elementToScroll) {
             elementToScroll.scrollIntoView({
@@ -787,7 +765,7 @@ const Nav = class {
                         activeMenuLinkValue: this.activeMenuLinkValue,
                         linkItems: this.linkItems,
                     });
-                    const isBackwards = helpers.isDescendant(this.el, ev.detail.relatedTarget);
+                    const isBackwards = index.isDescendant(this.el, ev.detail.relatedTarget);
                     handleFlyoutFocusOut(info, {
                         el: this.el,
                         isBackwards,
@@ -832,7 +810,7 @@ const Nav = class {
     }; }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-nav'),
+    index.Logger('bal-nav'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -856,19 +834,33 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", Promise)
 ], Nav.prototype, "configChanged", null);
 let NavIds = 0;
-Nav.style = BalNavStyle0;
+Nav.style = balNavCss;
 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 BalNavLinkStyle0 = balNavLinkCss;
 const NavLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the variant of the link
+         */
         this.variant = '';
+        /**
+         * If `true` the link gets selected with a underline
+         */
         this.selected = false;
+        /**
+         * If `true` the link can be clickable
+         */
         this.clickable = false;
-        this.rel = undefined;
-        this.href = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
         this.target = '_self';
     }
     createLogger(log) {
@@ -895,15 +887,14 @@ const NavLink = class {
     }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-nav-link'),
+    index.Logger('bal-nav-link'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavLink.prototype, "createLogger", null);
-NavLink.style = BalNavLinkStyle0;
+NavLink.style = balNavLinkCss;
 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 BalNavLinkGridStyle0 = balNavLinkGridCss;
 const NavLinkGrid = class {
     constructor(hostRef) {
@@ -922,19 +913,25 @@ const NavLinkGrid = class {
     }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-nav-link-grid'),
+    index.Logger('bal-nav-link-grid'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavLinkGrid.prototype, "createLogger", null);
-NavLinkGrid.style = BalNavLinkGridStyle0;
+NavLinkGrid.style = balNavLinkGridCss;
 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 BalNavLinkGridColStyle0 = balNavLinkGridColCss;
 const NavLinkGridCol = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the static column which is always aligned to the right
+         */
         this.staticCol = false;
     }
     createLogger(log) {
@@ -951,19 +948,25 @@ const NavLinkGridCol = class {
     }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-nav-link-grid-col'),
+    index.Logger('bal-nav-link-grid-col'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavLinkGridCol.prototype, "createLogger", null);
-NavLinkGridCol.style = BalNavLinkGridColStyle0;
+NavLinkGridCol.style = balNavLinkGridColCss;
 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 BalNavLinkGroupStyle0 = balNavLinkGroupCss;
 const NavLinkGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the color of the group
+         */
         this.color = '';
     }
     createLogger(log) {
@@ -980,22 +983,31 @@ const NavLinkGroup = class {
     }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-nav-link-group'),
+    index.Logger('bal-nav-link-group'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavLinkGroup.prototype, "createLogger", null);
-NavLinkGroup.style = BalNavLinkGroupStyle0;
+NavLinkGroup.style = balNavLinkGroupCss;
 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 BalNavMenuBarStyle0 = balNavMenuBarCss;
 const NavMenuBar = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.navMenuBarId = `bal-nav-menu-bar-${NavMenuBarIds++}`;
         this.isHidden = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Tells when to hide the bar
+         */
         this.invisible = 'none';
+        /**
+         * Defines the position of the bar
+         */
         this.position = 'none';
     }
     createLogger(log) {
@@ -1020,23 +1032,29 @@ const NavMenuBar = class {
     get el() { return index.getElement(this); }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-nav-menu-bar'),
+    index.Logger('bal-nav-menu-bar'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavMenuBar.prototype, "createLogger", null);
 let NavMenuBarIds = 0;
-NavMenuBar.style = BalNavMenuBarStyle0;
+NavMenuBar.style = balNavMenuBarCss;
 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 BalNavMenuFlyoutStyle0 = balNavMenuFlyoutCss;
 const NavMenuFlyout = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.balFocusOut = index.createEvent(this, "balFocusOut", 7);
+        this.balFocusOut = index.createEvent(this, "balFocusOut");
         this.bodyScrollHandler = new scroll.BalScrollHandler();
         this.isHidden = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * This is used to connect the flyout to the aria controls
+         * */
         this.navId = `bal-nav-x${NavMenuFlyOutIds++}`;
     }
     createLogger(log) {
@@ -1057,7 +1075,7 @@ const NavMenuFlyout = class {
      * ------------------------------------------------------
      */
     onFocusLeave(event) {
-        if (this.el && event.relatedTarget && !helpers.isDescendant(this.el, event.relatedTarget)) {
+        if (this.el && event.relatedTarget && !index.isDescendant(this.el, event.relatedTarget)) {
             this.balFocusOut.emit(event);
         }
     }
@@ -1089,7 +1107,7 @@ const NavMenuFlyout = class {
     get el() { return index.getElement(this); }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-nav-menu-flyout'),
+    index.Logger('bal-nav-menu-flyout'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
@@ -1101,10 +1119,9 @@ tslib_es6.__decorate([
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavMenuFlyout.prototype, "resizeListener", null);
 let NavMenuFlyOutIds = 0;
-NavMenuFlyout.style = BalNavMenuFlyoutStyle0;
+NavMenuFlyout.style = balNavMenuFlyoutCss;
 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%;z-index:var(--bal-z-index-navigation)}.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: 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;-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:0;z-index:var(--bal-z-index-navigation)}.bal-nav-meta-bar-transform-small{-webkit-transform:translateY(-3rem);transform:translateY(-3rem)}.bal-nav-meta-bar-transform-normal{-webkit-transform:translateY(-5rem);transform:translateY(-5rem)}";
-const BalNavMetaBarStyle0 = balNavMetaBarCss;
 const NavMetaBar = class {
     constructor(hostRef) {
@@ -1112,10 +1129,29 @@ const NavMetaBar = class {
         this.navMetaBarId = `bal-nav-meta-bar-${NavMetaBarIds++}`;
         this.previousY = 0;
         this.isHidden = false;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines if the bar should stay on top of the backdrop
+         */
         this.stayOnTopOfBackdrop = false;
+        /**
+         * Defines the color variant
+         */
         this.variant = 'primary';
+        /**
+         * Defines the height of the bar
+         */
         this.size = 'normal';
+        /**
+         * Tells when to hide the bar
+         */
         this.invisible = 'none';
+        /**
+         * Defines the position of the bar
+         */
         this.position = 'none';
     }
     createLogger(log) {
@@ -1126,7 +1162,7 @@ const NavMetaBar = class {
      * ------------------------------------------------------
      */
     handleScroll() {
-        if (browser.balBrowser.hasWindow && browser.balBrowser.hasDocument && this.position === 'sticky-top') {
+        if (index.balBrowser.hasWindow && index.balBrowser.hasDocument && this.position === 'sticky-top') {
             const maxScrollHeight = document.body.scrollHeight - document.body.clientHeight;
             const isOnTop = 0 >= window.scrollY;
             const isOverViewportTop = 0 > window.scrollY;
@@ -1167,13 +1203,13 @@ const NavMetaBar = class {
     get el() { return index.getElement(this); }
 };
 tslib_es6.__decorate([
-    log.Logger('bal-meta-bar'),
+    index.Logger('bal-meta-bar'),
     tslib_es6.__metadata("design:type", Function),
     tslib_es6.__metadata("design:paramtypes", [Function]),
     tslib_es6.__metadata("design:returntype", void 0)
 ], NavMetaBar.prototype, "createLogger", null);
 let NavMetaBarIds = 0;
-NavMetaBar.style = BalNavMetaBarStyle0;
+NavMetaBar.style = balNavMetaBarCss;
 exports.bal_nav = Nav;
 exports.bal_nav_link = NavLink;