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

package/components/bal-dropdown.js

@@ -390,9 +390,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);
     }
@@ -683,13 +683,13 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         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 this; }
     static get watchers() { return {

package/components/bal-field-control.js

@@ -23,14 +23,14 @@ const FieldControl = /*@__PURE__*/ proxyCustomElement(class FieldControl extends
         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));
     }
 }, [6, "bal-field-control", {
         "iconRight": [1, "icon-right"],

package/components/bal-field-hint.js

@@ -20,7 +20,7 @@ const FieldHint = /*@__PURE__*/ proxyCustomElement(class FieldHint extends HTMLE
     }
     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' })))));
     }
 }, [6, "bal-field-hint", {
         "subject": [1],

package/components/bal-field-label.js

@@ -36,7 +36,7 @@ const FieldLabel = /*@__PURE__*/ proxyCustomElement(class FieldLabel extends HTM
      * ------------------------------------------------------
      */
     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 this; }
 }, [6, "bal-field-label", {

package/components/bal-field-message.js

@@ -19,14 +19,14 @@ const FieldMessage = /*@__PURE__*/ proxyCustomElement(class FieldMessage extends
         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' })));
     }
 }, [4, "bal-field-message", {
         "color": [1],

package/components/bal-field.js

@@ -4,7 +4,7 @@ import { h as deepReady, b as waitAfterFramePaint } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { L as ListenToMutation } from './mutation.decorator.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 = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
@@ -129,7 +129,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             '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`;
         }
@@ -173,12 +173,12 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
         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 this; }
     static get watchers() { return {

package/components/bal-file-upload.js

@@ -6,6 +6,7 @@ import { L as Logger } from './log.js';
 import { B as BEM } from './bem.js';
 import { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { d as defineCustomElement$b } from './bal-card2.js';
 import { d as defineCustomElement$a } from './bal-heading2.js';
 import { d as defineCustomElement$9 } from './bal-icon2.js';
@@ -339,16 +340,16 @@ const FileUpload = /*@__PURE__*/ proxyCustomElement(class FileUpload extends HTM
      */
     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 this; }
     static get watchers() { return {

package/components/bal-footer.js

@@ -6,8 +6,7 @@ import { c as commonjsGlobal } from './_commonjsHelpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { p as rIC } from './helpers.js';
-import { d as defineCustomElement$4 } from './bal-icon2.js';
-import { d as defineCustomElement$3 } from './bal-input-group2.js';
+import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-logo2.js';
 import { e as updateBalLanguage } from './config.utils.js';
 import { d as defaultConfig } from './config.default.js';
@@ -234,7 +233,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 = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement {
@@ -323,14 +322,14 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         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)))))))));
@@ -364,7 +363,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-footer", "bal-icon", "bal-input-group", "bal-logo"];
+    const components = ["bal-footer", "bal-icon", "bal-logo"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-footer":
             if (!customElements.get(tagName)) {
@@ -372,11 +371,6 @@ function defineCustomElement$1() {
             }
             break;
         case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "bal-input-group":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/components/bal-form-col.js

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

package/components/bal-form-grid.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-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 = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLElement {
@@ -9,7 +9,7 @@ const FormGrid = /*@__PURE__*/ proxyCustomElement(class FormGrid extends HTMLEle
         this.__registerHost();
     }
     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' })));
     }
     static get style() { return BalFormGridStyle0; }
 }, [4, "bal-form-grid"]);

package/components/bal-form.js

@@ -29,7 +29,7 @@ const Form = /*@__PURE__*/ proxyCustomElement(class Form extends HTMLElement {
                 novalidate: this.novalidate,
             };
         }
