@baloise/ds-core 19.4.0 → 19.5.0-nightly.20250818

package/components/bal-dropdown.js

@@ -1,6 +1,6 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { m as rIC, b as waitAfterFramePaint, p as addEventListener, q as removeEventListener, e as waitAfterIdleCallback } from './helpers.js';
+import { n as rIC, a as waitAfterFramePaint, o as addEventListener, p as removeEventListener, b as waitAfterIdleCallback } from './helpers.js';
 import { b as balBrowser } from './browser.js';
 import { b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, a as isSpaceKey } from './keyboard.helpers.js';
 import { B as BEM } from './bem.js';

package/components/bal-field.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
-import { d as deepReady, b as waitAfterFramePaint } from './helpers.js';
+import { d as deepReady, a as waitAfterFramePaint } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
 
 const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-message{margin-top:0 !important}.bal-field-control+.bal-field-message{min-height:1.375rem;line-height:1.375rem}.bal-field-control:not(:has(+.bal-field-message)){padding-bottom:1.375rem}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";

package/components/bal-footer.js

@@ -6,7 +6,7 @@ import { L as ListenToConfig } from './config.decorator.js';
 import { e as updateBalLanguage } from './config.utils.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
-import { m as rIC } from './helpers.js';
+import { n as rIC } from './helpers.js';
 import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-logo2.js';
 

package/components/bal-form.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as scrollToFirstInvalidField } from './form.js';
-import { e as waitAfterIdleCallback, b as waitAfterFramePaint } from './helpers.js';
+import { b as waitAfterIdleCallback, a as waitAfterFramePaint } from './helpers.js';
 
 const balFormCss = ".bal-form{display:block;position:static}";
 

package/components/bal-hint2.js

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { L as ListenToConfig } from './config.decorator.js';
 import { B as BEM } from './bem.js';
-import { p as preventDefault } from './utils.js';
-import { B as BalScrollHandler } from './scroll.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenToConfig } from './config.decorator.js';
 import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
+import { B as BalScrollHandler } from './scroll.js';
+import { p as preventDefault } from './utils.js';
 import { d as defineCustomElement$8 } from './bal-button2.js';
 import { d as defineCustomElement$7 } from './bal-button-group2.js';
 import { d as defineCustomElement$6 } from './bal-close2.js';
@@ -33,6 +33,14 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         this.small = false;
         this.onPopupChange = (ev) => {
             this.isActive = ev.detail;
+            if (this.isMobile) {
+                if (this.isActive) {
+                    this.bodyScrollHandler.disable();
+                }
+                else {
+                    this.bodyScrollHandler.enable();
+                }
+            }
             preventDefault(ev);
         };
     }
@@ -94,9 +102,6 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         if (this.popupElement) {
             this.popupElement.present();
         }
