@baloise/ds-core 18.3.0 → 19.0.0-nightly.20250512

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

@@ -5,16 +5,16 @@ 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-94c3fbac.js';
-import { b as balBreakpoints } from './breakpoints.subject-6b4e30ba.js';
+import { b as balBreakpoints } from './breakpoints.subject-c19884ad.js';
 import { d as defaultConfig } from './config.default-8e11a860.js';
 import { L as ListenToMutation } from './mutation.decorator-e915d053.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-3c6214ed.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ce089c47.js';
 import { L as ListenToConfig } from './config.decorator-42dba864.js';
 import { L as ListenToResize } from './resize.decorator-08f6286b.js';
 import './config.utils-cd529084.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-2ce9e0f4.js';
+import './tokens.esm-52d4f4c3.js';
 
 class NavLinkItem {
     constructor(item, observer) {
@@ -66,7 +66,7 @@ class NavLinkItem {
             h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
     }
     render(_context) {
-        return (h("bal-nav-link", { role: "listitem", href: this.href, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
+        return (h("bal-nav-link", { role: "listitem", href: this.href, rel: this.rel, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
     }
 }
 let NavLinkItemIDs = 0;
@@ -171,7 +171,7 @@ class NavMenuLinkItem extends NavLinkItem {
         const hasServiceLinkItems = this.serviceLinkItems && this.serviceLinkItems.length > 0;
         const isSelected = (context === null || context === void 0 ? void 0 : context.activeMenuLinkValue) === this.value;
         return (h("li", null,
-            h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }),
+            h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, rel: this.rel, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }),
             h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true, isVisible: isSelected }),
             hasSectionLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-section-list').class()), block
                     .element('mobile-section-list')
@@ -185,7 +185,7 @@ class NavMenuLinkItem extends NavLinkItem {
     render(context) {
         const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
         if (!hasChildren && this.isLink) {
-            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, "no-panel": true }));
         }
         return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 context === null || context === void 0 ? void 0 : context.onClick();
@@ -213,7 +213,7 @@ class NavMetaLinkItem extends NavLinkItem {
         const block = BEM.block('nav');
         const isSelected = (context === null || context === void 0 ? void 0 : context.activeMetaLinkValue) === this.value;
         return (h("li", null,
-            h(AccordionButton, { id: this.id, level: "meta", label: this.label, open: isSelected, link: this.mainLinkItems.length > 0 ? false : this.isLink, href: this.href, target: this.target, onClick: ev => this.onAccordionClick(ev) }),
+            h(AccordionButton, { id: this.id, level: "meta", label: this.label, open: isSelected, link: this.mainLinkItems.length > 0 ? false : this.isLink, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onAccordionClick(ev) }),
             isSelected ? h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev) }) : '',
             isSelected ? (h("hr", { class: Object.assign(Object.assign({}, block.element('line').class()), block.element('line').modifier('up').class()) })) : (''),
             isSelected && this.mainLinkItems && this.mainLinkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-menu-list').class()) }, this.mainLinkItems.map(item => item.renderTouch({
@@ -224,7 +224,7 @@ class NavMetaLinkItem extends NavLinkItem {
     }
     render(context) {
         if (this.isLink) {
-            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
+            return (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 (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 if (this.onClick) {
@@ -257,7 +257,7 @@ class NavMetaButton extends NavLinkItem {
     }
     renderAtMetaBar() {
         if (this.isLink) {
-            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, href: this.href, target: this.target, aria: {
+            return (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));
@@ -270,7 +270,7 @@ class NavMetaButton extends NavLinkItem {
     renderAtTouchTopMetaBar() {
         if (this.touchPlacement === 'top') {
             if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, target: this.target, aria: {
+                return (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));
@@ -316,62 +316,72 @@ let NavMetaButtonIDs = 0;
 
 const i18nNavBars = {
     de: {
-        meta: 'Hauptnavigation',
-        main: 'Subnavigation',
+        mainNavigation: 'Hauptnavigation',
+        navigation: 'Navigation',
+        subNavigation: 'Subnavigation',
         open: 'Menü öffnen',
         close: 'Menü schliessen',
     },
     en: {
-        meta: 'Main Navigation',
-        main: 'Sub Navigation',
+        mainNavigation: 'Main navigation',
+        navigation: 'Navigation',
+        subNavigation: 'Sub navigation',
         open: 'Open Menu',
         close: 'Close Menu',
     },
     fr: {
-        meta: 'Navigation principale',
-        main: 'Sous-navigation',
+        mainNavigation: 'Navigation principale',
+        navigation: 'Navigation',
+        subNavigation: 'Sous-navigation',
         open: 'Ouvrir le menu',
         close: 'Fermer le menu',
     },
     it: {
-        meta: 'Navigazione principale',
-        main: 'Sottomenu',
+        mainNavigation: 'Navigazione principale',
+        navigation: 'Navigazione',
+        subNavigation: 'Sottonavigazione',
         open: 'Apri Menù',
         close: 'Chiudi menù',
     },
     nl: {
-        meta: 'Hoofdnavigatie',
-        main: 'Subnavigatie',
+        mainNavigation: 'Hoofdnavigatie',
+        navigation: 'Navigatie',
+        subNavigation: 'Subnavigatie',
         open: 'Menu openen',
         close: 'Menu sluiten',
     },
     es: {
-        meta: 'Navegación principal',
-        main: 'Subnavegación',
+        mainNavigation: 'Navegación principal',
+        navigation: 'Navegación',
+        subNavigation: 'Subnavegación',
         open: 'Menú abierto',
         close: 'Cerrar menú',
     },
     pl: {
-        meta: 'Nawigacja główna',
-        main: 'Nawigacja podrzędna',
+        mainNavigation: 'Nawigacja główna',
+        navigation: 'Nawigacja',
+        subNavigation: 'Nawigacja podrzędna',
         open: 'Otwórz menu',
         close: 'Zamknij menu',
     },
     pt: {
-        meta: 'Navegação principal',
-        main: 'Subnavegação',
+        mainNavigation: 'Navegação principal',
+        navigation: 'Navegação',
+        subNavigation: 'Subnavegação',
         open: 'Menu aberto',
         close: 'Fechar menu',
     },
     sv: {
-        meta: 'Huvudnavigering',
-        main: 'Undernavigering',
+        mainNavigation: 'Huvudnavigering',
+        navigation: 'Navigering',
+        subNavigation: 'Undernavigering',
         open: 'Öppna menyn',
         close: 'Stäng menyn',
     },
     fi: {
-        meta: 'Päänavigointi',
-        main: 'Alinavigointi',
+        mainNavigation: 'Päänavigaatio',
+        navigation: 'Navigaatio',
+        subNavigation: 'Alinavigaatio',
         open: 'Avaa valikko',
         close: 'Sulje valikko',
     },
@@ -648,17 +658,17 @@ const Nav = class {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: '4d861d5a9beb8d5a0ac04a0471f0d5f49f8f4d27', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'cda5b1e8f0da114d3056b4f3a9d2d5a740ceb1c9', class: {
+        return (h(Host, { key: 'c384e25a9962ec11739b7594114d2ad19fd07937', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '06cf6bb549c278c98b41ef3d176ac58dfe95bacc', 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, "aria-label": i18nNavBars[this.language].meta, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
+            } }, 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, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
             flyoutId: `${this.navId}-menu-flyout`,
-        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].main }, (_a = this.linkItems
+        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].navigation }, (_a = this.linkItems
             .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map(item => item.render({
             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: '9159bbd2df222728e0249283ab2cc61425aefd22' }, h("slot", { key: '7af191383a98cfa549796c43c9b1034a6de2b83d' }))), 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({
+        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation }, 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: '7b17b61ea275f90fb5016d8ec0d26dece26caa4f' }, h("slot", { key: '8ae80d7fdacd29e171f136bfe3ace823290ff068' }))), 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())))) : ('')));
@@ -731,6 +741,7 @@ const NavLink = class {
         this.variant = '';
         this.selected = false;
         this.clickable = false;
+        this.rel = undefined;
         this.href = undefined;
         this.target = '_self';
     }
@@ -743,18 +754,18 @@ const NavLink = class {
      */
     render() {
         const block = BEM.block('nav-link');
-        const { href, target } = this;
+        const { href, target, rel } = this;
         const hasLink = href !== undefined && href !== '';
         const hasVariant = this.variant !== '';
         const Link = hasLink ? 'a' : this.clickable ? 'button' : 'span';
         let linkAttributes = {};
         if (hasLink) {
-            linkAttributes = { href, target };
+            linkAttributes = { href, target, rel };
         }
-        return (h(Host, { key: '0a4cc0341e4aa5e2d5e8277eb89fb2678dcc03dc', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: '662178959afa6596e0e9f89bb4a9fdd5c608277d', "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: 'fe011833d71cd4fc35585f27ee3cb8fe11dadfb8', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: 'e5175d94a5b5021e22b26116f36aba0bb28a9dcf', "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: '055e0eac728e115ba335c8b54c14b59572161444' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '9189d57ba3a0f78af5c2ac4232c9231d6096ae02' }))));
     }
 };
 __decorate([
@@ -781,7 +792,7 @@ const NavLinkGrid = class {
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { key: '74041f35372c9f2e7fdf95e62264fea35c4821a7', class: Object.assign({}, block.class()) }, h("slot", { key: '4f671f702bcb4910ccf31e6197970bdfa943424e' })));
+        return (h(Host, { key: '7e58a9b6c677d60837d56404af5f6b03a7d96073', class: Object.assign({}, block.class()) }, h("slot", { key: '4e7abb8d92056b3f99b42ebad4c1d7752cffca4e' })));
     }
 };
 __decorate([
@@ -810,7 +821,7 @@ const NavLinkGridCol = class {
     render() {
         const block = BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (h(Host, { key: '3108a6561188ed77091b569d6e14160796e3dcf6', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '4a328de41e4e38eeafef399b59ced751d247e8ba', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'c42ced5cc61dc8182991b32eba3b4edd0661bd46' }))));
+        return (h(Host, { key: 'b4cba3fc9a569b19d2921f0f728d8865b97ccd55', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '36c2d569a02ea2dc1adb8ecedaab21576f61c0dc', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'c99e184492ca2665cdebad028cd3ab3e97d3249a' }))));
     }
 };
 __decorate([
@@ -839,7 +850,7 @@ const NavLinkGroup = class {
     render() {
         const block = BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (h(Host, { key: 'b7224f7859d490b219fcdfadd2c4c33170fb07f2', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: 'd7054bf0d35e99ec9e54edcf3f2b8878c87ac5df' })));
+        return (h(Host, { key: '12c1c4d22dc3827a4c186c6591b7b043f1dd378b', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '0c503bfaa7b2587f50936cc3d699e5a1bd9995a7' })));
     }
 };
 __decorate([
@@ -878,7 +889,7 @@ const NavMenuBar = class {
     render() {
         const block = BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (h(Host, { key: 'a563dcfc6d647f400c20b13df79820c0ce88ea19', 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: 'ec04e09581a0efd9029e20960fd340210cd4a773', class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'de47464fad24e5ed10ac355fdaac926abcc7583c', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'a9624e3e83245fcddd0be123b0268b5ca0175041' })))));
+        return (h(Host, { key: 'c2ea73c8876d06127c4fee24edf6a2ecc623f199', 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: 'd59d5d00f628748b91964b61692cca01d609a005', class: Object.assign({}, innerBlock.class()) }, h("div", { key: '3afd6861fef7c4d6e2b3d41bd7e626daa4aa06b1', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '380e064513ba797a10145e73bdc76dfe81dafaf6' })))));
     }
     get el() { return getElement(this); }
 };
