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

package/dist/collection/components/bal-file-upload/bal-file-upload.js

@@ -7,6 +7,7 @@ import { FileListComponent } from "./components/file-list";
 import { toFileArray, toFileList } from "./utils/file-list.util";
 import { validateFileArray } from "./utils/file-validation.util";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ariaBooleanToString } from "../../utils/aria";
 export class FileUpload {
     constructor() {
         this.fileUploadId = `bal-file-upload-${FileUploadIds++}`;
@@ -201,16 +202,16 @@ export class FileUpload {
      */
     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 })) : ('')));
     }
     static get is() { return "bal-file-upload"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-footer/bal-footer.css

@@ -1 +1 @@
-: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;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:flex;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:flex;justify-content:space-between;flex-wrap:nowrap;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:flex;flex-wrap:nowrap;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;justify-content: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:flex;align-items:center}.bal-footer__inner__wrapper__links-container{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:flex;flex-wrap:wrap;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{flex-direction:column;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{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);justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}
+: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;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:flex;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:flex;justify-content:space-between;flex-wrap:nowrap;flex-direction:row}.bal-footer__inner__wrapper__header-container__language{display:flex;flex-wrap:nowrap;align-items:center}.bal-footer__inner__wrapper__header-container__language__wrapper{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:flex;align-items:center}.bal-footer__inner__wrapper__links-container{display:flex;justify-content:space-between;flex-wrap:wrap}@media screen and (min-width: 769px),print{.bal-footer__inner__wrapper__links-container{flex-direction:column}}@media screen and (min-width: 1024px){.bal-footer__inner__wrapper__links-container{flex-direction:row}}.bal-footer__inner__wrapper__links-container__legal-links{display:flex;flex-wrap:wrap;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{flex-direction:column;justify-content:center;width:100%;gap:var(--bal-space-normal)}}.bal-footer__inner__wrapper__links-container__social-media-links{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);justify-content:center;width:100%;padding:var(--bal-space-normal) 0 var(--bal-space-normal) 0}}

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

@@ -90,14 +90,14 @@ export class Footer {
         const elWrapper = elLanguage.element('wrapper');
         const elLegalLinks = elLinksContainer.element('legal-links');
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
-        return (h(Host, { key: 'd9fcf2b0c58a8c8b2ec81256a94a5555281f275e', class: Object.assign({}, block.class()) }, h("footer", { key: '24691e174da80b7b0837d6ef7093abf1e0671207', class: Object.assign({}, elInner.class()) }, h("div", { key: '80a0395ec6f83fed9b67687f9f0169550e1e8a6e', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '1d5656c103792e725267aee630f5c89717cddcd4', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '91d7235ce53fb56712375194709d70d32a40aad3', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: '9f20c92b2fca4660daec9d5faa74303e4027c81e', color: "white" })), h("div", { key: 'e395ba338e3dcd7fffd8f07d6ba3ab0e26d5cb85', class: Object.assign({}, elLanguage.class()), style: {
+        return (h(Host, { key: '63b0d68bf5813a5758202dcb1d154599dc808c58', class: Object.assign({}, block.class()) }, h("footer", { key: '409eb8e6cfc4cf5a8f5b504bfd914d686458ca2d', class: Object.assign({}, elInner.class()) }, h("div", { key: 'a987f76c6aee6a7d8d376867ac58bd972ba80e05', class: Object.assign({}, elInnerWrapper.class()) }, h("div", { key: '3028b99426dd4019f39cdbf27ff7359c32686d79', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { key: '558ce31d189e1cd3f942146093ce0faf994669c9', class: Object.assign({}, elLogo.class()) }, h("bal-logo", { key: 'fc1c918ef12867f2e65f4e01c2266dfa524ad5c3', color: "white" })), h("div", { key: 'ec418eca7def7286a625f4ed7d40194865ca795d', class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { key: 'dfc805fd51ea9b5625de046a94129df428e7d2d0', class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", { key: '0d203884c1f437669690a70df96fc703427f751b' }, h("bal-icon", { key: '9551ba6bc1fc1b36d67542fe40d841dee78d3daa', class: 'bal-dropdown__rear', name: "web", color: "white" }), h("select", { key: '721a9a291639d6d4357f179b302870cf6f2852af', id: "bubu", class: 'bal-dropdown__native', onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name)))))))), h("div", { key: '26575b69cba20d83a8124bca1697b9cc7ee38246', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '48e62b90d62825693e73b522ed454da7846457d2' })), h("div", { key: '8fdf21a11da23eb1489c95d21f6726ab53136ffc', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '591b9f51cb1ff3d4dee431daaca23ad38bcbac7e', class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { key: '9ed1373bd05ab2a1eb56654c885895a3247fbd28', class: Object.assign({}, elWrapper.class()) }, h("bal-icon", { key: '6353ac60b7ff51d29b19529fad5558133610dfec', class: Object.assign({}, elWrapper.element('icon').class()), name: "web", color: "white" }), h("select", { key: 'b31f1ad5708693ec6d824075234b649ed0a0b670', class: Object.assign({}, elWrapper.element('select').class()), onChange: event => this.changeLanguage(event.target.value), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("option", { key: language, value: language, selected: language === this.language }, language.toLocaleUpperCase() + ' - ' + i18nBalFooter[language].name))))))), h("div", { key: '53604c5b9b022f3cc93cc25e585f8573fdb609a4', class: Object.assign({}, elSlot.class()) }, h("slot", { key: '768096640cb46e55904b92d8bf71bc8e0f1d14a9' })), h("div", { key: 'f376f065dfd717f806f648dca91912f88b23dbf7', class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { key: '382c7fd1cbeb51620790523a4013bbca5e1b8442', class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
             } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '6496b1f14bedc754c4ba873c6ead58e1476c76ff', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { key: '2d9bc74994376502bf3adbe1de443665b4c69fb3', class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));

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

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

package/dist/collection/components/bal-form-grid/bal-form-col/bal-form-col.js

@@ -5,7 +5,7 @@ export class FormCol {
         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,
@@ -15,7 +15,7 @@ export class FormCol {
                 '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' })));
     }
     static get is() { return "bal-form-col"; }
     static get properties() {

package/dist/collection/components/bal-form-grid/bal-form-grid.css

@@ -1 +1 @@
-.bal-form-grid{display:flex;flex-direction:column}@media screen and (min-width: 1024px){.bal-form-grid{flex-direction:row}}.bal-form-grid.columns{margin-top:0 !important;margin-bottom:0 !important}
+.bal-form-grid{display:flex;flex-direction:column;row-gap:.25rem}@media screen and (min-width: 1024px){.bal-form-grid{flex-direction:row}}.bal-form-grid.columns{margin-top:0 !important;margin-bottom:0 !important}

package/dist/collection/components/bal-form-grid/bal-form-grid.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class FormGrid {
     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 is() { return "bal-form-grid"; }
     static get originalStyleUrls() {

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

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

package/dist/collection/components/bal-hint/bal-hint-text/bal-hint-text.js

@@ -6,7 +6,7 @@ export class HintText {
         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' }))));
     }
     static get is() { return "bal-hint-text"; }
 }

package/dist/collection/components/bal-hint/bal-hint-title/bal-hint-title.js

@@ -6,7 +6,7 @@ export class HintTitle {
         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' })))));
     }
     static get is() { return "bal-hint-title"; }
 }

package/dist/collection/components/bal-icon/bal-icon.css

@@ -1 +1 @@
-: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:flex;justify-content:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:inline-flex}.bal-icon__inner{display:block;position:static;transition:transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{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{align-items:center;color:inherit;display:inline-flex;vertical-align:top;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{flex-grow: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:flex}
+: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:flex;justify-content:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:inline-flex}.bal-icon__inner{display:block;position:static;transition:transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{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{align-items:center;color:inherit;display:inline-flex;vertical-align:top;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{flex-grow: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:flex}

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

@@ -80,6 +80,7 @@ export class Icon {
             'blue',
             'grey',
             'grey-light',
+            'grey-dark',
             'danger',
             'danger-dark',
             'danger-darker',
@@ -104,7 +105,7 @@ export class Icon {
         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 is() { return "bal-icon"; }
     static get originalStyleUrls() {

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

@@ -8,6 +8,7 @@ import { hasParent } from "../../../utils/helpers";
 import { DateMask, MaskComponentAdapter } from "../../../utils/mask";
 import { inputSetBlur, inputSetFocus } from "../../../utils/form-input";
 import { defaultBalAriaForm } from "../../../utils/form";
+import { ariaBooleanToString } from "../../../utils/aria";
 export class InputDate {
     constructor() {
         this.inputId = `bal-i-date-${inputDateIds++}`;
@@ -107,14 +108,14 @@ export class InputDate {
     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" })));
     }
     static get is() { return "bal-input-date"; }
     static get originalStyleUrls() {

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

@@ -9,6 +9,7 @@ import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from "../../utils/consta
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ariaBooleanToString } from "../../utils/aria";
 export class Input {
     constructor() {
         this.inputId = `bal-input-${InputIds++}`;
@@ -304,7 +305,7 @@ export class Input {
         }
         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,
@@ -313,7 +314,7 @@ export class Input {
                 '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))));
     }
     static get is() { return "bal-input"; }
     static get originalStyleUrls() {

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

@@ -12,7 +12,7 @@ export class InputGroup {
         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' })));
     }
     static get is() { return "bal-input-group"; }
     static get originalStyleUrls() {

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

@@ -4,6 +4,7 @@ import { debounceEvent } from "../../utils/helpers";
 import { stopEventBubbling } from "../../utils/form-input";
 import { BEM } from "../../utils/bem";
 import { defaultBalAriaForm } from "../../utils/form";
+import { ariaBooleanToString } from "../../utils/aria";
 export class InputSlider {
     constructor() {
         this.inputId = `bal-input-slider-${inputSliderIds++}`;
@@ -145,11 +146,11 @@ export class InputSlider {
         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 }))))));
     }
     static get is() { return "bal-input-slider"; }
     static get originalStyleUrls() {

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

@@ -10,6 +10,7 @@ import { BEM } from "../../utils/bem";
 import { defaultBalAriaForm } from "../../utils/form";
 import { i18nBalInputStepper } from "./bal-input-stepper.i18n";
 import { Logger } from "../../utils/log";
+import { ariaBooleanToString } from "../../utils/aria";
 export class InputStepper {
     constructor() {
         this.inputId = `bal-input-stepper-${InputStepperIds++}`;
@@ -129,15 +130,15 @@ export class InputStepper {
         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))));
     }
     static get is() { return "bal-input-stepper"; }
     static get originalStyleUrls() {

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

@@ -66,7 +66,7 @@ export class Label {
         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)));
     }
     static get is() { return "bal-label"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-list/bal-list-item-accordion-body/bal-list-item-accordion-body.js

@@ -7,10 +7,7 @@ import { ListenToResize } from "../../../utils/resize";
 export class ListItemAccordionBody {
     constructor() {
         this.isMobile = balBreakpoints.isMobile;
-        /**
-         * PRIVATE METHODS
-         * ------------------------------------------------------
-         */
+        this.internalId = `bal-list-item-accordion-body-${ListItemAccordionBodyIds++}`;
         this.setMinHeightForAnimation = () => {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
@@ -34,6 +31,7 @@ export class ListItemAccordionBody {
             });
         };
         this.debounceSetMinHeightForAnimation = debounce(this.setMinHeightForAnimation.bind(this), 100);
+        this.ariaState = {};
         this.accordionGroup = undefined;
         this.contentSpace = 'none';
         this.contentAlignment = 'start';
@@ -50,6 +48,7 @@ export class ListItemAccordionBody {
     }
     componentDidRender() {
         this.setMinHeightForAnimation();
+        this.setControlIdToHead();
     }
     /**
      * LISTENERS
@@ -62,20 +61,40 @@ export class ListItemAccordionBody {
         this.isMobile = breakpoints.mobile;
         this.debounceSetMinHeightForAnimation();
     }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async setAria(aria) {
+        this.ariaState = Object.assign({}, aria);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    setControlIdToHead() {
+        const headEl = this.el.parentElement.querySelector('bal-list-item-accordion-head');
+        if (headEl) {
+            headEl.setAria({ controlId: this.internalId });
+        }
+    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '06ee66f63c656b78ad4810d1c100537705920540', class: {
+        return (h(Host, { key: '9f844655eaa797b1df2a9c1a51aa5959c1e1f82e', id: this.internalId, role: 'region', "aria-labelledby": this.ariaState.labelledby, class: {
                 'bal-list__item': true,
                 'bal-list__item__accordion-body': true,
                 'bal-list__item__accordion-body--grouped': this.accordionGroup !== undefined && this.accordionGroup !== '',
-            } }, h("div", { key: 'dc9e35c46f9ced8cb40e6e89785c63fb791dd42f', class: {
+            } }, h("div", { key: 'c174c610fe9832eb84d32b31a97327da9ac393e3', class: {
                 'bal-list__item__accordion-body__content': true,
                 [`bal-list__item__accordion-body__content--${this.contentAlignment}`]: this.contentAlignment !== undefined,
                 [`bal-list__item__accordion-body__content--space-${this.contentSpace}`]: this.contentSpace !== undefined,
-            }, ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '8b4d53344c8d23dacb1e7fc274837adcdc143529' }))));
+            }, ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '1c6cb9f879550e70ada7563d7d1758bdfd485e04' }))));
     }
     static get is() { return "bal-list-item-accordion-body"; }
     static get properties() {
@@ -151,6 +170,44 @@ export class ListItemAccordionBody {
             }
         };
     }
+    static get states() {
+        return {
+            "ariaState": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setAria": {
+                "complexType": {
+                    "signature": "(aria: BalListItemAccordionBodyAria) => Promise<void>",
+                    "parameters": [{
+                            "name": "aria",
+                            "type": "BalListItemAccordionBodyAria",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalListItemAccordionBodyAria": {
+                            "location": "local",
+                            "path": "/home/runner/work/design-system/design-system/packages/core/src/components/bal-list/bal-list-item-accordion-body/bal-list-item-accordion-body.tsx",
+                            "id": "src/components/bal-list/bal-list-item-accordion-body/bal-list-item-accordion-body.tsx::BalListItemAccordionBodyAria"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }
 __decorate([
@@ -171,3 +228,4 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], ListItemAccordionBody.prototype, "breakpointListener", null);
+let ListItemAccordionBodyIds = 0;

package/dist/collection/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.i18n.js

@@ -0,0 +1,42 @@
+export const i18nBalListItemAccordionHead = {
+    de: {
+        open: 'Öffnen',
+        close: 'Schließen',
+    },
+    en: {
+        open: 'Open',
+        close: 'Close',
+    },
+    fr: {
+        open: 'Ouvrir',
+        close: 'Fermer',
+    },
+    it: {
+        open: 'Apri',
+        close: 'Chiudi',
+    },
+    nl: {
+        open: 'Open',
+        close: 'Sluiten',
+    },
+    es: {
+        open: 'Abrir',
+        close: 'Cerrar',
+    },
+    pl: {
+        open: 'Otwórz',
+        close: 'Zamknij',
+    },
+    pt: {
+        open: 'Abrir',
+        close: 'Fechar',
+    },
+    sv: {
+        open: 'Öppna',
+        close: 'Stäng',
+    },
+    fi: {
+        open: 'Avaa',
+        close: 'Sulje',
+    },
+};