@baloise/ds-core 17.3.0-snapshot.1576-1194617cc → 17.3.0

package/components/all.d.ts

@@ -27,7 +27,6 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
-import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,7 +144,6 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -27,7 +27,6 @@ import { BalDate, defineCustomElement as defineBalDate } from './bal-date'
 import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from './bal-date-calendar'
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
-import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -145,7 +144,6 @@ export { BalDate, defineBalDate }
 export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -264,7 +262,6 @@ export const defineAllComponents = () => {
   defineBalDateCalendar()
   defineBalDateCalendarCell()
   defineBalDivider()
-  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/bal-app.js

@@ -1,4 +1,96 @@
-import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { k as debounce, p as rIC, m as rOnLoad } from './helpers.js';
+import { L as Logger } from './log.js';
+import { s as startFocusVisible } from './focus-visible.js';
+import { b as updateBalAnimated } from './config.utils.js';
+
+const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative}.lcp-wait{opacity:0;visibility:hidden;display:none}.lcp-ready .lcp-wait{opacity:inherit;visibility:inherit;display:inherit}";
+const BalAppStyle0 = balAppCss;
+
+const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
+        this.notifyResize = async () => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
+            }
+        };
+        this.animated = true;
+        this.ready = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        if (this.animated === false) {
+            updateBalAnimated(this.animated);
+        }
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(() => {
+            this.ready = true;
+            startFocusVisible();
+        });
+        rOnLoad(() => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.classList.add('lcp-ready');
+            }
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { key: '29fef05a451290e2e20dc6808d1cce03ec1b1c4c', class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", { key: 'd54179394cb4d9882647d497e09495193d57a12d' })));
+    }
+    get el() { return this; }
+    static get style() { return BalAppStyle0; }
+}, [4, "bal-app", {
+        "animated": [516],
+        "ready": [1540],
+        "setFocus": [64]
+    }]);
+__decorate([
+    Logger('bal-app'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], App.prototype, "createLogger", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-footer.js

@@ -6,7 +6,8 @@ import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { p as rIC } from './helpers.js';
-import { d as defineCustomElement$3 } from './bal-icon2.js';
+import { d as defineCustomElement$4 } from './bal-icon2.js';
+import { d as defineCustomElement$3 } from './bal-input-group2.js';
 import { d as defineCustomElement$2 } from './bal-logo2.js';
 import { e as updateBalLanguage } from './config.utils.js';
 import { d as defaultConfig } from './config.default.js';
@@ -233,7 +234,7 @@ const i18nBalFooter = {
     },
 };
 
-const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background-active:var(--bal-color-light-blue-3)}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{display:-ms-flexbox;display:flex;gap:1rem;cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select{background:rgba(0,0,0,0);-webkit-appearance:none;border:none;color:var(--bal-color-white);font-weight:var(--bal-font-weight-bold);cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper:hover svg,.bal-footer__inner__wrapper__header-container__language__wrapper:hover g,.bal-footer__inner__wrapper__header-container__language__wrapper:hover path,.bal-footer__inner__wrapper__header-container__language__wrapper:hover circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:hover select{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:active svg,.bal-footer__inner__wrapper__header-container__language__wrapper:active g,.bal-footer__inner__wrapper__header-container__language__wrapper:active path,.bal-footer__inner__wrapper__header-container__language__wrapper:active circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language__wrapper:active select{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
+const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background-active:var(--bal-color-light-blue-3)}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__list{min-width:105%;right:0 !important;left:auto !important}.bal-footer__inner__wrapper__header-container__language bal-icon,.bal-footer__inner__wrapper__header-container__language .input{cursor:pointer;min-width:auto !important}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear{position:absolute;left:0}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear circle{fill:var(--bal-color-white)}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__native{background:rgba(0,0,0,0);color:var(--bal-color-white);border:none;font-weight:var(--bal-font-weight-bold);cursor:pointer;padding-left:1.5rem}.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__native,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__root__content{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__native,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__root__content{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group{background:rgba(0,0,0,0);border:none;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group:hover{background:rgba(0,0,0,0) !important}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group bal-dropdown{min-width:5rem}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
 const BalFooterStyle0 = balFooterCss;
 
 const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
@@ -324,12 +325,12 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
         return (h(Host, { key: 'd9fcf2b0c58a8c8b2ec81256a94a5555281f275e', class: Object.assign({}, block.class()) }, h("footer", { key: '24691e174da80b7b0837d6ef7093abf1e0671207', class: Object.assign({}, elInner.class()) }, h("div", { key: '80a0395ec6f83fed9b67687f9f0169550e1e8a6e', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '1d5656c103792e725267aee630f5c89717cddcd4', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '91d7235ce53fb56712375194709d70d32a40aad3', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: '9f20c92b2fca4660daec9d5faa74303e4027c81e', color: "white" })), h("div", { key: 'e395ba338e3dcd7fffd8f07d6ba3ab0e26d5cb85', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { key: 'dfc805fd51ea9b5625de046a94129df428e7d2d0', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '0197d2dc752d0360d262020b80c269872af52456', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: '927cccdc52d4b27638382eaa306c9ab02750c11d', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '50976aa9b3c48e4e120b70c83754fdeb2124822c', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '15bb74ce0a261de21d4c6afd2f6d7a14dab4f013' })), h("div", { key: '652fe0d3cd824d967fff3418d568d2d5479b61d4', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '6ffe053abe72bae6f79473cbf728ff898a068f75', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { key: 'dfc805fd51ea9b5625de046a94129df428e7d2d0', class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", { key: '0d203884c1f437669690a70df96fc703427f751b' }, h("bal-icon", { key: '9551ba6bc1fc1b36d67542fe40d841dee78d3daa', class: 'bal-dropdown__rear', name: "web", color: "white" }), h("select", { key: '721a9a291639d6d4357f179b302870cf6f2852af', id: "bubu", class: 'bal-dropdown__native', onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name)))))))), h("div", { key: '26575b69cba20d83a8124bca1697b9cc7ee38246', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '48e62b90d62825693e73b522ed454da7846457d2' })), h("div", { key: '8fdf21a11da23eb1489c95d21f6726ab53136ffc', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '591b9f51cb1ff3d4dee431daaca23ad38bcbac7e', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '5bbcccae4131a25d42bec3e15a62c31c0d7e66f7', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '6496b1f14bedc754c4ba873c6ead58e1476c76ff', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));
@@ -363,7 +364,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-footer", "bal-icon", "bal-logo"];
+    const components = ["bal-footer", "bal-icon", "bal-input-group", "bal-logo"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-footer":
             if (!customElements.get(tagName)) {
@@ -371,6 +372,11 @@ function defineCustomElement$1() {
             }
             break;
         case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bal-input-group":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/components/bal-form-col.js

@@ -8,7 +8,7 @@ const FormCol = /*@__PURE__*/ proxyCustomElement(class FormCol extends HTMLEleme
         this.size = 'full';
     }
     render() {
-        return (h(Host, { key: 'e3d4ae7a835b8b174d5c52e52cc47ee50cbe54b2', class: {
+        return (h(Host, { key: 'dcfd707ec14153525343b28de33215360552d67d', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -18,7 +18,7 @@ const FormCol = /*@__PURE__*/ proxyCustomElement(class FormCol extends HTMLEleme
                 'is-8': this.size === 'two-thirds',
                 'is-3': this.size === 'one-quarter',
                 'is-9': this.size === 'three-quarters',
-            } }, h("slot", { key: 'df89fb898dfb5af9eb58dd2bed3d117ea3a5ffd3' })));
+            } }, h("slot", { key: 'eb9686534cb834601ec756657e8576dc0aaac9b4' })));
     }
     get el() { return this; }
 }, [4, "bal-form-col", {

package/components/bal-form-grid.js

@@ -9,7 +9,7 @@ const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLEle
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '1ad965a8e6ea883fa0462610244c713b2338128c', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'de7b8cedc09c55cce3643cdb509aaee365c45505' })));
+        return (h(Host, { key: '35f3c7ca48f2c64d89c90909bca5894d6f578e64', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'dde03d5928d665ada0f41230ff6c01e8f20c1dd1' })));
     }
     static get style() { return BalFormGridStyle0; }
 }, [4, "bal-form-grid"]);

package/components/bal-form.js

@@ -29,7 +29,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
                 novalidate: this.novalidate,
             };
         }
-        return (h(Host, { key: 'f4d9fa5047fcc756760ea3bfa819cbd70727af13' }, h(NativeEl, Object.assign({ key: '301d21b6ade6a0ee7ffefbfdd00de367ba5cde46' }, attrs, { class: this.formClass }), h("slot", { key: '840973381e5f817d94ca8dbffdfb4f7e07b65672' }))));
+        return (h(Host, { key: '6e18df8ae00274664abd91bce9318de7c9fbd1e3' }, h(NativeEl, Object.assign({ key: '48bee97b1a0e11629d70a562ff7020cb753a258a' }, attrs, { class: this.formClass }), h("slot", { key: '8dae2c5837fead69d624ae443934bb7fa6f7dfe8' }))));
     }
     get el() { return this; }
     static get style() { return BalFormStyle0; }

package/components/bal-heading2.js

@@ -143,7 +143,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (h(Host, { key: '54ce37c890a5074a789183c96d6f5c7bcbd8e256', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: '9dc4ca2d227c73449055f025769826b12f942aac', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: '98e432a1338a51853b0575c78a53de2d3f6a77d9' }))));
+        return (h(Host, { key: '8086cde36ed3f4ca517135aad6210dccc9e59039', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: '7ed342b861b33bdcb93daec513e593c531e891b5', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: 'b189e37f7d994616493e86512f6748c85d00ba18' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-hint-text2.js

@@ -11,7 +11,7 @@ const HintText = /*@__PURE__*/ proxyCustomElement(class HintText extends HTMLEle
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (h(Host, { key: '258decd669e8491b9238bc20b17b25b4f292526e', class: Object.assign({}, elText.class()) }, h("p", { key: 'ac502d874048f70823b6bf18655ba5ab961b0296', class: Object.assign({}, elTextField.class()) }, h("slot", { key: '4ac3bae73478a6d645473c85f0281b1367bd2915' }))));
+        return (h(Host, { key: '10515eb783c2a6feba7f88cc419e7cfa57295231', class: Object.assign({}, elText.class()) }, h("p", { key: '5a2c68d72075d729f72527e2bf6a7afcfa18c29e', class: Object.assign({}, elTextField.class()) }, h("slot", { key: '8da0f8ccdb88e88206c2b87ccae42d2636fc5586' }))));
     }
 }, [4, "bal-hint-text"]);
 function defineCustomElement() {

package/components/bal-hint-title2.js

@@ -11,7 +11,7 @@ const HintTitle = /*@__PURE__*/ proxyCustomElement(class HintTitle extends HTMLE
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (h(Host, { key: '82f81c9c25b9a7b7ce78837414165fb22a4ab448', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '33738a27cfc08346151e614d1b2f9bab5690097d', class: Object.assign({}, elHeading.class()) }, h("span", { key: '0989d14adb93a8a38991773e78d35f80e09c9db3' }, h("slot", { key: 'dee1e5278c4ec0a4d591c9f697a1ebe69fc7fcb8' })))));
+        return (h(Host, { key: '8f29a6b15159586bb953a76e446574facc9e258a', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '9edc67f39610f47e3adad25fb931809cef09b908', class: Object.assign({}, elHeading.class()) }, h("span", { key: '30b258cb3ec7ffe8463c7fe5364ab61093611015' }, h("slot", { key: '9b8eb3d881e5393c757362c0e66be4debd4031b4' })))));
     }
 }, [4, "bal-hint-title"]);
 function defineCustomElement() {

package/components/bal-icon2.js

@@ -1014,7 +1014,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         const color = this.parseColor();
         const block = BEM.block('icon');
         const svgContent = this.svgContent(this.name);
-        return (h(Host, { key: '955994e398fe3cc4eaf94a9f028716eddd9dc15f', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), 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: 'd57efac0eab416c06094b7399f7abd23f2f44b95', class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })));
+        return (h(Host, { key: 'c26ab6c3eef33e3deec76bc20f3db215fd52c423', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), 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: '0853056c0b58c51539723539628a834807018007', class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })));
     }
     static get style() { return BalIconStyle0; }
 }, [0, "bal-icon", {

package/components/bal-input-date2.js

@@ -988,14 +988,14 @@ const InputDate = /*@__PURE__*/ proxyCustomElement(class InputDate extends HTMLE
     render() {
         const block = BEM.block('input-date');
         const native = block.element('native');
-        return (h(Host, { key: '60c9f66a96ea447bbd925ea23c48b9ef5842570c', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'fccc011cecd89023fea82ebb3d571a322e177939', class: {
+        return (h(Host, { key: 'c1401f0c7df85ca5d78649b764215e27aa6790ae', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '37c33527ad82e2f74b19f734f2a752cc49a8a352', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
                 'is-clickable': this.clickable && !(this.disabled || this.readonly),
                 'bal-focusable': !this.disabled,
                 'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: '74eea96cbbb3284a2cc0f0cc8366726f431b3b48', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
+            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: 'c2b6921f78a345008b3475273f19dfe1dcd59373', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-input-group2.js

@@ -18,7 +18,7 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
         const hasDanger = this.invalid;
         const disabledClass = 'is-disabled';
         const hasDisabled = this.disabled || this.readonly;
-        return (h(Host, { key: 'b5038db22ec5c61a3f23e8d49e7e010c1095caf7', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: '190951b467b003b066c34894295a5ef15304353b' })));
+        return (h(Host, { key: '0ee1d4bf529641edcf403b31ae080d90151736af', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: 'c73c35476a90aab9e77835b1028e4fa26e3946af' })));
     }
     get el() { return this; }
     static get style() { return BalInputGroupStyle0; }

package/components/bal-input-slider.js

@@ -156,11 +156,11 @@ const InputSlider = /*@__PURE__*/ proxyCustomElement(class InputSlider extends H
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (h(Host, { key: '1be544b6880ed695149a449094ba048160227f4f', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, h("div", { key: '7c410c03aa9619192b09070f454e14074536fe6d', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '484b46bc3be5ef3fec1aed742448e1bbf1b45a99', class: Object.assign({}, backgroundUpperEl.class()), style: {
+        return (h(Host, { key: '39d80cf018beba4ae47fbed1ae2f646ea8fef3d8', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, h("div", { key: 'a880f4c1b2232ac19d14217a8edc522eef0b6cc0', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '1c49dbf668ad0bea336c1b9b9c27dfa0e1ae451e', class: Object.assign({}, backgroundUpperEl.class()), style: {
                 width: this.cssWidth(),
-            } }, h("div", { key: 'dbec8b1b193b0483477556f279d83f70b9762903', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: '5c945858200ebd7d1bd21ab938326deede5ad5a2', class: Object.assign({}, backgroundLowerEl.class()), style: {
+            } }, h("div", { key: 'c033b9842fcce9b796e05302646043c397832068', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: 'c19b9a759bd3d50552f957e080238bc725284ba5', class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, h("div", { key: '76c8afe4b0592fab4ae8442756244b913eaaf450', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: '1637419e70a53b4b17c7ca7eaa494cb6271220a5', class: Object.assign({}, inputEl.class()) }, h("div", { key: '25095f62531acf43feeee439a2c1d23925d8e92c', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '6775a39d2473f1dc6569c04c26cb044b8ef64477', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { key: '5f158e2c228b50b94448ff2f786697107dc892b1', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: '969c8a93a96b0c36d9f12a4b59e31c484c695617', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, h("div", { key: 'd0517f96b396feb37ee6638bfeef5fe974b627c4', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: 'ac3121f247e005f19b9e71558bf558cc3e97d6fe', class: Object.assign({}, inputEl.class()) }, h("div", { key: 'e08b0f6862c9c10868a5ee22d4e54360fd59458d', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '0b74ff9bddd4dcbe663786c25741e0ea767befc0', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { key: 'a6b700f20e4c1dea1e639053ddebf15b80b8decf', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: '7fd6ea23fd3676c3b3c8e307a05e2b601ba48178', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-input-stepper.js

@@ -1192,15 +1192,15 @@ const InputStepper = /*@__PURE__*/ proxyCustomElement(class InputStepper extends
         const elText = elInner.element('text');
         const increaseLabel = i18nBalInputStepper[this.language].increase;
         const decreaseLabel = i18nBalInputStepper[this.language].decrease;
-        return (h(Host, { key: '5589706c5ef9b82dd6f1c35ab1fbd5b302697de3', "aria-disabled": this.disabled ? 'true' : null, "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '595178efdf14780946fce626848da95a859c9c44', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: '8964a4963cbdbcf9881e40a232827804996772aa', aria: {
+        return (h(Host, { key: 'dfab36b5eddcafb9735e2f0864ea193dcded0ed0', "aria-disabled": this.disabled ? 'true' : null, "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '995012f045bff801123eb570e9e15a325887fe44', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: '00be7e79c60caca77ec9da3afbbcff9366d62ce2', aria: {
                 title: decreaseLabel,
                 label: decreaseLabel,
                 controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("bal-text", { key: '33a6ba03438ea1357f5f7f8187d37ffa0aaa4bf6', space: "none", color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : '', bold: true, class: Object.assign({}, elText.class()), "data-testid": "bal-input-stepper-text" }, formatLocaleNumber(this.value)), h("bal-button", { key: 'fa6174baa6f07c8781ef7e1638b76184e42c242b', aria: {
+            }, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("bal-text", { key: '58a83c975658a26b268fdaa01ec5755648232052', space: "none", color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : '', bold: true, class: Object.assign({}, elText.class()), "data-testid": "bal-input-stepper-text" }, formatLocaleNumber(this.value)), h("bal-button", { key: '65067189b64d42fa3b06cb9b128c60b9d68a481d', aria: {
                 title: increaseLabel,
                 label: increaseLabel,
                 controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ key: 'a35292444a15736d3e5239de075ef9806256972b', class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
+            }, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ key: '609736bcab366e2276240d35c1d39369fa31d066', class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-input.js

@@ -440,7 +440,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: '40f9efbb2c76d2ea28e68c0b27e974a2b1a49f38', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '25cebd576de7eb2f5edaa306342dfc813bc233fb', class: {
+        return (h(Host, { key: '6c244fcb460677d230891144d73b5688392106db', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '608a42d4c22e631f8504d743e0545016ab87e336', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

package/components/bal-label2.js

@@ -73,7 +73,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         const xxxLarge = this.size === 'xxx-large';
         const id = this.ariaForm.labelId || this.htmlId;
         const htmlFor = this.htmlFor || this.ariaForm.controlId;
-        return (h(Host, { key: '7b750612f100ba622f274fa95b2650063a1b0a79', class: Object.assign({}, block.class()) }, h("label", { key: '1b03141866999fd2a23bf1edd240812244d606a7', id: id, htmlFor: htmlFor, 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(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", { key: '0766c92930787bc12145bc247a693082af2f1c6e' }), suffix)));
+        return (h(Host, { key: 'a404463755345541124f189926f3fe8078da1a8e', class: Object.assign({}, block.class()) }, h("label", { key: 'a7d1f218da5b691dbeeff88a2dca31d3698c5234', id: id, htmlFor: htmlFor, 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(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", { key: '7886f3eb151551a9dc8d14b6cfc5aa77f6a6d048' }), suffix)));
     }
     get el() { return this; }
     static get style() { return BalLabelStyle0; }

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

@@ -70,15 +70,15 @@ const ListItemAccordionBody = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '3a4e503ddae6d6c84658b2942a82cc7946ed6e9d', class: {
+        return (h(Host, { key: '06ee66f63c656b78ad4810d1c100537705920540', class: {
                 'bal-list__item': true,
                 'bal-list__item__accordion-body': true,
                 'bal-list__item__accordion-body--grouped': this.accordionGroup !== undefined && this.accordionGroup !== '',
-            } }, h("div", { key: 'f17506b393c8ee3ad69914cba638615dc96b1d46', class: {
+            } }, h("div", { key: 'dc9e35c46f9ced8cb40e6e89785c63fb791dd42f', class: {
                 'bal-list__item__accordion-body__content': true,
                 [`bal-list__item__accordion-body__content--${this.contentAlignment}`]: this.contentAlignment !== undefined,
                 [`bal-list__item__accordion-body__content--space-${this.contentSpace}`]: this.contentSpace !== undefined,
-            }, ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'ef461ed5b0e17b6dd4b79b7d88ccc4dc84b7694b' }))));
+            }, ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '8b4d53344c8d23dacb1e7fc274837adcdc143529' }))));
     }
     get el() { return this; }
 }, [4, "bal-list-item-accordion-body", {

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

@@ -40,11 +40,11 @@ const ListItemAccordionHead = /*@__PURE__*/ proxyCustomElement(class ListItemAcc
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '07c14c423b6f0840576dbd6fecb65de01f000530', class: {
+        return (h(Host, { key: '832f5c8044b9e4ce3cbb058bda2b6049510972de', class: {
                 'bal-list__item': true,
                 'bal-list__item__accordion-head': true,
                 'bal-list__item__accordion-head--open': this.accordionOpen,
-            }, role: "button", tabindex: "0", onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '620e067008a8a1642bda2293fbe90c0ae24f8088' }), h("bal-list-item-icon", { key: 'cf069c253dd3f419e630ab1ccd69789c1b244e0e', right: true }, h("bal-icon", { key: '3bb4e7f40d33d292a7a1f4d5e66a9a79aead7412', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
+            }, role: "button", tabindex: "0", onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '8a19cd5dd89ce0adb4301d2bfedbcdc7416457c6' }), h("bal-list-item-icon", { key: '263259acd91f67abe9114a127afbafe09e5a81b7', right: true }, h("bal-icon", { key: '10c6bf2695488123fcb5c229a94b36cbfd0c767a', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-list-item-content2.js

@@ -7,10 +7,10 @@ const ListItemContent = /*@__PURE__*/ proxyCustomElement(class ListItemContent e
         this.contentAlignment = undefined;
     }
     render() {
-        return (h(Host, { key: '62c3187a790387131619a36041500bfa8411f1ef', class: {
+        return (h(Host, { key: '18b259162c90c9d964723ead0c397808190b5a03', class: {
                 'bal-list__item__content': true,
                 [`bal-list__item__content--${this.contentAlignment}`]: this.contentAlignment !== undefined,
-            } }, h("slot", { key: '46b91cbcc099fadbc5d36cd38962cd269edfa061' })));
+            } }, h("slot", { key: 'f5f1b01681e567d907880df1c074bb6387afe692' })));
     }
 }, [4, "bal-list-item-content", {
         "contentAlignment": [1, "content-alignment"]

package/components/bal-list-item-icon2.js

@@ -7,10 +7,10 @@ const ListItemIcon = /*@__PURE__*/ proxyCustomElement(class ListItemIcon extends
         this.right = false;
     }
     render() {
-        return (h(Host, { key: '9fb09192dd52850fcef91ea5a331d15a4b3b5dcc', class: {
+        return (h(Host, { key: '99a23b25b0d12efbbcec68c953c9a71715728264', class: {
                 'bal-list__item__icon': true,
                 'bal-list__item__icon--right': this.right,
-            } }, h("slot", { key: 'cd11e4ae80df1279bb2ba2ea033177e2853e9f78' })));
+            } }, h("slot", { key: '735c1364fabfb25f66c930771294b88588bb3dde' })));
     }
 }, [4, "bal-list-item-icon", {
         "right": [4]

package/components/bal-list-item-subtitle2.js

@@ -6,7 +6,7 @@ const ListItemSubtitle = /*@__PURE__*/ proxyCustomElement(class ListItemSubtitle
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '9d30c4730ecaf4111353cba87adaa659eb859623', class: "bal-list__item__subtitle" }, h("slot", { key: 'e76c009d723f41b9197c4d08dfb113221f83ff04' })));
+        return (h(Host, { key: 'effd50d57869e56472d4f02227aa8d0f694fe2b2', class: "bal-list__item__subtitle" }, h("slot", { key: '78c5597788016f37e1c7f96b2bc3b8eba14a16aa' })));
     }
 }, [4, "bal-list-item-subtitle"]);
 function defineCustomElement() {

package/components/bal-list-item-title2.js

@@ -9,7 +9,7 @@ const ListItemTitle = /*@__PURE__*/ proxyCustomElement(class ListItemTitle exten
         this.visualLevel = undefined;
     }
     render() {
-        return (h(Host, { key: '01c84fe56b2b55a7697123f6fe756faf6356715d', class: "bal-list__item__title" }, h("bal-heading", { key: '72c506243539016f8ea69d0c41617cf3d78db736', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: '3e92f25b24180c39db9cbe8967baac16e41e0f03' }))));
+        return (h(Host, { key: '4825c89e7378cd84b26a1ec9188063a2023d0df6', class: "bal-list__item__title" }, h("bal-heading", { key: 'b49ed81022742cb5ababb5acb3b4f62eb9fa00f9', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: 'c79cd06a74853e184c07a751947a974a7a2eca5d' }))));
     }
 }, [4, "bal-list-item-title", {
         "level": [1],

package/components/bal-list2.js

@@ -27,7 +27,7 @@ const List = /*@__PURE__*/ proxyCustomElement(class List extends HTMLElement {
         const block = BEM.block('list');
         const closestListEl = this.el.closest('.bal-list');
         const nested = closestListEl !== null && closestListEl !== this.el;
-        return (h(Host, { key: 'e37f1536781b7ba2eb1e544a314c9b6396b6a2da', role: "list", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('nested').class(nested)), block.modifier('disabled').class(this.disabled)), block.modifier('border').class(this.border)), block.modifier(`size-${this.size || 'normal'}`).class()), block.modifier(`background-${this.background}`).class()) }, h("slot", { key: '21a50a6a0501553da01d3cd5bf23558940d51ec4' })));
+        return (h(Host, { key: '4a0b8f7cfd42f45643109f98a60f801b8c61f832', role: "list", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('nested').class(nested)), block.modifier('disabled').class(this.disabled)), block.modifier('border').class(this.border)), block.modifier(`size-${this.size || 'normal'}`).class()), block.modifier(`background-${this.background}`).class()) }, h("slot", { key: 'df4df7cfbc9c054ddb565c6712f25cd0b5970df4' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-modal-body.js

@@ -6,7 +6,7 @@ const ModalBody = /*@__PURE__*/ proxyCustomElement(class ModalBody extends HTMLE
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '832389ef4fb2876265130421194e971d14c1d664', class: "bal-modal__body" }, h("slot", { key: '8a0e7b7bc0f015b9d1a208767214964e1a6a083d' })));
+        return (h(Host, { key: '4f377434dbfa5bcaf78de5bbd9c2ce0b3ef29b07', class: "bal-modal__body" }, h("slot", { key: 'cc2a53e19dd0ec2c2bccbabe0ee7f3b1d1bc1cfe' })));
     }
 }, [4, "bal-modal-body"]);
 function defineCustomElement$1() {

package/components/bal-modal-header.js

@@ -18,7 +18,7 @@ const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends H
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a168b477c3b25d6b634cae28dfdfe80662835c28', class: "bal-modal__header" }, h("div", { key: 'ede951e810c8dd9ee74f18bd2aaeb9938256eaa0', class: "bal-modal__header__title" }, h("bal-heading", { key: '58aa9747176c2fb610b3d5e269b5e5318e6f1545', level: "h2", space: "none" }, h("slot", { key: '35b58496692d5fafadba77727cd60a70f507b327' }))), ((_a = this.parentModal) === null || _a === void 0 ? void 0 : _a.isClosable) ? (h("bal-close", { class: "bal-modal__header__close data-test-modal-close", onClick: this.closeHandler })) : ('')));
+        return (h(Host, { key: '5e6e9e2ca7d60ad7db0afe67c415879497f0a8d2', class: "bal-modal__header" }, h("div", { key: '8f9fde0e3f58ecdffdca48e9b86cfdd631fed2f1', class: "bal-modal__header__title" }, h("bal-heading", { key: '855241bb7a83ff949c38e3f7ace530791e7d06ee', level: "h2", space: "none" }, h("slot", { key: '526ce820a6160cdc093d994a00328b9297924046' }))), ((_a = this.parentModal) === null || _a === void 0 ? void 0 : _a.isClosable) ? (h("bal-close", { class: "bal-modal__header__close data-test-modal-close", onClick: this.closeHandler })) : ('')));
     }
     get el() { return this; }
 }, [4, "bal-modal-header"]);

package/components/bal-modal.js

@@ -237,17 +237,17 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends HTMLElement$1
         return false;
     }
     render() {
-        return (h(Host, { key: '5a8c05f910014259cbc35690929729f03b137466', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
+        return (h(Host, { key: '6fb09ad213fb5ee3a62e3e166f7381000ef02380', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
                 '--bal-width': `${this.modalWidth}px`,
-            } }, h("div", { key: '03fddcc97eb0da63d98dc7a36ed16513491d5120', class: {
+            } }, h("div", { key: 'cad948856ebda541aedd8f15dee694ebaad37c48', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '56851a1b9e6e0e0e6580f1cf66ec7c81bd96aafd', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '898638dcd4c7d67a988f4b145cd14a8377744829', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: 'b1d435f31e320d13cb699e9d353dd9e2883b0da3', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '0472b9eca55a86bac5587dd84b7b73391fe8c81b', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '061cbc8402d780cefab58dd501f795698c1fbca8' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '3c0ab93e9049d0fb93fac5d2e0affe06eaae0ff5' })))));
     }
     get el() { return this; }
     static get style() { return BalModalStyle0; }

package/components/bal-nav-link-grid-col2.js

@@ -22,7 +22,7 @@ const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol ext
     render() {
         const block = BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (h(Host, { key: '570396a3ad6882891cfefebf9d92dae1137a3f48', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '86f6add382f5accf09aef4593b16281268af8241', class: Object.assign({}, innerEl.class()) }, h("slot", { key: '57160d0fd8135f4d8a4d955a019ae41b28fc2123' }))));
+        return (h(Host, { key: 'd207c87255663724d4cdefb411665804c0d614bf', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '8fa5bf2182f99d55463202ecb68aa490ac741510', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'a04eb96c4706a99724d7955aa1a0ce0ef0be4690' }))));
     }
     static get style() { return BalNavLinkGridColStyle0; }
 }, [4, "bal-nav-link-grid-col", {

package/components/bal-nav-link-grid2.js

@@ -20,7 +20,7 @@ const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends H
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
+        return (h(Host, { key: '03e4b64a2041c0fb36d94fd061eb9352a38446ed', class: Object.assign({}, block.class()) }, h("slot", { key: '7f7eb07e433531b6d0dab67b4a89e7faab742b51' })));
     }
     static get style() { return BalNavLinkGridStyle0; }
 }, [4, "bal-nav-link-grid"]);