-        return (h(Host, { key: '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 this; }
     static get style() { return BalFormStyle0; }

package/components/bal-heading2.js

@@ -143,7 +143,7 @@ const Heading = /*@__PURE__*/ proxyCustomElement(class Heading extends HTMLEleme
         const bemTextEl = block.element('text');
         const Heading = this.tag;
         const fontColor = this.fontColor;
-        return (h(Host, { key: '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 this; }
     static get watchers() { return {

package/components/bal-hint-text2.js

@@ -11,7 +11,7 @@ const HintText = /*@__PURE__*/ proxyCustomElement(class HintText extends HTMLEle
         const elContent = block.element('content');
         const elText = elContent.element('text');
         const elTextField = elText.element('field');
-        return (h(Host, { key: '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' }))));
     }
 }, [4, "bal-hint-text"]);
 function defineCustomElement() {

package/components/bal-hint-title2.js

@@ -11,7 +11,7 @@ const HintTitle = /*@__PURE__*/ proxyCustomElement(class HintTitle extends HTMLE
         const elContent = block.element('content');
         const elTitle = elContent.element('title');
         const elHeading = elTitle.element('heading');
-        return (h(Host, { key: '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' })))));
     }
 }, [4, "bal-hint-title"]);
 function defineCustomElement() {

package/components/bal-icon2.js

@@ -909,7 +909,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 = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
@@ -990,6 +990,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
             'blue',
             'grey',
             'grey-light',
+            'grey-dark',
             'danger',
             'danger-dark',
             'danger-darker',
@@ -1014,7 +1015,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
         const color = this.parseColor();
         const block = BEM.block('icon');
         const svgContent = this.svgContent(this.name);
-        return (h(Host, { key: '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 })));
     }
     static get style() { return BalIconStyle0; }
 }, [0, "bal-icon", {

package/components/bal-input-date2.js

@@ -6,6 +6,7 @@ import { i as inheritAttributes } from './attributes.js';
 import { u as hasParent } from './helpers.js';
 import { h as hasValueChanged, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { N as NUMBER_KEYS } from './keys.constant.js';
 import { I as INVALID_VALUE } from './mask-util.js';
 import { d as dateSeparator, B as BalDate } from './date.js';
@@ -988,14 +989,14 @@ const InputDate = /*@__PURE__*/ proxyCustomElement(class InputDate extends HTMLE
     render() {
         const block = BEM.block('input-date');
         const native = block.element('native');
-        return (h(Host, { key: 'c1401f0c7df85ca5d78649b764215e27aa6790ae', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '37c33527ad82e2f74b19f734f2a752cc49a8a352', class: {
+        return (h(Host, { key: '38b2bfc91f2249540a9f5d2536d34b917070e903', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'b689f1780889807f91d776f903712cd3e6341283', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
                 'is-clickable': this.clickable && !(this.disabled || this.readonly),
                 'bal-focusable': !this.disabled,
                 'has-icon-right': this.hasIconRight,
-            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: 'c2b6921f78a345008b3475273f19dfe1dcd59373', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
+            }, "data-testid": "bal-date-input", ref: el => (this.nativeInput = el), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), required: this.required, disabled: this.disabled, readonly: this.readonly, autoComplete: this.autocomplete }, this.maskAdapter.attributes, this.inheritedAttributes, { placeholder: this.placeholder, value: this.inputValue, onKeyDown: event => this.maskAdapter.bindKeyDown(event), onClick: event => this.maskAdapter.bindClick(event), onFocus: event => this.maskAdapter.bindFocus(event), onBlur: event => this.maskAdapter.bindBlur(event), onPaste: event => this.maskAdapter.bindPaste(event) })), h("input", { key: '80414fe198d63903a23853e603053771c50448d3', type: "date", class: Object.assign({}, native.class()), name: this.name, min: this.min, max: this.max, value: this.value, tabindex: -1, "aria-hidden": "true" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-input-group2.js

@@ -18,7 +18,7 @@ const InputGroup = /*@__PURE__*/ proxyCustomElement(class InputGroup extends HTM
         const hasDanger = this.invalid;
         const disabledClass = 'is-disabled';
         const hasDisabled = this.disabled || this.readonly;
-        return (h(Host, { key: '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 this; }
     static get style() { return BalInputGroupStyle0; }

package/components/bal-input-slider.js

@@ -4,6 +4,7 @@ import { o as debounceEvent } from './helpers.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { a as ariaBooleanToString } from './aria.js';
 
 const balInputSliderCss = ".bal-input-slider{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text);-ms-flex-direction:column;flex-direction:column;min-height:3rem}.bal-input-slider__background{position:absolute;top:1rem;left:0px;right:0px;z-index:0;border-radius:var(--bal-radius-rounded);background:var(--bal-color-green);height:1rem;width:100%;overflow:hidden}.bal-input-slider__background__upper,.bal-input-slider__background__lower{position:absolute;top:0;width:50%;margin:0;cursor:pointer}.bal-input-slider__background__upper>div,.bal-input-slider__background__lower>div{height:1rem;border-radius:0}.bal-input-slider__background__upper{right:0px}.bal-input-slider__background__upper>div{background:var(--bal-color-green);border-top-right-radius:var(--bal-radius-rounded);border-bottom-right-radius:var(--bal-radius-rounded)}.bal-input-slider__background__lower{left:0px}.bal-input-slider__background__lower>div{background:var(--bal-color-green-5);border-top-left-radius:var(--bal-radius-rounded);border-bottom-left-radius:var(--bal-radius-rounded)}.bal-input-slider__background--disabled{cursor:default;pointer-events:none;background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__upper__inner{background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__lower__inner{background:var(--bal-color-grey-4)}.bal-input-slider__input{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;min-height:3rem}.bal-input-slider__input__native{-webkit-appearance:none;margin:0;background:rgba(0,0,0,0);z-index:1;outline:none;min-width:12.5rem;width:100%}.bal-input-slider__input__native::-webkit-slider-runnable-track{width:100%;cursor:pointer;border:none}.bal-input-slider__input__native::-webkit-slider-thumb{-webkit-box-shadow:none;box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none}.bal-input-slider__input__native:focus-visible{outline:none}.bal-input-slider__input__native:focus-visible::-webkit-slider-thumb{background:var(--bal-color-primary);border:2px solid var(--bal-color-primary)}.bal-input-slider__input__native::-moz-range-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-moz-range-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:.625rem;width:.625rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer}.bal-input-slider__input__native::-ms-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-ms-fill-lower{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-fill-upper{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none;z-index:2}.bal-input-slider__input__native:focus::-ms-fill-lower{background:rgba(0,0,0,0)}.bal-input-slider__input__native:focus::-ms-fill-upper{background:rgba(0,0,0,0)}.bal-input-slider__input__native--disabled::-webkit-slider-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-ms-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-moz-range-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__steps{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;min-height:.5rem;margin:-0.625rem .5rem;-ms-flex-pack:justify;justify-content:space-between}.bal-input-slider__steps__item{width:.125rem;border-radius:var(--bal-radius-rounded);background-color:var(--bal-color-primary)}.bal-input-slider__steps__item--disabled{background:var(--bal-color-grey-4)}@-moz-document url-prefix(){.bal-input-slider__steps{margin:0 .5rem !important}}";
 const BalInputSliderStyle0 = balInputSliderCss;
@@ -156,11 +157,11 @@ const InputSlider = /*@__PURE__*/ proxyCustomElement(class InputSlider extends H
         const inputValueRightEl = inputValueEl.modifier('right');
         const stepsEl = block.element('steps');
         const stepsItemEl = stepsEl.element('item');
-        return (h(Host, { key: '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 this; }
     static get watchers() { return {

package/components/bal-input-stepper.js

@@ -9,6 +9,7 @@ import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { i as i18nBalInputStepper } from './bal-input-stepper.i18n.js';
 import { L as Logger } from './log.js';
+import { a as ariaBooleanToString } from './aria.js';
 import { d as defineCustomElement$5 } from './bal-button2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-spinner2.js';
@@ -1192,15 +1193,15 @@ const InputStepper = /*@__PURE__*/ proxyCustomElement(class InputStepper extends
         const elText = elInner.element('text');
         const increaseLabel = i18nBalInputStepper[this.language].increase;
         const decreaseLabel = i18nBalInputStepper[this.language].decrease;
-        return (h(Host, { key: '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 this; }
     static get watchers() { return {

package/components/bal-input.js

@@ -8,6 +8,7 @@ import { i as isCtrlOrCommandKey, A as ACTION_KEYS, N as NUMBER_KEYS } from './k
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { d as defaultBalAriaForm } from './form.js';
+import { a as ariaBooleanToString } from './aria.js';
 
 /**
  *
@@ -440,7 +441,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (h(Host, { key: '6c244fcb460677d230891144d73b5688392106db', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '608a42d4c22e631f8504d743e0545016ab87e336', class: {
+        return (h(Host, { key: '8cd020ccf6b69c509b09081fbc2b2cfae5f9b2f0', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '723334c91009eb609f0bc09edd057cdff25912d9', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,
@@ -449,7 +450,7 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 'has-icon-right': this.hasIconRight,
                 'has-text-centered': this.textAlign === 'center',
                 'has-text-right': this.textAlign === 'right',
-            }, "data-testid": "bal-input", ref: inputEl => (this.nativeInput = inputEl), 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, disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, name: this.name, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onKeyDown: e => this.onKeydown(e), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, inputProps, this.inheritedAttributes))));
+            }, "data-testid": "bal-input", ref: inputEl => (this.nativeInput = inputEl), id: id, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": ariaBooleanToString(this.disabled), disabled: this.disabled, accept: this.accept, inputMode: this.inputmode, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autocorrect: this.autocorrect, autofocus: this.autofocus, min: this.min, max: this.max, minLength: this.minLength, maxLength: this.maxLength, multiple: this.multiple, name: this.name, placeholder: this.placeholder || '', readonly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: value, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onKeyDown: e => this.onKeydown(e), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, inputProps, this.inheritedAttributes))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-label2.js

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