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

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

@@ -1,13 +1,19 @@
+import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { BalScrollHandler } from "../../../utils/scroll";
 import { balBrowser } from "../../../utils/browser";
 import { wait } from "../../../utils/helpers";
+import { i18nBalNavbarBrand } from "./bal-navbar-brand.i18n";
+import { defaultConfig, ListenToConfig } from "../../../utils/config";
 export class NavbarBrand {
     constructor() {
         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;
@@ -26,6 +32,12 @@ export class NavbarBrand {
     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);
@@ -61,7 +73,8 @@ export class NavbarBrand {
     render() {
         const navbarBrandEl = BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
-        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() })));
@@ -89,6 +102,45 @@ export class NavbarBrand {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "logoClickable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the logo is rendered as a button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "logo-clickable",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "logoLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the label of the logo"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "logo-label",
+                "reflect": false
+            },
             "target": {
                 "type": "string",
                 "mutable": false,
@@ -233,6 +285,7 @@ export class NavbarBrand {
     }
     static get states() {
         return {
+            "language": {},
             "isMenuActive": {}
         };
     }
@@ -299,5 +352,44 @@ export class NavbarBrand {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: BalConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "BalConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalConfigState": {
+                            "location": "import",
+                            "path": "../../../utils/config",
+                            "id": "src/utils/config/index.ts::BalConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], NavbarBrand.prototype, "configChanged", null);

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

@@ -32,7 +32,7 @@ export class NavbarMenu {
                 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' })));
     }
     static get is() { return "bal-navbar-menu"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class NavbarMenuEnd {
     }
     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' })));
     }
     static get is() { return "bal-navbar-menu-end"; }
     static get properties() {

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

@@ -6,7 +6,7 @@ export class NavbarMenuStart {
     }
     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' })));
     }
     static get is() { return "bal-navbar-menu-start"; }
     static get properties() {

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

@@ -24,7 +24,7 @@ export class Navbar {
     }
     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' }))));
     }
     static get is() { return "bal-navbar"; }
     static get originalStyleUrls() {

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

@@ -10,7 +10,7 @@ export class Notices {
         const block = BEM.block('notices');
         const innerEl = block.element('inner');
         const hasContainer = this.interface === 'toast' && this.container !== undefined;
-        return (h(Host, { key: '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 is() { return "bal-notices"; }
     static get originalStyleUrls() {

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

@@ -9,7 +9,7 @@ export class Notification {
     render() {
         const block = BEM.block('notification');
         const innerEl = 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 is() { return "bal-notification"; }
     static get originalStyleUrls() {

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

@@ -12,6 +12,7 @@ import { toUserFormattedNumber, isNotNumber, toNumber, toFixedNumber, validateKe
 import isNil from "lodash.isnil";
 import isEmpty from "lodash.isempty";
 import isNaN from "lodash.isnan";
+import { ariaBooleanToString } from "../../utils/aria";
 export class NumberInput {
     constructor() {
         this.inputId = `bal-number-input-${numberInputIds++}`;
@@ -109,10 +110,11 @@ export class NumberInput {
         this.balChange = debounceEvent(this.balChange, this.debounce);
     }
     valueChanged(newValue, oldValue) {
-        if (newValue !== oldValue) {
-            const isValueNotDefined = newValue === '' || isNil(newValue) || isNaN(newValue);
+        const newValueAsNumber = toNumber(newValue, this.decimal);
+        if (newValueAsNumber !== oldValue) {
+            const isValueNotDefined = newValueAsNumber === '' || isNil(newValueAsNumber) || 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) {
@@ -231,11 +233,11 @@ export class NumberInput {
      */
     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))));
     }
     static get is() { return "bal-number-input"; }
     static get originalStyleUrls() {
@@ -506,11 +508,11 @@ export class NumberInput {
                 "defaultValue": "0"
             },
             "value": {
-                "type": "number",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | string",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,

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

@@ -96,7 +96,7 @@ export class Option {
      */
     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' })) : (''))));
     }
     static get is() { return "bal-option"; }
     static get originalStyleUrls() {

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

@@ -7,6 +7,7 @@ import { raf, waitAfterFramePaint } from "../../utils/helpers";
 import { Logger } from "../../utils/log";
 import { includes, startsWith } from "../bal-select/utils/utils";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ariaBooleanToString } from "../../utils/aria";
 export class OptionList {
     constructor() {
         this.inputId = `bal-option-list-${balOptionListIds++}`;
@@ -414,7 +415,7 @@ export class OptionList {
     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' }))));
     }
     static get is() { return "bal-option-list"; }
     static get originalStyleUrls() {

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

@@ -101,10 +101,10 @@ export class Pagination {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { key: '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) : '')));
     }
     static get is() { return "bal-pagination"; }
     static get originalStyleUrls() {

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

@@ -53,7 +53,7 @@ export class PopoverContent {
     }
     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 })));
     }
     static get is() { return "bal-popover-content"; }
     static get properties() {

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

@@ -44,6 +44,7 @@ export class Popover {
      */
     componentWillLoad() {
         this.backdropHeight = this.getBackdropHeight();
+        this.triggerElement.setAttribute('aria-haspopup', 'true');
     }
     componentDidLoad() {
         this.isInMainNav = this.footMobileNav !== null;
@@ -242,11 +243,11 @@ export class Popover {
      */
     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' })));
     }
     static get is() { return "bal-popover"; }
     static get originalStyleUrls() {

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

@@ -310,7 +310,7 @@ export class Popup {
         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' }))))));
     }
     static get is() { return "bal-popup"; }
     static get originalStyleUrls() {

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

@@ -59,7 +59,7 @@ export class ProgressBar {
     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) })));
     }
     static get is() { return "bal-progress-bar"; }
     static get originalStyleUrls() {

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

@@ -170,7 +170,7 @@ export class RadioButton {
         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' }))));
     }
     static get is() { return "bal-radio-button"; }
     static get originalStyleUrls() {

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

@@ -8,6 +8,7 @@ import { inheritAttributes } from "../../../utils/attributes";
 import { ListenToMutation } from "../../../utils/mutation";
 import { defaultBalAriaForm } from "../../../utils/form";
 import { ListenToFocus } from "../../../utils/focus";
+import { ariaBooleanToString } from "../../../utils/aria";
 export class RadioGroup {
     constructor() {
         this.inputId = `bal-rg-${radioGroupIds++}`;
@@ -289,7 +290,7 @@ export class RadioGroup {
             }
             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 }))))));
     }
     static get is() { return "bal-radio-group"; }
     static get properties() {

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

@@ -8,6 +8,7 @@ import { inheritAttributes } from "../../utils/attributes";
 import { stopEventBubbling } from "../../utils/form-input";
 import { isSpaceKey } from "../../utils/keyboard";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ariaBooleanToString } from "../../utils/aria";
 export class Radio {
     constructor() {
         this.inputId = `bal-rb-${radioIds++}`;
@@ -246,7 +247,7 @@ export class Radio {
             labelAttributes.id = `${id}-lbl`;
             labelAttributes.htmlFor = id;
         }
-        return (h(Host, { key: '058d9b48247c0989348d58117017753092fa6afa', "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : null, "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '4c935cb7f8a25f77afaea78b0a8e311166e44067', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, h("slot", null)))) : ('')));
+        return (h(Host, { key: 'b682334af2773f60b6e4bf01d794d488a8fc9106', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-hidden": this.disabled ? 'true' : null, "aria-focused": focused ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('radio').class()), block.modifier('select-button').class(this.interface === 'select-button')), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)), block.modifier('invisible').class(this.invisible)), onKeypress: this.onKeypress, onClick: this.onClick }, h("input", Object.assign({ key: '8d304b0042a753cf65211acf41124fcd15953173', class: Object.assign(Object.assign({}, inputEl.class()), inputEl.modifier('select-button').class(this.interface === 'select-button')), "data-testid": "bal-radio-input", type: "radio", id: id, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "aria-checked": `${this.checked}`, name: this.name, value: value, checked: this.checked, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, required: this.required, onFocus: this.onFocus, onBlur: this.onBlur, ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes)), !this.invisible ? (h(LabelTag, Object.assign({ class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier('radio').class()), labelEl.modifier('checked').class(this.checked)), labelEl.modifier('hidden').class(this.labelHidden)), labelEl.modifier('flat').class(this.flat)) }, labelAttributes, { "data-testid": "bal-radio-label" }), h("span", { class: Object.assign(Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)), labelTextEl.modifier('flat').class(this.flat)), "data-testid": "bal-radio-text" }, this.label, h("slot", null)))) : ('')));
     }
     static get is() { return "bal-radio"; }
     static get originalStyleUrls() {

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

@@ -148,7 +148,7 @@ export class SegmentItem {
                 'aria-describedby': this.ariaForm.messageId,
             };
         }
-        return (h(Host, { key: '62c398353efd59507f158911793411458233f0d9', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ key: 'c69c1cb098c500c1a1b7c57f37892b4c51a09b2e', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { key: '2a2ebc53599929d6189a1d7ca9775f58efc6084c', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { key: '76b5c07bd7236b28e6205b134b39e6de511f30bb', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: '766411046459bfc3fad2afc001d34e21faa9d642', space: "none" }, h("bal-label", { key: 'e68346cc2989aeb4b5d9864b82d704e179b7afba', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: 'd791b43e8a1156c33ffb40107567dcfa4a08bdd8', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: 'de75ed030243d54dbfa0739b74f6e81578bb49e4', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: '44772f1f8c3a550b1041436ad3efbc02fdcc3f04', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+        return (h(Host, { key: '6da240d029f07e7760a962e388998c9c94390d4a', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ key: 'b388ce322243a5f47831d0ef1a65b332c191045b', id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { key: 'd5ba38e05534eb5ea281cc81a4ad5686b1a4f69b', name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { key: '4a23ae6b4562a685f77f800ff6aca3e5c5e8226e', space: "x-small", layout: 'horizontal' }, h("bal-content", { key: 'a2fb5cf35391ca37fe328534a29cad6e41a7f8fb', space: "none" }, h("bal-label", { key: 'b3f633a9fe0ea22a71c05982af9dabc366c72495', htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { key: 'badf00b587d14525f4cea6ceda85c7f67b1b216e', part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { key: '375942fc35e764ef3d91d62a03d08c16165c595b', onSlotchange: this.onSlottedItemsChange }))))), h("div", { key: 'b3a0cf381958ad671555306484ca791e93cfe21e', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
     }
     static get is() { return "bal-segment-item"; }
     static get originalStyleUrls() {

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

@@ -309,7 +309,7 @@ export class Segment {
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: 'e28612fc58901cc642d00f702e7638eca4611e68', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '6c720184db8d50c4ba2cb386c406ea131f6f49c6', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: '8994703f0fda236656407691599b01ab1034222b', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: 'e5c55ac6fd670064f3a45ebaee7112268222cdbc', onSlotchange: this.onSlottedItemsChange })));
     }
     static get is() { return "bal-segment"; }
     static get originalStyleUrls() {

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

@@ -12,7 +12,7 @@ export class SelectOption {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '5d3ad22cd5a4a3f681cb90abf1a82e6b8c782a6b', style: { display: 'none' } }, h("slot", { key: 'f9e214692daeafb1670a73f39311fe2d48232620' })));
+        return (h(Host, { key: 'e576fb51e73b23cbfd86911da7b8ddbd337e72a3', style: { display: 'none' } }, h("slot", { key: 'e6ad28fa2cd69ebf97968985267fd363097f88f3' })));
     }
     static get is() { return "bal-select-option"; }
     static get properties() {

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

@@ -10,6 +10,7 @@ import { stopEventBubbling } from "../../utils/form-input";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ariaBooleanToString } from "../../utils/aria";
 const isHuman = true;
 const isNotHuman = false;
 export class Select {
@@ -680,7 +681,7 @@ export class Select {
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: '79401261d2710c20cf092eb9fbb7fb9df4a8b58c', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: 'c6481406d8e40c5296c74e82f30e2b60f7c87fa6', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -694,19 +695,19 @@ export class Select {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '6f73b54fd82f27f6aec3afde83fa9b6df2b2783b', role: "listbox", onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: 'acac08e4b77913e59024df94a888d06a9f839084', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '0bb66730c86b7730411c2ccee9fa1a1903b51df5', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '65ad688a0ea4c704e25eedf57cdde2f0b7042839', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '5c92ecce5f080f9219838cefa496b8f86e6a5e1e', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '3f6db3bd9f0eedd12377ee047d290dd80a6c627c', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '0f179889bd1628ce9950100af0db3ea47cff8637', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '8df78a13e010e9a062db36bcb6bf2d717b247278', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '40da14dc1dc50f54d391c11cb0fa839114da9775', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '33d5d47355fb00fd4b9985e0d8f617dc4f8619f1', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (h(Chip, { value: value }))), h("input", { key: 'f3fdeee4cd978843101e662b9654ff48c379a706', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (h(Chip, { value: value }))), h("input", { key: 'fed34e59c1ecbbd9d13086c27066272978c2e703', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '858a34fd9deb5e3f681f44587d4b1092f0107386', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: '68704bd85dcafa9a68e9739796ad05c3bf75f5dd', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: '5df467dccba15602535dfacaae0ea7b410cf3d6d', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'eb955efeaadf8a45d70e615c52026247fd9fb60a', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }

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

@@ -42,11 +42,11 @@ export class Shape {
     render() {
         const block = BEM.block('shape');
         const shapes = [
-            h("g", { key: 'de1b671a72c880799b60fef1308672abe446166c', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: 'a983eb96f493bfd2cf02719297d3bd8d2440eb05', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: 'b4062c1822d1081f1a3d52904a3513ba5f2c4341', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
-            h("g", { key: '2fe7fb095c5365dd22532bf9c4d604e3c88b1c19', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: '20b2c62739c1acb495e77e445250a12a9209f4b8', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: '0c3b6854fb232675f36f965066003dfe90289ee0', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
-            h("g", { key: 'b61433ddfc2fccd997543008b16dbc1ab311367e', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '203e43411756d49dd668d636efd98fb1aeb27025', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: 'a8ebeeddcd4503ea96f0ccfff30f6ca36825d708', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
+            h("g", { key: 'd5eb6f2e514c14102db76e006ac910e10a292a2e', id: "e8353d3b-35a2-4e20-9245-0eceed641ae5" }, h("g", { key: '97523387b4f6285ce5703706cfbdf91758fc2235', id: "af87362a-72b2-42cf-8efe-c9917dc1f7f6" }, h("path", { key: '1801ccf2b5a9198f83860a4d5eba5b2a20b75751', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M191.6,0c2.2,0,3.4,0,4.2,0.4c0.7,0.4,1.4,1,1.7,1.7c0.4,0.9,0.4,2,0.4,4.2V66h-66V0H191.6z M0,125.6V66h66\n            v66H6.4H0 M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z" }))),
+            h("g", { key: 'b3b9f265a395632430bead0a05cd93e69007c001', id: "b949d602-8478-437e-a171-ad3f26649cb4" }, h("g", { key: '7fc20715e27f56ecf346cdf9b2cb2fbca51643f3', id: "ae3574e0-2065-4681-8937-4318b8656147" }, h("path", { key: '982cdba6eae902df4fdbc4799c28f8d8ca670429', class: "b9f37b2d-094d-4f18-b17c-7c5acf36f9a6", d: "M132,66v66H66V66ZM191.6,0c2.24,0,3.36,0,4.22.44a4,4,0,0,1,1.74,1.74c.44.86.44,2,.44,4.22V66H132V0ZM66,0V66H0V6.4C0,4.16,0,3,.44,2.18A4,4,0,0,1,2.18.44C3,0,4.16,0,6.4,0Zm0,132v66H6.4c-2.24,0-3.36,0-4.22-.44a4,4,0,0,1-1.74-1.74C0,195,0,193.84,0,191.6V132Zm66,0v66H66V132Zm66,0v59.6c0,2.24,0,3.36-.44,4.22a4,4,0,0,1-1.74,1.74c-.86.44-2,.44-4.22.44H132V132Zm0-66v66H132V66Z" }))),
+            h("g", { key: '386c20e69b6d4bb30c6f7b071059c765d337bbcf', id: "e827a936-cbcd-43b3-971a-aa8f8714fdff" }, h("g", { key: '04334c11d48ec0fa51dea5df6b6b42ce8aefcdde', id: "e540dca8-23ca-45dc-b462-df9071c1317d" }, h("path", { key: '99db2d7bafde38e77b92919ed447bb3eeb93d938', class: "st0", d: "M132,66v66H66V66H132z M132,0v66H66V0H132z M66,0v66H0V6.4C0,4.2,0,3,0.4,2.2c0.4-0.7,1-1.4,1.7-1.7\n            C3,0,4.2,0,6.4,0H66z M66,132v66H6.4c-2.2,0-3.4,0-4.2-0.4c-0.7-0.4-1.4-1-1.7-1.7C0,195,0,193.8,0,191.6V132H66z M132,132v66H66\n            v-66H132z M198,132v59.6c0,2.2,0,3.4-0.4,4.2c-0.4,0.7-1,1.4-1.7,1.7c-0.9,0.4-2,0.4-4.2,0.4H132v-66H198z M198,66v66h-66V66" }))),
         ];
-        return (h(Host, { key: '9910db97943399c0d6c28eeaadd1bfd1e8ad8583', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: '6fc42eae2b805af1178afabc9f0b6a61133b2e2f', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
+        return (h(Host, { key: '93f3b67cfef8a01eac7ccd0334a4315ee0c67b25', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: 'b90bc3346d6000d65aeeb8a7749d8d777886e9cf', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
     }
     static get is() { return "bal-shape"; }
     static get originalStyleUrls() {