@@ -941,7 +952,7 @@ const NavMenuFlyout = class {
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: 'cc30e95d5a4f6037371cf4158a11b2ba832e98e0', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'c28934d355eda16304e02820fb85f373c8e7aaa1', class: Object.assign({}, line.class()) }), h("div", { key: '0dd9801e8bc0dc277251b353b2efe78f5499dd15', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '3d0e74c391e039a205ae77710151d03e8c94620f' }))));
+        return (h(Host, { key: '9d0c52ef158adb1dcdddff70f32c0b4846696577', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '3405126297ac245862a006b2fd83f147e615d001', class: Object.assign({}, line.class()) }), h("div", { key: '2a8707468c3e6886dd91e6cf792de8e0e0f97aa9', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '7c98fd49abc6e6f3ff3e2dffd49f4ec69df72788' }))));
     }
     get el() { return getElement(this); }
 };
@@ -1018,7 +1029,7 @@ const NavMetaBar = class {
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: '700eeb85fa353dc0059dd1b1d3e2e1bb58c3a381', 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: '880efb6d57db1adb168e312c75f0bf0acdb54c6b', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'e2de7fdbd8e7ef205dc22bb23f9bcdb83c808add' }))));
+        return (h(Host, { key: 'c7aa3ccfe8e8b41e12c2e625eac9d23aba77ded3', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: '0ad94b6ef1580bb8ae907d0ebe53721c32cee0f8', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '9cebb426b75f0d2cd743aa9e0efc26d1c584768c' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -6,13 +6,13 @@ import { i as wait, h as deepReady } from './helpers-94c3fbac.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
 import { d as defaultConfig } from './config.default-8e11a860.js';
 import { L as ListenToConfig } from './config.decorator-42dba864.js';
-import { b as balBreakpoints } from './breakpoints.subject-6b4e30ba.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-3c6214ed.js';
+import { b as balBreakpoints } from './breakpoints.subject-c19884ad.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ce089c47.js';
 import './config.utils-cd529084.js';
 import './log-dfd1c19f.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-2ce9e0f4.js';
+import './tokens.esm-52d4f4c3.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;
@@ -42,7 +42,7 @@ const Navbar = class {
     }
     render() {
         const navbarEl = BEM.block('navbar');
-        return (h(Host, { key: 'bc3b4a7517b5f96970b7c3c65d7d496c4829a644', 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: '4df024c578399098ab513995f9d302ecdd1b2f63', 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: '45710ae4fd3b25cf23be8c5bf25bada4cfac312f' }))));
+        return (h(Host, { key: 'fd92bf967ce7199269234da14b2a9612c56cbb06', 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: '7e172f369abc559d4e9ccdaee88631d8480f6704', 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: '7970369d6f3a5538884a29a30db863acf6f9061b' }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -157,7 +157,7 @@ const NavbarBrand = class {
         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 }));
         const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
-        return (h(Host, { key: '6492bf4163017452e6fcbd3e75f067db73e631d7', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '026a303393f964c22eecc94b92468832a5d3594a', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '632838cf1193499f8751a340e4ed897dc7d01d54' })), h("bal-button", { key: '44e63c04ba674399b60eeedf58f5b3ce680dd939', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: '1c5a31aedc7120f89f9a1b31d25bd00b724de889', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'b6347efe529507db4f4b4f78352fc82c957f71fc', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '4357757d01e9ccc0d497ea04021c64fa06bea1a8' })), h("bal-button", { key: '35e86c5414289bb937a4aab0c5c8bbdc0a27d67a', 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() })));
@@ -201,7 +201,7 @@ const NavbarMenu = class {
                 container = navbarEl.container;
             }
         }
