npm - @baloise/ds-core - Versions diffs - 17.2.1 → 17.2.2 - Mend

@baloise/ds-core 17.2.1 → 17.2.2

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 (766) hide show

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

@@ -1,22 +1,21 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-5b1faf93.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
-import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers-72ae7307.js';
-import { L as ListenTo } from './listen-d1712e70.js';
-import { b as balBreakpoints } from './breakpoints.subject-0764e6ff.js';
+import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers-32d9e1cc.js';
+import { b as balBreakpoints } from './breakpoints.subject-fe3d9635.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
-import { L as ListenToMutation } from './mutation.decorator-74831883.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-a8efc52b.js';
+import { L as ListenToMutation } from './mutation.decorator-0c202bed.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ba81f8bc.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import { L as ListenToResize } from './resize.decorator-f2d8461d.js';
+import { L as ListenToResize } from './resize.decorator-bd416c47.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-69df759d.js';
+import './tokens.esm-7af7e766.js';
 class NavLinkItem {
     constructor(item, observer) {
@@ -357,7 +356,7 @@ const i18nNavBars = {
     },
 };
-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,.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-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-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-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-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 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,.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 {
@@ -628,7 +627,7 @@ const Nav = class {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: '9850048bcb764e760f50c6f54f39a094e8113da4', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'c6b2985da610cdbaee3f8cdd9be9f7e5d3f9c026', class: {
+        return (h(Host, { key: 'dcde56b80395603196d61c50e390c7c3df510680', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'b986a4c340c59fd9377da61b41882bdc66a1380c', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -638,7 +637,7 @@ const Nav = class {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '9e8d533088aea08856b7b6a03a7fec62fdab2698' }, h("slot", { key: 'daba1f88b1d7d20049682646c7cdd5cfe289d9f9' }))), 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: '60b9a9262fed2743ecbb0db2bc3b0d41de33c3b5' }, h("slot", { key: 'b055497b867fd6db856295fa516cc5b36a3f45fe' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
             activeMetaLinkValue: this.activeMetaLinkValue,
             activeMenuLinkValue: this.activeMenuLinkValue,
         })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -681,18 +680,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Nav.prototype, "createLogger", null);
-__decorate([
-    ListenTo('balChange'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], Nav.prototype, "listenToPopupChanges", null);
-__decorate([
-    ListenTo('click', { target: 'document', passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", Promise)
-], Nav.prototype, "clickOnOutside", null);
 __decorate([
     ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
     __metadata("design:type", Function),
@@ -743,10 +730,10 @@ const NavLink = class {
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (h(Host, { key: '538d4bc561eec9c4c4d88a16efbd22ccc61517ec', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: '68ac516eb7190bbc532cfd108854cf1329110984', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
+        return (h(Host, { key: '94718986eda442992d83a9b40e26bf595d523dce', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: 'cf8106036e3366712fff52d08e8c1567873014be', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
                 .element('native')
                 .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '8b705b4c113a3272dcc68d798dce816f13343363' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: 'f9ab826645c95e02cf1b1ccfa2df34b637a67d13' }))));
     }
 };
 __decorate([
@@ -773,7 +760,7 @@ const NavLinkGrid = class {
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
+        return (h(Host, { key: '03e4b64a2041c0fb36d94fd061eb9352a38446ed', class: Object.assign({}, block.class()) }, h("slot", { key: '7f7eb07e433531b6d0dab67b4a89e7faab742b51' })));
     }
 };
 __decorate([
@@ -802,7 +789,7 @@ const NavLinkGridCol = class {
     render() {
         const block = BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (h(Host, { key: '570396a3ad6882891cfefebf9d92dae1137a3f48', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '86f6add382f5accf09aef4593b16281268af8241', class: Object.assign({}, innerEl.class()) }, h("slot", { key: '57160d0fd8135f4d8a4d955a019ae41b28fc2123' }))));
+        return (h(Host, { key: 'd207c87255663724d4cdefb411665804c0d614bf', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '8fa5bf2182f99d55463202ecb68aa490ac741510', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'a04eb96c4706a99724d7955aa1a0ce0ef0be4690' }))));
     }
 };
 __decorate([
@@ -831,7 +818,7 @@ const NavLinkGroup = class {
     render() {
         const block = BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (h(Host, { key: '7594abd236200ade0063149fcbe2985e37c0ec9f', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '42ceaea3299c69ddaa535b4fb47438816e11323b' })));
+        return (h(Host, { key: '83e07dc3e48315f8c8196f54cda2e371eeb9d297', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: 'e54ab919fba4f5a400b753d05c9545d8368e7e9c' })));
     }
 };
 __decorate([
@@ -870,7 +857,7 @@ const NavMenuBar = class {
     render() {
         const block = BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (h(Host, { key: '4b2520319f467e9fc3cf0b7e1bece33c3e605915', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { key: '6ecb9f3e785c318c05064ab6f9e18a7c1774cd49', class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'e809ddfb4b672a29852c44ab59c82e35fa5b6ac4', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'b249113bdb2b5289a213a3ff2782cd958ac7d923' })))));
+        return (h(Host, { key: '408438f50a37356d275fd30fb3793334293553ea', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { key: '81a5b4b94fff712cdd9ee7479e40694df1f07107', class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'd45071ac59862cf928d1d21ea0510f9840255ed9', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '4d9c8f32c524223f76906671f28d3891f353e4b2' })))));
     }
     get el() { return getElement(this); }
 };
@@ -933,7 +920,7 @@ const NavMenuFlyout = class {
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: 'd2de6257fc31499b2d26204ee0db07a4e079144b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '6392e2be737b3f5c11dd83602f210d1a263c7a5f', class: Object.assign({}, line.class()) }), h("div", { key: 'b6d06ea36310b6ed5975f2bae2f57e65d1e29f82', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '38566fffa659f0661e3cb7ca7535c6a7f244b696' }))));
+        return (h(Host, { key: '60bf384edb49a6686374e4f473758745e2771945', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'a234f10624799caf4c183c608fda3ccdb3e39446', class: Object.assign({}, line.class()) }), h("div", { key: 'b96460b50a8ea76acdcbb4c464e90f4416009b2d', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '0d02f07430f4d05c58627866a131e5bee32b3e51' }))));
     }
     get el() { return getElement(this); }
 };
@@ -1010,7 +997,7 @@ const NavMetaBar = class {
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: 'c78fff46b1798a4d4d2a26152b1005694c2a3534', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'a0ba3a8f0942a67fc2d1d6e795b288f9dd12d621', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '7428dc9ba14777bf263aa62c5a91634efdbc70d5' }))));
+        return (h(Host, { key: '5436cb6898cdaecac4f0304b8dd62484b5a8a231', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: 'f7ed5d2c6a334ad586baf75a5b87132a4460f065', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'c60750b340d6f1276d45efa7a786b142938d73a4' }))));
     }
     get el() { return getElement(this); }
 };