-        if (this.isMobile) {
-            this.bodyScrollHandler.disable();
-        }
         this.isActive = true;
     }
     /**
@@ -106,9 +111,6 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         if (this.popupElement) {
             this.popupElement.dismiss();
         }
-        if (this.isMobile) {
-            this.bodyScrollHandler.enable();
-        }
         this.isActive = false;
     }
     updateContent() {

package/components/bal-icon2.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { p as purify } from './purify.es.js';
 import { c as commonjsGlobal, g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
+import { s as sanitizeSvg } from './svg.js';
 
 /**
  * lodash (Custom Build) <https://lodash.com/>
@@ -1015,8 +1015,11 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
                     this.svgContent = icon;
                     return;
                 }
+                else {
+                    console.error(`Icon "${iconName}" not found in design system configuration.`, '\n\nCheck out the documentation on how to import icons during initialization.', '\nhttps://design.baloise.dev/?path=/docs/components-data-display-icon--documentation&globals=framework:angular#import-during-initialization');
+                }
             }
-            this.svgContent = purify.sanitize(this.svg) || '';
+            this.svgContent = sanitizeSvg(this.svg);
         };
     }
     nameChanged() {
@@ -1105,7 +1108,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
     render() {
         const color = this.parseColor();
         const block = BEM.block('icon');
-        return (h(Host, { key: 'f7695780e70a99f7d74c95c8b5895480fbd21198', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { key: 'd6c9a271d20bdd2a30ddec595ed60433c428b193', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
+        return (h(Host, { key: '1f5d8da8684a1aa10f0e6e8af7b16748117ebda3', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { key: '1b6b1ca921b3ecbc8dbab9451cf362122eb9b0c9', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
     }
     static get watchers() { return {
         "name": ["nameChanged"],

package/components/bal-input-stepper.js

@@ -8,7 +8,7 @@ import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling, j as inputListenOnClick } from './form-input.js';
-import { m as rIC, k as debounceEvent } from './helpers.js';
+import { n as rIC, k as debounceEvent } from './helpers.js';
 import { L as Logger } from './log.js';
 import { f as formatLocaleNumber } from './number.js';
 import { i as i18nBalInputStepper } from './bal-input-stepper.i18n.js';

package/components/bal-input.js

@@ -544,6 +544,9 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 case 'be-iban':
                     value = formatBeIBAN(value);
                     break;
+                case 'vehicle-registration-number':
+                    value = formatVehicleRegistrationNumber(value);
+                    break;
             }
         }
         let inputProps = {};
@@ -552,7 +555,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (h(Host, { key: 'b38cc633916b8848286b2fb1f17f4b14fae5ca71', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'dc043f631ba56a767923b87ef13c370a2d93acbb', class: {
+        return (h(Host, { key: '4305dd33ab7a921626c9fb9832efd1d98e2467b5', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '393e47564e6bd87ee67a98a8d023c2f82e36b0dd', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

package/components/bal-list-item-accordion-body2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import { r as raf, l as debounce } from './helpers.js';
+import { r as raf, q as debounce } from './helpers.js';
 import { L as Logger } from './log.js';
 import './window-resize.subject.js';
 import { L as ListenToResize } from './resize.decorator.js';

package/components/bal-list-item2.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { L as ListenToConfig } from './config.decorator.js';
-import { r as raf, t as transitionEndAsync, m as rIC } from './helpers.js';
+import { r as raf, t as transitionEndAsync, n as rIC } from './helpers.js';
 
 const ListItem = /*@__PURE__*/ proxyCustomElement(class ListItem extends HTMLElement {
     constructor() {

package/components/bal-logo2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
-import { n as rOnLoad } from './helpers.js';
+import { l as rOnLoad } from './helpers.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToConfig } from './config.decorator.js';

package/components/bal-modal.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
 import { p as prepareOverlay, d as dismiss, e as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays.js';
-import { c as componentOnReady, d as deepReady, a as wait } from './helpers.js';
+import { c as componentOnReady, d as deepReady, w as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
 

package/components/bal-nav.js

@@ -7,10 +7,11 @@ import { b as balBrowser } from './browser.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { m as rIC, i as isDescendant, w as waitForComponent, e as waitAfterIdleCallback } from './helpers.js';
+import { n as rIC, i as isDescendant, f as waitForComponent, b as waitAfterIdleCallback } from './helpers.js';
 import { L as Logger } from './log.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
 import { B as BalScrollHandler } from './scroll.js';
+import { s as sanitizeSvg } from './svg.js';
 import { e as isTabKey } from './keyboard.helpers.js';
 import { d as defineCustomElement$t } from './bal-badge2.js';
 import { d as defineCustomElement$s } from './bal-button2.js';
@@ -755,7 +756,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: '6731ced264e30666493c9b66469f8656e3a632ee', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'b8b36c81b079f727699a2d037c4f687084791cfa', class: {
+        return (h(Host, { key: 'a87fa267cdb8758adae18cdd5ddbbe58ade6b656', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '235b60fe5f38ea4c9d698cab5f82e7ddb3cf202b', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
             } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { inverted: true, context: "meta", value: this.activeMetaLinkValue, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
@@ -798,7 +799,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
                     });
                 }
             } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '66321dcac9fb856d8bba914283fc1fe0d4626d35' }, h("slot", { key: '1d89fec71d39cc81c491f2422312a733e103f016' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
+            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '94ce7cb241b89190e625cbf9c8a329afd953afe1' }, h("slot", { key: '0b5ffecaba55a060528c3197e3d63f0678a24d97' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
             activeMetaLinkValue: this.activeMetaLinkValue,
             activeMenuLinkValue: this.activeMenuLinkValue,
         })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { stayOnTopOfBackdrop: true, variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));
@@ -817,9 +818,18 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
         })));
     }
     renderLogo() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const Link = ((_a = this.logo) === null || _a === void 0 ? void 0 : _a.href) ? 'a' : ((_b = this.logo) === null || _b === void 0 ? void 0 : _b.clickable) ? 'button' : 'div';
-        return (h(Link, { class: "bal-nav__logo", "aria-label": (_c = this.logo) === null || _c === void 0 ? void 0 : _c.ariaLabel, title: (_d = this.logo) === null || _d === void 0 ? void 0 : _d.htmlTitle, href: (_e = this.logo) === null || _e === void 0 ? void 0 : _e.href, target: (_f = this.logo) === null || _f === void 0 ? void 0 : _f.target, onClick: () => {
+        let Logo = h("bal-logo", { animated: true });
+        const logoImageUrl = (_c = this.logo) === null || _c === void 0 ? void 0 : _c.url;
+        const logoSvg = sanitizeSvg((_d = this.logo) === null || _d === void 0 ? void 0 : _d.svg);
+        if (logoImageUrl) {
+            Logo = h("img", { height: 32, style: { maxHeight: '32px' }, src: logoImageUrl, alt: "Logo" });
+        }
+        if (logoSvg) {
+            Logo = (h("div", { innerHTML: logoSvg, role: "img", "aria-label": "Logo", style: { display: 'flex', height: '32px', maxHeight: '32px', minWidth: '32px' } }));
+        }
+        return (h(Link, { class: "bal-nav__logo", "aria-label": (_e = this.logo) === null || _e === void 0 ? void 0 : _e.ariaLabel, title: (_f = this.logo) === null || _f === void 0 ? void 0 : _f.htmlTitle, href: (_g = this.logo) === null || _g === void 0 ? void 0 : _g.href, target: (_h = this.logo) === null || _h === void 0 ? void 0 : _h.target, onClick: () => {
                 var _a, _b;
                 return this.balNavItemClick.emit({
                     value: 'logo',
@@ -827,7 +837,7 @@ const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
                     href: (_a = this.logo) === null || _a === void 0 ? void 0 : _a.href,
                     target: (_b = this.logo) === null || _b === void 0 ? void 0 : _b.target,
                 });
-            } }, h("bal-logo", { animated: true })));
+            } }, Logo));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-navbar-brand.js

@@ -4,7 +4,7 @@ import { B as BEM } from './bem.js';
 import { b as balBrowser } from './browser.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
-import { a as wait } from './helpers.js';
+import { w as wait } from './helpers.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';

package/components/bal-option-list.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { i as isNil } from './index2.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { b as waitAfterFramePaint, r as raf } from './helpers.js';
+import { a as waitAfterFramePaint, r as raf } from './helpers.js';
 import { L as Logger } from './log.js';
 import { i as includes, s as startsWith } from './utils.js';
 import { d as defaultBalAriaForm } from './form.js';

package/components/bal-pagination.js

