@baloise/ds-core 19.0.1 → 19.1.0-nightly.20250606

package/components/bal-field-hint.js

@@ -1,14 +1,16 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
-import { d as defineCustomElement$a } from './bal-button2.js';
-import { d as defineCustomElement$9 } from './bal-button-group2.js';
+import { d as defineCustomElement$c } from './bal-button2.js';
+import { d as defineCustomElement$b } from './bal-button-group2.js';
+import { d as defineCustomElement$a } from './bal-close2.js';
+import { d as defineCustomElement$9 } from './bal-heading2.js';
 import { d as defineCustomElement$8 } from './bal-hint2.js';
 import { d as defineCustomElement$7 } from './bal-hint-text2.js';
 import { d as defineCustomElement$6 } from './bal-hint-title2.js';
 import { d as defineCustomElement$5 } from './bal-icon2.js';
-import { d as defineCustomElement$4 } from './bal-popover2.js';
-import { d as defineCustomElement$3 } from './bal-popover-content2.js';
-import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defineCustomElement$4 } from './bal-popup2.js';
+import { d as defineCustomElement$3 } from './bal-spinner2.js';
+import { d as defineCustomElement$2 } from './bal-stack2.js';
 
 const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLElement {
     constructor() {
@@ -31,7 +33,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-field-hint", "bal-button", "bal-button-group", "bal-hint", "bal-hint-text", "bal-hint-title", "bal-icon", "bal-popover", "bal-popover-content", "bal-spinner"];
+    const components = ["bal-field-hint", "bal-button", "bal-button-group", "bal-close", "bal-heading", "bal-hint", "bal-hint-text", "bal-hint-title", "bal-icon", "bal-popup", "bal-spinner", "bal-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-field-hint":
             if (!customElements.get(tagName)) {
@@ -40,10 +42,20 @@ function defineCustomElement$1() {
             break;
         case "bal-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "bal-button-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "bal-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "bal-heading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
@@ -68,17 +80,17 @@ function defineCustomElement$1() {
                 defineCustomElement$5();
             }
             break;
-        case "bal-popover":
+        case "bal-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "bal-popover-content":
+        case "bal-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-spinner":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-hint2.js

@@ -3,18 +3,20 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { p as preventDefault } from './utils.js';
 import { B as BalScrollHandler } from './scroll.js';
-import { d as defineCustomElement$6 } from './bal-button2.js';
-import { d as defineCustomElement$5 } from './bal-button-group2.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';
+import { d as defineCustomElement$5 } from './bal-heading2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
-import { d as defineCustomElement$3 } from './bal-popover2.js';
-import { d as defineCustomElement$2 } from './bal-popover-content2.js';
-import { d as defineCustomElement$1 } from './bal-spinner2.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
+import { d as defineCustomElement$3 } from './bal-popup2.js';
+import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defineCustomElement$1 } from './bal-stack2.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToConfig } from './config.decorator.js';
 import { i as isEnterKey, a as isSpaceKey } from './keyboard.helpers.js';
 
-const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
+const balHintCss = "@media (hover: hover)and (pointer: fine){.bal-hint__icon:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle{fill:var(--bal-color-light-blue-5)}.bal-hint .bal-popup__container{z-index:var(--bal-z-index-popup);background:var(--bal-hint-content-background);width:auto;max-width:30rem;min-width:16.25rem}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 const BalHintStyle0 = balHintCss;
 
 const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
@@ -22,7 +24,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         super();
         this.__registerHost();
         this.bodyScrollHandler = new BalScrollHandler();
-        this.onPopoverChange = (ev) => {
+        this.componentId = `bal-hint-${hintIds++}`;
+        this.onPopupChange = (ev) => {
             this.isActive = ev.detail;
             preventDefault(ev);
         };
@@ -87,8 +90,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
      * Opens the hint box.
      */
     async present() {
-        if (this.popoverElement) {
-            this.popoverElement.present();
+        if (this.popupElement) {
+            this.popupElement.present();
         }
         if (this.isMobile) {
             this.bodyScrollHandler.disable();
@@ -99,8 +102,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
      * Closes the hint box.
      */
     async dismiss() {
-        if (this.popoverElement) {
-            this.popoverElement.dismiss();
+        if (this.popupElement) {
+            this.popupElement.dismiss();
         }
         if (this.isMobile) {
             this.bodyScrollHandler.enable();
@@ -117,10 +120,8 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         const elIcon = block.element('icon');
         const elContent = block.element('content');
         const elButtons = elContent.element('buttons');
-        const padding = this.isMobile ? 0 : 8;
-        const offsetY = this.isMobile ? 0 : 16;
         const TriggerIcon = () => {
-            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "data-testid": "bal-hint-trigger", "bal-popover-trigger": true, "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onClick: () => this.toggle(), onKeyDown: event => {
+            return (h("bal-icon", { class: Object.assign({}, elIcon.class()), "bal-popup": this.componentId, "data-testid": "bal-hint-trigger", "aria-haspopup": "true", role: "button", name: "info-circle", tabindex: 0, onKeyDown: event => {
                     if (isEnterKey(event) || isSpaceKey(event)) {
                         event.preventDefault();
                         this.toggle();
@@ -130,15 +131,10 @@ const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {
         const HintContent = () => {
             return (h("div", { class: Object.assign({}, elContent.class()), "data-testid": "bal-hint-content" }, h("div", { ref: el => (this.hintContentEl = el) }), h("bal-button-group", { class: Object.assign(Object.assign({}, elButtons.class()), elButtons.modifier('is-hidden-desktop').class(this.small)) }, h("bal-button", { "data-testid": "bal-hint-close", color: "info", onClick: () => this.dismiss() }, this.closeLabel ? this.closeLabel : this.innerCloseLabel))));
         };
-        const MobileOverlay = () => {
-            const elOverlay = block.element('overlay');
-            return (h("div", { class: Object.assign({}, elOverlay.class()) }, h(TriggerIcon, null), h("div", { class: Object.assign(Object.assign({}, elOverlay.element('content').class()), elOverlay.element('content').modifier('active').class(this.isActive)) }, h(HintContent, null))));
+        const Popup = () => {
+            return (h("div", { class: Object.assign({}, block.element('popup').class()) }, h(TriggerIcon, null), h("bal-popup", { id: this.componentId, placement: "right", ref: el => (this.popupElement = el), onBalChange: this.onPopupChange, variant: this.isMobile ? 'fullscreen' : 'popover', offset: this.isMobile ? 0 : 16 }, h("bal-popup-content", null, h(HintContent, null)))));
         };
-        const Popover = () => {
-            return (h("div", { class: Object.assign({}, block.element('popover').class()) }, h("bal-popover", { hint: true, position: "right", offsetX: 0, offsetY: offsetY, padding: padding, ref: el => (this.popoverElement = el), onBalChange: this.onPopoverChange }, h(TriggerIcon, null), h("bal-popover-content", { color: "grey" }, h(HintContent, null)))));
-        };
-        const HintElement = this.isMobile ? MobileOverlay : Popover;
-        return (h(Host, { class: Object.assign({}, block.class()) }, h(HintElement, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
+        return (h(Host, { class: Object.assign({}, block.class()) }, h(Popup, null), h("div", { ref: el => (this.slotWrapperEl = el), style: { display: 'none' } }, h("slot", null))));
     }
     get element() { return this; }
     static get style() { return BalHintStyle0; }
@@ -165,11 +161,12 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], Hint.prototype, "configChanged", null);
+let hintIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-hint", "bal-button", "bal-button-group", "bal-icon", "bal-popover", "bal-popover-content", "bal-spinner"];
+    const components = ["bal-hint", "bal-button", "bal-button-group", "bal-close", "bal-heading", "bal-icon", "bal-popup", "bal-spinner", "bal-stack"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-hint":
             if (!customElements.get(tagName)) {
@@ -178,10 +175,20 @@ function defineCustomElement() {
             break;
         case "bal-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
             }
             break;
         case "bal-button-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "bal-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "bal-heading":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
@@ -191,17 +198,17 @@ function defineCustomElement() {
                 defineCustomElement$4();
             }
             break;
-        case "bal-popover":
+        case "bal-popup":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-popover-content":
+        case "bal-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
             break;
-        case "bal-spinner":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/components/bal-nav.js

@@ -1,10 +1,10 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 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 { b as balBrowser } from './browser.js';
-import { B as BalScrollHandler } from './scroll.js';
 import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers.js';
+import { L as Logger } from './log.js';
+import { B as BalScrollHandler } from './scroll.js';
 import { d as defineCustomElement$t } from './bal-badge2.js';
 import { d as defineCustomElement$s } from './bal-button2.js';
 import { d as defineCustomElement$r } from './bal-checkbox2.js';
@@ -39,6 +39,79 @@ import { L as ListenToMutation } from './mutation.decorator.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
+const i18nNavBars = {
+    de: {
+        mainNavigation: 'Hauptnavigation',
+        navigation: 'Navigation',
+        subNavigation: 'Subnavigation',
+        open: 'Menü öffnen',
+        close: 'Menü schliessen',
+    },
+    en: {
+        mainNavigation: 'Main navigation',
+        navigation: 'Navigation',
+        subNavigation: 'Sub navigation',
+        open: 'Open Menu',
+        close: 'Close Menu',
+    },
+    fr: {
+        mainNavigation: 'Navigation principale',
+        navigation: 'Navigation',
+        subNavigation: 'Sous-navigation',
+        open: 'Ouvrir le menu',
+        close: 'Fermer le menu',
+    },
+    it: {
+        mainNavigation: 'Navigazione principale',
+        navigation: 'Navigazione',
+        subNavigation: 'Sottonavigazione',
+        open: 'Apri Menù',
+        close: 'Chiudi menù',
+    },
+    nl: {
+        mainNavigation: 'Hoofdnavigatie',
+        navigation: 'Navigatie',
+        subNavigation: 'Subnavigatie',
+        open: 'Menu openen',
+        close: 'Menu sluiten',
+    },
+    es: {
+        mainNavigation: 'Navegación principal',
+        navigation: 'Navegación',
+        subNavigation: 'Subnavegación',
+        open: 'Menú abierto',
+        close: 'Cerrar menú',
+    },
+    pl: {
+        mainNavigation: 'Nawigacja główna',
+        navigation: 'Nawigacja',
+        subNavigation: 'Nawigacja podrzędna',
+        open: 'Otwórz menu',
+        close: 'Zamknij menu',
+    },
+    pt: {
+        mainNavigation: 'Navegação principal',
+        navigation: 'Navegação',
+        subNavigation: 'Subnavegação',
+        open: 'Menu aberto',
+        close: 'Fechar menu',
+    },
+    sv: {
+        mainNavigation: 'Huvudnavigering',
+        navigation: 'Navigering',
+        subNavigation: 'Undernavigering',
+        open: 'Öppna menyn',
+        close: 'Stäng menyn',
+    },
+    fi: {
+        mainNavigation: 'Päänavigaatio',
+        navigation: 'Navigaatio',
+        subNavigation: 'Alinavigaatio',
+        open: 'Avaa valikko',
+        close: 'Sulje valikko',
+    },
+};
+
 class NavLinkItem {
     constructor(item, observer) {
         this.observer = observer;
@@ -94,6 +167,85 @@ class NavLinkItem {
 }
 let NavLinkItemIDs = 0;
 
+class NavMetaButton extends NavLinkItem {
+    constructor(item, observer) {
+        super(item, observer);
+        this.touchPlacement = 'top';
+        this.id = `nav-meta-button-${NavMetaButtonIDs++}`;
+        this.touchPlacement = item.touchPlacement || 'top';
+        this.value = item.value || this.id;
+        this.icon = item.icon;
+        this.popoverId = item.popupId;
+        this.ariaLabel = item.ariaLabel;
+        this.htmlTitle = item.htmlTitle;
+        this.href = item.href || '';
+        this.target = item.target || '_self';
+    }
+    get type() {
+        return 'NavMetaButton';
+    }
+    get isLink() {
+        return !!this.href;
+    }
+    renderAtMetaBar() {
+        if (this.isLink) {
+            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                } }, this.label));
+        }
+        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
+                title: this.htmlTitle,
+                label: this.ariaLabel || this.label,
+            }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
+    }
+    renderAtTouchTopMetaBar() {
+        if (this.touchPlacement === 'top') {
+            if (this.isLink) {
+                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
+                        title: this.htmlTitle,
+                        label: this.ariaLabel || this.label,
+                    } }, this.icon ? '' : this.label));
+            }
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
+        }
+    }
+    renderAtTouchBottomMetaBar() {
+        if (this.touchPlacement === 'bottom') {
+            if (this.isLink) {
+                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
+                        title: this.htmlTitle,
+                        label: this.ariaLabel || this.label,
+                    }, href: this.href, target: this.target }, this.label));
+            }
+            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
+                    title: this.htmlTitle,
+                    label: this.ariaLabel || this.label,
+                }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
+        }
+    }
+    resetTouchBottomMetaBar() {
+        if (balBrowser.hasDocument && this.touchPlacement === 'bottom') {
+            const button = document.getElementById(this.value);
+            if (button && button.balPopupVariant === 'drawer') {
+                button.color = 'info';
+            }
+        }
+    }
+    resetDesktopMetaBar() {
+        if (balBrowser.hasDocument) {
+            const button = document.getElementById(this.value);
+            if (button && button.balPopupVariant === 'popover') {
+                button.color = 'info';
+            }
+        }
+    }
+}
+let NavMetaButtonIDs = 0;
+
 class NavSectionLinkItem extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -258,158 +410,6 @@ class NavMetaLinkItem extends NavLinkItem {
 }
 let NavMetaLinkItemIDs = 0;
 
-class NavMetaButton extends NavLinkItem {
-    constructor(item, observer) {
-        super(item, observer);
-        this.touchPlacement = 'top';
-        this.id = `nav-meta-button-${NavMetaButtonIDs++}`;
-        this.touchPlacement = item.touchPlacement || 'top';
-        this.value = item.value || this.id;
-        this.icon = item.icon;
-        this.popoverId = item.popupId;
-        this.ariaLabel = item.ariaLabel;
-        this.htmlTitle = item.htmlTitle;
-        this.href = item.href || '';
-        this.target = item.target || '_self';
-    }
-    get type() {
-        return 'NavMetaButton';
-    }
-    get isLink() {
-        return !!this.href;
-    }
-    renderAtMetaBar() {
-        if (this.isLink) {
-            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                } }, this.label));
-        }
-        return (h("bal-button", { id: this.value, class: "bal-popup-permanent-trigger bal-nav__popup--desktop", color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                title: this.htmlTitle,
-                label: this.ariaLabel || this.label,
-            }, inverted: true, "bal-popup": this.popoverId, "bal-popup-variant": "popover", "bal-popup-arrow": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-closable": "true", "bal-popup-placement": "bottom-end", "bal-popup-reference": "bal-nav__meta-buttons" }, this.label));
-    }
-    renderAtTouchTopMetaBar() {
-        if (this.touchPlacement === 'top') {
-            if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    } }, this.icon ? '' : this.label));
-            }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-top", color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "fullscreen", "bal-popup-closable": "true", "bal-popup-offset": "64" }, this.icon ? '' : this.label));
-        }
-    }
-    renderAtTouchBottomMetaBar() {
-        if (this.touchPlacement === 'bottom') {
-            if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "info", inverted: false, icon: this.icon, square: !this.label || this.label.length < 3, aria: {
-                        title: this.htmlTitle,
-                        label: this.ariaLabel || this.label,
-                    }, href: this.href, target: this.target }, this.label));
-            }
-            return (h("bal-button", { id: this.value, class: "bal-nav__popup--touch-bottom", icon: this.icon, square: !this.label || this.label.length < 3, color: "info", inverted: false, aria: {
-                    title: this.htmlTitle,
-                    label: this.ariaLabel || this.label,
-                }, "bal-popup": this.popoverId, "bal-popup-variant": "drawer", "bal-popup-closable": "true", "bal-popup-backdrop": "true", "bal-popup-backdrop-dismiss": "true", "bal-popup-offset": "64" }, this.label));
-        }
-    }
-    resetTouchBottomMetaBar() {
-        if (balBrowser.hasDocument && this.touchPlacement === 'bottom') {
-            const button = document.getElementById(this.value);
-            if (button && button.balPopupVariant === 'drawer') {
-                button.color = 'info';
-            }
-        }
-    }
-    resetDesktopMetaBar() {
-        if (balBrowser.hasDocument) {
-            const button = document.getElementById(this.value);
-            if (button && button.balPopupVariant === 'popover') {
-                button.color = 'info';
-            }
-        }
-    }
-}
-let NavMetaButtonIDs = 0;
-
-const i18nNavBars = {
-    de: {
-        mainNavigation: 'Hauptnavigation',
-        navigation: 'Navigation',
-        subNavigation: 'Subnavigation',
-        open: 'Menü öffnen',
-        close: 'Menü schliessen',
-    },
-    en: {
-        mainNavigation: 'Main navigation',
-        navigation: 'Navigation',
-        subNavigation: 'Sub navigation',
-        open: 'Open Menu',
-        close: 'Close Menu',
-    },
-    fr: {
-        mainNavigation: 'Navigation principale',
-        navigation: 'Navigation',
-        subNavigation: 'Sous-navigation',
-        open: 'Ouvrir le menu',
-        close: 'Fermer le menu',
-    },
-    it: {
-        mainNavigation: 'Navigazione principale',
-        navigation: 'Navigazione',
-        subNavigation: 'Sottonavigazione',
-        open: 'Apri Menù',
-        close: 'Chiudi menù',
-    },
-    nl: {
-        mainNavigation: 'Hoofdnavigatie',
-        navigation: 'Navigatie',
-        subNavigation: 'Subnavigatie',
-        open: 'Menu openen',
-        close: 'Menu sluiten',
-    },
-    es: {
-        mainNavigation: 'Navegación principal',
-        navigation: 'Navegación',
-        subNavigation: 'Subnavegación',
-        open: 'Menú abierto',
-        close: 'Cerrar menú',
-    },
-    pl: {
-        mainNavigation: 'Nawigacja główna',
-        navigation: 'Nawigacja',
-        subNavigation: 'Nawigacja podrzędna',
-        open: 'Otwórz menu',
-        close: 'Zamknij menu',
-    },
-    pt: {
-        mainNavigation: 'Navegação principal',
-        navigation: 'Navegação',
-        subNavigation: 'Subnavegação',
-        open: 'Menu aberto',
-        close: 'Fechar menu',
-    },
-    sv: {
-        mainNavigation: 'Huvudnavigering',
-        navigation: 'Navigering',
-        subNavigation: 'Undernavigering',
-        open: 'Öppna menyn',
-        close: 'Stäng menyn',
-    },
-    fi: {
-        mainNavigation: 'Päänavigaatio',
-        navigation: 'Navigaatio',
-        subNavigation: 'Alinavigaatio',
-        open: 'Avaa valikko',
-        close: 'Sulje valikko',
-    },
-};
-
 const balNavCss = "@media (hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
 const BalNavStyle0 = balNavCss;
 

package/components/bal-number-input.js

@@ -149,6 +149,9 @@ function toNumber(value, decimalPoints = 0) {
     if (checkIfValueIsStringAndDoesNotHaveGermanFormat(val)) {
         val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
+    if (typeof val === 'string') {
+        val = val.replace(getDecimalSeparator(), '.');
+    }
     return decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val);
 }
 function toFixedNumber(value, decimalPoints = 0) {

package/components/bal-popover2.js

@@ -3,8 +3,8 @@ 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 { L as Logger } from './log.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 
 var top = 'top';
 var bottom = 'bottom';