@baloise/ds-core 19.7.1 → 19.8.0

package/dist/collection/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.js

@@ -102,9 +102,12 @@ export class NavbarBrand {
     }
     render() {
         const navbarBrandEl = BEM.block('navbar').element('brand');
-        const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
+        const logoTemplate = this.logo ? (h("img", { class: Object.assign(Object.assign({}, navbarBrandEl.element('logo').class()), navbarBrandEl
+                .element('logo')
+                .modifier('small')
+                .class(this.logoSize === 'small')), src: this.logo, alt: "Logo" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
         const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
-        return (h(Host, { key: '99b5f123911b805e5cf79ba9ab395b1d8d2421cc', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '3c007d46ec3efbbd3be956a0aceaeba762b964ce', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '28304a753591015e53f85675533e58544c797ddc' })), h("bal-button", { key: 'f0d595579b7d63428196cc9947e87cb058e42fcb', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: '7094feb6286adb3f8ca239f2083915b0c515f558', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'd34d073da6df76bb8ee23cf2f0e252e25770e8ae', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '1fe4bf6cff6641d027a9ead60bd7bb6a7b9aca9d' })), h("bal-button", { key: '2c873463b3cf67369769f82e8aa7c524240ad38e', 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() })));

package/dist/collection/components/bal-navbar/bal-navbar-menu/bal-navbar-menu.js

@@ -38,7 +38,7 @@ export class NavbarMenu {
                 container = navbarEl.container;
             }
         }
-        return (h(Host, { key: 'e3632d31af2bf0bbd0bc416c40ff17ed7cd3a74f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: '63897a0b6c61e222fc3f87051c1f4cf89d27be5a' })));
+        return (h(Host, { key: '63998810051c44f2d243a7bfa00b67e8af85c7f4', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: 'becca6583af8c7f8c16352b8b883d8a3e0bb12b0' })));
     }
     static get is() { return "bal-navbar-menu"; }
     static get properties() {

package/dist/collection/components/bal-navbar/bal-navbar-menu-end/bal-navbar-menu-end.js

@@ -12,7 +12,7 @@ export class NavbarMenuEnd {
     }
     render() {
         const menuEndEl = BEM.block('navbar').element('menu').element('end');
-        return (h(Host, { key: '704fe4c50701625f0160aa39a79a5fc3e2f9debb', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '05737e744803b4b62906ab835d555d1c9cc6cf98' })));
+        return (h(Host, { key: 'f14a32308315faa073437ea9f98198fda0b1c10e', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '46fca68cb333182ac0ba7bab88e8f119a7493f67' })));
     }
     static get is() { return "bal-navbar-menu-end"; }
     static get properties() {

package/dist/collection/components/bal-navbar/bal-navbar-menu-start/bal-navbar-menu-start.js

@@ -12,7 +12,7 @@ export class NavbarMenuStart {
     }
     render() {
         const menuStartEl = BEM.block('navbar').element('menu').element('start');
-        return (h(Host, { key: 'b53e1c198366eeca89e5d71bf52af297902307a8', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '3e123a521d151135d72001d1b3ac703d236a4c8f' })));
+        return (h(Host, { key: '53e5a32adbf95bc5949b66ca03afb6d83981e710', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'ff1ca88a94cdfcef3c8986dd92fc3fd086832280' })));
     }
     static get is() { return "bal-navbar-menu-start"; }
     static get properties() {

package/dist/collection/components/bal-navbar/bal-navbar.css

@@ -1 +1 @@
-: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:flex;height:100%;gap:1rem}.bal-navbar__brand{flex:1;gap:2rem;display:flex;justify-content:flex-start;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{flex:initial}}.bal-navbar__brand>a{display:flex;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__title{display:none;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;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:flex;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:flex;justify-content:flex-end;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:flex;flex:1;justify-content:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{justify-content:flex-start}.bal-navbar__menu__end{display:flex;justify-content:flex-end;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{flex-shrink:0;justify-content:flex-end;align-items:center}.bal-navbar__menu__end>.field{flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{flex-shrink:0;justify-content:flex-end;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);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}
+: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:flex;height:100%;gap:1rem}.bal-navbar__brand{flex:1;gap:2rem;display:flex;justify-content:flex-start;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{flex:initial}}.bal-navbar__brand>a{display:flex;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__logo--small{height:calc(100% - 2.5rem)}@media screen and (min-width: 1024px){.bal-navbar__brand__logo--small{height:calc(100% - 3.5rem)}}.bal-navbar__brand__title{display:none;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;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:flex;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:flex;justify-content:flex-end;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:flex;flex:1;justify-content:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{justify-content:flex-start}.bal-navbar__menu__end{display:flex;justify-content:flex-end;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{flex-shrink:0;justify-content:flex-end;align-items:center}.bal-navbar__menu__end>.field{flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{flex-shrink:0;justify-content:flex-end;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);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}

package/dist/collection/components/bal-navbar/bal-navbar.js

@@ -44,7 +44,7 @@ export class Navbar {
     }
     render() {
         const navbarEl = BEM.block('navbar');
-        return (h(Host, { key: 'd21b6f612b2111ce0a70adb00e62fc7663d1b651', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'c04d357d30be897227259035bd86e2f5a7edc936', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '48fba6d236e2dfdbf7d0ae23d76b290f63692ba6' }))));
+        return (h(Host, { key: 'e3ebbb80f7a7bdd0c832b55bd1a1c0981374fbac', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'be15f3d1a10b38b5bdfd2135c6c5d13aedee83ae', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: 'b6e746b68f03e11fd4a40f37d693401d37be45cf' }))));
     }
     static get is() { return "bal-navbar"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-notices/bal-notices.js

@@ -19,7 +19,7 @@ export class Notices {
         const block = BEM.block('notices');
         const innerEl = block.element('inner');
         const hasContainer = this.interface === 'toast' && this.container !== undefined;
-        return (h(Host, { key: '83c73f66abe9dc3abf4181c43af09fc4ce7f3b7a', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: 'f16cd17c52f0df45500e9be985fc099c5c134cf6', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'bdf0fc55a2b9d63fed14821e8e83553394052ac2' }))));
+        return (h(Host, { key: '294ba92d2e137fa0c5406ec60d56d0eed1e4fcf7', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: '53decc541abb88d35bd6b27afb9af46bffc9b2b9', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'e1c9750c08902b3aec0fb0d87722f7bdf3f2bab4' }))));
     }
     static get is() { return "bal-notices"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-notification/bal-notification.js

@@ -19,7 +19,7 @@ export class Notification {
     render() {
         const block = BEM.block('notification');
         const innerEl = block.element('inner');
-        return (h(Host, { key: '25a9149c4bb693ebf3c1b1a863e72f7727b8d046', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '6254964fe9f247d75cb102a80c7a251a233bf2d9' })));
+        return (h(Host, { key: 'f9a2fea93790ed9356e61597b3a6301a2cabc57f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '032dda1d4a05b484eb484465e5550da20a71499e' })));
     }
     static get is() { return "bal-notification"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-number-input/bal-number-input.js

@@ -271,7 +271,7 @@ export class NumberInput {
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: '4450a17f6fba5f8b547a0879f1bfdbaaf192875e', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '5fcd6aea0302c232cd222d8df3ec70a3f192587a', class: {
+        return (h(Host, { key: 'd91080decce4a1568a02ca2dd035866aae49cf76', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '88efec9e37fd84e1aba4672521a93f5453105bcd', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

package/dist/collection/components/bal-option/bal-option.js

@@ -124,7 +124,7 @@ export class Option {
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: '414068aff0d1e8941fd0136fd727186d1720b954', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'ae708955909732ef6bd03403374cec8098f4e140', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: 'ddc2384b1d07f89c0b68746b76a25b9821cc99c2', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '17356f3f1d39f90f4f9d8c73ece8e6f77de9e747' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: 'b1354e891bf0e8daf9dbd51f9f9c0343cb153cd7', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: '86b29daf65cebd3b742841eb2ab3785a74ddf620', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: '59f0e1afb3e543123dd891a5fc439f737c2454e4', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: 'f817c6d88b07f8113194fbf6ba5f0298c9e99f81' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     static get is() { return "bal-option"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-option-list/bal-option-list.js

@@ -436,7 +436,7 @@ export class OptionList {
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '934c509e0703b3d7435028ad7bff05290d6a855b', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4d6b39d94ea7f7abacd128ca65e0f9f985ae3165', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '0ad6401208e35316c7eb892d0b8ffba1476a8611' }))));
+        return (h(Host, { key: 'b232136a55b7116f1894fca167540d50b7d974db', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '2c8a33c3e9baf88f7acd26bb097690909c2fdacc', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: 'ae72b336a225342786af05f2a722d3d2f6409871' }))));
     }
     static get is() { return "bal-option-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-pagination/bal-pagination.js

@@ -135,10 +135,10 @@ export class Pagination {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { key: '6851055924de8b04d1c2426851296fc43de9d5a8', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '3c7b45ffc1b9844a54b05455444fc27f0947ed23' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: 'ac07986c347c110d113f46ceff2cb77ced99c5da', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (h("ul", { key: '9b83d79dd7bb63cfeb8d98ff940f2a91c9db72c8', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (h(Host, { key: 'c9f4756500a4f05b3d4756c0c568d6e7d930292c', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '463f770907d3b73651eb525c951870d53afb3147', 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" }, !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value < 2, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { name: "nav-go-left", size: "small", disabled: this._value < 2 }))) : (''), !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value === this.totalPages, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { name: "nav-go-right", size: "small", disabled: this._value === this.totalPages }))) : (''), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '59ca5648f4cc6cf0469b3a4238515508f742a552', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: 'e8258fcfa29e3535f1b1da2dbf0e89266d6cec89' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: '9a53e78442f9ae97809217ca59c97ff70855968f', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: '1fe47c3d518b2ac04c5da482e91b581bed926f48', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: 'e7537b55e58f3a59c0092b6b63a9d66e37ae7fdf', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: 'e98779bf3ef44a0ddb9c037a557ef9c9f6120950', 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" }, !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value < 2, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { name: "nav-go-left", size: "small", disabled: this._value < 2 }))) : (''), !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, 'is-disabled': this._value === this.totalPages, 'is-flat': flat, [buttonColor]: true, [buttonSize]: true }, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { name: "nav-go-right", size: "small", disabled: this._value === this.totalPages }))) : (''), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     static get is() { return "bal-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-popover/bal-popover-content/bal-popover-content.js

@@ -80,7 +80,7 @@ export class PopoverContent {
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: '8c5281cc1fe731c729e6fb2859451b9872254f57', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '10fa564b011b3f0a0e1bd0c338d09970f3ce809e', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'cddf8ead7a7a6028a54b2d0a152f68a7dbeb9462' })), h("div", { key: 'acaa433bb6c396d86d927f95013fae818e694ab3', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'ae764840239d3f9021044f5643785c29e348e949', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '60c73ce1c4d003b0a3a78ec6a38e9676f806e11d', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'd0810231279ce91786fcfccc22eb0d13a65f3b57' })), h("div", { key: '6d9f8e916ec085cd938dbcddfcbd316e131be0b5', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     static get is() { return "bal-popover-content"; }
     static get properties() {

package/dist/collection/components/bal-popup/bal-popup.js

@@ -3,7 +3,7 @@ import { Host, h, } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 import { balBrowser } from "../../utils/browser";
 import { stopEventBubbling } from "../../utils/form-input";
-import { debounce } from "../../utils/helpers";
+import { debounce, isDescendant } from "../../utils/helpers";
 import { isEscapeKey } from "../../utils/keyboard";
 import { Logger } from "../../utils/log";
 import { DrawerVariantRenderer, FullscreenVariantRenderer, PopoverVariantRenderer, } from "./variants";
@@ -151,11 +151,14 @@ export class Popup {
                 this.debouncedGlobalClick(trigger);
             }
         }
+        else if (!this.backdrop && this.closable && this.presented && !isDescendant(this.el, target)) {
+            await this.dismiss();
+        }
     }
     async listenOnKeyDown(ev) {
         if (this.activeClosable && this.presented && isEscapeKey(ev)) {
             stopEventBubbling(ev);
-            this.dismiss();
+            await this.dismiss();
         }
     }
     async listenOnMouseDown(ev) {
@@ -338,7 +341,7 @@ export class Popup {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: 'd00be0d07efee28b0b4a57f137d55179db777224', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '551142b7b626ce0bb5c03881b01e34d550f4ac30', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '3b11edf18c9a36d8e2d4d007cc98195cb5f5433e', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: '82464245029a833826b31da622dd5d04c881af08', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: 'f59dd726ee1b127c5506c456b97e74cf4b73f1a6', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()), ref: innerBlock => (this.innerEl = innerBlock) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '52eaf48bdf014212ae2837122764b938bee9266f', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content", tabindex: "-1" }, h("slot", { key: 'a6847866d594209baec0d546373a50e0a4dd97f2' }))))));
+        return (h(Host, { key: 'f34be400326ce5ad36088ad230a0c0fa5a3177cd', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '35ef4753fffed9f8926125a3b34ae7603cc5afe4', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '5c9506eea596ea520b0928d4cb19bed2c58c2556', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: this.minContainerWidth } }, h("div", { key: 'b81e14abdec8e3d557d5c976351e60e31df89480', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '5785d79d871caad18b3d82fc8e83edf13851d7a0', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()), ref: innerBlock => (this.innerEl = innerBlock) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '87e8fb9e2423a8bb7bfcc9ffb42e4117003e71fd', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content", tabindex: "-1" }, h("slot", { key: '426bde256b70e071983d1c4f44d16c6bf6860f02' }))))));
     }
     static get is() { return "bal-popup"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-progress-bar/bal-progress-bar.js

@@ -72,7 +72,7 @@ export class ProgressBar {
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { key: '1df789d0a33beb7a7bdcf2802d41f91312091e84', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, 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) })));
+        return (h(Host, { key: '065dfb46b4b743aa654594135a95e676c0102436', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: '262d38096b7aeb0837e0298394ff5f41179d6d9d', 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) })));
     }
     static get is() { return "bal-progress-bar"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-radio/bal-radio-icon/bal-radio-icon.css

@@ -1 +1 @@
-:root{--bal-radio-icon-size: 1.5rem;--bal-radio-icon-border-width: 2px;--bal-radio-icon-border-radius: var(--bal-radius-rounded);--bal-radio-icon-color-inverted: var(--bal-color-white);--bal-radio-icon-border-color: var(--bal-color-primary);--bal-radio-icon-border-color-hovered: var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-pressed: var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-checked: var(--bal-color-primary);--bal-radio-icon-border-color-checked-hovered: var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-checked-pressed: var(--bal-color-border-primary-pressed);--bal-radio-icon-background: transparent;--bal-radio-icon-background-hovered: var(--bal-color-grey-2);--bal-radio-icon-background-pressed: var(--bal-color-grey-2);--bal-radio-icon-background-checked: var(--bal-color-primary);--bal-radio-icon-background-checked-hovered: var(--bal-color-border-primary-hovered);--bal-radio-icon-background-checked-pressed: var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-invalid: var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-hovered: var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-pressed: var(--bal-color-border-danger-pressed);--bal-radio-icon-border-color-invalid-checked: var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-checked-hovered: var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-checked-pressed: var(--bal-color-border-danger-pressed);--bal-radio-icon-background-invalid: transparent;--bal-radio-icon-background-invalid-hovered: var(--bal-color-danger-1);--bal-radio-icon-background-invalid-pressed: var(--bal-color-danger-1);--bal-radio-icon-background-invalid-checked: var(--bal-color-border-danger);--bal-radio-icon-background-invalid-checked-hovered: var(--bal-color-border-danger-hovered);--bal-radio-icon-background-invalid-checked-pressed: var(--bal-color-border-danger-pressed);--bal-radio-icon-background-disabled: var(--bal-color-grey-2);--bal-radio-icon-border-color-disabled: var(--bal-color-border-grey-dark);--bal-radio-icon-background-checked-disabled: var(--bal-color-border-grey-dark);--bal-radio-icon-border-color-checked-disabled: var(--bal-color-border-grey-dark)}.bal-radio-icon{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;user-select:none;width:var(--bal-radio-icon-size);max-width:var(--bal-radio-icon-size);height:var(--bal-radio-icon-size);max-height:var(--bal-radio-icon-size);border-radius:var(--bal-radio-icon-border-radius);overflow:hidden;border:var(--bal-radio-icon-border-width) solid var(--bal-radio-icon-border-color);background-color:var(--bal-radio-icon-background)}@media(hover: hover)and (pointer: fine){.bal-radio-icon--hovered,.bal-radio-icon:hover{background:var(--bal-radio-icon-background-hovered);border-color:var(--bal-radio-icon-border-color-hovered)}}.bal-radio-icon--pressed,.bal-radio-icon:active{background:var(--bal-radio-icon-background-pressed);border-color:var(--bal-radio-icon-border-color-pressed)}.bal-radio-icon:after{display:block;content:"";background-color:rgba(0,0,0,0);border-radius:var(--bal-radio-icon-border-radius);width:.375rem;height:.375rem}.bal-radio-icon bal-icon{opacity:0}.bal-radio-icon--checked:after{background-color:#fff}.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked);border-color:var(--bal-radio-icon-border-color-checked)}.bal-radio-icon--checked bal-icon{opacity:1}@media(hover: hover)and (pointer: fine){.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--checked:hover{background:var(--bal-radio-icon-background-checked-hovered);border-color:var(--bal-radio-icon-border-color-checked-hovered)}}.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--checked:active{background:var(--bal-radio-icon-background-checked-pressed);border-color:var(--bal-radio-icon-border-color-checked-pressed)}.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--invalid{border-color:var(--bal-radio-icon-border-color-invalid);background-color:var(--bal-radio-icon-background-invalid)}@media(hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--hovered,.bal-radio-icon--invalid:hover{background-color:var(--bal-radio-icon-background-invalid-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--pressed,.bal-radio-icon--invalid:active{background-color:var(--bal-radio-icon-background-invalid-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked{border-color:var(--bal-radio-icon-border-color-invalid);background:var(--bal-radio-icon-background-invalid-checked)}@media(hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--invalid.bal-radio-icon--checked:hover{background-color:var(--bal-radio-icon-background-invalid-checked-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--invalid.bal-radio-icon--checked:active{background-color:var(--bal-radio-icon-background-invalid-checked-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--disabled{cursor:default !important;background:var(--bal-radio-icon-background-disabled) !important;border-color:var(--bal-radio-icon-border-color-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked-disabled) !important;border-color:var(--bal-radio-icon-border-color-checked-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted) !important}
+:root{--bal-radio-icon-size: 1.5rem;--bal-radio-icon-border-width: 2px;--bal-radio-icon-border-radius: var(--bal-radius-rounded);--bal-radio-icon-inner-width: 0.375rem;--bal-radio-icon-inner-height: 0.375rem;--bal-radio-icon-inner-background-checked: white;--bal-radio-icon-color-inverted: var(--bal-color-white);--bal-radio-icon-border-color: var(--bal-color-primary);--bal-radio-icon-border-color-hovered: var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-pressed: var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-checked: var(--bal-color-primary);--bal-radio-icon-border-color-checked-hovered: var(--bal-color-border-primary-hovered);--bal-radio-icon-border-color-checked-pressed: var(--bal-color-border-primary-pressed);--bal-radio-icon-background: transparent;--bal-radio-icon-background-hovered: var(--bal-color-grey-2);--bal-radio-icon-background-pressed: var(--bal-color-grey-2);--bal-radio-icon-background-checked: var(--bal-color-primary);--bal-radio-icon-background-checked-hovered: var(--bal-color-border-primary-hovered);--bal-radio-icon-background-checked-pressed: var(--bal-color-border-primary-pressed);--bal-radio-icon-border-color-invalid: var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-hovered: var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-pressed: var(--bal-color-border-danger-pressed);--bal-radio-icon-border-color-invalid-checked: var(--bal-color-border-danger);--bal-radio-icon-border-color-invalid-checked-hovered: var(--bal-color-border-danger-hovered);--bal-radio-icon-border-color-invalid-checked-pressed: var(--bal-color-border-danger-pressed);--bal-radio-icon-background-invalid: transparent;--bal-radio-icon-background-invalid-hovered: var(--bal-color-danger-1);--bal-radio-icon-background-invalid-pressed: var(--bal-color-danger-1);--bal-radio-icon-background-invalid-checked: var(--bal-color-border-danger);--bal-radio-icon-background-invalid-checked-hovered: var(--bal-color-border-danger-hovered);--bal-radio-icon-background-invalid-checked-pressed: var(--bal-color-border-danger-pressed);--bal-radio-icon-background-disabled: var(--bal-color-grey-2);--bal-radio-icon-border-color-disabled: var(--bal-color-border-grey-dark);--bal-radio-icon-background-checked-disabled: var(--bal-color-border-grey-dark);--bal-radio-icon-border-color-checked-disabled: var(--bal-color-border-grey-dark)}.bal-radio-icon{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;user-select:none;width:var(--bal-radio-icon-size);max-width:var(--bal-radio-icon-size);height:var(--bal-radio-icon-size);max-height:var(--bal-radio-icon-size);border-radius:var(--bal-radio-icon-border-radius);overflow:hidden;border:var(--bal-radio-icon-border-width) solid var(--bal-radio-icon-border-color);background-color:var(--bal-radio-icon-background)}@media(hover: hover)and (pointer: fine){.bal-radio-icon--hovered,.bal-radio-icon:hover{background:var(--bal-radio-icon-background-hovered);border-color:var(--bal-radio-icon-border-color-hovered)}}.bal-radio-icon--pressed,.bal-radio-icon:active{background:var(--bal-radio-icon-background-pressed);border-color:var(--bal-radio-icon-border-color-pressed)}.bal-radio-icon:after{display:block;content:"";background-color:rgba(0,0,0,0);border-radius:var(--bal-radio-icon-border-radius);width:var(--bal-radio-icon-inner-width, 0.375rem);height:var(--bal-radio-icon-inner-height, 0.375rem)}.bal-radio-icon bal-icon{opacity:0}.bal-radio-icon--checked:after{background-color:var(--bal-radio-icon-inner-background-checked)}.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked);border-color:var(--bal-radio-icon-border-color-checked)}.bal-radio-icon--checked bal-icon{opacity:1}@media(hover: hover)and (pointer: fine){.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--checked:hover{background:var(--bal-radio-icon-background-checked-hovered);border-color:var(--bal-radio-icon-border-color-checked-hovered)}}.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--checked:active{background:var(--bal-radio-icon-background-checked-pressed);border-color:var(--bal-radio-icon-border-color-checked-pressed)}.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--invalid{border-color:var(--bal-radio-icon-border-color-invalid);background-color:var(--bal-radio-icon-background-invalid)}@media(hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--hovered,.bal-radio-icon--invalid:hover{background-color:var(--bal-radio-icon-background-invalid-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--pressed,.bal-radio-icon--invalid:active{background-color:var(--bal-radio-icon-background-invalid-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked{border-color:var(--bal-radio-icon-border-color-invalid);background:var(--bal-radio-icon-background-invalid-checked)}@media(hover: hover)and (pointer: fine){.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--hovered,.bal-radio-icon--invalid.bal-radio-icon--checked:hover{background-color:var(--bal-radio-icon-background-invalid-checked-hovered);border-color:var(--bal-radio-icon-border-color-invalid-hovered)}}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--pressed,.bal-radio-icon--invalid.bal-radio-icon--checked:active{background-color:var(--bal-radio-icon-background-invalid-checked-pressed);border-color:var(--bal-radio-icon-border-color-invalid-pressed)}.bal-radio-icon--invalid.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted)}.bal-radio-icon--disabled{cursor:default !important;background:var(--bal-radio-icon-background-disabled) !important;border-color:var(--bal-radio-icon-border-color-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked{background-color:var(--bal-radio-icon-background-checked-disabled) !important;border-color:var(--bal-radio-icon-border-color-checked-disabled) !important}.bal-radio-icon--disabled.bal-radio-icon--checked.bal-radio-icon--inverted{border-color:var(--bal-radio-icon-color-inverted) !important}

package/dist/collection/components/bal-radio/bal-radio-icon/bal-radio-icon.js

@@ -41,7 +41,7 @@ export class RadioIcon {
         const disabled = !!this.disabled;
         const invalid = !!this.invalid;
         const inverted = !!this.inverted;
-        return (h(Host, { key: '161bc840e553656a11a4f6c9aaedfa554dcdcf01', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }));
+        return (h(Host, { key: '0662e5a528a5dbadfaa8763a06acb7baa46b223d', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }));
     }
     static get is() { return "bal-radio-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-radio/bal-radio.js

@@ -330,11 +330,11 @@ export class Radio {
         if (this.labelHidden) {
             inputAttributes['aria-labelledby'] = labelId;
         }
-        return (h(Host, { key: 'faa44091416d0505e2d84a792bd49f5eab82f897', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(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('button').class(this.interface === 'button')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), 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(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
+        return (h(Host, { key: '382a76b43c4967878e796e20914faaad31c1cb9b', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(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('button').class(this.interface === 'button')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), 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(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
                 .modifier(`column-tablet-${this.colSizeTablet}`)
                 .class(this.interface === 'tile' && this.colSizeTablet > 1)), block
                 .modifier(`column-mobile-${this.colSizeMobile}`)
-                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '3588b099302b821eccd777ae3149744f53a97834', class: Object.assign({}, labelEl.class()), "data-testid": "bal-radio-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "radio", "data-testid": "bal-radio-input", name: this.name, value: value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h("bal-radio-icon", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: '599fda9c376491dcb156c0b3fa8ecd41353027a8', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '752d10816299c2f7840ae907b426501a76ae8d23' })))));
+                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '473e9946e24bcb342d728ea9401ca6306e6dac33', class: Object.assign({}, labelEl.class()), "data-testid": "bal-radio-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "radio", "data-testid": "bal-radio-input", name: this.name, value: value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h("bal-radio-icon", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: '443a97633b9a93c613218ff53ee97c6f37b2dc8f', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '76cb543fed4b836d6b937d8ff016f8e14e2c6dcc' })))));
     }
     static get is() { return "bal-radio"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.css

@@ -1 +1 @@
-: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-item{display:block;position:relative;height:auto;text-decoration:none;text-overflow:ellipsis;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;font-kerning:none}.bal-segment-item--disabled{cursor:default !important;pointer-events:none !important}.bal-segment-item__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:2.5rem;min-width:3rem;display:flex;align-items:center;justify-content:center;flex-grow:1;padding-top:.375rem;padding-bottom:.375rem;padding-left:20px;padding-right:20px;outline:none;border-color:rgba(0,0,0,0);border-width:var(--bal-border-width-normal);border-style:solid;border-radius:var(--bal-radius-normal);background:rgba(0,0,0,0);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);color:var(--bal-segment-item-text-color);overflow:hidden;position:relative;contain:content;pointer-events:none;cursor:pointer;z-index:2}.bal-segment-item__button--vertical{padding-left:.75rem;padding-right:.75rem}.bal-segment-item__button span{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-regular)}.bal-segment-item__button{will-change:color,padding;transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{content:"";position:absolute;background:var(--bal-segment-item-divider-background);border-radius:var(--bal-radius-normal)}.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{top:2px;bottom:2px;right:-1px;width:2px}.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{left:2px;right:2px;bottom:-1px;height:2px}.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{background:var(--bal-segment-item-divider-background-invalid)}.bal-segment-item__indicator{transform-origin:left;position:absolute;opacity:0;box-sizing:border-box;pointer-events:none;border-radius:var(--bal-radius-normal);background:var(--bal-segment-item-indicator-background);top:0;left:0}.bal-segment-item__indicator--vertical{transform-origin:top}.bal-segment-item__indicator--invalid{background:var(--bal-segment-item-indicator-background-invalid)}.bal-segment-item__indicator--background{min-width:100%;min-height:100%;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease}.bal-segment-item__indicator--checked{opacity:1}.bal-segment-item:active .bal-segment-item__indicator{min-width:calc(100% - 4px);min-height:calc(100% - 4px);top:2px !important;bottom:2px !important;left:2px !important;right:2px !important}.bal-segment-item__button__icon{position:absolute !important;opacity:0;width:0 !important;transform:translateX(0.1rem);pointer-events:none !important;cursor:inherit;will-change:transform,opacity}.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical){left:10px}.bal-segment-item__button__icon--vertical{right:10px}.bal-segment-item__button__icon--animated{opacity:1;width:.875rem !important;transform:translateX(-4px);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__button--checked{color:var(--bal-segment-item-text-color-checked);padding-right:40px}.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical){padding-left:26px;padding-right:12px}@media(hover: hover)and (pointer: fine){.bal-segment-item:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-hovered)}}.bal-segment-item:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-pressed)}.bal-segment--keyboard .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,.bal-segment--keyboard .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled){border-color:var(--bal-segment-item-focus-border);border-width:var(--bal-border-width-normal);border-style:solid;transition:border 300ms ease-in-out}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled) .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid)}@media(hover: hover)and (pointer: fine){.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-hovered)}}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-pressed)}.bal-segment-item__button--invalid.bal-segment-item__button--checked{color:var(--bal-color-text-white)}.bal-segment-item__button--disabled{background:rgba(0,0,0,0);color:var(--bal-segment-item-text-color-disabled)}.bal-segment-item__button--disabled.bal-segment-item__button--checked{background:var(--bal-segment-item-indicator-background-disabled);color:var(--bal-segment-item-text-color-disabled-checked)}.bal-segment-item__button__slot--hidden{display:none !important}
+: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-body-color);--bal-segment-item-text-color-checked: var(--bal-body-color);--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-item{display:block;position:relative;height:auto;text-decoration:none;text-overflow:ellipsis;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;font-kerning:none}.bal-segment-item--disabled{cursor:default !important;pointer-events:none !important}.bal-segment-item__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:2.5rem;min-width:3rem;display:flex;align-items:center;justify-content:center;flex-grow:1;padding-top:.375rem;padding-bottom:.375rem;padding-left:20px;padding-right:20px;outline:none;border-color:rgba(0,0,0,0);border-width:var(--bal-border-width-normal);border-style:solid;border-radius:var(--bal-radius-normal);background:rgba(0,0,0,0);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);color:var(--bal-segment-item-text-color);overflow:hidden;position:relative;contain:content;pointer-events:none;cursor:pointer;z-index:2}.bal-segment-item__button--vertical{padding-left:.75rem;padding-right:.75rem}.bal-segment-item__button span{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-regular)}.bal-segment-item__button{will-change:color,padding;transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{content:"";position:absolute;background:var(--bal-segment-item-divider-background);border-radius:var(--bal-radius-normal)}.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{top:2px;bottom:2px;right:-1px;width:2px}.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{left:2px;right:2px;bottom:-1px;height:2px}.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{background:var(--bal-segment-item-divider-background-invalid)}.bal-segment-item__indicator{transform-origin:left;position:absolute;opacity:0;box-sizing:border-box;pointer-events:none;border-radius:var(--bal-radius-normal);background:var(--bal-segment-item-indicator-background);top:0;left:0}.bal-segment-item__indicator--vertical{transform-origin:top}.bal-segment-item__indicator--invalid{background:var(--bal-segment-item-indicator-background-invalid)}.bal-segment-item__indicator--background{min-width:100%;min-height:100%;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease}.bal-segment-item__indicator--checked{opacity:1}.bal-segment-item:active .bal-segment-item__indicator{min-width:calc(100% - 4px);min-height:calc(100% - 4px);top:2px !important;bottom:2px !important;left:2px !important;right:2px !important}.bal-segment-item__button__icon{position:absolute !important;opacity:0;width:0 !important;transform:translateX(0.1rem);pointer-events:none !important;cursor:inherit;will-change:transform,opacity}.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical){left:10px}.bal-segment-item__button__icon--vertical{right:10px}.bal-segment-item__button__icon--animated{opacity:1;width:.875rem !important;transform:translateX(-4px);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__button--checked{color:var(--bal-segment-item-text-color-checked);padding-right:40px}.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical){padding-left:26px;padding-right:12px}@media(hover: hover)and (pointer: fine){.bal-segment-item:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-hovered)}}.bal-segment-item:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-pressed)}.bal-segment--keyboard .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,.bal-segment--keyboard .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled){border-color:var(--bal-segment-item-focus-border);border-width:var(--bal-border-width-normal);border-style:solid;transition:border 300ms ease-in-out}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled) .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid)}@media(hover: hover)and (pointer: fine){.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-hovered)}}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-pressed)}.bal-segment-item__button--invalid.bal-segment-item__button--checked{color:var(--bal-color-text-white)}.bal-segment-item__button--disabled{background:rgba(0,0,0,0);color:var(--bal-segment-item-text-color-disabled)}.bal-segment-item__button--disabled.bal-segment-item__button--checked{background:var(--bal-segment-item-indicator-background-disabled);color:var(--bal-segment-item-text-color-disabled-checked)}.bal-segment-item__button__slot--hidden{display:none !important}

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.js

