@baloise/ds-core 17.3.0 → 17.4.0-snapshot.1609-d2bcc38d3

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-c858e965.js');
-const breakpoints_subject = require('./breakpoints.subject-37ab025d.js');
+const breakpoints_subject = require('./breakpoints.subject-3244205b.js');
 const config_default = require('./config.default-48618371.js');
 const mutation_decorator = require('./mutation.decorator-229267c9.js');
-const breakpoints_decorator = require('./breakpoints.decorator-02f40938.js');
+const breakpoints_decorator = require('./breakpoints.decorator-f4800188.js');
 const config_decorator = require('./config.decorator-c38efed9.js');
 const resize_decorator = require('./resize.decorator-16e4bcd7.js');
 require('./config.utils-bccf141d.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-2b08bc6c.js');
+require('./tokens.esm-b1eb9ac4.js');
 
 class NavLinkItem {
     constructor(item, observer) {
@@ -261,12 +261,12 @@ class NavMetaButton extends NavLinkItem {
         if (this.isLink) {
             return (index.h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, href: this.href, target: this.target, aria: {
                     title: this.htmlTitle,
-                    label: this.label,
+                    label: this.ariaLabel || this.label,
                 } }, this.label));
         }
         return (index.h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
                 title: this.htmlTitle,
-                label: this.label,
+                label: this.ariaLabel || this.label,
             }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
     }
     renderAtTouchTopMetaBar() {
@@ -274,12 +274,12 @@ class NavMetaButton extends NavLinkItem {
             if (this.isLink) {
                 return (index.h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, target: this.target, aria: {
                         title: this.htmlTitle,
-                        label: this.label,
+                        label: this.ariaLabel || this.label,
                     } }, this.icon ? '' : this.label));
             }
             return (index.h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
                     title: this.htmlTitle,
-                    label: this.label,
+                    label: this.ariaLabel || this.label,
                 }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
         }
     }
@@ -288,12 +288,12 @@ class NavMetaButton extends NavLinkItem {
             if (this.isLink) {
                 return (index.h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
                         title: this.htmlTitle,
-                        label: this.label,
+                        label: this.ariaLabel || this.label,
                     }, href: this.href, target: this.target }, this.label));
             }
             return (index.h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
                     title: this.htmlTitle,
-                    label: this.label,
+                    label: this.ariaLabel || this.label,
                 }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
         }
     }
@@ -630,7 +630,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: 'dcde56b80395603196d61c50e390c7c3df510680', id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { key: 'b986a4c340c59fd9377da61b41882bdc66a1380c', class: {
+        return (index.h(index.Host, { key: 'f4468c4973667b52c77b05cee9b3ef521c9b3a58', id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { key: '4b66d4ea07b31adb49738316ced208b1bb02c1be', 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, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -640,7 +640,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: '60b9a9262fed2743ecbb0db2bc3b0d41de33c3b5' }, index.h("slot", { key: 'b055497b867fd6db856295fa516cc5b36a3f45fe' }))), 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: '13c3f4f937d282ecff01ec40e10102fed0c3ab62' }, index.h("slot", { key: 'cad51666687cd1c41734c136f5db77bf1308d1a3' }))), 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())))) : ('')));
@@ -733,10 +733,10 @@ const NavLink = class {
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (index.h(index.Host, { key: '94718986eda442992d83a9b40e26bf595d523dce', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, index.h(Link, Object.assign({ key: 'cf8106036e3366712fff52d08e8c1567873014be', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
+        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
                 .element('native')
                 .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), index.h("slot", { key: 'f9ab826645c95e02cf1b1ccfa2df34b637a67d13' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), index.h("slot", { key: '8b705b4c113a3272dcc68d798dce816f13343363' }))));
     }
 };
 tslib_es6.__decorate([
@@ -763,7 +763,7 @@ const NavLinkGrid = class {
      */
     render() {
         const block = bem.BEM.block('nav-link-grid');
-        return (index.h(index.Host, { key: '03e4b64a2041c0fb36d94fd061eb9352a38446ed', class: Object.assign({}, block.class()) }, index.h("slot", { key: '7f7eb07e433531b6d0dab67b4a89e7faab742b51' })));
+        return (index.h(index.Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, index.h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
     }
 };
 tslib_es6.__decorate([
@@ -792,7 +792,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: 'd207c87255663724d4cdefb411665804c0d614bf', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, index.h("div", { key: '8fa5bf2182f99d55463202ecb68aa490ac741510', class: Object.assign({}, innerEl.class()) }, index.h("slot", { key: 'a04eb96c4706a99724d7955aa1a0ce0ef0be4690' }))));
+        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' }))));
     }
 };
 tslib_es6.__decorate([
@@ -821,7 +821,7 @@ const NavLinkGroup = class {
     render() {
         const block = bem.BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (index.h(index.Host, { key: '83e07dc3e48315f8c8196f54cda2e371eeb9d297', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, index.h("slot", { key: 'e54ab919fba4f5a400b753d05c9545d8368e7e9c' })));
+        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' })));
     }
 };
 tslib_es6.__decorate([
@@ -860,7 +860,7 @@ const NavMenuBar = class {
     render() {
         const block = bem.BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (index.h(index.Host, { key: '408438f50a37356d275fd30fb3793334293553ea', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, index.h("div", { key: '81a5b4b94fff712cdd9ee7479e40694df1f07107', class: Object.assign({}, innerBlock.class()) }, index.h("div", { key: 'd45071ac59862cf928d1d21ea0510f9840255ed9', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: '4d9c8f32c524223f76906671f28d3891f353e4b2' })))));
+        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' })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -923,7 +923,7 @@ const NavMenuFlyout = class {
     render() {
         const block = bem.BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (index.h(index.Host, { key: '60bf384edb49a6686374e4f473758745e2771945', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, index.h("div", { key: 'a234f10624799caf4c183c608fda3ccdb3e39446', class: Object.assign({}, line.class()) }), index.h("div", { key: 'b96460b50a8ea76acdcbb4c464e90f4416009b2d', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: '0d02f07430f4d05c58627866a131e5bee32b3e51' }))));
+        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' }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -1000,7 +1000,7 @@ const NavMetaBar = class {
      */
     render() {
         const block = bem.BEM.block('nav-meta-bar');
-        return (index.h(index.Host, { key: '5436cb6898cdaecac4f0304b8dd62484b5a8a231', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, index.h("div", { key: 'f7ed5d2c6a334ad586baf75a5b87132a4460f065', class: Object.assign({}, block.element('container').class()) }, index.h("slot", { key: 'c60750b340d6f1276d45efa7a786b142938d73a4' }))));
+        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' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -4,16 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-84f42282.js');
 const bem = require('./bem-81bc6a2d.js');
+const tslib_es6 = require('./tslib.es6-a680968e.js');
 const scroll = require('./scroll-73c1b762.js');
 const browser = require('./browser-1d542d0f.js');
 const helpers = require('./helpers-c858e965.js');
-const tslib_es6 = require('./tslib.es6-a680968e.js');
-const breakpoints_subject = require('./breakpoints.subject-37ab025d.js');
-const breakpoints_decorator = require('./breakpoints.decorator-02f40938.js');
+const config_default = require('./config.default-48618371.js');
+const config_decorator = require('./config.decorator-c38efed9.js');
+const breakpoints_subject = require('./breakpoints.subject-3244205b.js');
+const breakpoints_decorator = require('./breakpoints.decorator-f4800188.js');
 require('./config.utils-bccf141d.js');
+require('./log-33398c2a.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-2b08bc6c.js');
+require('./tokens.esm-b1eb9ac4.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;
@@ -43,7 +46,7 @@ const Navbar = class {
     }
     render() {
         const navbarEl = bem.BEM.block('navbar');
-        return (index.h(index.Host, { key: 'c0a7e51b1f0b6cf601943198f5c116325c5115ce', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, index.h("nav", { key: 'c042e875f2b62bc58fd06851bd1a4d371a2e8080', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, index.h("slot", { key: '84e0ffcd250b6f4806d8c5d6ca4fc86bb3dbfe4a' }))));
+        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' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -52,6 +55,39 @@ const Navbar = class {
 };
 Navbar.style = BalNavbarStyle0;
 
+const i18nBalNavbarBrand = {
+    en: {
+        logoButtonLabel: 'To Homepage',
+    },
+    fr: {
+        logoButtonLabel: 'Vers la page d’accueil',
+    },
+    it: {
+        logoButtonLabel: 'Alla pagina principale',
+    },
+    nl: {
+        logoButtonLabel: 'Naar de startpagina',
+    },
+    es: {
+        logoButtonLabel: 'A la página principal',
+    },
+    pt: {
+        logoButtonLabel: 'Para a página inicial',
+    },
+    sv: {
+        logoButtonLabel: 'Till startsidan',
+    },
+    fi: {
+        logoButtonLabel: 'Etusivulle',
+    },
+    de: {
+        logoButtonLabel: 'Zur Startseite',
+    },
+    pl: {
+        logoButtonLabel: 'Na stronę główną',
+    },
+};
+
 const NavbarBrand = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -59,8 +95,11 @@ const NavbarBrand = class {
         this.balWillAnimate = index.createEvent(this, "balWillAnimate", 7);
         this.balDidAnimate = index.createEvent(this, "balDidAnimate", 7);
         this.bodyScrollHandler = new scroll.BalScrollHandler();
+        this.language = config_default.defaultConfig.language;
         this.isMenuActive = false;
         this.href = '';
+        this.logoClickable = false;
+        this.logoLabel = undefined;
         this.target = '_self';
         this.simple = false;
         this.logo = undefined;
@@ -79,6 +118,12 @@ const NavbarBrand = class {
     disconnectedCallback() {
         this.bodyScrollHandler.disconnect();
     }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
     async resetIsMenuActive(ev) {
         if (ev.matches && !this.simple) {
             this.toggle(false);
@@ -114,13 +159,20 @@ const NavbarBrand = class {
     render() {
         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 }));
-        return (index.h(index.Host, { key: '5a19618c04c539ac05ae44950d5642724f345d8f', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (index.h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), index.h("span", { key: 'bac65d94bd398e028a0bf4159df01af8e346eb7c', class: Object.assign({}, navbarBrandEl.element('title').class()) }, index.h("slot", { key: '67808a0a311e2cb423d4f6cf2eaa6cb0b70062d8' })), index.h("bal-button", { key: '5d5a5d9602caec124e8163ebe54fc66b363d65c9', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
+        return (index.h(index.Host, { key: '68848bc9042cea0a8da2368dce7bddb8ffa349f1', 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, 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: '048af402cdd3bd273b62373dd9b99cbf1f744c56', class: Object.assign({}, navbarBrandEl.element('title').class()) }, index.h("slot", { key: 'e03caae5038304a1513400972c36e2eb2e8981a6' })), index.h("bal-button", { key: 'c9aa9ea6503771f47fa7fd6e6f12cb0030903a86', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));
     }
     get el() { return index.getElement(this); }
 };
+tslib_es6.__decorate([
+    config_decorator.ListenToConfig(),
+    tslib_es6.__metadata("design:type", Function),
+    tslib_es6.__metadata("design:paramtypes", [Object]),
+    tslib_es6.__metadata("design:returntype", Promise)
+], NavbarBrand.prototype, "configChanged", null);
 
 const NavbarMenu = class {
     constructor(hostRef) {
@@ -152,7 +204,7 @@ const NavbarMenu = class {
                 container = navbarEl.container;
             }
         }
-        return (index.h(index.Host, { key: '88676dca9a4def916347757f552fa1efe174d80d', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, index.h("slot", { key: '47d1c81229bf002f4404123dad97df4d92042f1c' })));
+        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' })));
     }
     get element() { return index.getElement(this); }
 };
@@ -170,7 +222,7 @@ const NavbarMenuEnd = class {
     }
     render() {
         const menuEndEl = bem.BEM.block('navbar').element('menu').element('end');
-        return (index.h(index.Host, { key: '04f6df129b2db2428a8ee50e4c3316cf9cc143f9', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: '0457213c0f02e87d1c2b30e7be6be3c0471fe3b9' })));
+        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' })));
     }
 };
 
@@ -181,7 +233,7 @@ const NavbarMenuStart = class {
     }
     render() {
         const menuStartEl = bem.BEM.block('navbar').element('menu').element('start');
-        return (index.h(index.Host, { key: '06f8898607ca2e126026864177931399c87819be', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, index.h("slot", { key: 'a1f9e79d3d0681c1c96734218cf5313f7cf95afb' })));
+        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' })));
     }
 };
 

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: '053b822408de6ad62883b8a901648d7c4bece50a', 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: '0a46d87a51d6b6501d55484b03dc20b19892d03c', 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: '157c6c9f6e0ea1a31022716502c2f6faa443f688' }))));
+        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' }))));
     }
 };
 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: 'f7c2af83a4cdb00cf64ecc41c249bbc96eb99a56', 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: 'de20fea5880d141637e63eaab0cec93e44673745', class: Object.assign({}, detailsEl.class()) }, index.h("div", { key: '4bceb9b4680715d501e7e0fad200e225feca29d4', "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: '2bf5d7f9b68260dac90dcfd1a1da5d9d2ca9b2a4', class: Object.assign({}, detailsEl.element('content').class()) }, index.h("h2", { key: 'a7ac3ab5fc847a8242f34947af57fe849b2d843d', id: subjectId }, this.subject), index.h("span", Object.assign({ key: 'd77eb9352cb5c8df426c77892b6aab7e506fbe73' }, messageAttributes), index.h("slot", { key: '88a32633220e164154bf2ef4fb68dacd5c1ab973' }), index.h("span", { key: '73329ef3def8c43252dcbd85fc72aa3a3291799e', class: "hidden" }))), index.h("div", { key: 'ce1ad2520d6667e264fd279448050db0300ee3d4', class: Object.assign({}, detailsEl.element('close').class()) }, index.h("bal-close", { key: '2a70da54ed0988c3b04dd4c1cd071758a5dfce8a', 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: '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))) : ('')));
     }
     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: 'a074edb1a44c13cc050c686e6bb73c4bb1376c93', id: this.toastId, class: Object.assign({}, block.class()) }, index.h("div", { key: '6141f8211ce62cb635a4f3d6ad53922c72f1104c', role: "status", class: Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(`color-${this.color}`).class(!!this.color)) }, index.h("span", { key: '74eeca46bf773834b4e93c70777e152322506ccf', class: Object.assign({}, labelEl.class()), "data-testid": "bal-toast-label", innerHTML: this.message }, index.h("slot", { key: '6e6fdfd5b365fc73eaaad7e5050c6bb33b14af6b' })), 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: '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" })) : (''))));
     }
     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: 'beffd9044572b99e98721aed8bffe8b4321d771e', 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: '784ad1c80494175528ebb82fd64904a3fb4fd874' })));
+        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' })));
     }
 };
 Notification.style = BalNotificationStyle0;

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

@@ -6,14 +6,15 @@ const index$1 = require('./index-84f42282.js');
 const tslib_es6 = require('./tslib.es6-a680968e.js');
 const formInput = require('./form-input-85323470.js');
 const helpers = require('./helpers-c858e965.js');
-const attributes = require('./attributes-9f366716.js');
+const attributes = require('./attributes-11acd153.js');
 const number = require('./number-047915cd.js');
 const bem = require('./bem-81bc6a2d.js');
-const form = require('./form-2279fb2f.js');
+const form = require('./form-17c98ac2.js');
 const log = require('./log-33398c2a.js');
 const index = require('./index-e6a233be.js');
 const keys_constant = require('./keys.constant-b53da545.js');
 const index$2 = require('./index-24d802b4.js');
+const aria = require('./aria-7672033f.js');
 const config_default = require('./config.default-48618371.js');
 const config_decorator = require('./config.decorator-c38efed9.js');
 require('./browser-1d542d0f.js');
@@ -330,10 +331,11 @@ const NumberInput = class {
         this.balChange = helpers.debounceEvent(this.balChange, this.debounce);
     }
     valueChanged(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            const isValueNotDefined = newValue === '' || index.lodash_isnil(newValue) || lodash_isnan(newValue);
+        const newValueAsNumber = toNumber(newValue, this.decimal);
+        if (newValueAsNumber !== oldValue) {
+            const isValueNotDefined = newValueAsNumber === '' || index.lodash_isnil(newValueAsNumber) || lodash_isnan(newValueAsNumber);
             const emptyValue = this.exactNumber ? '0' : '';
-            const value = isValueNotDefined ? emptyValue : newValue.toString();
+            const value = isValueNotDefined ? emptyValue : newValueAsNumber.toString();
             this.inputValue = toNumber(toFixedNumber(value, this.decimal), this.decimal);
             this.lastValue = toFixedNumber(value, this.decimal);
             if (this.focused) {
@@ -452,11 +454,11 @@ const NumberInput = class {
      */
     render() {
         const block = bem.BEM.block('number-input');
-        return (index$1.h(index$1.Host, { key: '6c70b82d9eb15c47fc4aee5246819c0a4fecc7fb', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, index$1.h("input", Object.assign({ key: '254dee1b9cb3c99f10e0c4b835e69552314ed6c4', class: {
+        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: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
-            }, "data-testid": "bal-number-input", ref: input => (this.nativeInput = input), 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": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, pattern: this.inputPattern, min: this.min, max: this.max, value: this.nativeInputValue, onInput: e => this.onInput(e), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onClick: this.onClick, onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes))));
+            }, "data-testid": "bal-number-input", ref: input => (this.nativeInput = input), 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), name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, pattern: this.inputPattern, min: this.min, max: this.max, value: this.nativeInputValue, onInput: e => this.onInput(e), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onClick: this.onClick, onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes))));
     }
     get el() { return index$1.getElement(this); }
     static get watchers() { return {

package/dist/cjs/bal-option_2.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 log = require('./log-33398c2a.js');
-const aria = require('./aria-c8955a5c.js');
+const aria = require('./aria-7672033f.js');
 const formInput = require('./form-input-85323470.js');
 const elementStates_decorator = require('./element-states.decorator-c8199b43.js');
 const index$1 = require('./index-e6a233be.js');
-const attributes = require('./attributes-9f366716.js');
+const attributes = require('./attributes-11acd153.js');
 const helpers = require('./helpers-c858e965.js');
 const utils = require('./utils-9ea175af.js');
-const form = require('./form-2279fb2f.js');
+const form = require('./form-17c98ac2.js');
 require('./browser-1d542d0f.js');
 require('./listener-52d2e5fd.js');
 require('./config.utils-bccf141d.js');
@@ -114,7 +114,7 @@ const Option = class {
      */
     render() {
         const block = bem.BEM.block('option');
-        return (index.h(index.Host, { key: '2dbf49c5030c61a24ce0b2b8cb2fe0f1ede9895b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": 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: '1ed42549cea2542e4eb56d7cfc6c1024dd13aa71', 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: '3f3c59ec2f04e77bd0400ec58b8294c3ecd7a1b7', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, index.h("slot", { key: '04e84d67e23ba2e5bd59e5ddb7c4549327e77ce0' })), 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: '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' })) : (''))));
     }
     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: '946ff4a59bf7e9202317d7898791f34006c90ee1', class: Object.assign({}, block.class()), id: this.inputId }, index.h("div", Object.assign({ key: '078d3ec40ac98bd470666e941b84119f89b9b5f9', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), index.h("slot", { key: '18ddbc132a73787221f6bb7dbf483e1e26883a43' }))));
+        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' }))));
     }
     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-37ab025d.js');
+const breakpoints_subject = require('./breakpoints.subject-3244205b.js');
 const config_default = require('./config.default-48618371.js');
-const breakpoints_decorator = require('./breakpoints.decorator-02f40938.js');
+const breakpoints_decorator = require('./breakpoints.decorator-f4800188.js');
 const config_decorator = require('./config.decorator-c38efed9.js');
 require('./helpers-c858e965.js');
 require('./browser-1d542d0f.js');
 require('./config.utils-bccf141d.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-2b08bc6c.js');
+require('./tokens.esm-b1eb9ac4.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: '6fd9b27bbc3078a95b6a1af21c4e11bef1c79e4d', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, index.h("span", { key: 'f33eb6a8a51bd338c062bf3ac142b31ec170b4bf' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (index.h("ul", { key: 'af2f5c1c4582c9f87a34ae8d9e18e6f153d6c079', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (index.h("ul", { key: 'e60525e50e001e65e0f3dfdcab2be7c577d1cb34', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (index.h(index.Host, { key: 'a82c3987b261b090d73a6a326b0628e9f4431de7', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, index.h("nav", { key: '3558d69404ce4877651363ffe60f5bf37428a316', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, index.h("bal-button", { key: 'a7e00cae2c81d3970f946ac21ab56564a10786a7', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, index.h("bal-icon", { key: '3b3974da7c2f8d195711d912083ef8021e3d71ca', name: "nav-go-left", size: "small" })), index.h("bal-button", { key: '1fb819a459e3851768a5664b0bcb8ae6bdfffc83', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, index.h("bal-icon", { key: '28bb33f69928d49ea196efc60f0a539c985c6936', 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: '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) : '')));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -10,7 +10,7 @@ const formInput = require('./form-input-85323470.js');
 const helpers = require('./helpers-c858e965.js');
 const log = require('./log-33398c2a.js');
 const focusVisible = require('./focus-visible-264bd9b8.js');
-const floatingUi = require('./floating-ui-3147d2ff.js');
+const floatingUi = require('./floating-ui-838f057c.js');
 const keyboard_helpers = require('./keyboard.helpers-2093e793.js');
 require('./config.utils-bccf141d.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: 'faca9751174d4d2f7348cb3b7a018d6e3d5e4401', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, index.h("div", { key: 'c4e5cb86d6c3f72d4203579b13fdd492aae42e5d', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), index.h("div", { key: '34a7ae9a817a79c34514a38595fa21314912fd38', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, index.h("div", { key: '66bca82705a14ba4051e4f6ff5ddb5e57ae4860f', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), index.h("bal-stack", { key: '370a9c46d9bbd75615a3e792fb735bbbd9e9eb60', 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: 'c4abdbf963e98458d34819f5fd2614b33703a3e9', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, index.h("slot", { key: '2a0407838f7814ecd8126c722afa02a333ed200a' }))))));
+        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' }))))));
     }
     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-c858e965.js');
-const breakpoints_subject = require('./breakpoints.subject-37ab025d.js');
-const breakpoints_decorator = require('./breakpoints.decorator-02f40938.js');
-const windowResize_decorator = require('./window-resize.decorator-7153a9f2.js');
+const breakpoints_subject = require('./breakpoints.subject-3244205b.js');
+const breakpoints_decorator = require('./breakpoints.decorator-f4800188.js');
+const windowResize_decorator = require('./window-resize.decorator-6133d79a.js');
 require('./browser-1d542d0f.js');
 require('./config.utils-bccf141d.js');
 require('./device-9f97a845.js');
 require('./listener-52d2e5fd.js');
-require('./tokens.esm-2b08bc6c.js');
+require('./tokens.esm-b1eb9ac4.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: '139854a6448551246c86209f127c3e0cf5d83717', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, index.h("div", { key: 'b39c551cdc221112f1109fa1d2f4bbbdf6e0d2c2', 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: '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) })));
     }
     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: '930e72f27e13997e2cc563abcbbedd74d77aa469', 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: 'da96569302e75ced3a3e6295b854bbb5dc537daf', 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: 'faafe0cf289c3faec5b68826ee2029dd9e5e5747' }))));
+        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' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {