@baloise/ds-core 17.3.0 → 17.4.0-nightly.20250207

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',
+    },
+};

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

@@ -1,9 +1,14 @@
 import { __decorate, __metadata } from "tslib";
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { Logger } from "../../../utils/log";
 import { isEnterKey, isSpaceKey } from "../../../utils/keyboard";
+import { stopEventBubbling } from "../../../utils/form-input";
+import { ariaBooleanToString } from "../../../utils/aria";
+import { i18nBalListItemAccordionHead } from "./bal-list-item-accordion-head.i18n";
+import { defaultConfig, ListenToConfig } from "../../../utils/config";
 export class ListItemAccordionHead {
     constructor() {
+        this.internalId = `bal-list-item-accordion-head-${ListItemAccordionHeadIds++}`;
         /**
          * EVENT BINDING
          * ------------------------------------------------------
@@ -15,9 +20,12 @@ export class ListItemAccordionHead {
         };
         this.onKeyDown = (ev) => {
             if (isSpaceKey(ev) || isEnterKey(ev)) {
+                stopEventBubbling(ev);
                 this.onClick();
             }
         };
+        this.ariaState = {};
+        this.language = defaultConfig.language;
         this.accordionOpen = false;
         this.icon = 'plus';
     }
@@ -29,16 +37,57 @@ export class ListItemAccordionHead {
             this.balAccordionChange.emit(this.accordionOpen);
         }
     }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentDidRender() {
+        this.setLabelledby();
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async setAria(aria) {
+        this.ariaState = Object.assign({}, aria);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    setLabelledby() {
+        const bodyEl = this.el.parentElement.querySelector('bal-list-item-accordion-body');
+        if (bodyEl) {
+            bodyEl.setAria({ labelledby: this.internalId });
+        }
+    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '832f5c8044b9e4ce3cbb058bda2b6049510972de', class: {
+        return (h(Host, { key: '7f9a3df26dc5379967a99630512ccead7c8150f1', class: {
                 'bal-list__item': true,
                 'bal-list__item__accordion-head': true,
                 'bal-list__item__accordion-head--open': this.accordionOpen,
-            }, role: "button", tabindex: "0", onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '8a19cd5dd89ce0adb4301d2bfedbcdc7416457c6' }), h("bal-list-item-icon", { key: '263259acd91f67abe9114a127afbafe09e5a81b7', right: true }, h("bal-icon", { key: '10c6bf2695488123fcb5c229a94b36cbfd0c767a', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
+            }, id: this.internalId, role: "button", tabindex: "0", "aria-expanded": ariaBooleanToString(this.accordionOpen), "aria-controls": this.ariaState.controlId, title: this.accordionOpen
+                ? i18nBalListItemAccordionHead[this.language].close
+                : i18nBalListItemAccordionHead[this.language].open, "aria-label": this.accordionOpen
+                ? i18nBalListItemAccordionHead[this.language].close
+                : i18nBalListItemAccordionHead[this.language].open, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("slot", { key: '76e6f62d4f86c4918c923c12490724a94b9c617b' }), h("bal-list-item-icon", { key: '33e7e1e1ab7111cbc012e006c85794d9b6ba0a2c', right: true }, h("bal-icon", { key: 'd73baa5d7dfb8c9db83158336fca216d9d3c5624', class: "bal-list__item__accordion-head__icon", name: this.icon, size: "small", turn: this.accordionOpen }))));
     }
     static get is() { return "bal-list-item-accordion-head"; }
     static get properties() {
@@ -90,6 +139,12 @@ export class ListItemAccordionHead {
             }
         };
     }
+    static get states() {
+        return {
+            "ariaState": {},
+            "language": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "balAccordionChange",
@@ -113,6 +168,68 @@ export class ListItemAccordionHead {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: BalConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "BalConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalConfigState": {
+                            "location": "import",
+                            "path": "../../../utils/config",
+                            "id": "src/utils/config/index.ts::BalConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            },
+            "setAria": {
+                "complexType": {
+                    "signature": "(aria: BalListItemAccordionHeadAria) => Promise<void>",
+                    "parameters": [{
+                            "name": "aria",
+                            "type": "BalListItemAccordionHeadAria",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BalListItemAccordionHeadAria": {
+                            "location": "local",
+                            "path": "/home/runner/work/design-system/design-system/packages/core/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx",
+                            "id": "src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx::BalListItemAccordionHeadAria"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
@@ -127,3 +244,10 @@ __decorate([
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
 ], ListItemAccordionHead.prototype, "createLogger", null);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], ListItemAccordionHead.prototype, "configChanged", null);
+let ListItemAccordionHeadIds = 0;

package/dist/collection/components/bal-list/bal-list-item-content/bal-list-item-content.js

@@ -4,10 +4,10 @@ export class ListItemContent {
         this.contentAlignment = undefined;
     }
     render() {
-        return (h(Host, { key: '18b259162c90c9d964723ead0c397808190b5a03', class: {
+        return (h(Host, { key: '62c3187a790387131619a36041500bfa8411f1ef', class: {
                 'bal-list__item__content': true,
                 [`bal-list__item__content--${this.contentAlignment}`]: this.contentAlignment !== undefined,
-            } }, h("slot", { key: 'f5f1b01681e567d907880df1c074bb6387afe692' })));
+            } }, h("slot", { key: '46b91cbcc099fadbc5d36cd38962cd269edfa061' })));
     }
     static get is() { return "bal-list-item-content"; }
     static get properties() {

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

@@ -4,10 +4,10 @@ export class ListItemIcon {
         this.right = false;
     }
     render() {
-        return (h(Host, { key: '99a23b25b0d12efbbcec68c953c9a71715728264', class: {
+        return (h(Host, { key: '9fb09192dd52850fcef91ea5a331d15a4b3b5dcc', class: {
                 'bal-list__item__icon': true,
                 'bal-list__item__icon--right': this.right,
-            } }, h("slot", { key: '735c1364fabfb25f66c930771294b88588bb3dde' })));
+            } }, h("slot", { key: 'cd11e4ae80df1279bb2ba2ea033177e2853e9f78' })));
     }
     static get is() { return "bal-list-item-icon"; }
     static get properties() {

package/dist/collection/components/bal-list/bal-list-item-subtitle/bal-list-item-subtitle.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ListItemSubtitle {
     render() {
-        return (h(Host, { key: 'effd50d57869e56472d4f02227aa8d0f694fe2b2', class: "bal-list__item__subtitle" }, h("slot", { key: '78c5597788016f37e1c7f96b2bc3b8eba14a16aa' })));
+        return (h(Host, { key: '9d30c4730ecaf4111353cba87adaa659eb859623', class: "bal-list__item__subtitle" }, h("slot", { key: 'e76c009d723f41b9197c4d08dfb113221f83ff04' })));
     }
     static get is() { return "bal-list-item-subtitle"; }
 }

package/dist/collection/components/bal-list/bal-list-item-title/bal-list-item-title.js

@@ -5,7 +5,7 @@ export class ListItemTitle {
         this.visualLevel = undefined;
     }
     render() {
-        return (h(Host, { key: '4825c89e7378cd84b26a1ec9188063a2023d0df6', class: "bal-list__item__title" }, h("bal-heading", { key: 'b49ed81022742cb5ababb5acb3b4f62eb9fa00f9', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: 'c79cd06a74853e184c07a751947a974a7a2eca5d' }))));
+        return (h(Host, { key: '01c84fe56b2b55a7697123f6fe756faf6356715d', class: "bal-list__item__title" }, h("bal-heading", { key: '72c506243539016f8ea69d0c41617cf3d78db736', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: '3e92f25b24180c39db9cbe8967baac16e41e0f03' }))));
     }
     static get is() { return "bal-list-item-title"; }
     static get properties() {

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

@@ -21,7 +21,7 @@ export class List {
         const block = BEM.block('list');
         const closestListEl = this.el.closest('.bal-list');
         const nested = closestListEl !== null && closestListEl !== this.el;
-        return (h(Host, { key: '4a0b8f7cfd42f45643109f98a60f801b8c61f832', role: "list", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('nested').class(nested)), block.modifier('disabled').class(this.disabled)), block.modifier('border').class(this.border)), block.modifier(`size-${this.size || 'normal'}`).class()), block.modifier(`background-${this.background}`).class()) }, h("slot", { key: 'df4df7cfbc9c054ddb565c6712f25cd0b5970df4' })));
+        return (h(Host, { key: '54c4f5cd0a4e332a485913320b9ab8e8adcb7d23', role: "list", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('nested').class(nested)), block.modifier('disabled').class(this.disabled)), block.modifier('border').class(this.border)), block.modifier(`size-${this.size || 'normal'}`).class()), block.modifier(`background-${this.background}`).class()) }, h("slot", { key: 'a2271ad692d82f22333445639525f92b8e86a35b' })));
     }
     static get is() { return "bal-list"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-modal/bal-modal-body/bal-modal-body.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class ModalBody {
     render() {
-        return (h(Host, { key: '4f377434dbfa5bcaf78de5bbd9c2ce0b3ef29b07', class: "bal-modal__body" }, h("slot", { key: 'cc2a53e19dd0ec2c2bccbabe0ee7f3b1d1bc1cfe' })));
+        return (h(Host, { key: '832389ef4fb2876265130421194e971d14c1d664', class: "bal-modal__body" }, h("slot", { key: '8a0e7b7bc0f015b9d1a208767214964e1a6a083d' })));
     }
     static get is() { return "bal-modal-body"; }
 }

package/dist/collection/components/bal-modal/bal-modal-header/bal-modal-header.js

@@ -12,7 +12,7 @@ export class ModalHeader {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5e6e9e2ca7d60ad7db0afe67c415879497f0a8d2', class: "bal-modal__header" }, h("div", { key: '8f9fde0e3f58ecdffdca48e9b86cfdd631fed2f1', class: "bal-modal__header__title" }, h("bal-heading", { key: '855241bb7a83ff949c38e3f7ace530791e7d06ee', level: "h2", space: "none" }, h("slot", { key: '526ce820a6160cdc093d994a00328b9297924046' }))), ((_a = this.parentModal) === null || _a === void 0 ? void 0 : _a.isClosable) ? (h("bal-close", { class: "bal-modal__header__close data-test-modal-close", onClick: this.closeHandler })) : ('')));
+        return (h(Host, { key: 'a168b477c3b25d6b634cae28dfdfe80662835c28', class: "bal-modal__header" }, h("div", { key: 'ede951e810c8dd9ee74f18bd2aaeb9938256eaa0', class: "bal-modal__header__title" }, h("bal-heading", { key: '58aa9747176c2fb610b3d5e269b5e5318e6f1545', level: "h2", space: "none" }, h("slot", { key: '35b58496692d5fafadba77727cd60a70f507b327' }))), ((_a = this.parentModal) === null || _a === void 0 ? void 0 : _a.isClosable) ? (h("bal-close", { class: "bal-modal__header__close data-test-modal-close", onClick: this.closeHandler })) : ('')));
     }
     static get is() { return "bal-modal-header"; }
     static get elementRef() { return "el"; }

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

@@ -1,5 +1,5 @@
 import { Host, h, writeTask } from "@stencil/core";
-import { dismiss, eventMethod, prepareOverlay } from "../../utils/overlays/overlays";
+import { dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, prepareOverlay } from "../../utils/overlays/overlays";
 import { attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { deepReady, wait } from "../../utils/helpers";
 import { getClassMap } from "../../utils/css-classes";
@@ -22,6 +22,7 @@ export class Modal {
         this.componentProps = undefined;
         this.cssClass = undefined;
         this.backdropDismiss = true;
+        this.focusTrap = true;
         this.demo = false;
     }
     connectedCallback() {
@@ -182,17 +183,17 @@ export class Modal {
         return false;
     }
     render() {
-        return (h(Host, { key: '6fb09ad213fb5ee3a62e3e166f7381000ef02380', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented }, getClassMap(this.cssClass)), style: {
+        return (h(Host, { key: '0117e63bcdf529eee9b754275b3f82335a7274b5', "aria-modal": "true", "aria-presented": this.presented ? 'true' : null, "data-testid": this.dataTestId, tabindex: "-1", class: Object.assign({ 'bal-modal': true, 'bal-modal--is-closable': this.isClosable, 'bal-modal--is-active': this.presented, [FOCUS_TRAP_DISABLE_CLASS]: this.focusTrap === false }, getClassMap(this.cssClass)), style: {
                 '--bal-width': `${this.modalWidth}px`,
-            } }, h("div", { key: 'cad948856ebda541aedd8f15dee694ebaad37c48', class: {
+            } }, h("div", { key: 'd566874640e88e886438f0ada7c6073c99539d8c', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '898638dcd4c7d67a988f4b145cd14a8377744829', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '654dda321cef68bb052b042f2cae54a2882e7483', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '0472b9eca55a86bac5587dd84b7b73391fe8c81b', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '9778735ba48d6db90aeb9098d3885a3813fc4c3c', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '3c0ab93e9049d0fb93fac5d2e0affe06eaae0ff5' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: 'c797ba16081d241799e8ea0d36793cd1deff1e9b' })))));
     }
     static get is() { return "bal-modal"; }
     static get originalStyleUrls() {
@@ -446,6 +447,26 @@ export class Modal {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "focusTrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, focus will not be allowed to move outside of this overlay.\nIf `false`, focus will be allowed to move outside of the overlay.\n\nIn most scenarios this property should remain set to `true`. Setting\nthis property to `false` can cause severe accessibility issues as users\nrelying on assistive technologies may be able to move focus into\na confusing state. We recommend only setting this to `false` when\nabsolutely necessary.\n\nDevelopers may want to consider disabling focus trapping if this\noverlay presents a non-Ionic overlay from a 3rd party library.\nDevelopers would disable focus trapping on the Ionic overlay\nwhen presenting the 3rd party overlay and then re-enable\nfocus trapping when dismissing the 3rd party overlay and moving\nfocus back to the Ionic overlay."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "focus-trap",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "demo": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/bal-nav/bal-nav-link/bal-nav-link.js

@@ -27,10 +27,10 @@ export class NavLink {
         if (hasLink) {
             linkAttributes = { href, target };
         }
-        return (h(Host, { key: '94718986eda442992d83a9b40e26bf595d523dce', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: 'cf8106036e3366712fff52d08e8c1567873014be', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
+        return (h(Host, { key: '538d4bc561eec9c4c4d88a16efbd22ccc61517ec', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: '68ac516eb7190bbc532cfd108854cf1329110984', "data-test": "bal-nav-link", class: Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier(`variant-${this.variant}`).class(hasVariant)), block
                 .element('native')
                 .modifier('selected')
-                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: 'f9ab826645c95e02cf1b1ccfa2df34b637a67d13' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '8b705b4c113a3272dcc68d798dce816f13343363' }))));
     }
     static get is() { return "bal-nav-link"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-nav/bal-nav-link-grid/bal-nav-link-grid.js

@@ -12,7 +12,7 @@ export class NavLinkGrid {
      */
     render() {
         const block = BEM.block('nav-link-grid');
-        return (h(Host, { key: '03e4b64a2041c0fb36d94fd061eb9352a38446ed', class: Object.assign({}, block.class()) }, h("slot", { key: '7f7eb07e433531b6d0dab67b4a89e7faab742b51' })));
+        return (h(Host, { key: '9aca76046a51bc001c233e0b8ee24fa863968d0d', class: Object.assign({}, block.class()) }, h("slot", { key: '3e2ceccc2ffe6f231c6900a869a863fec0c153ca' })));
     }
     static get is() { return "bal-nav-link-grid"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-nav/bal-nav-link-grid-col/bal-nav-link-grid-col.js

@@ -16,7 +16,7 @@ export class NavLinkGridCol {
     render() {
         const block = BEM.block('nav-link-grid-col');
         const innerEl = block.element('inner');
-        return (h(Host, { key: 'd207c87255663724d4cdefb411665804c0d614bf', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '8fa5bf2182f99d55463202ecb68aa490ac741510', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'a04eb96c4706a99724d7955aa1a0ce0ef0be4690' }))));
+        return (h(Host, { key: '570396a3ad6882891cfefebf9d92dae1137a3f48', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '86f6add382f5accf09aef4593b16281268af8241', class: Object.assign({}, innerEl.class()) }, h("slot", { key: '57160d0fd8135f4d8a4d955a019ae41b28fc2123' }))));
     }
     static get is() { return "bal-nav-link-grid-col"; }
     static get originalStyleUrls() {