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

package/components/bal-navbar-brand.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { b as balBrowser } from './browser.js';
@@ -7,6 +8,41 @@ import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-logo2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
+import { d as defaultConfig } from './config.default.js';
+import { L as ListenToConfig } from './config.decorator.js';
+
+const i18nBalNavbarBrand = {
+    en: {
+        logoButtonLabel: 'To Homepage',
+    },
+    fr: {
+        logoButtonLabel: 'Vers la page d’accueil',
+    },
+    it: {
+        logoButtonLabel: 'Alla pagina principale',
+    },
+    nl: {
+        logoButtonLabel: 'Naar de startpagina',
+    },
+    es: {
+        logoButtonLabel: 'A la página principal',
+    },
+    pt: {
+        logoButtonLabel: 'Para a página inicial',
+    },
+    sv: {
+        logoButtonLabel: 'Till startsidan',
+    },
+    fi: {
+        logoButtonLabel: 'Etusivulle',
+    },
+    de: {
+        logoButtonLabel: 'Zur Startseite',
+    },
+    pl: {
+        logoButtonLabel: 'Na stronę główną',
+    },
+};
 
 const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends HTMLElement {
     constructor() {
@@ -16,8 +52,11 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
         this.balWillAnimate = createEvent(this, "balWillAnimate", 7);
         this.balDidAnimate = createEvent(this, "balDidAnimate", 7);
         this.bodyScrollHandler = new BalScrollHandler();
+        this.language = defaultConfig.language;
         this.isMenuActive = false;
         this.href = '';
+        this.logoClickable = false;
+        this.logoLabel = undefined;
         this.target = '_self';
         this.simple = false;
         this.logo = undefined;
@@ -36,6 +75,12 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
     disconnectedCallback() {
         this.bodyScrollHandler.disconnect();
     }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
     async resetIsMenuActive(ev) {
         if (ev.matches && !this.simple) {
             this.toggle(false);
@@ -71,7 +116,8 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
     render() {
         const navbarBrandEl = BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
-        return (h(Host, { key: '5a19618c04c539ac05ae44950d5642724f345d8f', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'bac65d94bd398e028a0bf4159df01af8e346eb7c', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '67808a0a311e2cb423d4f6cf2eaa6cb0b70062d8' })), h("bal-button", { key: '5d5a5d9602caec124e8163ebe54fc66b363d65c9', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
+        return (h(Host, { key: '68848bc9042cea0a8da2368dce7bddb8ffa349f1', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '048af402cdd3bd273b62373dd9b99cbf1f744c56', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: 'e03caae5038304a1513400972c36e2eb2e8981a6' })), h("bal-button", { key: 'c9aa9ea6503771f47fa7fd6e6f12cb0030903a86', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));
@@ -79,14 +125,24 @@ const NavbarBrand = /*@__PURE__*/ proxyCustomElement(class NavbarBrand extends H
     get el() { return this; }
 }, [4, "bal-navbar-brand", {
         "href": [1],
+        "logoClickable": [4, "logo-clickable"],
+        "logoLabel": [1, "logo-label"],
         "target": [1],
         "simple": [4],
         "logo": [1],
         "logoSize": [1, "logo-size"],
         "animated": [4],
         "interface": [1],
-        "isMenuActive": [32]
+        "language": [32],
+        "isMenuActive": [32],
+        "configChanged": [64]
     }]);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], NavbarBrand.prototype, "configChanged", null);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -9,7 +9,7 @@ const NavbarMenuEnd = /*@__PURE__*/ proxyCustomElement(class NavbarMenuEnd exten
     }
     render() {
         const menuEndEl = BEM.block('navbar').element('menu').element('end');
-        return (h(Host, { key: '04f6df129b2db2428a8ee50e4c3316cf9cc143f9', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '0457213c0f02e87d1c2b30e7be6be3c0471fe3b9' })));
+        return (h(Host, { key: '10aa16f437f428adf6cb21c276aa16230aaad041', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'adadfb0d9bda6bb49613541c67bf9dced7a0ad4b' })));
     }
 }, [4, "bal-navbar-menu-end", {
         "interface": [1]

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

@@ -9,7 +9,7 @@ const NavbarMenuStart = /*@__PURE__*/ proxyCustomElement(class NavbarMenuStart e
     }
     render() {
         const menuStartEl = BEM.block('navbar').element('menu').element('start');
-        return (h(Host, { key: '06f8898607ca2e126026864177931399c87819be', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'a1f9e79d3d0681c1c96734218cf5313f7cf95afb' })));
+        return (h(Host, { key: '1d35806afa3206d429b351b9442375cd4a41133f', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '35baeb64effd472c64a148fb77fa91a604078f36' })));
     }
 }, [4, "bal-navbar-menu-start", {
         "interface": [1]

package/components/bal-navbar-menu.js

@@ -36,7 +36,7 @@ const NavbarMenu = /*@__PURE__*/ proxyCustomElement(class NavbarMenu extends HTM
                 container = navbarEl.container;
             }
         }
-        return (h(Host, { key: '88676dca9a4def916347757f552fa1efe174d80d', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: '47d1c81229bf002f4404123dad97df4d92042f1c' })));
+        return (h(Host, { key: '6b0a857bff0929177b51e75b2e5e26ad51d9dc6a', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: 'e7919137bb34c15bc676a1617a79aac4111460fc' })));
     }
     get element() { return this; }
 }, [4, "bal-navbar-menu", {

package/components/bal-navbar.js

@@ -30,7 +30,7 @@ const Navbar = /*@__PURE__*/ proxyCustomElement(class Navbar extends HTMLElement
     }
     render() {
         const navbarEl = BEM.block('navbar');
-        return (h(Host, { key: 'c0a7e51b1f0b6cf601943198f5c116325c5115ce', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'c042e875f2b62bc58fd06851bd1a4d371a2e8080', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '84e0ffcd250b6f4806d8c5d6ca4fc86bb3dbfe4a' }))));
+        return (h(Host, { key: 'dddbbeaef348b9ff101743f71451f6d84ac72951', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: 'ba4bb4f5ea156b0a2b4ba5f54f8d80b41477ee6b', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '647ff400273d4cd92574d5f46aff07aad2b2c810' }))));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/bal-notices.js

@@ -16,7 +16,7 @@ const Notices = /*@__PURE__*/ proxyCustomElement(class Notices extends HTMLEleme
         const block = BEM.block('notices');
         const innerEl = block.element('inner');
         const hasContainer = this.interface === 'toast' && this.container !== undefined;
-        return (h(Host, { key: '053b822408de6ad62883b8a901648d7c4bece50a', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: '0a46d87a51d6b6501d55484b03dc20b19892d03c', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: '157c6c9f6e0ea1a31022716502c2f6faa443f688' }))));
+        return (h(Host, { key: 'a1b78916b871f478faab9f9f8809bd9f2f821662', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: 'a139dfe55addb4c171cbdb9889b54e56cd1b51d9', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'f5c24d3dc1188665169e59f8e105c9de5ed40404' }))));
     }
     static get style() { return BalNoticesStyle0; }
 }, [4, "bal-notices", {

package/components/bal-notification.js

@@ -15,7 +15,7 @@ const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends
     render() {
         const block = BEM.block('notification');
         block.element('inner');
-        return (h(Host, { key: 'beffd9044572b99e98721aed8bffe8b4321d771e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '784ad1c80494175528ebb82fd64904a3fb4fd874' })));
+        return (h(Host, { key: '31c579a60b159d167726e54974f00d77461a1499', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '9ac5afd2aa0a2f9395d1100163d6fcd629e20373' })));
     }
     static get style() { return BalNotificationStyle0; }
 }, [4, "bal-notification", {

package/components/bal-number-input.js

@@ -10,6 +10,7 @@ import { L as Logger } from './log.js';
 import { l as lodash_isnil } from './index3.js';
 import { N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';
 import { i as isEmpty } from './index2.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
@@ -324,10 +325,11 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         this.balChange = debounceEvent(this.balChange, this.debounce);
     }
     valueChanged(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            const isValueNotDefined = newValue === '' || lodash_isnil(newValue) || lodash_isnan(newValue);
+        const newValueAsNumber = toNumber(newValue, this.decimal);
+        if (newValueAsNumber !== oldValue) {
+            const isValueNotDefined = newValueAsNumber === '' || lodash_isnil(newValueAsNumber) || lodash_isnan(newValueAsNumber);
             const emptyValue = this.exactNumber ? '0' : '';
-            const value = isValueNotDefined ? emptyValue : newValue.toString();
+            const value = isValueNotDefined ? emptyValue : newValueAsNumber.toString();
             this.inputValue = toNumber(toFixedNumber(value, this.decimal), this.decimal);
             this.lastValue = toFixedNumber(value, this.decimal);
             if (this.focused) {
@@ -446,11 +448,11 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: '6c70b82d9eb15c47fc4aee5246819c0a4fecc7fb', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '254dee1b9cb3c99f10e0c4b835e69552314ed6c4', class: {
+        return (h(Host, { key: '48b617cf5c4d515226af0571bd63c9135007dee2', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '7f93f8997ccec4b03bde40da80e142e7d050914b', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
-            }, "data-testid": "bal-number-input", ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, pattern: this.inputPattern, min: this.min, max: this.max, value: this.nativeInputValue, onInput: e => this.onInput(e), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onClick: this.onClick, onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes))));
+            }, "data-testid": "bal-number-input", ref: input => (this.nativeInput = input), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), name: this.name, disabled: this.disabled, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, pattern: this.inputPattern, min: this.min, max: this.max, value: this.nativeInputValue, onInput: e => this.onInput(e), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), onClick: this.onClick, onKeyDown: e => this.onKeydown(e), onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -472,7 +474,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
         "max": [1],
         "min": [1],
         "debounce": [2],
-        "value": [1026],
+        "value": [1032],
         "autoInvalidOff": [516, "auto-invalid-off"],
         "focused": [32],
         "language": [32],

package/components/bal-option-list.js

@@ -7,6 +7,7 @@ import { b as waitAfterFramePaint, n as raf } from './helpers.js';
 import { L as Logger } from './log.js';
 import { s as startsWith, i as includes } from './utils.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { a as ariaBooleanToString } from './aria.js';
 
 const balOptionListCss = ".bal-option-list{display:block;position:relative;width:100%;list-style:none;margin:0;outline:0;max-height:var(--bal-option-list-max-height);border-radius:var(--bal-radius-normal);overflow:hidden auto}";
 const BalOptionListStyle0 = balOptionListCss;
@@ -420,7 +421,7 @@ const OptionList = /*@__PURE__*/ proxyCustomElement(class OptionList extends HTM
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '946ff4a59bf7e9202317d7898791f34006c90ee1', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '078d3ec40ac98bd470666e941b84119f89b9b5f9', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '18ddbc132a73787221f6bb7dbf483e1e26883a43' }))));
+        return (h(Host, { key: '4d5be05c78e0aab806b0cd05a6b5af22ab33c773', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '206f190d75dd3cc6a57cf3ea7c9257078580fd62', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '8cee74e85814e448f04c4f2c766721f969ff19cb' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-option.js

@@ -106,7 +106,7 @@ const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: '2dbf49c5030c61a24ce0b2b8cb2fe0f1ede9895b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: '1ed42549cea2542e4eb56d7cfc6c1024dd13aa71', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '3f3c59ec2f04e77bd0400ec58b8294c3ecd7a1b7', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '04e84d67e23ba2e5bd59e5ddb7c4549327e77ce0' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: 'aed8058d7b0526a84dde426b242ded48836fde15', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'e475f8289d2d11ec790e5b808a3b5a67405ee6db', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '9dbc67bbd197f2d30ecc38eba4c1ccf93bb98a7d', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '3e1392bbd15175bc15f43d0e4d90e65abfa0f5ec' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     get el() { return this; }
     static get style() { return BalOptionStyle0; }

package/components/bal-pagination.js

@@ -233,10 +233,10 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { key: '6fd9b27bbc3078a95b6a1af21c4e11bef1c79e4d', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: 'f33eb6a8a51bd338c062bf3ac142b31ec170b4bf' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: 'af2f5c1c4582c9f87a34ae8d9e18e6f153d6c079', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (h("ul", { key: 'e60525e50e001e65e0f3dfdcab2be7c577d1cb34', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (h(Host, { key: 'a82c3987b261b090d73a6a326b0628e9f4431de7', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '3558d69404ce4877651363ffe60f5bf37428a316', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: 'a7e00cae2c81d3970f946ac21ab56564a10786a7', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '3b3974da7c2f8d195711d912083ef8021e3d71ca', name: "nav-go-left", size: "small" })), h("bal-button", { key: '1fb819a459e3851768a5664b0bcb8ae6bdfffc83', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: '28bb33f69928d49ea196efc60f0a539c985c6936', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '8d0f477acb2db965fe7ca9a323db754dadb8c2d1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '25bc274a3580f3103acb6aa21bb0f132da31a4cd' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: '635a052d90c4d86104752eedf70d28d60a3ea194', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: '36bc734dd92d55f93cae88e34c032fbae5239ae2', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: '1f6888814e691b8f4b46987055e3d474078bac38', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '00eba4def4d24082f102861ef471043c3646a18a', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: '068a1d8b79deecd129b3280ac4eefb4e6c7ef814', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: '0ceeb68b1426edc0b1425b6bb1236941534ead5d', name: "nav-go-left", size: "small" })), h("bal-button", { key: '3eb18c38c467b0f8bfc2326341e93e236567c060', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: 'fa8feb6b44def140d75218f387fcfdbb984bd99a', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-popover-content2.js

@@ -57,7 +57,7 @@ const PopoverContent = /*@__PURE__*/ proxyCustomElement(class PopoverContent ext
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: 'a6a40a129dadcbe55d6d75c64572b1c1aeedf944', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '6204b4d421004e6f3cf1541ed6a2023f3b3bdef1', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: '71183eaf21a740ed7e20457e9fc3ec302ed2536f' })), h("div", { key: '821519a57d42152641d759aaa350537f7cad59b1', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'c47c5a6aa96c52a4460894ab274a167be0927d35', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: 'dec823beec17dfe48195c3e794dbcfe4725f83d4', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'd8200f831b8569736e27486fd5e975a0f21b76e2' })), h("div", { key: '5cd3727753fa2cf5a841c11b8d48aa7eee31cf2d', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     get el() { return this; }
 }, [4, "bal-popover-content", {

package/components/bal-popover2.js

@@ -1845,6 +1845,7 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
      */
     componentWillLoad() {
         this.backdropHeight = this.getBackdropHeight();
+        this.triggerElement.setAttribute('aria-haspopup', 'true');
     }
     componentDidLoad() {
         this.isInMainNav = this.footMobileNav !== null;
@@ -2043,11 +2044,11 @@ const Popover = /*@__PURE__*/ proxyCustomElement(class Popover extends HTMLEleme
      */
     render() {
         const block = BEM.block('popover');
-        return (h(Host, { key: '7f7adc347e2bcc9f8acacc57f7e5e3d878e706c8', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: '4caa1176851cfca5ea5bc51cb5cbf503572686e9', ref: el => {
+        return (h(Host, { key: '68021af74493241e20669b502f69896b1f02c610', "aria-presented": this.active ? 'true' : null, "data-id": this.popoverId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('active').class(this.active)), block.modifier('tooltip').class(this.tooltip)), block.modifier('arrow').class(this.arrow)), block.modifier('hint').class(this.hint)), block.modifier('backdrop').class(this.backdrop)) }, !this.mobileTop && (h("div", { key: '1b92881a9b0808761b20f9f445f5a43b8cc9f1bb', ref: el => {
                 this.backdropElement = el;
             }, class: Object.assign({}, block.element('backdrop').class(this.backdrop && this.active)), style: {
                 '--bal-popover-backdrop-height': `${this.backdropHeight}rem`,
-            } })), h("slot", { key: '36ec1137ffb8bc0439bbebcaa39144b9bcf7ed45' })));
+            } })), h("slot", { key: 'f8aa58598f2d8a0ca7f836bd77aa0e80a1cb6b30' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-popup.js

@@ -609,7 +609,7 @@ const Popup = /*@__PURE__*/ proxyCustomElement(class Popup extends HTMLElement {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: 'faca9751174d4d2f7348cb3b7a018d6e3d5e4401', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'c4e5cb86d6c3f72d4203579b13fdd492aae42e5d', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '34a7ae9a817a79c34514a38595fa21314912fd38', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: '66bca82705a14ba4051e4f6ff5ddb5e57ae4860f', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '370a9c46d9bbd75615a3e792fb735bbbd9e9eb60', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: 'c4abdbf963e98458d34819f5fd2614b33703a3e9', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '2a0407838f7814ecd8126c722afa02a333ed200a' }))))));
+        return (h(Host, { key: '55c0f5b114d115cd7c1d51aab5674d0e818b1250', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '962ee2a6f7e6504b48e464c5e2ced9ca67765c36', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'b586c483ea4ec62c066486823b3a8f76493a2d6c', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: '4f0664a3e528eb9b68ecd11d7b9ffb14bbf7eaaa', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '621e7ef166b71e781dc404f78be49e24e6183118', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '04c6546ba5da40340316bf0e8ecfb296421d69dd', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '66f837e1b090db0c997c8b4d9673db7652ccfd85' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-progress-bar.js

@@ -66,7 +66,7 @@ const ProgressBar = /*@__PURE__*/ proxyCustomElement(class ProgressBar extends H
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { key: '139854a6448551246c86209f127c3e0cf5d83717', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: 'b39c551cdc221112f1109fa1d2f4bbbdf6e0d2c2', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
+        return (h(Host, { key: 'ed3fb78efd402af40f4a56c4e1b0f33634506cb6', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: '5c18e0082fd842c907d73e96ca84420e50f484b0', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
     }
     get el() { return this; }
     static get style() { return BalProgressBarStyle0; }

package/components/bal-radio-button.js

@@ -178,7 +178,7 @@ const RadioButton = /*@__PURE__*/ proxyCustomElement(class RadioButton extends H
         const invalid = !!this.invalid;
         const color = !!this.color;
         const colored = this.checked && color;
-        return (h(Host, { key: '930e72f27e13997e2cc563abcbbedd74d77aa469', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: 'da96569302e75ced3a3e6295b854bbb5dc537daf', role: "radio", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: 'faafe0cf289c3faec5b68826ee2029dd9e5e5747' }))));
+        return (h(Host, { key: '6d15fada501de837329e97c0c8f4233176761f7e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`column-${this.colSize}`).class(this.colSize > 1)), block.modifier(`column-tablet-${this.colSizeTablet}`).class(this.colSizeTablet > 1)), block.modifier(`column-mobile-${this.colSizeMobile}`).class(this.colSizeMobile > 1)), onClick: this.onClick }, h("button", { key: '45d8e41816ff805867601d8a0f55f1dcd5b53233', role: "radio", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('invalid').class(invalid)), block.element('native').modifier('checked').class(this.checked)), block.element('native').modifier(`colored`).class(colored)), block.element('native').modifier(`color-${this.color}`).class(color)), { 'bal-focusable': !this.disabled }), disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur }, h("slot", { key: '25604044a505daa614dfa277b286f3aa7b0f082a' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-radio-group.js

@@ -6,6 +6,7 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { i as inheritAttributes } from './attributes.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { d as defineCustomElement$2 } from './bal-radio2.js';
 import { L as ListenToFocus } from './focus.decorator.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
@@ -296,7 +297,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
             }
             return option;
         });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-radio", { key: option.value, name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
+        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-radio", { key: option.value, name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
     }
     get el() { return this; }
     static get watchers() { return {