-        return (h(Host, { key: '82e424f6a56e40091320eee01e849dd5ac9853f3', 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: '2a9e2c5b3e4d9e55372107d9096ff7ea7b0b69be' })));
+        return (h(Host, { key: 'e3632d31af2bf0bbd0bc416c40ff17ed7cd3a74f', 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: '63897a0b6c61e222fc3f87051c1f4cf89d27be5a' })));
     }
     get element() { return getElement(this); }
 };
@@ -219,7 +219,7 @@ const NavbarMenuEnd = class {
     }
     render() {
         const menuEndEl = BEM.block('navbar').element('menu').element('end');
-        return (h(Host, { key: 'c48d9c4cf059e64185d2c873f951cd5e2e133665', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'e956c085b46e4fbe1f655e161b92c81a08f398de' })));
+        return (h(Host, { key: '704fe4c50701625f0160aa39a79a5fc3e2f9debb', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '05737e744803b4b62906ab835d555d1c9cc6cf98' })));
     }
 };
 
@@ -230,7 +230,7 @@ const NavbarMenuStart = class {
     }
     render() {
         const menuStartEl = BEM.block('navbar').element('menu').element('start');
-        return (h(Host, { key: '9694a2d3843c5d010a6523e404e7feaea40a8183', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '29fb9854fd7de27e095c6ab141be4f005a00e535' })));
+        return (h(Host, { key: 'b53e1c198366eeca89e5d71bf52af297902307a8', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '3e123a521d151135d72001d1b3ac703d236a4c8f' })));
     }
 };
 

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