@@ -5,9 +5,7 @@ import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
-import { d as defineCustomElement$4 } from './bal-button2.js';
-import { d as defineCustomElement$3 } from './bal-icon2.js';
-import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
 
 const i18nControlLabel = {
     de: {
@@ -130,7 +128,7 @@ function generatePaginationControl(value, totalPages, pageRange) {
     return paginationArray;
 }
 
-const balPaginationCss = ":root{--bal-pagination-small-background:var(--bal-color-grey);--bal-pagination-small-radius:var(--bal-radius-normal);--bal-pagination-tabs-background:var(--bal-color-white);--bal-pagination-tabs-shadow:var(--bal-shadow-normal);--bal-pagination-tabs-radius:var(--bal-radius-large);--bal-pagination-dot-radius:var(--bal-radius-rounded);--bal-pagination-dot-background-active:var(--bal-color-primary);--bal-pagination-dot-background-inactive:var(--bal-color-white)}.bal-pagination{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}.bal-pagination--is-sticky{position:-webkit-sticky;position:sticky;z-index:var(--bal-z-index-sticky)}.bal-pagination__nav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;text-align:center}.bal-pagination__nav--align-start{-ms-flex-pack:start;justify-content:flex-start}.bal-pagination__nav--align-end{-ms-flex-pack:end;justify-content:flex-end}.bal-pagination__nav--context-small{padding-top:1rem}.bal-pagination__nav__pagination-previous{-ms-flex-order:1;order:1}.bal-pagination__nav__pagination-previous--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-next{-ms-flex-order:3;order:3}.bal-pagination__nav__pagination-next--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-list{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:4px;padding-left:8px;padding-right:8px;-ms-flex-order:2;order:2;width:unset;text-align:center}.bal-pagination__nav__pagination-list>span{font-weight:var(--bal-font-weight-bold)}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list{gap:8px}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list{gap:8px}}.bal-pagination__nav__pagination-list--context-small{gap:8px;max-width:88px;min-width:63px;min-height:1.25rem;margin:0 20px 0 !important;background:var(--bal-pagination-small-background);border-radius:var(--bal-pagination-small-radius)}.bal-pagination__nav__pagination-list--context-tabs{-ms-flex-positive:1;flex-grow:1;padding:8px;background:var(--bal-pagination-tabs-background);-webkit-box-shadow:var(--bal-pagination-tabs-shadow);box-shadow:var(--bal-pagination-tabs-shadow);border-radius:var(--bal-pagination-tabs-radius)}.bal-pagination__nav__pagination-list__dot{cursor:pointer;height:8px;width:8px;gap:30px;border-radius:var(--bal-pagination-dot-radius);display:block}.bal-pagination__nav__pagination-list__dot--active{background-color:var(--bal-pagination-dot-background-active)}.bal-pagination__nav__pagination-list__dot--inactive{background-color:var(--bal-pagination-dot-background-inactive)}.bal-pagination__nav__pagination-list--more{width:2rem}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list--more{width:2rem}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list--more{width:3rem}}.bal-pagination__nav__pagination-list--more>span{display:inline;font-family:var(--bal-text-line-height-title);font-weight:700}.bal-pagination__nav__pagination-list__tab{-ms-flex:1;flex:1}.bal-pagination__nav__pagination-list.is-disabled li{pointer-events:none}";
+const balPaginationCss = ":root{--bal-pagination-small-background:var(--bal-color-grey);--bal-pagination-small-radius:var(--bal-radius-normal);--bal-pagination-tabs-background:var(--bal-color-white);--bal-pagination-tabs-shadow:var(--bal-shadow-normal);--bal-pagination-tabs-radius:var(--bal-radius-large);--bal-pagination-dot-radius:var(--bal-radius-rounded);--bal-pagination-dot-background-active:var(--bal-color-primary);--bal-pagination-dot-background-inactive:var(--bal-color-white)}.bal-pagination{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block}.bal-pagination--is-sticky{position:-webkit-sticky;position:sticky;z-index:var(--bal-z-index-sticky)}.bal-pagination__nav{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;text-align:center}.bal-pagination__nav--align-start{-ms-flex-pack:start;justify-content:flex-start}.bal-pagination__nav--align-end{-ms-flex-pack:end;justify-content:flex-end}.bal-pagination__nav--context-small{padding-top:1rem}.bal-pagination__nav__pagination-previous{-ms-flex-order:1;order:1}.bal-pagination__nav__pagination-previous--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-next{-ms-flex-order:3;order:3}.bal-pagination__nav__pagination-next--context-small[disabled] button:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.bal-pagination__nav__pagination-list{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:4px;padding-left:8px;padding-right:8px;-ms-flex-order:2;order:2;width:unset;text-align:center}.bal-pagination__nav__pagination-list>span{font-weight:var(--bal-font-weight-bold)}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list{gap:8px}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list{gap:8px}}.bal-pagination__nav__pagination-list--context-small{gap:8px;max-width:88px;min-width:63px;min-height:1.25rem;margin:0 20px 0 !important;background:var(--bal-pagination-small-background);border-radius:var(--bal-pagination-small-radius)}.bal-pagination__nav__pagination-list--context-tabs{-ms-flex-positive:1;flex-grow:1;padding:8px;background:var(--bal-pagination-tabs-background);-webkit-box-shadow:var(--bal-pagination-tabs-shadow);box-shadow:var(--bal-pagination-tabs-shadow);border-radius:var(--bal-pagination-tabs-radius)}.bal-pagination__nav__pagination-list__dot{cursor:pointer;height:8px;width:8px;gap:30px;border-radius:var(--bal-pagination-dot-radius);display:block}.bal-pagination__nav__pagination-list__dot--active{background-color:var(--bal-pagination-dot-background-active)}.bal-pagination__nav__pagination-list__dot--inactive{background-color:var(--bal-pagination-dot-background-inactive)}.bal-pagination__nav__pagination-list__more{width:2rem}@media screen and (min-width: 769px),print{.bal-pagination__nav__pagination-list__more{width:2rem}}@media screen and (min-width: 1024px){.bal-pagination__nav__pagination-list__more{width:3rem}}.bal-pagination__nav__pagination-list__more>span{display:inline;font-family:var(--bal-text-line-height-title);font-weight:700}.bal-pagination__nav__pagination-list__more--disabled{color:var(--bal-color-text-grey)}.bal-pagination__nav__pagination-list__tab{-ms-flex:1;flex:1}.bal-pagination__nav__pagination-list.is-disabled li{pointer-events:none}.bal-pagination__nav__pagination-list button.is-disabled.is-text{background:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}";
 
 const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
     constructor() {
@@ -232,8 +230,8 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         });
     }
     renderEllipsisElement() {
-        const more = BEM.block('pagination').element('nav').element('pagination-list').modifier('more');
-        return (h("li", { "aria-hidden": 'true' }, h("div", { class: Object.assign({}, more.class()) }, h("span", null, "\u2026"))));
+        const more = BEM.block('pagination').element('nav').element('pagination-list').element('more');
+        return (h("li", { "aria-hidden": 'true' }, h("div", { class: Object.assign(Object.assign({}, more.class()), more.modifier('disabled').class(this.disabled)) }, h("span", null, "\u2026"))));
     }
     renderPageElement(pageNumber) {
         const isActive = this._value === pageNumber;
@@ -241,7 +239,14 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         if (this.interface === 'small') {
             return (h("li", null, h("span", { role: "button", "aria-current": isActive ? 'true' : undefined, class: Object.assign(Object.assign(Object.assign({}, dot.class()), dot.modifier('active').class(isActive)), dot.modifier('inactive').class(!isActive)), "aria-label": pageNumber, onClick: () => this.selectPage(pageNumber) })));
         }
-        return (h("li", null, h("bal-button", { square: true, color: isActive ? 'primary' : 'text', "aria-current": isActive ? 'true' : undefined, onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number", size: this.isMobile || this.size === 'small' ? 'small' : '' }, pageNumber)));
+        return (h("li", null, h("button", { class: {
+                'button': true,
+                'is-square': true,
+                'is-primary': isActive,
+                'is-text': !isActive,
+                'is-disabled': this.disabled,
+                'is-small': this.isMobile || this.size === 'small',
+            }, "aria-current": isActive ? 'true' : undefined, onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number" }, pageNumber)));
     }
     render() {
         const mobileItems = this.getItems(1);
@@ -252,16 +257,16 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         const elNext = elNav.element('pagination-next');
         const elList = elNav.element('pagination-list');
         const isSmall = this.interface === 'small';
-        const buttonColor = isSmall ? 'link' : 'text';
-        const buttonSize = isSmall || this.size === 'small' || this.isMobile ? 'small' : '';
+        const buttonColor = isSmall ? 'is-link' : 'is-text';
+        const buttonSize = isSmall || this.size === 'small' || this.isMobile ? 'is-small' : '';
         const flat = isSmall;
         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: '72b06a925f5f6426a566d7601f86b44bb15d7d72', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '7acae623617276ddd63c9590dd4bb6ec97232439' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: '9fa2231ceb94c3d0b485cffe9f183b1109036c89', 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: '97a556a62bd7780cc4b22fa4e67e6f8544c87827', 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: 'e14d06849d97aa3cb16a8d516d430086d4b9c006', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '385a40f56e018ba35444d88f724caa3fe28c5620', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: '3f4f56456f43bdce207a733103dc3c766f9378da', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '5f446caf456c0ed02f56f5d454d00b57e8632d20', name: "nav-go-left", size: "small" })), h("bal-button", { key: '536c51f2ab51f8d5636e366f7555b1a8046dd542', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: 'c56892b6e6e853c0c03f201429f408cc5ba740a5', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '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-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" }))) : (''), !this.disabled ? (h("button", { class: Object.assign(Object.assign({ 'button': true, 'is-square': true, '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" }))) : (''), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -305,24 +310,14 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-pagination", "bal-button", "bal-icon", "bal-spinner"];
+    const components = ["bal-pagination", "bal-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-pagination":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Pagination);
             }
             break;
-        case "bal-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
         case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "bal-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-popover-content2.js

@@ -84,7 +84,7 @@ const PopoverContent = /*@__PURE__*/ proxyCustomElement(class PopoverContent ext
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: 'a9fcd1ea22fd05ad6be18b080c4dd4e88dc08d71', 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: '43cb910ae76b5dea745959c0eb84d1cf666f0bc6', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: '60d532af90339403cd863bebd249ae2134f8ce0d' })), h("div", { key: 'd913a7220d213326381e703f7db8ea327e747dc0', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        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 })));
     }
     get el() { return this; }
 }, [4, "bal-popover-content", {

package/components/bal-popup2.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { b as balBrowser } from './browser.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { l as debounce } from './helpers.js';
+import { q as debounce } from './helpers.js';
 import { d as isEscapeKey } from './keyboard.helpers.js';
 import { L as Logger } from './log.js';
 import { b as balFloatingUi } from './floating-ui.js';
@@ -299,7 +299,7 @@ class VariantRenderer {
     }
 }
 
-const balPopupCss = ":root{--bal-popup-backdrop-background:rgba(0,7,57,.8);--bal-popup-container-padding-top:0;--bal-popup-container-padding-bottom:0;--bal-popup-container-background:var(--bal-color-white);--bal-popup-variant-popover-max-width:auto;--bal-popup-variant-popover-radius:var(--bal-radius-large);--bal-popup-variant-popover-shadow:var(--bal-shadow-normal);--bal-popup-variant-drawer-radius:var(--bal-radius-large);--bal-popup-arrow-background:var(--bal-color-white)}.bal-popup{position:static;display:inline;z-index:var(--bal-z-index-popup)}.bal-popup__container{background:var(--bal-popup-container-background);display:none;visibility:hidden;padding-top:var(--bal-popup-container-padding-top);padding-bottom:var(--bal-popup-container-padding-bottom);-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto}.bal-popup__container--variant-popover{border-radius:var(--bal-popup-variant-popover-radius);-webkit-box-shadow:var(--bal-popup-variant-popover-shadow);box-shadow:var(--bal-popup-variant-popover-shadow);width:var(--bal-popup-variant-popover-max-width);position:absolute;top:0;left:0}.bal-popup__container--variant-fullscreen{position:fixed;margin:0;width:100%;min-width:100%;max-width:100% !important;min-height:var(--bal-app-height, 100%)}.bal-popup__container--variant-fullscreen .bal-popup__inner{padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-popup__container--variant-drawer{position:fixed;border-top-left-radius:var(--bal-popup-variant-drawer-radius);border-top-right-radius:var(--bal-popup-variant-drawer-radius);padding-left:var(--bal-container-space);padding-right:var(--bal-container-space);width:100%}.bal-popup__inner{overflow-y:auto;max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__inner__head{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-popup__inner__content{width:100%}.bal-popup__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:8px;height:8px;background:var(--bal-popup-arrow-background);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:none;visibility:hidden}.bal-popup__backdrop{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;bottom:0;left:0;right:0;top:0;background-color:var(--bal-popup-backdrop-background);width:100vw;height:100vh;display:none;visibility:hidden}.bal-popup-variant-popover-trigger,.bal-popup-permanent-trigger{z-index:calc(var(--bal-z-index-popup) + 1) !important;position:relative !important}";
+const balPopupCss = ":root{--bal-popup-backdrop-background:rgba(0,7,57,.8);--bal-popup-container-padding-top:0;--bal-popup-container-padding-bottom:0;--bal-popup-container-background:var(--bal-color-white);--bal-popup-variant-popover-max-width:auto;--bal-popup-variant-popover-radius:var(--bal-radius-large);--bal-popup-variant-popover-shadow:var(--bal-shadow-normal);--bal-popup-variant-drawer-radius:var(--bal-radius-large);--bal-popup-arrow-background:var(--bal-color-white)}.bal-popup{position:static;display:inline;z-index:var(--bal-z-index-popup)}.bal-popup__container{background:var(--bal-popup-container-background);display:none;visibility:hidden;padding-top:var(--bal-popup-container-padding-top);padding-bottom:var(--bal-popup-container-padding-bottom);-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto}.bal-popup__container--variant-popover{border-radius:var(--bal-popup-variant-popover-radius);-webkit-box-shadow:var(--bal-popup-variant-popover-shadow);box-shadow:var(--bal-popup-variant-popover-shadow);width:var(--bal-popup-variant-popover-max-width);position:absolute;top:0;left:0}.bal-popup__container--variant-popover .bal-popup__inner{max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__container--variant-fullscreen{position:fixed;margin:0;width:100%;min-width:100%;max-width:100% !important;min-height:var(--bal-app-height, 100%)}.bal-popup__container--variant-fullscreen .bal-popup__inner{padding-left:var(--bal-container-space);padding-right:var(--bal-container-space);max-height:var(--bal-app-height, 100%)}.bal-popup__container--variant-drawer{position:fixed;border-top-left-radius:var(--bal-popup-variant-drawer-radius);border-top-right-radius:var(--bal-popup-variant-drawer-radius);padding-left:var(--bal-container-space);padding-right:var(--bal-container-space);width:100%}.bal-popup__container--variant-drawer .bal-popup__inner{max-height:calc(var(--bal-app-height, 100%) - 4rem)}.bal-popup__inner{overflow-y:auto}.bal-popup__inner__head{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-popup__inner__content{width:100%}.bal-popup__arrow{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:8px;height:8px;background:var(--bal-popup-arrow-background);-webkit-transform:rotate(45deg);transform:rotate(45deg);display:none;visibility:hidden}.bal-popup__backdrop{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:fixed;bottom:0;left:0;right:0;top:0;background-color:var(--bal-popup-backdrop-background);width:100vw;height:100vh;display:none;visibility:hidden}.bal-popup-variant-popover-trigger,.bal-popup-permanent-trigger{z-index:calc(var(--bal-z-index-popup) + 1) !important;position:relative !important}";
 
 const Popup = /*@__PURE__*/ proxyCustomElement(class Popup extends HTMLElement {
     constructor() {
@@ -636,7 +636,7 @@ const Popup = /*@__PURE__*/ proxyCustomElement(class Popup extends HTMLElement {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '4ad1ef7a26405280b668dc964e36e45b12523830', 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: 'd9c7aa58b64ba58bdd73195b4c988698ddac0141', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'e1aa90db041a2960e23aae4b4d49c89ebfaa777b', 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: 'b2bccd97aad258a0a3246293a8250be6207f0368', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: 'f44ec75a2d463fd81f46c0c1d2175907747c4346', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'bebd41411dcc4960ee1e0ab9e08a6494ede835bd', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content", tabindex: "-1" }, h("slot", { key: '3f06f9d1303b4a785c358954fe79744f4daa019c' }))))));
+        return (h(Host, { key: '9986e37d6e5831258d64b88bff459c3a1f5161ed', 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: '01d9c5805bf481eea69faf63f27ed0815bdade6d', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '6e90a44402c8eb8a42ae36dc9b0570f29488e2e7', 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: 'b91fef633bd979fa21b8610b63b57df4892c7a58', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '1408d5a332c00bd6d560c38e97f2ef9e5385aa93', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '96641083aa3e2b8e37e96718ea9a57cbd17c0c2c', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content", tabindex: "-1" }, h("slot", { key: 'a2c3bd99a7355e9d5b13ab35eafdb7ec4a8e99ff' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-progress-bar.js

@@ -79,7 +79,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { key: 'd024ab4ad15f9a04b2db9b5923785cc9eecbae74', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: '8ed29c4d19bc1e5e57990b5c91d95134a7fc482d', 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: '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) })));
     }
     get el() { return this; }
     static get style() { return balProgressBarCss; }

package/components/bal-radio-group.js

@@ -6,7 +6,7 @@ import { B as BEM } from './bem.js';
 import { L as ListenToFocus } from './focus.decorator.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { i as isDescendant, o as hasTagName } from './helpers.js';
+import { i as isDescendant, m as hasTagName } from './helpers.js';
 import { L as Logger } from './log.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
 import { d as defineCustomElement$3 } from './bal-radio2.js';

package/components/bal-radio-icon2.js

@@ -46,7 +46,7 @@ const RadioIcon = /*@__PURE__*/ proxyCustomElement(class RadioIcon extends HTMLE
         const disabled = !!this.disabled;
         const invalid = !!this.invalid;
         const inverted = !!this.inverted;
-        return (h(Host, { key: '903ec682257c7182c7e611b7f950eb95aa27498e', 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: '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)) }));
     }
     static get style() { return balRadioIconCss; }
 }, [0, "bal-radio-icon", {

package/components/bal-radio2.js

@@ -338,11 +338,11 @@ const Radio = /*@__PURE__*/ proxyCustomElement(class Radio extends HTMLElement {
         if (this.labelHidden) {
             inputAttributes['aria-labelledby'] = labelId;
         }
-        return (h(Host, { key: '0cb18e6ebb7c792fb484473ec6fa2efbc318f221', "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: '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
                 .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: 'ef2616849a3b0f2fe95b92fc8ae81df21fd73c47', 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: '609c44dc552fba3ba309166407730a28219616e6', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '0f200df04d88e458de4400687dfd7b1a2a3e9ac1' })))));
+                .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' })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-segment-item.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { p as addEventListener, r as raf, q as removeEventListener } from './helpers.js';
+import { o as addEventListener, r as raf, p as removeEventListener } from './helpers.js';
 import { d as defineCustomElement$5 } from './bal-content2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-label2.js';
@@ -181,7 +181,7 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (h(Host, { key: '2f0eccf481abba284cae7bb7ebb9d9ca88f2339e', 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: '317c8da87c9e196082f46e69e639d7b5761401ba', 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: '749649163977298b320ebff6ff5dd5565c98bc4d', 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: '67a2bce84c38c0f49a47da1c6ec0189f8ac6b987', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '38eaad5948f5b034ba3567619533e67f2c6a3016', space: "none" }, h("bal-label", { key: 'a761aee3fad22f05cd0ce66f74710c3da61acd81', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: '99b2524c94a243b8f4c884008919fe9bd92271ff', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: 'e5a89b88d1c49ec722a83f2887215d69e6f43ebb', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: 'a7b16c5d48c09846fcb3103c1a5dd4f38dbf1b46', 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: '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)) })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-segment.js

@@ -345,7 +345,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: 'ec42c94d1b582b721dbde28c5e555283826641bb', 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: '334921cd162900655d920e7b701140bb5899377b', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: '91c7faeb8366f775ee0f27640d9130c7402315d5', 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: 'ddd397bc3834f48f99622a9c0654fb78d044c9d5', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-select-option2.js

@@ -20,7 +20,7 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '42c10fcd28b41d1158304ee9a7936c2fa0c52d85', style: { display: 'none' } }, h("slot", { key: 'da6a2841c0dd48aa662bf38926151669a4525048' })));
+        return (h(Host, { key: 'c479330ac26bcb19ddd41e7a99e635bf3ffc6170', style: { display: 'none' } }, h("slot", { key: '009baaefc29d307403edb10160c694dcc8495164' })));
     }
 }, [4, "bal-select-option", {
         "label": [513],