@@ -1020,12 +1007,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NavMetaBar.prototype, "createLogger", null);
-__decorate([
-    ListenTo('scroll', { target: 'window', passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "handleScroll", null);
 let NavMetaBarIds = 0;
 NavMetaBar.style = BalNavMetaBarStyle0;

package/dist/esm/bal-navbar_5.entry.js CHANGED Viewed

@@ -1,16 +1,16 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-5b1faf93.js';
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-8d2a7ce7.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
 import { b as balBrowser } from './browser-a8073d92.js';
+import { i as wait, h as deepReady } from './helpers-32d9e1cc.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { f as deepReady } from './helpers-72ae7307.js';
-import { b as balBreakpoints } from './breakpoints.subject-0764e6ff.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-a8efc52b.js';
+import { b as balBreakpoints } from './breakpoints.subject-fe3d9635.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ba81f8bc.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-69df759d.js';
+import './tokens.esm-7af7e766.js';
 const balNavbarCss = ":root{--bal-navbar-background:var(--bal-color-primary);--bal-navbar-light-background:var(--bal-color-white);--bal-navbar-active-menu-background:var(--bal-color-white);--bal-navbar-height:4rem;--bal-navbar-height-desktop:5rem;--bal-navbar-brand-title-text-color:var(--bal-color-text-white);--bal-navbar-brand-title-font-size:var(--bal-text-size-medium);--bal-navbar-brand-title-light-text-color:var(--bal-color-text-primary);--bal-navbar-brand-text-color:var(--bal-color-text-white);--bal-navbar-brand-logo-link-color:var(--bal-color-text-white)}.bal-navbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block}.bal-navbar--context-app:not(.bal-navbar--is-light),.bal-navbar--context-simple:not(.bal-navbar--is-light){background:var(--bal-navbar-background)}.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height);max-height:var(--bal-navbar-height)}@media screen and (min-width: 1024px){.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height-desktop);max-height:var(--bal-navbar-height-desktop)}}.bal-navbar__nav{display:-ms-flexbox;display:flex;height:100%;gap:1rem}.bal-navbar__brand{-ms-flex:1;flex:1;gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{-ms-flex:initial;flex:initial}}.bal-navbar__brand>a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);-o-object-fit:contain;object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__title{display:none;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-navbar__brand__title>bal-logo{display:none}@media screen and (min-width: 769px),print{.bal-navbar__brand__title{display:inline-block;font-size:var(--bal-navbar-brand-title-font-size);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);color:var(--bal-navbar-brand-title-text-color)}}@media screen and (min-width: 1024px){.bal-navbar__brand__title{font-size:var(--bal-navbar-brand-title-font-size)}}.bal-navbar__brand--context-app,.bal-navbar__brand--context-simple{color:var(--bal-navbar-brand-text-color)}.bal-navbar__brand--context-app>a,.bal-navbar__brand--context-simple>a{color:var(--bal-navbar-brand-logo-link-color)}.bal-navbar__menu{position:static;display:none;z-index:var(--bal-z-index-navigation)}@media screen and (max-width: 1023px){.bal-navbar__menu--active{position:fixed !important;display:block;background:var(--bal-navbar-active-menu-background)}}@media screen and (max-width: 1023px){.bal-navbar__menu--context-app{padding-top:1rem;padding-bottom:1rem;overflow-y:auto;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex:1;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{-ms-flex-pack:start;justify-content:flex-start}.bal-navbar__menu__end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;gap:.5rem}.bal-navbar__menu__end .button-label{word-break:keep-all !important}.bal-navbar__menu__end .bal-button-group{width:100%}@media screen and (max-width: 1023px){.bal-navbar__menu__end .bal-button-group{margin-top:2rem}}.bal-navbar__menu__end--context-simple>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.bal-navbar__menu__end>.field{-ms-flex:1;flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal)}.bal-navbar--is-light .bal-navbar__brand__title{color:var(--bal-navbar-brand-title-light-text-color)}.bal-navbar--is-light bal-logo svg svg,.bal-navbar--is-light bal-logo svg g,.bal-navbar--is-light bal-logo svg path,.bal-navbar--is-light bal-logo svg circle{fill:var(--bal-color-primary)}.bal-navbar__brand__burger.bal-button{margin-left:auto}@media screen and (min-width: 1024px){.bal-navbar__brand__burger.bal-button{display:none}}.bal-navbar__brand__burger--hidden.bal-button{display:none !important}";
 const BalNavbarStyle0 = balNavbarCss;
@@ -40,7 +40,7 @@ const Navbar = class {
     }
     render() {
         const navbarEl = BEM.block('navbar');
-        return (h(Host, { key: 'dddbbeaef348b9ff101743f71451f6d84ac72951', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'ba4bb4f5ea156b0a2b4ba5f54f8d80b41477ee6b', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '647ff400273d4cd92574d5f46aff07aad2b2c810' }))));
+        return (h(Host, { key: 'c0a7e51b1f0b6cf601943198f5c116325c5115ce', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'c042e875f2b62bc58fd06851bd1a4d371a2e8080', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '84e0ffcd250b6f4806d8c5d6ca4fc86bb3dbfe4a' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -100,6 +100,9 @@ const NavbarBrand = class {
                 await navbarMenuElement.toggle(this.isMenuActive);
             }
         }
+        // wait for the default animation time to ensure
+        // the line of the tabs is at the correct position
+        await wait(300);
         this.balDidAnimate.emit(this.isMenuActive);
     }
     async onClick() {
@@ -108,7 +111,7 @@ const NavbarBrand = class {
     render() {
         const navbarBrandEl = BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
-        return (h(Host, { key: 'bd905e5548b3eba587403d1de9e19578caf654fe', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'e94ee28b3f46017080ebb7dfe03ffe62bfa721da', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: 'faa690ef810fbb6444d577bc2aaad0412bbd1f92' })), h("bal-button", { key: '7ec55643796d5c32ea3cbbc70359100b5798ff66', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: '5a19618c04c539ac05ae44950d5642724f345d8f', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'bac65d94bd398e028a0bf4159df01af8e346eb7c', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '67808a0a311e2cb423d4f6cf2eaa6cb0b70062d8' })), h("bal-button", { key: '5d5a5d9602caec124e8163ebe54fc66b363d65c9', 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() })));
@@ -146,7 +149,7 @@ const NavbarMenu = class {
                 container = navbarEl.container;
             }
         }
-        return (h(Host, { key: '6b0a857bff0929177b51e75b2e5e26ad51d9dc6a', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: 'e7919137bb34c15bc676a1617a79aac4111460fc' })));
+        return (h(Host, { key: '88676dca9a4def916347757f552fa1efe174d80d', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: '47d1c81229bf002f4404123dad97df4d92042f1c' })));
     }
     get element() { return getElement(this); }
 };