@@ -15,7 +15,7 @@ const Notices = class {
         const block = BEM.block('notices');
         const innerEl = block.element('inner');
         const hasContainer = this.interface === 'toast' && this.container !== undefined;
-        return (h(Host, { key: '914b7643a3297d183e7b1751afc8252ed75e2176', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: '7e2d3a0980a58c9b2f0b69d06bae71779e81d90b', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'db39f336699c3de8776f56ec79630e0221444114' }))));
+        return (h(Host, { key: '83c73f66abe9dc3abf4181c43af09fc4ce7f3b7a', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: 'f16cd17c52f0df45500e9be985fc099c5c134cf6', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'bdf0fc55a2b9d63fed14821e8e83553394052ac2' }))));
     }
 };
 Notices.style = BalNoticesStyle0;
@@ -94,7 +94,7 @@ const Snackbar = class {
             success: 'check-circle',
         };
         const icon = isIconDefined ? this.icon : colorIcons[this.color || 'info'];
-        return (h(Host, { key: 'b3915c5a567dc89a8ec7145a7ab98498ca97b66d', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, h("div", { key: 'ae6759e051630b2c9fe51c7d24d931e30737376d', class: Object.assign({}, detailsEl.class()) }, h("div", { key: 'dfb41b163dfb1ec063576c487769102bd2c52c40', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign({}, detailsEl.element('icon').class()), detailsEl.element('icon').modifier('masked').class(!isIconDefined)), detailsEl.element('icon').modifier(`color-${this.color}`).class(!isIconDefined)) }, isIconDefined ? h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), h("div", { key: '75a34eb777fbf3c9d8ffdc431a155183888fe5ad', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: '7aecaed230c536db0771eb4060a20f8d89b737fa', id: subjectId }, this.subject), h("span", Object.assign({ key: '660cdb87938ee2d5e48bb103dbdb573deafbf088' }, messageAttributes), h("slot", { key: '8a9a874dca0cfce2771f4af4a356e7783d2efada' }), h("span", { key: '988af9ec4c07a0a07f82f0036931cd1dad15a13c', class: "hidden" }))), h("div", { key: 'be82a69b4dc2f4e42ba9f55e7f7af403ce0136cd', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '9b999204c4f1fbdb215161ae08ebec3c8ae21658', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
+        return (h(Host, { key: '4a1920c0a2bd21295fd3c8b6f14204f2cffd24fc', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, h("div", { key: '07e829354ae42deae93d2514e8a1705ed2324333', class: Object.assign({}, detailsEl.class()) }, h("div", { key: '33ea4a6d4c6571f5584a13b32dd0814ee532a4e0', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign({}, detailsEl.element('icon').class()), detailsEl.element('icon').modifier('masked').class(!isIconDefined)), detailsEl.element('icon').modifier(`color-${this.color}`).class(!isIconDefined)) }, isIconDefined ? h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), h("div", { key: 'b5f9973bc16038dd0b1911758072c001cfa5dcea', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: '015bed1adb93c84e224b85d95247a1706554e73f', id: subjectId }, this.subject), h("span", Object.assign({ key: 'c7bf53d336633441bd4ed3abbdf978a4c1587b9d' }, messageAttributes), h("slot", { key: 'd197c12700d991181e17efb90fafa3569fab1dcc' }), h("span", { key: 'a913b6adc15cad8ecfd76905e6047e3e51cecbc4', class: "hidden" }))), h("div", { key: '6eaea877dafb35eb0bb5a4d9c29540be35ca23e6', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '0e2aaef462aba47274903b304ddf340ec9a40032', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
     }
     get element() { return getElement(this); }
 };
@@ -140,7 +140,7 @@ const Toast = class {
         const innerEl = block.element('inner');
         const labelEl = block.element('label');
         const closeEl = block.element('close');
-        return (h(Host, { key: '46ad818112b1002e1a48a627eb714dec23aba2a5', id: this.toastId, class: Object.assign({}, block.class()) }, h("div", { key: 'e2db452a14a302ba7ed9ebbeb8a78e801a175998', role: "status", class: Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(`color-${this.color}`).class(!!this.color)) }, h("span", { key: '41331cb2609ece86bb59951cab9ec61b76b27c33', class: Object.assign({}, labelEl.class()), "data-testid": "bal-toast-label", innerHTML: this.message }, h("slot", { key: '09572e31b7d8bcc5ec8f31e33df31cdca13a7355' })), this.closable !== false ? (h("bal-close", { class: Object.assign({}, closeEl.class()), onClick: () => this.close(), inverted: false, "data-testid": "bal-toast-close" })) : (''))));
+        return (h(Host, { key: 'eb7fe679079d5de67858228b482b05ab4b6c849b', id: this.toastId, class: Object.assign({}, block.class()) }, h("div", { key: 'fbac27668a9f3fb3cc4051dc7ae081576b35bac6', role: "status", class: Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(`color-${this.color}`).class(!!this.color)) }, h("span", { key: '6885d0419d28ca866491bc74b66878ea4a41f933', class: Object.assign({}, labelEl.class()), "data-testid": "bal-toast-label", innerHTML: this.message }, h("slot", { key: '6c51a2580ab8c313f8395613b07b110108a9f95b' })), this.closable !== false ? (h("bal-close", { class: Object.assign({}, closeEl.class()), onClick: () => this.close(), inverted: false, "data-testid": "bal-toast-close" })) : (''))));
     }
     get element() { return getElement(this); }
 };

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

@@ -14,7 +14,7 @@ const Notification = class {
     render() {
         const block = BEM.block('notification');
         block.element('inner');
-        return (h(Host, { key: '867254c1020d19f225d64757749df32941d997e1', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '6ac1a4235074bb8ad8599af069f0f6860c3d066c' })));
+        return (h(Host, { key: '25a9149c4bb693ebf3c1b1a863e72f7727b8d046', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '6254964fe9f247d75cb102a80c7a251a233bf2d9' })));
     }
 };
 Notification.style = BalNotificationStyle0;

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

