@baloise/ds-core 18.2.0-nightly.20250328 → 18.3.0

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

@@ -9,16 +9,16 @@ const log = require('./log-33398c2a.js');
 const browser = require('./browser-1d542d0f.js');
 const scroll = require('./scroll-73c1b762.js');
 const helpers = require('./helpers-debb881a.js');
-const breakpoints_subject = require('./breakpoints.subject-1e22e5eb.js');
+const breakpoints_subject = require('./breakpoints.subject-99007fbd.js');
 const config_default = require('./config.default-7e96eb95.js');
 const mutation_decorator = require('./mutation.decorator-485e250e.js');
-const breakpoints_decorator = require('./breakpoints.decorator-78fdd507.js');
+const breakpoints_decorator = require('./breakpoints.decorator-a75a8dbc.js');
 const config_decorator = require('./config.decorator-de244188.js');
 const resize_decorator = require('./resize.decorator-e4a92322.js');
 require('./config.utils-df30e424.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-942c9e6a.js');
+require('./tokens.esm-836b8c42.js');
 
 class NavLinkItem {
     constructor(item, observer) {
@@ -652,7 +652,7 @@ const Nav = class {
         const block = bem.BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (index.h(index.Host, { key: 'f4468c4973667b52c77b05cee9b3ef521c9b3a58', id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { key: '4b66d4ea07b31adb49738316ced208b1bb02c1be', class: {
+        return (index.h(index.Host, { key: '4d861d5a9beb8d5a0ac04a0471f0d5f49f8f4d27', id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { key: 'cda5b1e8f0da114d3056b4f3a9d2d5a740ceb1c9', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (index.h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, index.h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (index.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({
@@ -662,7 +662,7 @@ const Nav = class {
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
         })))), this.isFlyoutActive ? (index.h("bal-nav-menu-flyout", { navId: this.navId }, index.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))) : (''))) : (''), index.h("div", { key: '046bfdd041e2fd1b6bd5f1b0bc14e253c3c9b9fa' }, index.h("slot", { key: '5f90c2c23e3d51cb65905097a65e727301c03878' }))), this.isTouch ? (index.h("bal-nav-meta-bar", { variant: "white", size: "normal" }, index.h("bal-stack", { space: "auto" }, this.renderLogo(), index.h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), index.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 ? (index.h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, index.h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, index.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))) : (''))) : (''), index.h("div", { key: '9159bbd2df222728e0249283ab2cc61425aefd22' }, index.h("slot", { key: '7af191383a98cfa549796c43c9b1034a6de2b83d' }))), this.isTouch ? (index.h("bal-nav-meta-bar", { variant: "white", size: "normal" }, index.h("bal-stack", { space: "auto" }, this.renderLogo(), index.h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), index.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 ? (index.h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, index.h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, index.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 ? (index.h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, index.h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -755,10 +755,10 @@ const NavLink = class {
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (index.h(index.Host, { key: '538d4bc561eec9c4c4d88a16efbd22ccc61517ec', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, index.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 (index.h(index.Host, { key: '0a4cc0341e4aa5e2d5e8277eb89fb2678dcc03dc', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, index.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
                 .element('native')
                 .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), index.h("slot", { key: '8b705b4c113a3272dcc68d798dce816f13343363' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), index.h("slot", { key: '055e0eac728e115ba335c8b54c14b59572161444' }))));
     }
 };
 tslib_es6.__decorate([
@@ -785,7 +785,7 @@ const NavLinkGrid = class {
      */
     render() {
         const block = bem.BEM.block('nav-link-grid');
-        return (index.h(index.Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, index.h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
+        return (index.h(index.Host, { key: '74041f35372c9f2e7fdf95e62264fea35c4821a7', class: Object.assign({}, block.class()) }, index.h("slot", { key: '4f671f702bcb4910ccf31e6197970bdfa943424e' })));
     }
 };
 tslib_es6.__decorate([
@@ -814,7 +814,7 @@ const NavLinkGridCol = class {
     render() {
         const block = bem.BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (index.h(index.Host, { key: '570396a3ad6882891cfefebf9d92dae1137a3f48', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, index.h("div", { key: '86f6add382f5accf09aef4593b16281268af8241', class: Object.assign({}, innerEl.class()) }, index.h("slot", { key: '57160d0fd8135f4d8a4d955a019ae41b28fc2123' }))));
+        return (index.h(index.Host, { key: '3108a6561188ed77091b569d6e14160796e3dcf6', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, index.h("div", { key: '4a328de41e4e38eeafef399b59ced751d247e8ba', class: Object.assign({}, innerEl.class()) }, index.h("slot", { key: 'c42ced5cc61dc8182991b32eba3b4edd0661bd46' }))));
     }
 };
 tslib_es6.__decorate([
@@ -843,7 +843,7 @@ const NavLinkGroup = class {
     render() {
         const block = bem.BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (index.h(index.Host, { key: '7594abd236200ade0063149fcbe2985e37c0ec9f', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, index.h("slot", { key: '42ceaea3299c69ddaa535b4fb47438816e11323b' })));
+        return (index.h(index.Host, { key: 'b7224f7859d490b219fcdfadd2c4c33170fb07f2', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, index.h("slot", { key: 'd7054bf0d35e99ec9e54edcf3f2b8878c87ac5df' })));
     }
 };
 tslib_es6.__decorate([
@@ -882,7 +882,7 @@ const NavMenuBar = class {
     render() {
         const block = bem.BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (index.h(index.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')) }, index.h("div", { key: '6ecb9f3e785c318c05064ab6f9e18a7c1774cd49', class: Object.assign({}, innerBlock.class()) }, index.h("div", { key: 'e809ddfb4b672a29852c44ab59c82e35fa5b6ac4', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'b249113bdb2b5289a213a3ff2782cd958ac7d923' })))));
+        return (index.h(index.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')) }, index.h("div", { key: 'ec04e09581a0efd9029e20960fd340210cd4a773', class: Object.assign({}, innerBlock.class()) }, index.h("div", { key: 'de47464fad24e5ed10ac355fdaac926abcc7583c', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'a9624e3e83245fcddd0be123b0268b5ca0175041' })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -945,7 +945,7 @@ const NavMenuFlyout = class {
     render() {
         const block = bem.BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (index.h(index.Host, { key: 'd2de6257fc31499b2d26204ee0db07a4e079144b', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, index.h("div", { key: '6392e2be737b3f5c11dd83602f210d1a263c7a5f', class: Object.assign({}, line.class()) }), index.h("div", { key: 'b6d06ea36310b6ed5975f2bae2f57e65d1e29f82', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: '38566fffa659f0661e3cb7ca7535c6a7f244b696' }))));
+        return (index.h(index.Host, { key: 'cc30e95d5a4f6037371cf4158a11b2ba832e98e0', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, index.h("div", { key: 'c28934d355eda16304e02820fb85f373c8e7aaa1', class: Object.assign({}, line.class()) }), index.h("div", { key: '0dd9801e8bc0dc277251b353b2efe78f5499dd15', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: '3d0e74c391e039a205ae77710151d03e8c94620f' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -1022,7 +1022,7 @@ const NavMetaBar = class {
      */
     render() {
         const block = bem.BEM.block('nav-meta-bar');
-        return (index.h(index.Host, { key: 'a3c7f085f3811353baca0bd93604167c3ad527d2', 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')) }, index.h("div", { key: 'c88186ebabcaa43c0493c7c5c295c5450c2a2c74', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'f1fcc2b1967db28ea405d9a5499ca47d8bc6cecd' }))));
+        return (index.h(index.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')) }, index.h("div", { key: '880efb6d57db1adb168e312c75f0bf0acdb54c6b', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'e2de7fdbd8e7ef205dc22bb23f9bcdb83c808add' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -10,13 +10,13 @@ const helpers = require('./helpers-debb881a.js');
 const scroll = require('./scroll-73c1b762.js');
 const config_default = require('./config.default-7e96eb95.js');
 const config_decorator = require('./config.decorator-de244188.js');
-const breakpoints_subject = require('./breakpoints.subject-1e22e5eb.js');
-const breakpoints_decorator = require('./breakpoints.decorator-78fdd507.js');
+const breakpoints_subject = require('./breakpoints.subject-99007fbd.js');
+const breakpoints_decorator = require('./breakpoints.decorator-a75a8dbc.js');
 require('./config.utils-df30e424.js');
 require('./log-33398c2a.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-942c9e6a.js');
+require('./tokens.esm-836b8c42.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;
@@ -46,7 +46,7 @@ const Navbar = class {
     }
     render() {
         const navbarEl = bem.BEM.block('navbar');
-        return (index.h(index.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)) }, index.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 !== '' }) }, index.h("slot", { key: '647ff400273d4cd92574d5f46aff07aad2b2c810' }))));
+        return (index.h(index.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)) }, index.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 !== '' }) }, index.h("slot", { key: '45710ae4fd3b25cf23be8c5bf25bada4cfac312f' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -161,7 +161,7 @@ const NavbarBrand = class {
         const navbarBrandEl = bem.BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (index.h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (index.h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
         const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
-        return (index.h(index.Host, { key: '89cac098cf15e08c2d48748b6eb2cc184ed57292', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (index.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 ? (index.h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), index.h("span", { key: 'b5807bd115fe7e7d5f75a7d319b810ad33c1db39', class: Object.assign({}, navbarBrandEl.element('title').class()) }, index.h("slot", { key: '14741534401ef235bee19db0d4aead5ec437c501' })), index.h("bal-button", { key: '9104e683dd114554c8ec84f4b20abd13e2c77dfe', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (index.h(index.Host, { key: '6492bf4163017452e6fcbd3e75f067db73e631d7', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (index.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 ? (index.h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), index.h("span", { key: '026a303393f964c22eecc94b92468832a5d3594a', class: Object.assign({}, navbarBrandEl.element('title').class()) }, index.h("slot", { key: '632838cf1193499f8751a340e4ed897dc7d01d54' })), index.h("bal-button", { key: '44e63c04ba674399b60eeedf58f5b3ce680dd939', 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() })));
@@ -205,7 +205,7 @@ const NavbarMenu = class {
                 container = navbarEl.container;
             }
         }
-        return (index.h(index.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 !== '' }) }, index.h("slot", { key: 'e7919137bb34c15bc676a1617a79aac4111460fc' })));
+        return (index.h(index.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 !== '' }) }, index.h("slot", { key: '2a9e2c5b3e4d9e55372107d9096ff7ea7b0b69be' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -223,7 +223,7 @@ const NavbarMenuEnd = class {
     }
     render() {
         const menuEndEl = bem.BEM.block('navbar').element('menu').element('end');
-        return (index.h(index.Host, { key: '10aa16f437f428adf6cb21c276aa16230aaad041', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: 'adadfb0d9bda6bb49613541c67bf9dced7a0ad4b' })));
+        return (index.h(index.Host, { key: 'c48d9c4cf059e64185d2c873f951cd5e2e133665', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: 'e956c085b46e4fbe1f655e161b92c81a08f398de' })));
     }
 };
 
@@ -234,7 +234,7 @@ const NavbarMenuStart = class {
     }
     render() {
         const menuStartEl = bem.BEM.block('navbar').element('menu').element('start');
-        return (index.h(index.Host, { key: '1d35806afa3206d429b351b9442375cd4a41133f', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: '35baeb64effd472c64a148fb77fa91a604078f36' })));
+        return (index.h(index.Host, { key: '9694a2d3843c5d010a6523e404e7feaea40a8183', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: '29fb9854fd7de27e095c6ab141be4f005a00e535' })));
     }
 };
 

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

@@ -19,7 +19,7 @@ const Notices = class {
         const block = bem.BEM.block('notices');
         const innerEl = block.element('inner');
         const hasContainer = this.interface === 'toast' && this.container !== undefined;
-        return (index.h(index.Host, { key: 'a1b78916b871f478faab9f9f8809bd9f2f821662', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, index.h("div", { key: 'a139dfe55addb4c171cbdb9889b54e56cd1b51d9', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, index.h("slot", { key: 'f5c24d3dc1188665169e59f8e105c9de5ed40404' }))));
+        return (index.h(index.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)) }, index.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 !== '' }) }, index.h("slot", { key: 'db39f336699c3de8776f56ec79630e0221444114' }))));
     }
 };
 Notices.style = BalNoticesStyle0;
@@ -98,7 +98,7 @@ const Snackbar = class {
             success: 'check-circle',
         };
         const icon = isIconDefined ? this.icon : colorIcons[this.color || 'info'];
-        return (index.h(index.Host, { key: '5127d6369874e9fdaffb9e8d33c515646f47d9c9', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, index.h("div", { key: '3cf49e636352f3f9f759dc9a995d03dabf898a58', class: Object.assign({}, detailsEl.class()) }, index.h("div", { key: '212870d1b7e231703bffcf52700c8b82cc59eb5b', "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 ? index.h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), index.h("div", { key: 'a2a42f63240703654784826cde481088a368345b', class: Object.assign({}, detailsEl.element('content').class()) }, index.h("h2", { key: '99bd1a23ec3af11513bb07adee38b5532b2fa860', id: subjectId }, this.subject), index.h("span", Object.assign({ key: 'd0d199fce312e2bab5b79a4a818f7bb4f7e77d7b' }, messageAttributes), index.h("slot", { key: 'ffbdeab2ecf8c175121147110f81625148d16778' }), index.h("span", { key: '4add44fe70b6852f6fecf6e60c9f11e6ac4805bf', class: "hidden" }))), index.h("div", { key: '504f3c58adb6a521564b337f66132fd878d924fc', class: Object.assign({}, detailsEl.element('close').class()) }, index.h("bal-close", { key: '7de312c6ad07c3c44b23789d58cda05f3bd42722', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (index.h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, index.h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
+        return (index.h(index.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 }, index.h("div", { key: 'ae6759e051630b2c9fe51c7d24d931e30737376d', class: Object.assign({}, detailsEl.class()) }, index.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 ? index.h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), index.h("div", { key: '75a34eb777fbf3c9d8ffdc431a155183888fe5ad', class: Object.assign({}, detailsEl.element('content').class()) }, index.h("h2", { key: '7aecaed230c536db0771eb4060a20f8d89b737fa', id: subjectId }, this.subject), index.h("span", Object.assign({ key: '660cdb87938ee2d5e48bb103dbdb573deafbf088' }, messageAttributes), index.h("slot", { key: '8a9a874dca0cfce2771f4af4a356e7783d2efada' }), index.h("span", { key: '988af9ec4c07a0a07f82f0036931cd1dad15a13c', class: "hidden" }))), index.h("div", { key: 'be82a69b4dc2f4e42ba9f55e7f7af403ce0136cd', class: Object.assign({}, detailsEl.element('close').class()) }, index.h("bal-close", { key: '9b999204c4f1fbdb215161ae08ebec3c8ae21658', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (index.h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, index.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 index.getElement(this); }
 };
@@ -144,7 +144,7 @@ const Toast = class {
         const innerEl = block.element('inner');
         const labelEl = block.element('label');
         const closeEl = block.element('close');
-        return (index.h(index.Host, { key: '8236384c2156885a0cf86f99697f40be4e9c5372', id: this.toastId, class: Object.assign({}, block.class()) }, index.h("div", { key: '3a272a7d3ecf51331f0df06c2df98b40c8c0a1fd', role: "status", class: Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(`color-${this.color}`).class(!!this.color)) }, index.h("span", { key: '92b35c0575a501857ea05f48e73b6adebeeb4d46', class: Object.assign({}, labelEl.class()), "data-testid": "bal-toast-label", innerHTML: this.message }, index.h("slot", { key: '2c6eea25c4652f72020a7aeb8660b0990841771b' })), this.closable !== false ? (index.h("bal-close", { class: Object.assign({}, closeEl.class()), onClick: () => this.close(), inverted: false, "data-testid": "bal-toast-close" })) : (''))));
+        return (index.h(index.Host, { key: '46ad818112b1002e1a48a627eb714dec23aba2a5', id: this.toastId, class: Object.assign({}, block.class()) }, index.h("div", { key: 'e2db452a14a302ba7ed9ebbeb8a78e801a175998', role: "status", class: Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(`color-${this.color}`).class(!!this.color)) }, index.h("span", { key: '41331cb2609ece86bb59951cab9ec61b76b27c33', class: Object.assign({}, labelEl.class()), "data-testid": "bal-toast-label", innerHTML: this.message }, index.h("slot", { key: '09572e31b7d8bcc5ec8f31e33df31cdca13a7355' })), this.closable !== false ? (index.h("bal-close", { class: Object.assign({}, closeEl.class()), onClick: () => this.close(), inverted: false, "data-testid": "bal-toast-close" })) : (''))));
     }
     get element() { return index.getElement(this); }
 };

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

@@ -18,7 +18,7 @@ const Notification = class {
     render() {
         const block = bem.BEM.block('notification');
         block.element('inner');
-        return (index.h(index.Host, { key: '31c579a60b159d167726e54974f00d77461a1499', 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" }, index.h("slot", { key: '9ac5afd2aa0a2f9395d1100163d6fcd629e20373' })));
+        return (index.h(index.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" }, index.h("slot", { key: '6ac1a4235074bb8ad8599af069f0f6860c3d066c' })));
     }
 };
 Notification.style = BalNotificationStyle0;

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

@@ -454,7 +454,7 @@ const NumberInput = class {
      */
     render() {
         const block = bem.BEM.block('number-input');
-        return (index$1.h(index$1.Host, { key: '48b617cf5c4d515226af0571bd63c9135007dee2', onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, index$1.h("input", Object.assign({ key: '7f93f8997ccec4b03bde40da80e142e7d050914b', class: {
+        return (index$1.h(index$1.Host, { key: 'e4185f48852de078ce7bcf8eb9fcf7977a1146d2', onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, index$1.h("input", Object.assign({ key: 'cd89ad02a6788cee9efbf2fcf5bf61eb7dd23ba5', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

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

@@ -114,7 +114,7 @@ const Option = class {
      */
     render() {
         const block = bem.BEM.block('option');
-        return (index.h(index.Host, { key: 'aed8058d7b0526a84dde426b242ded48836fde15', 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": aria.ariaBooleanToString(this.hidden), "aria-selected": aria.ariaBooleanToString(this.selected), "aria-checked": aria.ariaBooleanToString(this.selected), "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": aria.ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, index.h("bal-stack", { key: 'e475f8289d2d11ec790e5b808a3b5a67405ee6db', py: "small", space: "x-small" }, this.checkbox ? (index.h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), index.h("div", { key: '9dbc67bbd197f2d30ecc38eba4c1ccf93bb98a7d', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, index.h("slot", { key: '3e1392bbd15175bc15f43d0e4d90e65abfa0f5ec' })), this.selected && !this.checkbox ? (index.h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (index.h(index.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": aria.ariaBooleanToString(this.hidden), "aria-selected": aria.ariaBooleanToString(this.selected), "aria-checked": aria.ariaBooleanToString(this.selected), "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-invalid": aria.ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, index.h("bal-stack", { key: 'bc0e96fb1b4876c1832834d334d2d93afedb84bc', py: "small", space: "x-small" }, this.checkbox ? (index.h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), index.h("div", { key: '64d0e10a856b96031c736fec625d80ef74f33c30', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, index.h("slot", { key: '64a86c1dbb5c7c463145429a037437439435d016' })), this.selected && !this.checkbox ? (index.h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return index.getElement(this); }
 };
@@ -544,7 +544,7 @@ const OptionList = class {
     render() {
         const block = bem.BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (index.h(index.Host, { key: '4d5be05c78e0aab806b0cd05a6b5af22ab33c773', class: Object.assign({}, block.class()), id: this.inputId }, index.h("div", Object.assign({ key: '206f190d75dd3cc6a57cf3ea7c9257078580fd62', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), index.h("slot", { key: '8cee74e85814e448f04c4f2c766721f969ff19cb' }))));
+        return (index.h(index.Host, { key: '6ca4230b34121fe0a67b324fdda50ff4da05bed8', class: Object.assign({}, block.class()), id: this.inputId }, index.h("div", Object.assign({ key: 'bf810dbcda8f0fa7db371bdeefd92d22d5107640', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": aria.ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), index.h("slot", { key: '4e7905a83f7f61b325a828382ed319d2c57b104b' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -5,16 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-84f42282.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
-const breakpoints_subject = require('./breakpoints.subject-1e22e5eb.js');
+const breakpoints_subject = require('./breakpoints.subject-99007fbd.js');
 const config_default = require('./config.default-7e96eb95.js');
-const breakpoints_decorator = require('./breakpoints.decorator-78fdd507.js');
+const breakpoints_decorator = require('./breakpoints.decorator-a75a8dbc.js');
 const config_decorator = require('./config.decorator-de244188.js');
 require('./helpers-debb881a.js');
 require('./browser-1d542d0f.js');
 require('./config.utils-df30e424.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-942c9e6a.js');
+require('./tokens.esm-836b8c42.js');
 require('./log-33398c2a.js');
 
 function generatePaginationControl(value, totalPages, pageRange) {
@@ -239,10 +239,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 = () => (index.h("span", { key: '8d0f477acb2db965fe7ca9a323db754dadb8c2d1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, index.h("span", { key: '25bc274a3580f3103acb6aa21bb0f132da31a4cd' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (index.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 = () => (index.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 (index.h(index.Host, { key: '1f6888814e691b8f4b46987055e3d474078bac38', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, index.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" }, index.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 }, index.h("bal-icon", { key: '0ceeb68b1426edc0b1425b6bb1236941534ead5d', name: "nav-go-left", size: "small" })), index.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 }, index.h("bal-icon", { key: 'fa8feb6b44def140d75218f387fcfdbb984bd99a', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? index.h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? index.h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? index.h(SmallWithText, null) : '')));
+        const SmallWithText = () => (index.h("span", { key: '3b097795020dbe312e3307483744f183d70e0cd1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, index.h("span", { key: '1f877d2c55d94fce949cb281fa1fe1bd34d11975' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (index.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 = () => (index.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 (index.h(index.Host, { key: 'e5cd5b90b5bfac0ca375aa1953a3c798a3c02e7d', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, index.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" }, index.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 }, index.h("bal-icon", { key: 'd5124c40a333c03b15e19050d3166d8397a697cd', name: "nav-go-left", size: "small" })), index.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 }, index.h("bal-icon", { key: '61dbf967b6387ff7462df52e9938fdcf67631eb1', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? index.h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? index.h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? index.h(SmallWithText, null) : '')));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bal-popup.cjs.entry.js

@@ -609,7 +609,7 @@ const Popup = class {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (index.h(index.Host, { key: '55c0f5b114d115cd7c1d51aab5674d0e818b1250', 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` }, index.h("div", { key: '962ee2a6f7e6504b48e464c5e2ced9ca67765c36', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), index.h("div", { key: 'b586c483ea4ec62c066486823b3a8f76493a2d6c', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, index.h("div", { key: '4f0664a3e528eb9b68ecd11d7b9ffb14bbf7eaaa', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), index.h("bal-stack", { key: '621e7ef166b71e781dc404f78be49e24e6183118', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (index.h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, index.h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (index.h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), index.h("div", { key: '04c6546ba5da40340316bf0e8ecfb296421d69dd', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, index.h("slot", { key: '66f837e1b090db0c997c8b4d9673db7652ccfd85' }))))));
+        return (index.h(index.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` }, index.h("div", { key: '64e696bdb37f3428332fed2313ad92dfa21bc60b', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), index.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` } }, index.h("div", { key: 'cfb7b21ac6602480c0431f51c77650625b724666', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), index.h("bal-stack", { key: '7e113fac6750446fb9be2b159bb1c3c9ab17710d', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (index.h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, index.h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (index.h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), index.h("div", { key: '1a1417a1d2f35d1de1523941e37c251801edb69a', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, index.h("slot", { key: '897c6c7991f7570689e6b10c1981e52eb31a4ef3' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bal-progress-bar.cjs.entry.js

@@ -6,14 +6,14 @@ const index = require('./index-84f42282.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const bem = require('./bem-81bc6a2d.js');
 const helpers = require('./helpers-debb881a.js');
-const breakpoints_subject = require('./breakpoints.subject-1e22e5eb.js');
-const breakpoints_decorator = require('./breakpoints.decorator-78fdd507.js');
-const windowResize_decorator = require('./window-resize.decorator-0d3a1c16.js');
+const breakpoints_subject = require('./breakpoints.subject-99007fbd.js');
+const breakpoints_decorator = require('./breakpoints.decorator-a75a8dbc.js');
+const windowResize_decorator = require('./window-resize.decorator-dd0ecc12.js');
 require('./browser-1d542d0f.js');
 require('./config.utils-df30e424.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-942c9e6a.js');
+require('./tokens.esm-836b8c42.js');
 
 const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-background-purple:var(--bal-color-purple-2);--bal-progress-bar-background-yellow:var(--bal-color-yellow-2);--bal-progress-bar-background-red:var(--bal-color-red-2);--bal-progress-bar-background-green:var(--bal-color-green-2);--bal-progress-bar-line-color-primary:var(--bal-color-primary);--bal-progress-bar-line-color-purple:var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow:var(--bal-color-yellow-6);--bal-progress-bar-line-color-red:var(--bal-color-red-6);--bal-progress-bar-line-color-green:var(--bal-color-green-6);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}";
 const BalProgressBarStyle0 = balProgressBarCss;
@@ -74,7 +74,7 @@ const ProgressBar = class {
     render() {
         const block = bem.BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (index.h(index.Host, { key: 'ed3fb78efd402af40f4a56c4e1b0f33634506cb6', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, index.h("div", { key: '5c18e0082fd842c907d73e96ca84420e50f484b0', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
+        return (index.h(index.Host, { key: '1df789d0a33beb7a7bdcf2802d41f91312091e84', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, index.h("div", { key: '27f99d214e02805e016e5d082941530b23c1ee22', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bal-radio-button.cjs.entry.js

@@ -184,7 +184,7 @@ const RadioButton = class {
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (index.h(index.Host, { key: '6d15fada501de837329e97c0c8f4233176761f7e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, index.h("button", { key: '45d8e41816ff805867601d8a0f55f1dcd5b53233', role: "radio", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: '25604044a505daa614dfa277b286f3aa7b0f082a' }))));
+        return (index.h(index.Host, { key: '26ecfd7485967bc7d6073d74db6cad201293d0de', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, index.h("button", { key: '13aaaf7966649025ba3c59ba04662a1853318c46', role: "radio", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, index.h("slot", { key: '02a637665239cfd8ba3e4c3b02f36e05bc24f43f' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bal-radio_2.cjs.entry.js

@@ -264,7 +264,7 @@ const Radio = class {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (index.h(index.Host, { key: 'b682334af2773f60b6e4bf01d794d488a8fc9106', "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, index.h("input", Object.assign({ key: '8d304b0042a753cf65211acf41124fcd15953173', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (index.h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), index.h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, index.h("slot", null)))) : ('')));
+        return (index.h(index.Host, { key: '2547b04c87e22ecf4052211afb83932637ea451e', "aria-checked": `${this.checked}`, "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, index.h("input", Object.assign({ key: 'f2c4043a068d86e4327cb801acca5b13dbfaa9bb', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (index.h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), index.h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, index.h("slot", null)))) : ('')));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bal-segment_2.cjs.entry.js

@@ -14,15 +14,15 @@ const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
 const focus_decorator = require('./focus.decorator-14a4a576.js');
 const animation_decorator = require('./animation.decorator-40bdfb52.js');
 const visibility_decorator = require('./visibility.decorator-a218aab9.js');
-const windowResize_decorator = require('./window-resize.decorator-0d3a1c16.js');
-const breakpoints_decorator = require('./breakpoints.decorator-78fdd507.js');
+const windowResize_decorator = require('./window-resize.decorator-dd0ecc12.js');
+const breakpoints_decorator = require('./breakpoints.decorator-a75a8dbc.js');
 const attributes = require('./attributes-11acd153.js');
 require('./browser-1d542d0f.js');
 require('./config.utils-df30e424.js');
 require('./listener-52d2e5fd.js');
-require('./breakpoints.subject-1e22e5eb.js');
+require('./breakpoints.subject-99007fbd.js');
 require('./device-9f97a845.js');
-require('./tokens.esm-942c9e6a.js');
+require('./tokens.esm-836b8c42.js');
 
 const balSegmentCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment{display:-ms-flexbox;display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{-ms-flex-direction:column;flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;-ms-flex:1;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{-ms-flex:1;flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
 const BalSegmentStyle0 = balSegmentCss;
@@ -334,7 +334,7 @@ const Segment = class {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = bem.BEM.block('segment');
-        return (index.h(index.Host, { key: 'fe90569ba8a29ad23116fdda84f1ec889e2156a8', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, index.h("slot", { key: 'b3dbd7293b30d5df7fcf13ae53b01b43f9b69e5a', onSlotchange: this.onSlottedItemsChange })));
+        return (index.h(index.Host, { key: 'b957d93e8bfd7d7dbbdb6261f793aa1af056116b', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, index.h("slot", { key: 'ee706ef9db166e55e7074e11c76c37b3c4ac545b', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -540,7 +540,7 @@ const SegmentItem = class {
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (index.h(index.Host, { key: '9540f230da68378bb218a0f02514d5eac13a4f89', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, index.h("button", Object.assign({ key: '27b6344ee2805d090b76771dee36f21522952d8f', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), index.h("bal-icon", { key: '38b185867756c1e8167eb329d3675b0fe813b1ff', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), index.h("bal-stack", { key: '0085adbc0185b95c7a299d44b68baeb73799d78e', space: "x-small", layout: 'horizontal' }, index.h("bal-content", { key: 'd9a8a1d9d74666b245511f643b2e127e2bd61814', space: "none" }, index.h("bal-label", { key: 'f5d74f65e06a06767c57c16006e6dcefffa294ea', htmlId: `bal-si-${this.internalId}-label` }, label), index.h("span", { key: '9604d5292614b6a6f663fed121fd4618dfc1457b', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', index.h("slot", { key: '06c06c8714bc7284d11e807eeb19e6960fb177fc', onSlotchange: this.onSlottedItemsChange }))))), index.h("div", { key: 'b9cdc430ed83ebed23ad02f475aa35a7eb9b528d', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+        return (index.h(index.Host, { key: '55e0754b091fb723f2e5d90f7bdb50190abbea52', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, index.h("button", Object.assign({ key: '8b7d3b58c59e02b98eeb131696fc0b0540780353', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), index.h("bal-icon", { key: 'a8da51b21fe49d7e7dc56d1089710a905ebf5df7', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), index.h("bal-stack", { key: '47d5eb2ef471654c05343ae83b4ac2b4fb0e9839', space: "x-small", layout: 'horizontal' }, index.h("bal-content", { key: '833e34ce4261d88906d220ac92acf68691aa5d88', space: "none" }, index.h("bal-label", { key: 'a7fffd217d6823c4234c76f2e4a7fc645148a453', htmlId: `bal-si-${this.internalId}-label` }, label), index.h("span", { key: '695a0cf23d40a0b19ef4a76248838b27dbe481be', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', index.h("slot", { key: '2fb05a58ea4850f5196804f69fb0d84e3dc1145e', onSlotchange: this.onSlottedItemsChange }))))), index.h("div", { key: 'a6b5024e4e04af2be2d7830a656bdf0c2cb213a1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bal-select_2.cjs.entry.js

@@ -723,7 +723,7 @@ const Select = class {
      */
     render() {
         var _a;
-        const Chip = (props) => (index.h("bal-tag", { key: '5bcf5db754537ec86b2c332f2c63ae1d28f04f98', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (index.h("bal-tag", { key: '9c073d3c0b6e49a35723e1789fdfd4710e6c30d4', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, utils.findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = utils.getValues(this.rawValue);
         const block = bem.BEM.block('select');
         const nativeEl = block.element('native');
@@ -737,19 +737,19 @@ const Select = class {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (index.h(index.Host, { key: '8a2ed44d1007220a11cba788bc215e07417797f8', role: "listbox", onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { key: 'b9605f9d566c9b5637dc4fed4a49370e04ce238b', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { key: '2116e76113fb0cd238e6a1b7a551c1e45c8cee47', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { key: '7d77bf05a11bdf40b06732099f21fb4eb151ed52', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { key: '5a52ce88c32363ea2c69e3b4008568674f9040b2', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (index.h(index.Host, { key: 'd48d8cd7b4d4d1cf1b1eaf0a81d181f69344d50b', role: "listbox", onClick: this.handleClick, "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => utils.findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, index.h("select", { key: 'a59a6d21bcfbe6b4012cfa76ba847f41bd8fb1dc', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (index.h("option", { key: value, value: value, selected: true }, value)))), index.h("bal-popover", { key: '0d02b30a84016c258ee4cecfcf48b8d77c258148', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, index.h("div", { key: 'a9b04e732228e654e6e2ecd52a580ef8751e89cb', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, index.h("div", { key: '8dab5105cd37563af2d15b1aa4f71ef5f5eba49a', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (index.h(Chip, { value: value }))), index.h("input", { key: '1329705b31e8846d7c8cad7736204575d2bb68a6', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (index.h(Chip, { value: value }))), index.h("input", { key: 'c4039aa21b75b7633be0b65c6a85abfd1bf6568e', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": aria.ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (index.h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { key: 'ecc1305ae4c29e9fd3d131e69dc781deb4bd4bdc', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), index.h("bal-popover-content", { key: 'c81124a393d995c2f998ed1600f9b40b2e7480fd', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index$1) => (index.h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { key: 'c24a3bf08a3c8c5c403a8eab86ee2adce14f896f', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index$1)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index$1), onClick: () => this.optionSelected(option) }, index.h("div", { class: Object.assign({}, optionContentEl.class()) }, index.h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, index.h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: utils.preventDefault })), index.h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), index.h("div", { key: 'c2ae92d7d4830a4e248b94ff50516753aca828d4', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }
@@ -779,7 +779,7 @@ const SelectOption = class {
         this.log = log;
     }
     render() {
-        return (index.h(index.Host, { key: 'e576fb51e73b23cbfd86911da7b8ddbd337e72a3', style: { display: 'none' } }, index.h("slot", { key: 'e6ad28fa2cd69ebf97968985267fd363097f88f3' })));
+        return (index.h(index.Host, { key: 'c479330ac26bcb19ddd41e7a99e635bf3ffc6170', style: { display: 'none' } }, index.h("slot", { key: '009baaefc29d307403edb10160c694dcc8495164' })));
     }
 };
 tslib_es6.__decorate([