@@ -164,7 +167,7 @@ const NavbarMenuEnd = class {
     }
     render() {
         const menuEndEl = BEM.block('navbar').element('menu').element('end');
-        return (h(Host, { key: '10aa16f437f428adf6cb21c276aa16230aaad041', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'adadfb0d9bda6bb49613541c67bf9dced7a0ad4b' })));
+        return (h(Host, { key: '04f6df129b2db2428a8ee50e4c3316cf9cc143f9', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '0457213c0f02e87d1c2b30e7be6be3c0471fe3b9' })));
     }
 };
@@ -175,7 +178,7 @@ const NavbarMenuStart = class {
     }
     render() {
         const menuStartEl = BEM.block('navbar').element('menu').element('start');
-        return (h(Host, { key: '1d35806afa3206d429b351b9442375cd4a41133f', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '35baeb64effd472c64a148fb77fa91a604078f36' })));
+        return (h(Host, { key: '06f8898607ca2e126026864177931399c87819be', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'a1f9e79d3d0681c1c96734218cf5313f7cf95afb' })));
     }
 };

package/dist/esm/bal-notices_3.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-8d2a7ce7.js';
 const balNoticesCss = ".bal-notices{position:fixed !important;display:-ms-flexbox !important;display:flex !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;padding:1rem !important;margin:0 !important;overflow:hidden !important;z-index:var(--bal-z-index-toast) !important;pointer-events:none !important;-ms-flex-direction:column !important;flex-direction:column !important}.bal-notices .container{width:100% !important}.bal-notices.has-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:end;align-items:flex-end;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin:.5em}.bal-notices.has-snackbar .bal-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-item-align:end;align-self:flex-end;pointer-events:auto !important}.bal-notices.has-toast{-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;margin:.5em}.bal-notices.has-toast .bal-toast{-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:center;align-self:center}";
 const BalNoticesStyle0 = balNoticesCss;
@@ -9,11 +9,11 @@ const Notices = class {
         this.interface = 'toast';
     }
     render() {
-        return (h(Host, { key: 'f907ea5288441ecace35e9041ca37c50e249a9eb', class: {
+        return (h(Host, { key: '2f40e609d0b26b17d7b46c55fb5d509ad02920b6', class: {
                 'bal-app': true,
                 'bal-notices': true,
                 [`has-${this.interface}`]: true,
-            } }, h("slot", { key: '9f6fdf15e464f2682750f57812a4ff45e40b9612' })));
+            } }, h("slot", { key: 'f761cd73d1cfc480e0992c9b32cc6fd30eeca51e' })));
     }
 };
 Notices.style = BalNoticesStyle0;
@@ -80,7 +80,7 @@ const Snackbar = class {
         if (this.message !== undefined && this.message !== '') {
             labelAttributes.innerHTML = this.message;
         }
-        return (h(Host, { key: '025208382b976a13acddf5a3adfe83335015f346', id: this.snackbarId, class: "bal-snackbar" }, h("div", { key: 'f8f1516176a0bc0f13782dc5293da759cd6d9a3d', role: "alert", class: `bal-snackbar__inner ${this.animationClass} ${this.colorType}` }, h("div", { key: '8269a2d81217b90e9765a696824135c75bb7abd5', class: "bal-snackbar__header" }, h("span", { key: '811abcabe5fb53f70d611d89baa4c21efd101b66', class: "icon-text" }, h("span", { key: 'a32da69137a594c3f759c15c17072b0bbd512c3b', class: "icon", style: { display: this.icon ? '' : 'none' } }, h("bal-icon", { key: '4e0c29abdceb6ca9c08116ca9e441747e31e3865', name: this.icon, color: 'primary' })), h("bal-heading", { key: 'b13bb1286c21cbd33d29c35f234e855da29b5202', level: "h5", space: "none", "data-testid": "bal-snackbar-heading" }, this.subject))), h("span", Object.assign({ key: '2aafbb985aea6ea5be7730ab60745226506f9db2', class: "bal-snackbar__label", "data-testid": "bal-snackbar-label" }, labelAttributes), h("slot", { key: 'f85d16eb9ad20733633fc4d8869e8fc9836044b2' }), h("span", { key: '5fb81eb312a2106f338b34823a4e3144c47e3a94', class: "hidden" })), h("bal-close", { key: '11f42cbed4f48a8bf029b3e6bae6ecf537fd121c', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }), this.action ? (h("div", { class: "bal-snackbar__footer" }, h("bal-button", { color: "info", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : (''))));
+        return (h(Host, { key: '302d36cf1491bdb34cc87139c604c605b873dea8', id: this.snackbarId, class: "bal-snackbar" }, h("div", { key: '2d7d2e2c2fc3509d52d0079ba0e2dd024fafa27f', role: "alert", class: `bal-snackbar__inner ${this.animationClass} ${this.colorType}` }, h("div", { key: '80c1136fe846cc3393b36b20cd8b483ba5cdde2c', class: "bal-snackbar__header" }, h("span", { key: '43c09569ff714e596dc925532a6a23c62ad1480c', class: "icon-text" }, h("span", { key: '8d2631bfb6a6323a9b89279d428d04fa858ae222', class: "icon", style: { display: this.icon ? '' : 'none' } }, h("bal-icon", { key: 'e95d781626faf9691da3e26ea8cb02d036cd7783', name: this.icon, color: 'primary' })), h("bal-heading", { key: 'd07fa9dea7ab0008be54e971416e1df9e06043d1', level: "h5", space: "none", "data-testid": "bal-snackbar-heading" }, this.subject))), h("span", Object.assign({ key: '5596bf1d718f4609835316a9521522c8fcbd3f59', class: "bal-snackbar__label", "data-testid": "bal-snackbar-label" }, labelAttributes), h("slot", { key: 'c46f14807eaf146bde235c3bd121d401df670ed1' }), h("span", { key: '7a33a791aec0799c4650dfd1ba91c297d6e6156d', class: "hidden" })), h("bal-close", { key: 'b3565119bae15c11394786e0b0e9413f03417d88', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }), this.action ? (h("div", { class: "bal-snackbar__footer" }, h("bal-button", { color: "info", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : (''))));
     }
     get element() { return getElement(this); }
 };
@@ -127,7 +127,7 @@ const Toast = class {
         return `bal-toast__inner--is-${this.color}`;
     }
     render() {
-        return (h(Host, { key: '022b79aa15606a15256ff3a4a8ea327cd3d7badf', id: this.toastId, class: "bal-toast" }, h("div", { key: '13e4f7084f3d27ecec0729a229c4ced273b781d7', role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { key: 'ba07ca16899d4af96dbc8936e997a424b3c1b584', class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", { key: '059e7c7095f24eeefa2629e7fc168d1eda116a7c' })), h("bal-close", { key: '3efd56336ee10d4afbdf118c091ec9f306603450', class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
+        return (h(Host, { key: '98efc7e715868158761632175f1d5ebaf2109fef', id: this.toastId, class: "bal-toast" }, h("div", { key: '3d5562a482701cd6013749b5dac2e6b2d6b5452f', role: "alert", onClick: () => this.close(), class: `bal-toast__inner ${this.colorType}` }, h("span", { key: '394cdb2e5000ee33929093cf4e563bd729de44f8', class: "bal-toast__label", innerHTML: this.message, "data-testid": "bal-toast-label" }, h("slot", { key: '69731e615a6212359cfccf7089064525de7f0f89' })), h("bal-close", { key: 'd07cf7ad019afc147c24a7002415359640c19266', class: "bal-toast__close", inverted: false, "data-testid": "bal-toast-close" }))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/bal-notification.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-5b1faf93.js';
+import { r as registerInstance, h, H as Host } from './index-8d2a7ce7.js';
 const balNotificationCss = ":root{--bal-notification-font-size:var(--bal-text-size-normal);--bal-notification-font-family:var(--bal-font-family-text);--bal-notification-background:var(--bal-color-grey-2);--bal-notification-background-primary:var(--bal-color-grey-2);--bal-notification-background-info:var(--bal-color-info-2);--bal-notification-background-success:var(--bal-color-success-2);--bal-notification-background-warning:var(--bal-color-warning-2);--bal-notification-background-danger:var(--bal-color-danger-2);--bal-notification-radius:var(--bal-radius-large);--bal-notification-color:var(--bal-color-text-primary);--bal-notification-color-primary:var(--bal-color-text-primary);--bal-notification-color-info:var(--bal-color-text-primary);--bal-notification-color-success:var(--bal-color-text-primary);--bal-notification-color-warning:var(--bal-color-text-primary);--bal-notification-color-danger:var(--bal-color-text-primary)}.bal-notification{display:block;position:static}.bal-notification__inner{min-height:3.5rem;border-radius:var(--bal-notification-radius);font-size:var(--bal-notification-font-size);font-family:var(--bal-notification-font-family);background:var(--bal-notification-background);color:var(--bal-notification-color);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;padding:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-notification__inner{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-notification__inner{padding:var(--bal-space-medium-desktop)}}.bal-notification__inner--color-primary{background:var(--bal-notification-background-primary);color:var(--bal-notification-color-primary)}.bal-notification__inner--color-info{background:var(--bal-notification-background-info);color:var(--bal-notification-color-info)}.bal-notification__inner--color-danger{background:var(--bal-notification-background-danger);color:var(--bal-notification-color-danger)}.bal-notification__inner--color-warning{background:var(--bal-notification-background-warning);color:var(--bal-notification-color-warning)}.bal-notification__inner--color-success{background:var(--bal-notification-background-success);color:var(--bal-notification-color-success)}";
 const BalNotificationStyle0 = balNotificationCss;
@@ -9,7 +9,7 @@ const Notification = class {
         this.color = '';
     }
     render() {
-        return (h(Host, { key: '053bf4393f0f7a11eadd2ff98f870b0d7de1452c', class: "bal-notification" }, h("div", { key: 'afcaa942e5970f510df5e65aa5fdbf6fd9744919', class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, h("slot", { key: 'ee85e21689e226931c4c3dcbbbaa43741d05340a' }))));
+        return (h(Host, { key: '7afb73a04a3bc6174ad6945bb2e9cfd362acf360', class: "bal-notification" }, h("div", { key: '7707822b7569a46d1b35a76fd4be41f0ed366495', class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, h("slot", { key: 'e04c72f6f0b97f5df99ad9c8ce7aeacb9bf088b9' }))));
     }
 };
 Notification.style = BalNotificationStyle0;

package/dist/esm/bal-number-input.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { f as inputHandleClick, i as inputHandleHostClick, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, k as getNativeInputValue, l as getUpcomingValue, s as stopEventBubbling, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-264ad739.js';
-import { o as debounceEvent } from './helpers-72ae7307.js';
+import { f as inputHandleClick, i as inputHandleHostClick, a as inputHandleFocus, b as inputHandleBlur, e as inputHandleChange, k as getNativeInputValue, l as getUpcomingValue, s as stopEventBubbling, h as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-1f3d8337.js';
+import { p as debounceEvent } from './helpers-32d9e1cc.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { g as getNegativeSymbol, a as getDecimalSeparator, b as getThousandSeparator, f as formatLocaleNumber } from './number-54693efa.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
@@ -10,7 +10,6 @@ import { L as Logger } from './log-dfd1c19f.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant-0eb059e0.js';
 import { i as isEmpty } from './index-db06fb0e.js';
-import { L as ListenTo } from './listen-d1712e70.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './browser-a8073d92.js';
@@ -450,7 +449,7 @@ const NumberInput = class {
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: '25a122a19c18a933d55991cb22b29f6e2a96eb02', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'd9ef6e1d970f4ada012b65d2518fd793b44024c3', class: {
+        return (h(Host, { key: '6c70b82d9eb15c47fc4aee5246819c0a4fecc7fb', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '254dee1b9cb3c99f10e0c4b835e69552314ed6c4', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -468,18 +467,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], NumberInput.prototype, "createLogger", null);
-__decorate([
-    ListenTo('click', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], NumberInput.prototype, "listenOnClick", null);
-__decorate([
-    ListenTo('reset', { capture: true, target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [UIEvent]),
-    __metadata("design:returntype", void 0)
-], NumberInput.prototype, "resetHandler", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),

package/dist/esm/bal-option_2.entry.js CHANGED Viewed

@@ -1,14 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { a as ariaBooleanToString } from './aria-d5877698.js';
-import { s as stopEventBubbling } from './form-input-264ad739.js';
-import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-0f2107d8.js';
-import { L as ListenTo } from './listen-d1712e70.js';
+import { s as stopEventBubbling } from './form-input-1f3d8337.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-4cf6af31.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { b as waitAfterFramePaint, n as raf } from './helpers-72ae7307.js';
+import { b as waitAfterFramePaint, o as raf } from './helpers-32d9e1cc.js';
 import { s as startsWith, i as includes } from './utils-9fbab1d3.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
 import './browser-a8073d92.js';
@@ -112,7 +111,7 @@ const Option = class {
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: 'b69ef765d0cfd4e4e29743026b68c5c6c64f685c', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'fc345d890d6392f12c47c6775343170cf9ef9fce', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: 'd77888278aa8b163914eb3e58d852fc706563186', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: 'efb92bbd5efb31efec3c374ca0c123c9a2b1df3f' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: '2dbf49c5030c61a24ce0b2b8cb2fe0f1ede9895b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: '1ed42549cea2542e4eb56d7cfc6c1024dd13aa71', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '3f3c59ec2f04e77bd0400ec58b8294c3ecd7a1b7', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '04e84d67e23ba2e5bd59e5ddb7c4549327e77ce0' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return getElement(this); }
 };
@@ -122,12 +121,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Option.prototype, "createLogger", null);
-__decorate([
-    ListenTo('mouseenter'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], Option.prototype, "listenToMouseEnter", null);
 __decorate([
     ListenToElementStates(),
     __metadata("design:type", Function),
@@ -548,7 +541,7 @@ const OptionList = class {
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '7a07652540fa56fedaee410917d90d83e1979a39', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4dfd52f5cd7b87a1732fcba95d3db376d955be58', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '3f190f2b005335d2f1072f0857ea95c10ae0157d' }))));
+        return (h(Host, { key: '946ff4a59bf7e9202317d7898791f34006c90ee1', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '078d3ec40ac98bd470666e941b84119f89b9b5f9', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '18ddbc132a73787221f6bb7dbf483e1e26883a43' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -561,18 +554,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], OptionList.prototype, "createLogger", null);
-__decorate([
-    ListenTo('balOptionFocus', { passive: true }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], OptionList.prototype, "listenToMouseEnter", null);
-__decorate([
-    ListenTo('balOptionChange', { passive: false }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], OptionList.prototype, "listenToOptionChange", null);
 let balOptionListIds = 0;
 OptionList.style = BalOptionListStyle0;

package/dist/esm/bal-pagination.entry.js CHANGED Viewed

@@ -1,17 +1,17 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { b as balBreakpoints } from './breakpoints.subject-0764e6ff.js';
+import { b as balBreakpoints } from './breakpoints.subject-fe3d9635.js';
 import { d as defaultConfig } from './config.default-7efdc82d.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-a8efc52b.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ba81f8bc.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
-import './helpers-72ae7307.js';
+import './helpers-32d9e1cc.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-69df759d.js';
+import './tokens.esm-7af7e766.js';
 import './log-dfd1c19f.js';
 function generatePaginationControl(value, totalPages, pageRange) {
@@ -236,10 +236,10 @@ const Pagination = class {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { key: '8d0f477acb2db965fe7ca9a323db754dadb8c2d1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '25bc274a3580f3103acb6aa21bb0f132da31a4cd' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: '635a052d90c4d86104752eedf70d28d60a3ea194', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (h("ul", { key: '36bc734dd92d55f93cae88e34c032fbae5239ae2', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (h(Host, { key: '1f6888814e691b8f4b46987055e3d474078bac38', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '00eba4def4d24082f102861ef471043c3646a18a', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: '068a1d8b79deecd129b3280ac4eefb4e6c7ef814', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '0ceeb68b1426edc0b1425b6bb1236941534ead5d', name: "nav-go-left", size: "small" })), h("bal-button", { key: '3eb18c38c467b0f8bfc2326341e93e236567c060', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: 'fa8feb6b44def140d75218f387fcfdbb984bd99a', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '6fd9b27bbc3078a95b6a1af21c4e11bef1c79e4d', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: 'f33eb6a8a51bd338c062bf3ac142b31ec170b4bf' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: 'af2f5c1c4582c9f87a34ae8d9e18e6f153d6c079', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: 'e60525e50e001e65e0f3dfdcab2be7c577d1cb34', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: 'a82c3987b261b090d73a6a326b0628e9f4431de7', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '3558d69404ce4877651363ffe60f5bf37428a316', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: 'a7e00cae2c81d3970f946ac21ab56564a10786a7', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '3b3974da7c2f8d195711d912083ef8021e3d71ca', name: "nav-go-left", size: "small" })), h("bal-button", { key: '1fb819a459e3851768a5664b0bcb8ae6bdfffc83', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: '28bb33f69928d49ea196efc60f0a539c985c6936', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bal-popup.entry.js CHANGED Viewed

@@ -1,14 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5b1faf93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { b as balBrowser } from './browser-a8073d92.js';
-import { s as stopEventBubbling } from './form-input-264ad739.js';
-import { j as debounce } from './helpers-72ae7307.js';
+import { s as stopEventBubbling } from './form-input-1f3d8337.js';
+import { k as debounce } from './helpers-32d9e1cc.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { f as focusableQueryString } from './focus-visible-f0cdd043.js';
-import { L as ListenTo } from './listen-d1712e70.js';
-import { b as balFloatingUi } from './floating-ui-82413f23.js';
-import { c as isEscapeKey } from './keyboard.helpers-b2dd6393.js';
+import { b as balFloatingUi } from './floating-ui-922202fe.js';
+import { c as isEscapeKey } from './keyboard.helpers-159e517d.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -607,7 +606,7 @@ const Popup = class {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: 'bf7416d06bf9b78fb1f45474dbadbdaef3716fa9', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '907ceff3eeb00380ba075a1c942c9593fa66d828', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'a07c2e70f1964142896ab0e2dddda63212d6e7a6', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: '09fbe89593e72dfa5eda05ce017dbfdaa368ab6c', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '486d20a16eef12b6398235a15d6771924d9909b2', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'd7210ff5af9647dbe4d176e00c7af06943bdd51a', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '974459f017b51844019872313636f7055357f2e1' }))))));
+        return (h(Host, { key: 'faca9751174d4d2f7348cb3b7a018d6e3d5e4401', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'c4e5cb86d6c3f72d4203579b13fdd492aae42e5d', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '34a7ae9a817a79c34514a38595fa21314912fd38', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: '66bca82705a14ba4051e4f6ff5ddb5e57ae4860f', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '370a9c46d9bbd75615a3e792fb735bbbd9e9eb60', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'c4abdbf963e98458d34819f5fd2614b33703a3e9', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '2a0407838f7814ecd8126c722afa02a333ed200a' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -622,36 +621,6 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], Popup.prototype, "createLogger", null);
-__decorate([
-    ListenTo('click', { target: 'window' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", Promise)
-], Popup.prototype, "listenOnGlobalClick", null);
-__decorate([
-    ListenTo('keydown', { target: 'document' }),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [KeyboardEvent]),
-    __metadata("design:returntype", Promise)
-], Popup.prototype, "listenOnKeyDown", null);
-__decorate([
-    ListenTo('mousedown'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", Promise)
-], Popup.prototype, "listenOnMouseDown", null);
-__decorate([
-    ListenTo('mouseup'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", Promise)
-], Popup.prototype, "listenOnMouseUp", null);
-__decorate([
-    ListenTo('click'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", Promise)
-], Popup.prototype, "listenOnComponentClick", null);
 let popupIds = 0;
 Popup.style = BalPopupStyle0;