@@ -172,7 +172,7 @@ export class SegmentItem {
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (h(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)) }, 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), 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' }), h("bal-stack", { key: '47d5eb2ef471654c05343ae83b4ac2b4fb0e9839', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '833e34ce4261d88906d220ac92acf68691aa5d88', space: "none" }, h("bal-label", { key: 'a7fffd217d6823c4234c76f2e4a7fc645148a453', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '695a0cf23d40a0b19ef4a76248838b27dbe481be', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: '2fb05a58ea4850f5196804f69fb0d84e3dc1145e', onSlotchange: this.onSlottedItemsChange }))))), 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)) })));
+        return (h(Host, { key: 'a6a61e3339b5d03770243c20346f9bafdb6bedc5', 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)) }, h("button", Object.assign({ key: 'a78d765adcac3e0375ca53b53f3d241634021517', 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), h("bal-icon", { key: 'f029351aea2b372df532599247be187233ee6b15', 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' }), h("bal-stack", { key: 'ec9ffa5e9d2862037fc7317739d9db00f80c5e44', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: 'f0701161053b8ef8a6936bb2eca44a42861d6291', space: "none" }, h("bal-label", { key: 'e41da682352e552d391121e4982e76548a58e4e3', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '7622ef0e5a57ade0ff6083ff1cf90d0052cefce8', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: '00b60da405e8851d2eb74ad0bc84fb30cfdf65e0', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: 'd352c73452902b703e9b5bb3e2586e79bde451de', 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)) })));
     }
     static get is() { return "bal-segment-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-segment/bal-segment.css

@@ -1 +1 @@
-: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:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;justify-content:flex-start;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{justify-content:center;align-items:center}
+: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-body-color);--bal-segment-item-text-color-checked: var(--bal-body-color);--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:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;justify-content:flex-start;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{justify-content:center;align-items:center}

package/dist/collection/components/bal-segment/bal-segment.js

@@ -334,7 +334,7 @@ export class Segment {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: '6a865befe5aedec24d5ae099fb90cbbb207ae074', 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 }, h("slot", { key: 'a7cde4e933396438d919bc03535ac56ee2780e20', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: '5ee36ef41fd3e9f9467955506f660e48e6b479d9', 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 }, h("slot", { key: '75d585d050944a7764c809d55924671083187692', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "bal-segment"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-select/bal-select-option/bal-select-option.js

@@ -17,7 +17,7 @@ export class SelectOption {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: 'c479330ac26bcb19ddd41e7a99e635bf3ffc6170', style: { display: 'none' } }, h("slot", { key: '009baaefc29d307403edb10160c694dcc8495164' })));
+        return (h(Host, { key: '8829db26394b32b2a00ba288a944358c3f4e39be', style: { display: 'none' } }, h("slot", { key: '4ba8e9b7bdf68609d2e0ca5185a4e71943e66bda' })));
     }
     static get is() { return "bal-select-option"; }
     static get properties() {

package/dist/collection/components/bal-select/bal-select.css

@@ -1 +1 @@
-:root{--bal-select-control-background: var(--bal-color-white);--bal-select-control-background-hover: var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid: var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled: var(--bal-form-field-control-disabled-background);--bal-select-control-input-background: var(--bal-color-grey-1);--bal-select-control-native-input-background: transparent;--bal-select-control-native-input-background-hover: transparent;--bal-select-control-input-inverted-footer-background: transparent;--bal-select-control-input-inverted-footer-background-hover: transparent;--bal-select-control-input-multiple-background: transparent;--bal-select-control-input-multiple-background-read-only-selection: transparent;--bal-select-control-input-option-background: transparent;--bal-select-control-input-option-background-selected: var(--bal-color-primary-1);--bal-select-control-input-option-background-focused: var(--bal-color-grey-3);--bal-select-control-input-option-background-hover: var(--bal-color-grey-3);--bal-select-control-border-radius: var(--bal-form-field-control-radius);--bal-select-popover-border-color: var(--bal-color-grey-2);--bal-select-control-border-color: var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused: var(--bal-color-primary);--bal-select-control-border-color-hover: var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid: var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled: var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within: var(--bal-color-primary);--bal-select-option-border-top-color: var(--bal-color-grey-2);--bal-select-popover-empty-text-color: var(--bal-form-field-control-color);--bal-select-control-text-color: var(--bal-form-field-control-color);--bal-select-control-text-color-focused: var(--bal-color-primary);--bal-select-input-text-color-disabled: var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color: var(--bal-color-text-white);--bal-select-option-content-label-text-color: var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-select__control{display:flex;border-width:.125rem;border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{align-items:center;display:flex;flex:1 1;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:read-only{user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:flex;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:flex;flex:1;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;hyphens:auto}
+:root{--bal-select-control-background: var(--bal-color-white);--bal-select-control-background-hover: var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid: var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled: var(--bal-form-field-control-disabled-background);--bal-select-control-input-background: var(--bal-form-field-control-background-hover);--bal-select-control-native-input-background: transparent;--bal-select-control-native-input-background-hover: transparent;--bal-select-control-input-inverted-footer-background: transparent;--bal-select-control-input-inverted-footer-background-hover: transparent;--bal-select-control-input-multiple-background: transparent;--bal-select-control-input-multiple-background-read-only-selection: transparent;--bal-select-control-input-option-background: transparent;--bal-select-control-input-option-background-selected: var(--bal-color-primary-1);--bal-select-control-input-option-background-focused: var(--bal-color-grey-3);--bal-select-control-input-option-background-hover: var(--bal-color-grey-3);--bal-select-control-border-radius: var(--bal-form-field-control-radius);--bal-select-popover-border-color: var(--bal-color-grey-2);--bal-select-control-border-color: var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused: var(--bal-color-primary);--bal-select-control-border-color-hover: var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid: var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled: var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within: var(--bal-color-primary);--bal-select-option-border-top-color: var(--bal-color-grey-2);--bal-select-popover-empty-text-color: var(--bal-form-field-control-color);--bal-select-control-text-color: var(--bal-form-field-control-color);--bal-select-control-text-color-focused: var(--bal-color-primary);--bal-select-input-text-color-disabled: var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color: var(--bal-color-text-white);--bal-select-option-content-label-text-color: var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-select__control{display:flex;border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{align-items:center;display:flex;flex:1 1;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:read-only{user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:flex;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:flex;flex:1;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;hyphens:auto}

package/dist/collection/components/bal-select/bal-select.js

@@ -3,6 +3,7 @@ import { h, Host, } from "@stencil/core";
 import isNil from "lodash.isnil";
 import { ariaBooleanToString } from "../../utils/aria";
 import { areArraysEqual } from "../../utils/array";
+import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
 import { defaultBalAriaForm } from "../../utils/form";
 import { stopEventBubbling } from "../../utils/form-input";
@@ -18,6 +19,7 @@ export class Select {
         this.didInit = false;
         this.inputId = `bal-select-${selectIds++}`;
         this.initialValue = [];
+        this.inheritedAttributes = {};
         this.hasFocus = false;
         this.inputValue = '';
         this.focusIndex = -1;
@@ -265,6 +267,7 @@ export class Select {
         });
     }
     componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
         this.waitForOptionsAndThenUpdateRawValues();
         this.isInsideOfFooter();
         if (!isNil(this.rawValue) && this.options.size > 0 && length(this.rawValue) === 1) {
@@ -740,7 +743,7 @@ export class Select {
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: '69e00b5d661f1917fb6cbcf8919a8ce9670a25dd', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: 'ddb984b0edd1a0fbbad814a5d29c83ce7276a07a', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -754,19 +757,19 @@ export class Select {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '3d670b9aa3467ee96c65e2b1a98beda836cac095', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => 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)) }, h("select", { key: '1d438d1034af395d0f99bed2443bb66de288bb0a', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '8dc177324409d7bfdd75e3f375acd00c41ac11e8', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'eaa30ce518119e5ced60fc093e887167c4e83c69', "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)) }, h("div", { key: '4c6b0c807a1c25712d128216909e137af0d3cbf8', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '43659a2cc50a3585620a99974377c422d3e2f0f2', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => 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)) }, h("select", { key: '5d2d9ab75815fbe0b2db6ea82261beac097ab111', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '0c42dacf94a09088cbca90c527ff99bba37708fa', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: 'b1c5567689ad59809fa36559603761223368914b', "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)) }, h("div", { key: '93632751c2b8b472578e80012934949069c4961c', 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) => (h(Chip, { value: value }))), h("input", { key: '1d7fb70f81b7c0ae5fad2f77089ba2a8b04da050', 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": 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 ? (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) => (h(Chip, { value: value }))), h("input", Object.assign({ key: '2d6b493fc30aa1e1a4355e94ba15f9d404372ba7', 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": 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.inheritedAttributes))), !this.freeSolo && !this.loading ? (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' })) : ('')), h("bal-popover-content", { key: '756cb6d1ff62300a2b7b7d6c1250195da8fa3849', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, 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' })) : ('')), h("bal-popover-content", { key: 'f861f2aed280b9a55b932239e546561769d085cc', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, 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)), 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), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '7f49f62da3e7a1edd769f41e43fddda83a50f52b', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), 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), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '0941cb2d8007029c663852d61913bb0ca926ce32', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }

package/dist/collection/components/bal-shape/bal-shape.js

@@ -1,6 +1,6 @@
+import * as BaloiseDesignToken from "@baloise/ds-tokens";
 import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
-import * as BaloiseDesignToken from "@baloise/ds-tokens";
 export class Shape {
     constructor() {
         /**
@@ -51,11 +51,11 @@ export class Shape {
     render() {
         const block = BEM.block('shape');
         const shapes = [
-            h("g", { key: '7ffce26f2f8ff376d6f4a4281293b0cbce3d455e', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '7f37e580d4a84007d6cec7b29850252a71fbd7db', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: '7e655256f9c76c6ed82b5dc1628d25065dc16161', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
-            h("g", { key: '8720ba7f09f080a1e94475e8db5b465d280cd1cc', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: 'a471219e03f4af9f3b72ac7548e8a234fd798b41', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: 'a0f545ab74264f3389f45ca3fbd8544427046216', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
-            h("g", { key: '3aabfd5d30f05b9ca4c03970a539bd4fce699d40', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: 'cb78639d0529e2df4f8028c8838d3251ecdec578', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: 'b891158c547001cf3a2af9a6752739d2002b2ad2', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
+            h("g", { key: 'f3d8b7f5467b02d0c279dd48f806f7ecdda43055', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '20989a8f4a0ffacd98d5ea3fb635b9bb57c283ea', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: 'abe93f2fd25f250d863e91738929ed09b705dc22', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
+            h("g", { key: 'baab4800b5fd2e7b4da6354a8ea70977892f27e9', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: '50b59b033a31199c8bfa1ffeb3dad71a8ec09939', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: '7b8dcc70a852a9d19576339cb77001159eb459ff', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
+            h("g", { key: '49ce3b1e67abf972cf5d85fc4fd7179789dc7475', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '178eeae1141014cd9d350efa16127287f9b3e693', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: '5ddcf393f950bfac964f513641488157e4cbc864', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
         ];
-        return (h(Host, { key: '12322c170148297bfb743e359817b27490530d9a', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: '701ece673d80f3096f3a447de10904f2f5560a37', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
+        return (h(Host, { key: '37c01095b5cb62aba5f08a63f68912c222f2455d', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: '1a3508b2371190cbd682acdc0b35eba831b1bb9e', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
     }
     static get is() { return "bal-shape"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-sheet/bal-sheet.js

@@ -12,7 +12,7 @@ export class Sheet {
         const container = block.element('container');
         const containerInner = container.element('inner');
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
-        return (h(Host, { key: '75dd6a91f8ac6d45412ae20453935668cb571e7f', class: Object.assign({}, block.class()) }, h("div", { key: '75aa66d83f6a6330b9e3d36a703fb82ab11bd015', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: 'd6a97321e5db3a2c8ba252fb845228ba6371de67', class: Object.assign({}, containerInner.class()) }, h("slot", { key: 'f16331a11a842d719d494fb72db56fe0423aeb05' })))));
+        return (h(Host, { key: '1277fe42a8e474e6e6e56524e80c172057409e68', class: Object.assign({}, block.class()) }, h("div", { key: '489dfea1ce595b5f39871bff43f2bb2183ee2d0e', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: 'f8c101d9aeb9a4e95e4723c9a7d314b6117eaa99', class: Object.assign({}, containerInner.class()) }, h("slot", { key: 'd7c4dc1e3eb207ec9c34e8b1fd92aaa9301fcd16' })))));
     }
     static get is() { return "bal-sheet"; }
     static get originalStyleUrls() {