@@ -450,7 +450,7 @@ const NumberInput = class {
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: 'e4185f48852de078ce7bcf8eb9fcf7977a1146d2', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'cd89ad02a6788cee9efbf2fcf5bf61eb7dd23ba5', class: {
+        return (h(Host, { key: 'b8eed12bfcd82452d4764d316294744faff1f797', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '0f04129ed1bd55b8660e7add8f673e154bf4107b', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

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

@@ -1,20 +1,20 @@
 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-ea150568.js';
-import { s as stopEventBubbling } from './form-input-263e6f5b.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
 import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator-0688a178.js';
+import { s as stopEventBubbling } from './form-input-263e6f5b.js';
+import { L as Logger } from './log-dfd1c19f.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { i as inheritAttributes } from './attributes-a3e70948.js';
 import { b as waitAfterFramePaint, o as raf } from './helpers-94c3fbac.js';
 import { s as startsWith, i as includes } from './utils-9fbab1d3.js';
 import { d as defaultBalAriaForm } from './form-841232ff.js';
-import './browser-a8073d92.js';
 import './listener-04842ae9.js';
+import './browser-a8073d92.js';
 import './config.utils-cd529084.js';
 
-const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-radio-checkbox-symbol-size:1.125rem;--bal-radio-checkbox-symbol-width:calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.188rem;--bal-radio-checkbox-label-min-height:1.125rem}";
+const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-3);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size:1.25rem}";
 const BalOptionStyle0 = balOptionCss;
 
 const Option = class {
@@ -102,7 +102,7 @@ const Option = class {
      * ------------------------------------------------------
      */
     get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-checkbox'));
+        return Array.from(this.el.querySelectorAll('bal-check'));
     }
     /**
      * RENDER
@@ -110,7 +110,7 @@ const Option = class {
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: 'e1d4103868276fe7d159660d36b3aa485f76a3f1', 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: 'bc0e96fb1b4876c1832834d334d2d93afedb84bc', 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: '64d0e10a856b96031c736fec625d80ef74f33c30', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '64a86c1dbb5c7c463145429a037437439435d016' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: 'a9b567396356b31dc5dacf1115b538eb6f0229e9', 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: 'bc7b02be2431b89e05a16df87b2ef5e7e828577a', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: 'dd0f4a8143bcff57bcfd578073fc5c13fc947b64', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '49d60c90205cc0181cfc61eac50e2de14bc1dc80' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return getElement(this); }
 };
@@ -540,7 +540,7 @@ const OptionList = class {
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '6ca4230b34121fe0a67b324fdda50ff4da05bed8', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: 'bf810dbcda8f0fa7db371bdeefd92d22d5107640', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '4e7905a83f7f61b325a828382ed319d2c57b104b' }))));
+        return (h(Host, { key: '934c509e0703b3d7435028ad7bff05290d6a855b', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4d6b39d94ea7f7abacd128ca65e0f9f985ae3165', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '0ad6401208e35316c7eb892d0b8ffba1476a8611' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,16 +1,16 @@
 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-6b4e30ba.js';
+import { b as balBreakpoints } from './breakpoints.subject-c19884ad.js';
 import { d as defaultConfig } from './config.default-8e11a860.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-3c6214ed.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-ce089c47.js';
 import { L as ListenToConfig } from './config.decorator-42dba864.js';
 import './helpers-94c3fbac.js';
 import './browser-a8073d92.js';
 import './config.utils-cd529084.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-2ce9e0f4.js';
+import './tokens.esm-52d4f4c3.js';
 import './log-dfd1c19f.js';
 
 function generatePaginationControl(value, totalPages, pageRange) {
@@ -235,10 +235,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: '3b097795020dbe312e3307483744f183d70e0cd1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '1f877d2c55d94fce949cb281fa1fe1bd34d11975' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: 'f1a9b59d0c9ba663312b3d3ae9ff9de678b746c2', 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: 'a03438621f33facc36ec894bf9507374ac5f180a', 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: 'e5cd5b90b5bfac0ca375aa1953a3c798a3c02e7d', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '2c6ffa97605d79b65ef3bcf3f812632d846eb037', 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: 'eab1b2b44d7188cdceb8681b8da4eb6274314931', 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: 'd5124c40a333c03b15e19050d3166d8397a697cd', name: "nav-go-left", size: "small" })), h("bal-button", { key: 'f7c9e505a74db8d883e890967a1bde93a88ecf11', 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: '61dbf967b6387ff7462df52e9938fdcf67631eb1', 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: '80f6ab1b5075ab3bd88046ec5b97574bf0c79ed5', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '1e4313d171625773d8d234a8c45642bc6685e37a' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: '3f7dce2e4c8ca26728744fdc6707d187f624d7b6', 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: 'bd3506ca35fe0aeec0fdad4b3ee273426be63ed1', 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: '4402b36d447508550b265fbd7b9d019a0b991021', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: 'fab886ec2da35d0d6e39cff8c624bd69de5da2a2', 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: 'b482e3df263b4d068f3ff563466a6438de032256', 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: 'b15a56d746b21747cd35de104ba9858b3afc2998', name: "nav-go-left", size: "small" })), h("bal-button", { key: '16e0e1aa9e827ef3f273417ee79d9aa6750e4ccf', 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: '4cad894cb58baa3d089f12aad0a6ea41aa67d3c7', 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

@@ -605,7 +605,7 @@ const Popup = class {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '7d28fda7c02f6fefbcbb6aa82d2cda79291d1a08', 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: '64e696bdb37f3428332fed2313ad92dfa21bc60b', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '809fb517c7a69f1c85e0673a9ce44c63a1b4baba', 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: 'cfb7b21ac6602480c0431f51c77650625b724666', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '7e113fac6750446fb9be2b159bb1c3c9ab17710d', 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: '1a1417a1d2f35d1de1523941e37c251801edb69a', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '897c6c7991f7570689e6b10c1981e52eb31a4ef3' }))))));
+        return (h(Host, { key: '22256d10b23aaeefad30786345780029c23f10a5', 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: 'a3a5862b32a8a6acadd12893729148e016527dec', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'da06417052ab28135f651a6e3015462ae4d36915', 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: 'd442c9ae9d377cd18d7853cb850182e5e117a199', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '078c31c4580e387b73b455afcc81610ea9ce7c9e', 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: '14cee241ee538a5ff4075b255841deaa0ca06ff6', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '834174282762c50461b4a9851c74416804905344' }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {