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

package/dist/esm/bal-dropdown.entry.js

@@ -3,17 +3,17 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { s as stopEventBubbling } from './form-input-3856ed2a.js';
-import { i as inheritAttributes } from './attributes-4fa7040f.js';
-import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { i as inheritAttributes } from './attributes-a3e70948.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
 import { n as rIC, b as waitAfterFramePaint, l as addEventListener, r as removeEventListener, d as waitAfterIdleCallback } from './helpers-ae0db1dd.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { a as areArraysEqual } from './array-4c09dfe3.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
-import { b as balFloatingUi } from './floating-ui-90bc6e58.js';
+import { b as balFloatingUi } from './floating-ui-d05a7ad6.js';
 import { D as DropdownOptionUtil } from './option-367a5341.js';
 import { i as isArrowDownKey, a as isArrowUpKey, b as isEnterKey, c as isEscapeKey, d as isSpaceKey } from './keyboard.helpers-159e517d.js';
-import { a as ariaBooleanToString } from './aria-d5877698.js';
+import { a as ariaBooleanToString } from './aria-ea150568.js';
 import { d as defaultConfig } from './config.default-75703209.js';
 import { L as ListenToConfig } from './config.decorator-09912ddf.js';
 import './config.utils-6c4a6204.js';
@@ -393,9 +393,9 @@ const DropdownValue = ({ inlineLabel, filled, chips, placeholder, choices, inval
     }
 };
 
-const DropdownInput = ({ name, inputId, httpFormSubmit, ariaForm, rawValue, autocomplete, required, disabled, readonly, placeholder, expanded, invalid, language, inputLabel, inheritedAttributes, refInputEl, onChange, onFocus, onBlur, onKeyDown, }) => {
+const DropdownInput = ({ inputId, httpFormSubmit, ariaForm, rawValue, autocomplete, required, disabled, readonly, placeholder, expanded, invalid, language, inputLabel, inheritedAttributes, refInputEl, onChange, onFocus, onBlur, onKeyDown, }) => {
     const block = BEM.block('dropdown');
-    const Input = () => (h("input", Object.assign({ id: ariaForm.controlId || `${inputId}-ctrl`, class: Object.assign({}, block.element('root').element('input').class()), type: "text", size: 1, inputmode: "none", tabindex: "0", name: name, autoComplete: autocomplete, value: rawValue.join(','), required: required, disabled: disabled, readonly: readonly, placeholder: placeholder, title: expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-label": expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-owns": `${inputId}-menu`, "aria-invalid": ariaBooleanToString(invalid), "aria-disabled": ariaBooleanToString(disabled || readonly), "aria-labelledby": ariaForm.labelId, "aria-describedby": ariaForm.messageId, "aria-haspopup": 'listbox', "data-native": true, "data-label": inputLabel, "data-value": rawValue.join(','), ref: el => refInputEl(el), onChange: ev => onChange(ev), onFocus: ev => onFocus(ev), onBlur: ev => onBlur(ev), onKeyDown: ev => onKeyDown(ev) }, inheritedAttributes)));
+    const Input = () => (h("input", Object.assign({ id: ariaForm.controlId || `${inputId}-ctrl`, class: Object.assign({}, block.element('root').element('input').class()), type: "text", size: 1, inputmode: "none", tabindex: "0", autoComplete: autocomplete, value: rawValue.join(','), required: required, disabled: disabled, readonly: readonly, placeholder: placeholder, title: expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-label": expanded ? i18nBalDropdown[language].close : i18nBalDropdown[language].open, "aria-owns": `${inputId}-menu`, "aria-invalid": ariaBooleanToString(invalid), "aria-disabled": ariaBooleanToString(disabled || readonly), "aria-labelledby": ariaForm.labelId, "aria-describedby": ariaForm.messageId, "aria-haspopup": 'listbox', "data-native": true, "data-label": inputLabel, "data-value": rawValue.join(','), ref: el => refInputEl(el), onChange: ev => onChange(ev), onFocus: ev => onFocus(ev), onBlur: ev => onBlur(ev), onKeyDown: ev => onKeyDown(ev) }, inheritedAttributes)));
     if (httpFormSubmit) {
         return h(Input, null);
     }
@@ -685,13 +685,13 @@ const Dropdown = class {
         const hasTheme = this.theme !== '';
         const theme = `theme-${this.theme}`;
         const focused = this.theme === 'purple' ? this.hasFocus && this.isKeyboardMode : this.hasFocus;
-        return (h(Host, { key: '76447733642f7e5cfafaee1d23b7db1d458fea13', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: 'f15d237a0aa27c7bc6d578b107547c2ba7b36ad3', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
+        return (h(Host, { key: '6fe4a66e63dba61d168848cc3b8d5ad3206596ba', class: Object.assign({}, block.class()), tabindex: "-1", id: `${this.inputId}` }, h("div", { key: '5bf5613a1d65889935a9c2b40601e57240372be2', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').class()), block.element('root').modifier('focused').class(focused)), block.element('root').modifier('invalid').class(this.invalid)), block.element('root').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').modifier('autofill').class(this.isAutoFilled)), block.element('root').modifier(size).class(hasSize)), block.element('root').modifier(theme).class(hasTheme)), block
                 .element('root')
                 .modifier(theme + '-filled')
                 .class(isFilled && hasTheme)), block
                 .element('root')
                 .modifier(theme + '-expanded')
-                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: '8cd1f403f473212d52bb1d992e506e0db483ad11', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '5e58e0734c37d2827515449e5fe61f3fe489ad01', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: 'f289ba14f7120bfad09dfdfc2f034bdacaf52d74', name: this.name, inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: 'c32cb85f707db22ed5774d0a6bbd904bc63ea69c', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'b263377bf16e268d3f555242e15325ba36d2b91f', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: 'cdfb11f2ef449f82ddf32f944cea8faea9027372', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '0a281eed8eea22ec5a345d8a1db295ad85b874ed' }))));
+                .class(this.isExpanded && hasTheme)), "data-test": "bal-dropdown-trigger", onClick: ev => this.eventsUtil.handleClick(ev) }, h("span", { key: 'db5194514ee8922cd756b51d3dcb68188f78a450', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('root').element('content').class()), block.element('root').element('content').modifier('disabled').class(this.valueUtil.isDisabled())), block.element('root').element('content').modifier('placeholder').class(!this.valueUtil.isFilled())), block.element('root').element('content').modifier(size).class(hasSize)) }, h(DropdownValue, { key: '8a7eb020f59052fcdf991dd613887b9258697c25', filled: this.valueUtil.isFilled(), inlineLabel: this.inlineLabel, chips: this.chips, placeholder: this.placeholder, choices: this.choices, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, onRemoveChip: option => this.valueUtil.removeOption(option) })), h(DropdownInput, { key: 'b02e555f1a0a2ce147ac2a7ef3db8d9f9dac6b69', inputId: this.inputId, httpFormSubmit: this.httpFormSubmit, ariaForm: this.ariaForm, rawValue: this.rawValue, autocomplete: this.autocomplete, required: this.required, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, expanded: this.isExpanded, invalid: this.invalid, language: this.language, inputLabel: this.inputLabel, inheritedAttributes: this.inheritedAttributes, refInputEl: el => (this.nativeEl = el), onChange: ev => this.handleAutoFill(ev), onFocus: ev => this.eventsUtil.handleFocus(ev), onBlur: ev => this.eventsUtil.handleBlur(ev), onKeyDown: ev => this.handleKeyDown(ev) }), h(DropdownNativeSelect, { key: '6283de0a1f10181bef9d514577d2a1fc7ca34b2b', name: this.name, httpFormSubmit: this.httpFormSubmit, multiple: this.multiple, required: this.required, disabled: this.valueUtil.isDisabled(), rawValue: this.rawValue, refSelectEl: el => (this.selectEl = el) }), h(DropdownIcon, { key: 'c8f75c6e7c42a9cb5850c6f93573adc5f4bf08fc', icon: this.icon, size: this.size, theme: this.theme, language: this.language, loading: this.loading, clearable: this.clearable, invalid: this.invalid, expanded: this.isExpanded, filled: isFilled, disabled: this.valueUtil.isDisabled() })), h(DropdownOptionList, { key: 'a6f50cf28c3019d3f33abb9ac3b10f81a763349a', inputId: this.inputId, block: this.inputId, filter: this.filter, required: this.required, isExpanded: this.isExpanded, isDisabled: this.valueUtil.isDisabled(), hasPropOptions: this.optionUtil.hasPropOptions(), multiple: this.multiple, contentHeight: this.contentHeight, rawOptions: this.rawOptions, refPanelEl: el => (this.panelEl = el), refListEl: el => (this.listEl = el) }, h("slot", { key: '157a4cbaaae69efae17de54a543a56be62e3e949' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bal-field_5.entry.js

@@ -1,14 +1,14 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { h as deepReady, b as waitAfterFramePaint } from './helpers-ae0db1dd.js';
-import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
 import { L as ListenToMutation } from './mutation.decorator-f4254690.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import './browser-a8073d92.js';
 import './config.utils-6c4a6204.js';
 import './listener-04842ae9.js';
 
-const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-control{padding-bottom:1.375rem}.bal-field-control+.bal-field-message{margin-top:-1.5rem !important}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";
+const balFieldCss = ":root{--bal-field-label-horizontal-width:33.3333%;--bal-field-label-column-gap:.5rem}.bal-field,.bal-field-label,.bal-field-control,.bal-field-message,.bal-field-hint{display:block;position:relative;font-family:var(--bal-font-family-text)}.bal-field-label{display:inline}.bal-field-label~.bal-field-control{margin-top:.25rem}.bal-field-hint{display:inline-block;margin-left:.25rem;height:1rem;width:1rem}.bal-field-hint__hint{position:absolute;top:2px;left:0}.bal-field-message{line-height:var(--bal-line-height-normal)}.bal-field-hidden{display:none !important;visibility:hidden !important}.bal-field-control{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;gap:.5rem}.bal-field-control .bal-input{-ms-flex:1;flex:1}@media screen and (max-width: 768px){.bal-field-control--expanded-on-mobile{-ms-flex-direction:column;flex-direction:column}.bal-field-control--expanded-on-mobile .bal-button,.bal-field-control--expanded-on-mobile .bal-button .button{width:100%}}.bal-field-message{margin-top:0 !important}.bal-field-control+.bal-field-message{min-height:1.375rem;line-height:1.375rem}.bal-field-control:not(:has(+.bal-field-message)){padding-bottom:1.375rem}.bal-field--horizontal{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-column-gap:var(--bal-field-label-column-gap);-moz-column-gap:var(--bal-field-label-column-gap);column-gap:var(--bal-field-label-column-gap);-ms-flex-align:center;align-items:center}.bal-field--horizontal .bal-field-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-width:var(--bal-field-label-horizontal-width);max-width:var(--bal-field-label-horizontal-width);-ms-flex-pack:end;justify-content:flex-end;text-align:right;margin-bottom:0}.bal-field--horizontal .bal-field-control{-ms-flex:1;flex:1;padding-bottom:0;-ms-flex-item-align:end;align-self:flex-end}.bal-field--horizontal .bal-field-message{-ms-flex-preferred-size:100%;flex-basis:100%;margin-top:0 !important;margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap))}.bal-field--horizontal .bal-field-hint{margin-left:0}.bal-field--horizontal .bal-field-hint .bal-hint{top:0}.bal-field--horizontal .bal-field-hint~.bal-field-message{margin-left:calc(var(--bal-field-label-horizontal-width) + var(--bal-field-label-column-gap)*2 + 1.125rem)}.bal-field--horizontal .bal-field-label~.bal-field-control{margin-top:0}";
 const BalFieldStyle0 = balFieldCss;
 
 const Field = class {
@@ -132,7 +132,7 @@ const Field = class {
             'bal-field-control bal-textarea',
             'bal-field-control bal-file-upload',
         ]);
-        const ariaForm = defaultBalAriaForm;
+        const ariaForm = Object.assign({}, defaultBalAriaForm);
         if (label) {
             ariaForm.labelId = `${this.fieldId}-lbl`;
         }
@@ -176,12 +176,12 @@ const Field = class {
         components.forEach(c => callback(c));
     }
     render() {
-        return (h(Host, { key: '61d8be020fb71526ad0175d75880eb155cb15623', id: this.fieldId, class: {
+        return (h(Host, { key: 'aa44641fd9ed39d382713f6ffc8946e8eec097fa', id: this.fieldId, class: {
                 'bal-field': true,
                 'field': true,
                 'bal-field--invalid': this.invalid === true,
                 'bal-field--horizontal': this.horizontal === true,
-            } }, h("slot", { key: 'b174f1bdd65a1fb7b63b833c3bf8532e1733d708' }), h("span", { key: '570886a9234a9e3a2ef941a419d35d5451d0227a', class: "bal-field-hidden" })));
+            } }, h("slot", { key: '8a7749f1adfe8f743fc026502632c44bde1c5b94' }), h("span", { key: '0cfa29c5cc6656a1ecaeeb5d3d7abe9eb2573cba', class: "bal-field-hidden" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -223,14 +223,14 @@ const FieldControl = class {
         return '';
     }
     render() {
-        return (h(Host, { key: 'bcb91952d67d6c7d2677845d6f9167ed5fe1bcff', class: {
+        return (h(Host, { key: '9e2bbf7acff922b1ea40c55bd13e31f60d2678fa', class: {
                 'bal-field-control': true,
                 'control': true,
                 'has-icons-left': !!this.iconLeft,
                 'has-icons-right': !!this.iconRight,
                 'is-loading': this.loading,
                 'bal-field-control--expanded-on-mobile': !!this.expandedOnMobile,
-            } }, h("slot", { key: '0d4aca610ab427ed32a31542ae81223b4d656dfa' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
+            } }, h("slot", { key: '96e625c620b1af1944a0c7b23d3141a243dcb2d3' }), this.buildIconLeftTemplate, this.buildIconRightTemplate));
     }
 };
 
@@ -243,7 +243,7 @@ const FieldHint = class {
     }
     render() {
         const block = BEM.block('field-hint');
-        return (h(Host, { key: '9c47fdbb402b9b7f4012d2f2160fe99356f58b99', class: Object.assign({}, block.class()) }, h("bal-hint", { key: '8cea3277913207cca651bcad4cb22fa9b8fad2f4', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject ? h("bal-hint-title", null, this.subject) : '', h("bal-hint-text", { key: '1523a364269414bb277bba0d0bcc1c8ba946a2cd' }, h("slot", { key: '952fa5ac1cb907233cc9ea4c179c859991ed7c4b' })))));
+        return (h(Host, { key: '0a11434dedd6e84fdbca1b7f906d1d392553d1a1', class: Object.assign({}, block.class()) }, h("bal-hint", { key: 'fa224c5994b3a3849d4c7f234f63f14b266fd0a4', class: Object.assign({}, block.element('hint').class()), "data-testid": "bal-field-hint", closeLabel: this.closeLabel, small: this.small }, this.subject ? h("bal-hint-title", null, this.subject) : '', h("bal-hint-text", { key: '1a7547df3e148fd0743b05e696ca8b0663b55d1c' }, h("slot", { key: '941d0903337721060c9ba0327809d9632e22d0f9' })))));
     }
 };
 
@@ -281,7 +281,7 @@ const FieldLabel = class {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: 'b1ed98ad14b6cb6e3e4642a04d71d93fe6c97e83', class: "bal-field-label" }, h("bal-label", { key: 'fdec2d6fd449841320b4646e925c09c05c39739c', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: '04b0fb018f316044503e8ffa540441c0e1624807' }))));
+        return (h(Host, { key: 'de7f2b5bece308123522348a754af790b2fc2bbe', class: "bal-field-label" }, h("bal-label", { key: '39d721c1e8f3fb66022dca9c4c280ff2eec412da', multiline: true, size: this.size, htmlFor: this.htmlFor, required: this.required, valid: this.valid, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, weight: this.weight }, h("slot", { key: '899565faee00c89bf8e3b3e95ef2b075f2dd8e2f' }))));
     }
     get element() { return getElement(this); }
 };
@@ -303,14 +303,14 @@ const FieldMessage = class {
         this.ariaForm = Object.assign({}, ariaForm);
     }
     render() {
-        return (h(Host, { key: '962c48c52992d5689c6de2ce866863bdd8436a68', id: this.ariaForm.messageId, class: {
+        return (h(Host, { key: 'db4171855058eebb241a92b5cb72ed489fd4f60b', id: this.ariaForm.messageId, class: {
                 'bal-field-message': true,
                 'help': true,
                 'is-danger': this.invalid,
                 'is-success': this.valid,
                 'is-disabled': this.disabled || this.readonly,
                 [`is-${this.color}`]: !!this.color,
-            } }, h("slot", { key: 'e82266f5abc43308bf05401fd24f581e2138c3c4' })));
+            } }, h("slot", { key: 'b3849d6097fd59745e026bc53fcd96c4b56f6abe' })));
     }
 };
 

package/dist/esm/bal-file-upload.entry.js

@@ -5,7 +5,8 @@ import { s as stopEventBubbling, i as inputHandleHostClick, a as inputHandleFocu
 import { L as Logger } from './log-dfd1c19f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type-2a70f4ec.js';
-import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
+import { a as ariaBooleanToString } from './aria-ea150568.js';
 import './index-82aff103.js';
 import './index-95ee0c4b.js';
 import './_commonjsHelpers-1c8beb5f.js';
@@ -334,16 +335,16 @@ const FileUpload = class {
      */
     render() {
         const id = this.ariaForm.controlId || this.fileUploadId;
-        return (h(Host, { key: 'e1924e378256a4e5f9ef14cb5dec531d1b71ed5b', onClick: this.onHostClick, "aria-disabled": this.disabled ? 'true' : null, class: {
+        return (h(Host, { key: '44488a9949dc4e6d3d470271dfff65ceb69de411', onClick: this.onHostClick, "aria-disabled": ariaBooleanToString(this.disabled), class: {
                 'bal-file-upload': true,
-            } }, h("div", { key: '5eea726388bf34b30d52ef057be0d02ce55a4a32', class: {
+            } }, h("div", { key: 'e64dd001851e3810155a9e14cbd74eb0102a93c7', class: {
                 'file': true,
                 'is-disabled': this.disabled || this.readonly || this.loading,
                 'is-danger': this.invalid,
-            } }, h("label", { key: '3db76968c7413f788b37eba41df11f398517b2c4', htmlFor: id, ref: el => (this.labelEl = el), class: {
+            } }, h("label", { key: '76ba8e1bcb8837f6b07e17de62022df7cc1c1375', htmlFor: id, ref: el => (this.labelEl = el), class: {
                 'file-label': true,
                 'is-disabled': this.disabled || this.loading || this.readonly,
-            } }, h("input", { key: '5e1c43e583d684ca778836c0a209c7ad87e9fa7d', class: "file-input", type: "file", id: id, "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, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
+            } }, h("input", { key: '9c60d1089a18516386813e8a6704e63883045a6a', class: "file-input", type: "file", id: id, "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, multiple: this.multiple, disabled: this.disabled || this.loading || this.readonly, readonly: this.readonly, required: this.required, accept: this.accept, onClick: this.onInputClick, onChange: this.onInputChange, onFocus: this.onInputFocus, onBlur: this.onInputBlur, ref: el => (this.nativeInput = el), "data-testid": "bal-file-upload-input" }), this.loading ? (h("span", { class: "file-cta" }, h("bal-spinner", null))) : (h("span", { class: "file-cta" }, h("span", { class: "file-icon" }, h("bal-icon", { name: "upload", size: "medium", color: this.disabled || this.loading || this.readonly ? 'grey-light' : this.invalid ? 'danger' : 'blue' })), h("span", { class: "file-label", "data-testid": "bal-file-upload-label" }, this.label))))), this.hasFileList && this.files.length > 0 ? (h(FileListComponent, { files: this.files, disabled: this.disabled || this.readonly || this.loading, subTitle: this.subTitle, onRemoveFile: this.onRemoveFile })) : ('')));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bal-footer.entry.js

@@ -232,7 +232,7 @@ const i18nBalFooter = {
     },
 };
 
-const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background-active:var(--bal-color-light-blue-3)}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__list{min-width:105%;right:0 !important;left:auto !important}.bal-footer__inner__wrapper__header-container__language bal-icon,.bal-footer__inner__wrapper__header-container__language .input{cursor:pointer;min-width:auto !important}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear{position:absolute;left:0}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language .bal-dropdown__rear circle{fill:var(--bal-color-white)}.bal-footer__inner__wrapper__header-container__language .bal-dropdown__native{background:rgba(0,0,0,0);color:var(--bal-color-white);border:none;font-weight:var(--bal-font-weight-bold);cursor:pointer;padding-left:1.5rem}.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language:hover .input,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__native,.bal-footer__inner__wrapper__header-container__language:hover .bal-dropdown__root__content{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear svg,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear g,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear path,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__rear circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language:active .input,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__native,.bal-footer__inner__wrapper__header-container__language:active .bal-dropdown__root__content{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group{background:rgba(0,0,0,0);border:none;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group:hover{background:rgba(0,0,0,0) !important}.bal-footer__inner__wrapper__header-container__language__wrapper .bal-input-group bal-dropdown{min-width:5rem}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
+const balFooterCss = ":root{--bal-footer-font-family:var(--bal-font-family-text);--bal-footer-background:var(--bal-color-primary);--bal-footer-color:var(--bal-color-text-white);--bal-footer-language-color-hover:var(--bal-color-light-blue-2);--bal-footer-language-background-hover:var(--bal-color-light-blue-2);--bal-footer-language-color-active:var(--bal-color-light-blue-3);--bal-footer-language-background-active:var(--bal-color-light-blue-3)}.bal-footer{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;position:static;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.bal-footer__slot{color:var(--bal-footer-color)}.bal-footer__inner{position:relative;font-family:var(--bal-footer-font-family);background-color:var(--bal-footer-background);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}@media screen and (min-width: 1024px){.bal-footer__inner{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}}.bal-footer__inner__wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--bal-space-large)}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper{gap:var(--bal-space-medium-tablet)}}.bal-footer__inner__wrapper__header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{display:-ms-flexbox;display:flex;gap:1rem;cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select{padding-left:2px;padding-right:2px;background:rgba(0,0,0,0);-webkit-appearance:none;border:none;color:var(--bal-color-white);font-weight:var(--bal-font-weight-bold);font-family:var(--bal-font-family-title);cursor:pointer}.bal-footer__inner__wrapper__header-container__language__wrapper select option{background:var(--bal-color-white) !important;color:var(--bal-color-primary) !important;font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important}.bal-footer__inner__wrapper__header-container__language__wrapper:hover svg,.bal-footer__inner__wrapper__header-container__language__wrapper:hover g,.bal-footer__inner__wrapper__header-container__language__wrapper:hover path,.bal-footer__inner__wrapper__header-container__language__wrapper:hover circle{fill:var(--bal-footer-language-background-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:hover select{color:var(--bal-footer-language-color-hover)}.bal-footer__inner__wrapper__header-container__language__wrapper:active svg,.bal-footer__inner__wrapper__header-container__language__wrapper:active g,.bal-footer__inner__wrapper__header-container__language__wrapper:active path,.bal-footer__inner__wrapper__header-container__language__wrapper:active circle{fill:var(--bal-footer-language-background-active)}.bal-footer__inner__wrapper__header-container__language__wrapper:active select{color:var(--bal-footer-language-color-active)}.bal-footer__inner__wrapper__header-container__logo{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-footer__inner__wrapper__links-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{-ms-flex-direction:column;flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{-ms-flex-direction:row;flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop)}.bal-footer__inner__wrapper__links-container__legal-links a{font-size:var(--bal-text-size-small) !important}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__legal-links{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{-ms-flex-align:center;align-items:center;gap:var(--bal-space-large-desktop);padding:var(--bal-space-normal) var(--bal-space-normal) var(--bal-space-normal) 0}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large)}}@media screen and (max-width: 768px){.bal-footer__inner__wrapper__links-container__social-media-links{padding-bottom:var(--bal-space-large);-ms-flex-pack:center;justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}";
 const BalFooterStyle0 = balFooterCss;
 
 const Footer = class {
@@ -320,14 +320,14 @@ const Footer = class {
         const elWrapper = elLanguage.element('wrapper');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { key: 'd9fcf2b0c58a8c8b2ec81256a94a5555281f275e', class: Object.assign({}, block.class()) }, h("footer", { key: '24691e174da80b7b0837d6ef7093abf1e0671207', class: Object.assign({}, elInner.class()) }, h("div", { key: '80a0395ec6f83fed9b67687f9f0169550e1e8a6e', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '1d5656c103792e725267aee630f5c89717cddcd4', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '91d7235ce53fb56712375194709d70d32a40aad3', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: '9f20c92b2fca4660daec9d5faa74303e4027c81e', color: "white" })), h("div", { key: 'e395ba338e3dcd7fffd8f07d6ba3ab0e26d5cb85', class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: '63b0d68bf5813a5758202dcb1d154599dc808c58', class: Object.assign({}, block.class()) }, h("footer", { key: '409eb8e6cfc4cf5a8f5b504bfd914d686458ca2d', class: Object.assign({}, elInner.class()) }, h("div", { key: 'a987f76c6aee6a7d8d376867ac58bd972ba80e05', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '3028b99426dd4019f39cdbf27ff7359c32686d79', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '558ce31d189e1cd3f942146093ce0faf994669c9', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: 'fc1c918ef12867f2e65f4e01c2266dfa524ad5c3', color: "white" })), h("div", { key: 'ec418eca7def7286a625f4ed7d40194865ca795d', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { key: 'dfc805fd51ea9b5625de046a94129df428e7d2d0', class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", { key: '0d203884c1f437669690a70df96fc703427f751b' }, h("bal-icon", { key: '9551ba6bc1fc1b36d67542fe40d841dee78d3daa', class: 'bal-dropdown__rear', name: "web", color: "white" }), h("select", { key: '721a9a291639d6d4357f179b302870cf6f2852af', id: "bubu", class: 'bal-dropdown__native', onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name)))))))), h("div", { key: '26575b69cba20d83a8124bca1697b9cc7ee38246', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '48e62b90d62825693e73b522ed454da7846457d2' })), h("div", { key: '8fdf21a11da23eb1489c95d21f6726ab53136ffc', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '591b9f51cb1ff3d4dee431daaca23ad38bcbac7e', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { key: '9ed1373bd05ab2a1eb56654c885895a3247fbd28', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '6353ac60b7ff51d29b19529fad5558133610dfec', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: 'b31f1ad5708693ec6d824075234b649ed0a0b670', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '53604c5b9b022f3cc93cc25e585f8573fdb609a4', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '768096640cb46e55904b92d8bf71bc8e0f1d14a9' })), h("div", { key: 'f376f065dfd717f806f648dca91912f88b23dbf7', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '382c7fd1cbeb51620790523a4013bbca5e1b8442', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '6496b1f14bedc754c4ba873c6ead58e1476c76ff', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '2d9bc74994376502bf3adbe1de443665b4c69fb3', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));

package/dist/esm/bal-form-col_2.entry.js

@@ -7,7 +7,7 @@ const FormCol = class {
         this.size = 'full';
     }
     render() {
-        return (h(Host, { key: 'dcfd707ec14153525343b28de33215360552d67d', class: {
+        return (h(Host, { key: '270033f8e0c603088c28bf464885d6b41a21f4a1', class: {
                 [`${this.colClass}`]: true,
                 'py-none': true,
                 'touch:is-12': true,
@@ -17,12 +17,12 @@ const FormCol = class {
                 'is-8': this.size === 'two-thirds',
                 'is-3': this.size === 'one-quarter',
                 'is-9': this.size === 'three-quarters',
-            } }, h("slot", { key: 'eb9686534cb834601ec756657e8576dc0aaac9b4' })));
+            } }, h("slot", { key: 'd3081c8946b7fa00933bf5bbcffdf2b9539a4951' })));
     }
     get el() { return getElement(this); }
 };
 
-const balFormGridCss = ".bal-form-grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 1024px){.bal-form-grid{-ms-flex-direction:row;flex-direction:row}}.bal-form-grid.columns{margin-top:0 !important;margin-bottom:0 !important}";
+const balFormGridCss = ".bal-form-grid{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;row-gap:.25rem}@media screen and (min-width: 1024px){.bal-form-grid{-ms-flex-direction:row;flex-direction:row}}.bal-form-grid.columns{margin-top:0 !important;margin-bottom:0 !important}";
 const BalFormGridStyle0 = balFormGridCss;
 
 const FormGrid = class {
@@ -30,7 +30,7 @@ const FormGrid = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '35f3c7ca48f2c64d89c90909bca5894d6f578e64', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: 'dde03d5928d665ada0f41230ff6c01e8f20c1dd1' })));
+        return (h(Host, { key: 'bac9d83dd51029045d7cebbe5995eca60961ec11', class: `bal-form-grid grid is-multiline my-none py-none` }, h("slot", { key: '0c7dad588bbe583896e624d6739aef90a0cc8ca7' })));
     }
 };
 FormGrid.style = BalFormGridStyle0;

package/dist/esm/bal-form.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { s as scrollToFirstInvalidField } from './form-fb8dd9f5.js';
+import { s as scrollToFirstInvalidField } from './form-841232ff.js';
 import { d as waitAfterIdleCallback, b as waitAfterFramePaint } from './helpers-ae0db1dd.js';
 import './browser-a8073d92.js';
 import './config.utils-6c4a6204.js';
@@ -30,7 +30,7 @@ const Form = class {
                 novalidate: this.novalidate,
             };
         }
-        return (h(Host, { key: '6e18df8ae00274664abd91bce9318de7c9fbd1e3' }, h(NativeEl, Object.assign({ key: '48bee97b1a0e11629d70a562ff7020cb753a258a' }, attrs, { class: this.formClass }), h("slot", { key: '8dae2c5837fead69d624ae443934bb7fa6f7dfe8' }))));
+        return (h(Host, { key: '617338050bf82da77afdbf350ea10f1c160cba23' }, h(NativeEl, Object.assign({ key: 'ce9e2ab2ba0a96a2c1c9c7910cf29bd571689afd' }, attrs, { class: this.formClass }), h("slot", { key: 'ace60020692031d38ae2557ad4793dcb36cac80c' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-heading_2.entry.js

@@ -142,7 +142,7 @@ const Heading = class {
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (h(Host, { key: '8086cde36ed3f4ca517135aad6210dccc9e59039', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: '7ed342b861b33bdcb93daec513e593c531e891b5', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: 'b189e37f7d994616493e86512f6748c85d00ba18' }))));
+        return (h(Host, { key: '7194da832757e0b23c771c17921f29e7ab7eb69a', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== undefined)), block.modifier(`level-${this.level}`).class()) }, h(Heading, { key: 'e1f9ef2b3a65bbc847d782ac11f298c750844963', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemTextEl.class()), bemTextEl.modifier('no-wrap').class(this.noWrap)), bemTextEl.modifier('subtitle').class(this.subtitle)), bemTextEl.modifier('shadow').class(this.shadow)), bemTextEl.modifier(`color-${fontColor}`).class()), bemTextEl.modifier(`size-${this.autoFontSize}`).class()), ref: (headingEl) => (this.headingEl = headingEl), "data-testid": "bal-heading" }, h("slot", { key: '06f3010fcaf199d7c381457fc0f4814a0a452f3f' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -207,10 +207,10 @@ const Text = class {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { key: '54ea51b4d2db0793307072aa6dd3bd5969f4e1d0', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'c894a460f369a284910f224b430dd7fc4b9b5123', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '62c52758d1905a1c3682ed5d0b73c259873ec270', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: '7ac46361899e03d0c7a8a773695793b10d13afe4', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '94c09c5d469712da76d9ca0c4a80222c3e76f8a3' }))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '836a19b010718e67c320e06820d3200ceb8fb4c3' }))));
     }
 };
 Text.style = BalTextStyle0;

package/dist/esm/bal-hint_5.entry.js

@@ -3,8 +3,8 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { p as preventDefault } from './utils-9fbab1d3.js';
 import { B as BalScrollHandler } from './scroll-f4b20848.js';
-import { b as balBreakpoints } from './breakpoints.subject-336f3c8b.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-fbc04097.js';
+import { b as balBreakpoints } from './breakpoints.subject-41117dc4.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-43a5539d.js';
 import { L as ListenToConfig } from './config.decorator-09912ddf.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { L as Logger } from './log-dfd1c19f.js';
@@ -13,7 +13,7 @@ import './helpers-ae0db1dd.js';
 import './config.utils-6c4a6204.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-d6bf7bd8.js';
+import './tokens.esm-376de6fe.js';
 
 const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 const BalHintStyle0 = balHintCss;
@@ -160,7 +160,7 @@ const HintText = class {
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (h(Host, { key: '10515eb783c2a6feba7f88cc419e7cfa57295231', class: Object.assign({}, elText.class()) }, h("p", { key: '5a2c68d72075d729f72527e2bf6a7afcfa18c29e', class: Object.assign({}, elTextField.class()) }, h("slot", { key: '8da0f8ccdb88e88206c2b87ccae42d2636fc5586' }))));
+        return (h(Host, { key: 'ad5de0620dc2309a1b88d269245787fb7b466e31', class: Object.assign({}, elText.class()) }, h("p", { key: 'ad41ab7b8b99f4279719d4a0f692e549fa0d6411', class: Object.assign({}, elTextField.class()) }, h("slot", { key: 'ce99f43d0b12bc93f5149c5c0022f53740cbb2da' }))));
     }
 };
 
@@ -173,7 +173,7 @@ const HintTitle = class {
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (h(Host, { key: '8f29a6b15159586bb953a76e446574facc9e258a', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '9edc67f39610f47e3adad25fb931809cef09b908', class: Object.assign({}, elHeading.class()) }, h("span", { key: '30b258cb3ec7ffe8463c7fe5364ab61093611015' }, h("slot", { key: '9b8eb3d881e5393c757362c0e66be4debd4031b4' })))));
+        return (h(Host, { key: 'a4702af6829510708fd8941c74ff5be80d9cfe4f', class: Object.assign({}, elTitle.class()) }, h("h3", { key: '1dd414773a51a467091d940cc05026818c508744', class: Object.assign({}, elHeading.class()) }, h("span", { key: '5763f7dcf1273965151401b18c619dc0d3451616' }, h("slot", { key: '34f65311af348ee241f8e22adad75c6d16d34768' })))));
     }
 };
 
@@ -2015,6 +2015,7 @@ const Popover = class {
      */
     componentWillLoad() {
         this.backdropHeight = this.getBackdropHeight();
+        this.triggerElement.setAttribute('aria-haspopup', 'true');
     }
     componentDidLoad() {
         this.isInMainNav = this.footMobileNav !== null;
@@ -2213,11 +2214,11 @@ const Popover = class {
      */
     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 getElement(this); }
     static get watchers() { return {
@@ -2290,7 +2291,7 @@ const PopoverContent = class {
     }
     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 getElement(this); }
 };

package/dist/esm/bal-icon.entry.js

@@ -912,7 +912,7 @@ function words(string, pattern, guard) {
 
 var lodash_camelcase = camelCase;
 
-const balIconCss = ":root,:host{--bal-icon-color-grey:var(--bal-color-grey-5);--bal-icon-color-grey-light:var(--bal-color-border-grey-dark);--bal-icon-color-grey-dark:var(--bal-color-grey-dark);--bal-icon-color-success:var(--bal-color-success);--bal-icon-color-success-dark:var(--bal-color-success-5);--bal-icon-color-success-darker:var(--bal-color-success-6);--bal-icon-color-warning:var(--bal-color-warning);--bal-icon-color-warning-dark:var(--bal-color-warning-5);--bal-icon-color-warning-darker:var(--bal-color-warning-6);--bal-icon-color-danger:var(--bal-color-danger);--bal-icon-color-danger-dark:var(--bal-color-danger-5);--bal-icon-color-danger-darker:var(--bal-color-danger-6);--bal-icon-color-primary:var(--bal-color-primary);--bal-icon-color-primary-dark:var(--bal-color-primary-6);--bal-icon-color-blue:var(--bal-color-primary);--bal-icon-color-light-blue:var(--bal-color-light-blue-5);--bal-icon-color-primary-light:var(--bal-color-primary-3);--bal-icon-color-white:var(--bal-color-white)}.bal-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:-ms-inline-flexbox;display:inline-flex}.bal-icon__inner{display:block;position:static;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-grey-dark svg,.bal-icon--is-grey-dark g,.bal-icon--is-grey-dark path,.bal-icon--is-grey-dark circle{fill:var(--bal-icon-color-grey-dark)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{-ms-flex-align:center;align-items:center;color:inherit;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;-ms-flex-wrap:nowrap;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:-ms-flexbox;display:flex}";
+const balIconCss = ":root,:host{--bal-icon-color-grey:var(--bal-color-grey-5);--bal-icon-color-grey-light:var(--bal-color-border-grey-dark);--bal-icon-color-grey-dark:var(--bal-color-grey-6);--bal-icon-color-success:var(--bal-color-success);--bal-icon-color-success-dark:var(--bal-color-success-5);--bal-icon-color-success-darker:var(--bal-color-success-6);--bal-icon-color-warning:var(--bal-color-warning);--bal-icon-color-warning-dark:var(--bal-color-warning-5);--bal-icon-color-warning-darker:var(--bal-color-warning-6);--bal-icon-color-danger:var(--bal-color-danger);--bal-icon-color-danger-dark:var(--bal-color-danger-5);--bal-icon-color-danger-darker:var(--bal-color-danger-6);--bal-icon-color-primary:var(--bal-color-primary);--bal-icon-color-primary-dark:var(--bal-color-primary-6);--bal-icon-color-blue:var(--bal-color-primary);--bal-icon-color-light-blue:var(--bal-color-light-blue-5);--bal-icon-color-primary-light:var(--bal-color-primary-3);--bal-icon-color-white:var(--bal-color-white)}.bal-icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{-webkit-filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5));filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:-ms-inline-flexbox;display:inline-flex}.bal-icon__inner{display:block;position:static;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-grey-dark svg,.bal-icon--is-grey-dark g,.bal-icon--is-grey-dark path,.bal-icon--is-grey-dark circle{fill:var(--bal-icon-color-grey-dark)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{-ms-flex-align:center;align-items:center;color:inherit;display:-ms-inline-flexbox;display:inline-flex;vertical-align:top;-ms-flex-wrap:nowrap;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:-ms-flexbox;display:flex}";
 const BalIconStyle0 = balIconCss;
 
 const Icon = class {
@@ -992,6 +992,7 @@ const Icon = class {
             'blue',
             'grey',
             'grey-light',
+            'grey-dark',
             'danger',
             'danger-dark',
             'danger-darker',
@@ -1016,7 +1017,7 @@ const Icon = class {
         const color = this.parseColor();
         const block = BEM.block('icon');
         const svgContent = this.svgContent(this.name);
-        return (h(Host, { key: 'c26ab6c3eef33e3deec76bc20f3db215fd52c423', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { key: '0853056c0b58c51539723539628a834807018007', class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })));
+        return (h(Host, { key: '8a997585e6ac61a483a4d417707bfb38ee4240bb', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('is-inverted').class(this.inverted)), block.modifier('is-inline').class(this.inline)), block.modifier('shadow').class(this.shadow)), block.modifier(`is-${this.size}`).class(!!this.size)), block.modifier(`is-${color}`).class()) }, h("div", { key: '1978890263e8a3fd0a4551ff67f84f16c378989e', class: Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: svgContent })));
     }
 };
 __decorate([

package/dist/esm/bal-input-group.entry.js

@@ -17,7 +17,7 @@ const InputGroup = class {
         const hasDanger = this.invalid;
         const disabledClass = 'is-disabled';
         const hasDisabled = this.disabled || this.readonly;
-        return (h(Host, { key: '0ee1d4bf529641edcf403b31ae080d90151736af', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: 'c73c35476a90aab9e77835b1028e4fa26e3946af' })));
+        return (h(Host, { key: '854b61f3f42979caa696eccdb3d4587533ff82f4', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: 'e3db33ef1382a20e493614e8452fa598a00d464e' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bal-input-slider.entry.js

@@ -3,7 +3,8 @@ import { l as lodash_isnil } from './index-82aff103.js';
 import { p as debounceEvent } from './helpers-ae0db1dd.js';
 import { s as stopEventBubbling } from './form-input-3856ed2a.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
+import { a as ariaBooleanToString } from './aria-ea150568.js';
 import './browser-a8073d92.js';
 import './config.utils-6c4a6204.js';
 
@@ -157,11 +158,11 @@ const InputSlider = class {
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (h(Host, { key: '39d80cf018beba4ae47fbed1ae2f646ea8fef3d8', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": this.disabled || this.readonly ? 'true' : null }, h("div", { key: 'a880f4c1b2232ac19d14217a8edc522eef0b6cc0', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '1c49dbf668ad0bea336c1b9b9c27dfa0e1ae451e', class: Object.assign({}, backgroundUpperEl.class()), style: {
+        return (h(Host, { key: 'ba31206008f0a72360806f7ea7ac3def38acda23', class: Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled || this.readonly) }, h("div", { key: '9567fab0957c6811eafcd38d1febced49c050c9e', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: 'd9e05170e6aed3ec1c77a54af7b131cdf9f35bf0', class: Object.assign({}, backgroundUpperEl.class()), style: {
                 width: this.cssWidth(),
-            } }, h("div", { key: 'c033b9842fcce9b796e05302646043c397832068', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: 'c19b9a759bd3d50552f957e080238bc725284ba5', class: Object.assign({}, backgroundLowerEl.class()), style: {
+            } }, h("div", { key: 'a71d466015e854f060e73fbd0348d047f311cb75', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: '242d3efde87d1a3f6df3ecab0f19ee4e569f583a', class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, h("div", { key: 'd0517f96b396feb37ee6638bfeef5fe974b627c4', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: 'ac3121f247e005f19b9e71558bf558cc3e97d6fe', class: Object.assign({}, inputEl.class()) }, h("div", { key: 'e08b0f6862c9c10868a5ee22d4e54360fd59458d', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '0b74ff9bddd4dcbe663786c25741e0ea767befc0', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { key: 'a6b700f20e4c1dea1e639053ddebf15b80b8decf', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: '7fd6ea23fd3676c3b3c8e307a05e2b601ba48178', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, h("div", { key: 'e103a1c5e58493b9d4d8bd1305526cfebfdefa9c', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: '8688d770d21367e0ca09f7e8fb0db6065410d378', class: Object.assign({}, inputEl.class()) }, h("div", { key: 'c279326bedcaa95e9eaedbead4dda819270ae052', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '0bbb500ba6ca2a5bb113e00e377bc0f2405d039a', type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { key: '8110b74c7093031881d30997fd62e13aa4d068f8', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: '6e88e3faa19d0ae4d845c931ad68ae39016ba5cc', class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bal-input-stepper.entry.js

@@ -3,12 +3,13 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
 import { f as formatLocaleNumber } from './number-42482e68.js';
 import { n as rIC, p as debounceEvent } from './helpers-ae0db1dd.js';
-import { i as inheritAttributes } from './attributes-4fa7040f.js';
+import { i as inheritAttributes } from './attributes-a3e70948.js';
 import { s as stopEventBubbling, h as inputListenOnClick } from './form-input-3856ed2a.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { d as defaultBalAriaForm } from './form-841232ff.js';
 import { i as i18nBalInputStepper } from './bal-input-stepper.i18n-aaa4a009.js';
 import { L as Logger } from './log-dfd1c19f.js';
+import { a as ariaBooleanToString } from './aria-ea150568.js';
 import { d as defaultConfig } from './config.default-75703209.js';
 import { L as ListenToConfig } from './config.decorator-09912ddf.js';
 import './config.utils-6c4a6204.js';
@@ -1189,15 +1190,15 @@ const InputStepper = class {
         const elText = elInner.element('text');
         const increaseLabel = i18nBalInputStepper[this.language].increase;
         const decreaseLabel = i18nBalInputStepper[this.language].decrease;
-        return (h(Host, { key: 'dfab36b5eddcafb9735e2f0864ea193dcded0ed0', "aria-disabled": this.disabled ? 'true' : null, "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '995012f045bff801123eb570e9e15a325887fe44', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: '00be7e79c60caca77ec9da3afbbcff9366d62ce2', aria: {
+        return (h(Host, { key: 'd8a4b9dfba5e8847c27b9926ec1c27197b50e99e', "aria-disabled": ariaBooleanToString(this.disabled), "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: 'b3969b7bbc1736420c121ba5badfd8687d92a45e', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: 'f4913edbc509bf1ce858dc2c7cdb5454ec1882d3', aria: {
                 title: decreaseLabel,
                 label: decreaseLabel,
                 controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("bal-text", { key: '58a83c975658a26b268fdaa01ec5755648232052', space: "none", color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : '', bold: true, class: Object.assign({}, elText.class()), "data-testid": "bal-input-stepper-text" }, formatLocaleNumber(this.value)), h("bal-button", { key: '65067189b64d42fa3b06cb9b128c60b9d68a481d', aria: {
+            }, size: "small", square: true, "data-testid": "bal-input-stepper-decrease", outlined: !this.invalid, icon: "minus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value <= this.min, onClick: _ => this.decrease(), onBalFocus: ev => this.onFocusDecrease(ev), onBalBlur: ev => this.onBlurDecrease(ev) }), h("bal-text", { key: 'c5edab51b0cf99141a05b87ce7b20bfb1322e623', space: "none", color: this.disabled || this.readonly ? 'grey' : this.invalid ? 'danger' : '', bold: true, class: Object.assign({}, elText.class()), "data-testid": "bal-input-stepper-text" }, formatLocaleNumber(this.value)), h("bal-button", { key: 'ff514497914327d19e24cf31fe866946df873b26', aria: {
                 title: increaseLabel,
                 label: increaseLabel,
                 controls: this.ariaForm.controlId || this.inputId,
-            }, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ key: '609736bcab366e2276240d35c1d39369fa31d066', class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
+            }, size: "small", "data-testid": "bal-input-stepper-increase", square: true, outlined: !this.invalid, icon: "plus", color: this.invalid ? 'danger' : 'info', disabled: this.disabled || this.readonly || this.value >= this.max, onClick: _ => this.increase(), onBalFocus: ev => this.onFocusIncrease(ev), onBalBlur: ev => this.onBlurIncrease(ev) })), h("input", Object.assign({ key: '312698925066f834d8c895b1ad8edbbe8d5fd84c', class: Object.assign({}, elInput.class()), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), "data-testid": "bal-input-stepper", type: "text", value: this.value, name: this.name, tabindex: "-1", ref: inputEl => (this.nativeInput = inputEl), readonly: this.readonly, disabled: this.disabled }, this.inheritedAttributes))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {