@baloise/ds-core 18.3.0 → 19.0.0-nightly.20250512

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

@@ -37,6 +37,8 @@ export class Icon {
         this.svg = '';
         this.size = '';
         this.color = '';
+        this.colorHovered = '';
+        this.colorPressed = '';
         this.tile = false;
         this.tileColor = '';
         this.inline = false;
@@ -73,6 +75,15 @@ export class Icon {
         this.generateSvgContent(this.name);
     }
     parseColor() {
+        if (this.colorHovered && this.hovered) {
+            return this.colorHovered;
+        }
+        if (this.colorPressed && this.pressed) {
+            return this.colorPressed;
+        }
+        if (this.colorHovered && this.colorPressed) {
+            return this.color;
+        }
         if (!!this.disabled) {
             return 'grey';
         }
@@ -87,7 +98,7 @@ export class Icon {
                 return 'danger';
             }
         }
-        if (this.color !== 'auto') {
+        if (this.color !== 'auto' && (this.color === 'primary' || this.color === '')) {
             if (this.pressed) {
                 return 'primary-dark';
             }
@@ -125,7 +136,7 @@ export class Icon {
     render() {
         const color = this.parseColor();
         const block = BEM.block('icon');
-        return (h(Host, { key: '7878580914412bb12603f9854d765106c7acc5ef', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), 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: '3ca28f2b9329ccb31c4bc435e2c0e2b416681167', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
+        return (h(Host, { key: 'f7695780e70a99f7d74c95c8b5895480fbd21198', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('tile').class(this.tile)), block.modifier(`tile-color-${this.tileColor}`).class(this.tile && !!this.tileColor)), 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: 'd6c9a271d20bdd2a30ddec595ed60433c428b193', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier(`turn-${this.name}`).class(this.turn)), block.element('inner').modifier('tile').class(this.tile)), block.modifier(`is-${this.size}`).class(!!this.size)), innerHTML: this.svgContent })));
     }
     static get is() { return "bal-icon"; }
     static get originalStyleUrls() {
@@ -230,6 +241,56 @@ export class Icon {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "colorHovered": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalIconColor",
+                    "resolved": "string",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color-hovered",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "colorPressed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalIconColor",
+                    "resolved": "string",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color-pressed",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "tile": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -108,14 +108,14 @@ export class InputDate {
     render() {
         const block = BEM.block('input-date');
         const native = block.element('native');
-        return (h(Host, { key: '17c98f2fa3a240bebc7ef5e766fe40602e4b1b58', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'dadfc0a5ea369ef70820cea9ed13f38c373db197', class: {
+        return (h(Host, { key: 'f40927d913ec705fdc87137c6b47aadd7549f187', onClick: (event) => this.maskAdapter.bindHostClick(event), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '175e4b3d9ff2df12c4b663bd4927dee2fddd14ab', 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": 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: '67cb4386326e64333af807af28f9161b5537d9f9', 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: 'c1dfb6ccecd24a345e3de3dfb33e436dfbf98615', 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

@@ -305,7 +305,7 @@ export class Input {
         }
         const block = BEM.block('input');
         const id = this.ariaForm.controlId || this.inputId;
-        return (h(Host, { key: 'a9d5aa6c5238ab0ef80c06ce7b78f248a26dd880', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'a90aa77d735cadeceb00adf8ee586bcae6ff48a8', class: {
+        return (h(Host, { key: '448720fe0adbd7130be3148121f04bf456fe755b', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'e3b94bfae57e7aaf10f04ebf7f316a6309e306b6', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

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: '8c8a7a6391bd2bc7cf6aeedd150ad6eca58acd7c', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: 'db6bc519da1f7bf0b4dbce7d2e900c88c062eabe' })));
+        return (h(Host, { key: '8f4dbc85cf4f85478b35d74e150a0776ede42446', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(dangerClass).class(hasDanger)), block.modifier(disabledClass).class(hasDisabled)) }, h("slot", { key: 'd3060925b6928994bebeb78791a0028ffc6ac5ac' })));
     }
     static get is() { return "bal-input-group"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-.bal-input-slider{display:block;position:relative;width:100%;flex:1;font-family:var(--bal-font-family-text);flex-direction:column;min-height:3rem}.bal-input-slider__background{position:absolute;top:1rem;left:0px;right:0px;z-index:0;border-radius:var(--bal-radius-rounded);background:var(--bal-color-green);height:1rem;width:100%;overflow:hidden}.bal-input-slider__background__upper,.bal-input-slider__background__lower{position:absolute;top:0;width:50%;margin:0;cursor:pointer}.bal-input-slider__background__upper>div,.bal-input-slider__background__lower>div{height:1rem;border-radius:0}.bal-input-slider__background__upper{right:0px}.bal-input-slider__background__upper>div{background:var(--bal-color-green);border-top-right-radius:var(--bal-radius-rounded);border-bottom-right-radius:var(--bal-radius-rounded)}.bal-input-slider__background__lower{left:0px}.bal-input-slider__background__lower>div{background:var(--bal-color-green-5);border-top-left-radius:var(--bal-radius-rounded);border-bottom-left-radius:var(--bal-radius-rounded)}.bal-input-slider__background--disabled{cursor:default;pointer-events:none;background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__upper__inner{background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__lower__inner{background:var(--bal-color-grey-4)}.bal-input-slider__input{display:flex;flex:1;min-height:3rem}.bal-input-slider__input__native{-webkit-appearance:none;margin:0;background:rgba(0,0,0,0);z-index:1;outline:none;min-width:12.5rem;width:100%}.bal-input-slider__input__native::-webkit-slider-runnable-track{width:100%;cursor:pointer;border:none}.bal-input-slider__input__native::-webkit-slider-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none}.bal-input-slider__input__native:focus-visible{outline:none}.bal-input-slider__input__native:focus-visible::-webkit-slider-thumb,.bal-input-slider__input__native:focus-visible::-moz-range-thumb{height:1.5rem;width:1.5rem;background:var(--bal-color-white);border:4px solid var(--bal-color-primary);box-shadow:0 0 0 .75rem rgba(255,255,255,.3);outline:none;position:relative}.bal-input-slider__input__native::-moz-range-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-moz-range-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:.625rem;width:.625rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer}.bal-input-slider__input__native::-ms-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-ms-fill-lower{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-fill-upper{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none;z-index:2}.bal-input-slider__input__native:focus::-ms-fill-lower{background:rgba(0,0,0,0)}.bal-input-slider__input__native:focus::-ms-fill-upper{background:rgba(0,0,0,0)}.bal-input-slider__input__native--disabled::-webkit-slider-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-ms-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-moz-range-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__steps{display:flex;flex:1;min-height:.5rem;margin:-0.625rem .5rem;justify-content:space-between}.bal-input-slider__steps__item{width:.125rem;border-radius:var(--bal-radius-rounded);background-color:var(--bal-color-primary)}.bal-input-slider__steps__item--disabled{background:var(--bal-color-grey-4)}@-moz-document url-prefix(){.bal-input-slider__steps{margin:0 .5rem !important}}
+.bal-input-slider{display:block;position:relative;width:100%;flex:1;font-family:var(--bal-font-family-text);flex-direction:column;min-height:3rem}.bal-input-slider__background{position:absolute;top:1rem;left:0px;right:0px;z-index:0;border-radius:var(--bal-radius-rounded);background:var(--bal-color-green);height:1rem;width:100%;overflow:hidden}.bal-input-slider__background__upper,.bal-input-slider__background__lower{position:absolute;top:0;width:50%;margin:0;cursor:pointer}.bal-input-slider__background__upper>div,.bal-input-slider__background__lower>div{height:1rem;border-radius:0}.bal-input-slider__background__upper{right:0px}.bal-input-slider__background__upper>div{background:var(--bal-color-green);border-top-right-radius:var(--bal-radius-rounded);border-bottom-right-radius:var(--bal-radius-rounded)}.bal-input-slider__background__lower{left:0px}.bal-input-slider__background__lower>div{background:var(--bal-color-green-5);border-top-left-radius:var(--bal-radius-rounded);border-bottom-left-radius:var(--bal-radius-rounded)}.bal-input-slider__background--disabled{cursor:default;pointer-events:none;background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__upper__inner{background:var(--bal-color-grey-2)}.bal-input-slider__background--disabled .bal-input-slider__background__lower__inner{background:var(--bal-color-grey-4)}.bal-input-slider__input{display:flex;flex:1;min-height:3rem}.bal-input-slider__input__native{-webkit-appearance:none;margin:0;background:rgba(0,0,0,0);z-index:1;outline:none;min-width:12.5rem;width:100%}.bal-input-slider__input__native::-webkit-slider-runnable-track{width:100%;cursor:pointer;border:none}.bal-input-slider__input__native::-webkit-slider-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none}.bal-input-slider__input__native:focus-visible{outline:none}.bal-input-slider__input__native:focus-visible::-webkit-slider-thumb{height:1.5rem;width:1.5rem;background:var(--bal-color-white);border:4px solid var(--bal-color-primary);box-shadow:0 0 0 .75rem rgba(255,255,255,.3);outline:none;position:relative}.bal-input-slider__input__native:focus-visible::-moz-range-thumb{height:1.5rem;width:1.5rem;background:var(--bal-color-white);border:4px solid var(--bal-color-primary);box-shadow:0 0 0 .75rem rgba(255,255,255,.3);outline:none;position:relative}.bal-input-slider__input__native::-moz-range-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-moz-range-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:.625rem;width:.625rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer}.bal-input-slider__input__native::-ms-track{cursor:pointer;box-shadow:none;background:rgba(0,0,0,0);width:100%;border:none;z-index:2}.bal-input-slider__input__native::-ms-fill-lower{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-fill-upper{background:rgba(0,0,0,0);border:none;box-shadow:none}.bal-input-slider__input__native::-ms-thumb{box-shadow:none;border:3px solid var(--bal-color-white);height:1rem;width:1rem;border-radius:var(--bal-radius-rounded);background:var(--bal-color-primary);cursor:pointer;-webkit-appearance:none;z-index:2}.bal-input-slider__input__native:focus::-ms-fill-lower{background:rgba(0,0,0,0)}.bal-input-slider__input__native:focus::-ms-fill-upper{background:rgba(0,0,0,0)}.bal-input-slider__input__native--disabled::-webkit-slider-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-ms-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__input__native--disabled::-moz-range-thumb{background:var(--bal-color-grey-5)}.bal-input-slider__steps{display:flex;flex:1;min-height:.5rem;margin:-0.625rem .5rem;justify-content:space-between}.bal-input-slider__steps__item{width:.125rem;border-radius:var(--bal-radius-rounded);background-color:var(--bal-color-primary)}.bal-input-slider__steps__item--disabled{background:var(--bal-color-grey-4)}@-moz-document url-prefix(){.bal-input-slider__steps{margin:0 .5rem !important}}

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

@@ -146,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: '76a874cb519b6bd4533c90c5cee0373d91d2a788', 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: '96acc0eac152e6210127e7bb32ebb44bccbe7983', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: 'd1d1bab7ca84c5c958bb0a758cdf021f45d0fab6', class: Object.assign({}, backgroundUpperEl.class()), style: {
+        return (h(Host, { key: 'ced88f04a8412d9c00f64f4a588259083d9986b2', 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: 'ec99e4442438f51fb47e6ee7da080649c4ec9ebb', class: Object.assign(Object.assign({}, backgroundEl.class()), backgroundEl.modifier('disabled').class(this.disabled || this.readonly)) }, h("div", { key: '4afda06efc6af4a027ef6291b4ad5cc3af3a1c70', class: Object.assign({}, backgroundUpperEl.class()), style: {
                 width: this.cssWidth(),
-            } }, h("div", { key: '7022454f465e51e0d51d558adb171a04125ba582', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: '472ab3557e08aad85269135dbdfe08343dec88bd', class: Object.assign({}, backgroundLowerEl.class()), style: {
+            } }, h("div", { key: '1cdfcacd60179c9b7cb2a4cb2f8cc265b9ff3bf9', class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { key: 'b78eb2d0286cccd8394bcb460f7fd9cbc66124fc', class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, h("div", { key: '460bb1a8e2365ba86716907242f25ea556c004d6', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: '35f2bcd367d3e87e05aad0eaa56b63df2b527600', class: Object.assign({}, inputEl.class()) }, h("div", { key: '19970b7d9e3d4afc88f0c27bd7611e20e8027534', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: 'ce79d94c762e757792fad5a4579353e49d98430a', 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: 'd8ed5d39304aea0b6fdc356cf170709b7edb1d29', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: 'd7e74cad2baa2019ed915e50e1852e733dc14328', 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: 'bf7c89eeeb25df825521a0462e070dccd65df7dc', class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { key: 'f3d7033c33b696170c85a1bc6a4f0557eed2a45f', class: Object.assign({}, inputEl.class()) }, h("div", { key: '237300025fdb1ea927bf9ba2d79f908735b7b0d5', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { key: '7437e049efcf5cac5fb2d1d107b9696afd745ed8', 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: '17bdbd21ccb347ab53f9fb117156a0b1cc881791', class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { key: 'd4f74ee7793bf63c96bd272774bcbbdef0bdcaeb', 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

@@ -130,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: 'a52588a51f04e1b7925242b7dee94ab08ebffd4f', "aria-disabled": ariaBooleanToString(this.disabled), "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '15cecc65684df7ef715555044d9688cd36a4ad60', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: '77421c0eed9fe7a077450843fb0dbf9e8c66254a', aria: {
+        return (h(Host, { key: 'cfa84687c890114f02d591a21a46a07661469a48', "aria-disabled": ariaBooleanToString(this.disabled), "aria-focused": this.focused ? 'true' : null, class: Object.assign({}, block.class()) }, h("div", { key: '5335fcef9736cd54bc837ec55ab8431aac73ad49', class: Object.assign({}, elInner.class()) }, h("bal-button", { key: 'd38eb81f66d7c5ddda78c46fd4f7a761c1b118b9', 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: '5bb820b9c38a797f654d952f13016bf6aeeae67d', 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: '1898a8009c699fa46d00f19c3d5d20f809dd20bb', 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: 'b04e1e5118df414fe27ad18b27c63f9d1f8296c4', 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: '72d30a316782c5a7b2a3b024ae6b1d0b2dddf218', 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: 'bde3449a7db9d1d51bbe991e1343a389c21dae0d', 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))));
+            }, 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: 'fc24fd180574bc350584e3375682a079278362ec', 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: '34631412474f531a869087b4102e740e58078b50', class: Object.assign({}, block.class()) }, h("label", { key: '7ea143eca5e46761a69e626065269180491c9684', 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: 'aed679957f7e593ba3d129b9f00f93645aec9577' }), suffix)));
+        return (h(Host, { key: 'e37870aea60fa79ccd0ed4c451168dc2d652cec5', class: Object.assign({}, block.class()) }, h("label", { key: '6c910f7122615d7308dd3825c18d1864aec939f8', 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: '761ec8b3d47ea0822216af9e93cee3a1bdbb67bd' }), suffix)));
     }
     static get is() { return "bal-label"; }
     static get originalStyleUrls() {

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: 'e6960b64c93e69db55c2e65b2c61f22c04db55f1', class: {
+        return (h(Host, { key: '753736cc273f562a957f83b78ddcf3c46d96c3c2', class: {
                 'bal-list__item__content': true,
                 [`bal-list__item__content--${this.contentAlignment}`]: this.contentAlignment !== undefined,
-            } }, h("slot", { key: '4aade21aa78b7db07f4345fafc1b191fe783add6' })));
+            } }, h("slot", { key: 'a039d83497e2981173d0cea77227ec9eb58d8b9b' })));
     }
     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: 'f671a69a39564ee0b03422d3f3502d98fbecacbd', class: {
+        return (h(Host, { key: 'a260b7e90eb381a23de3181688a8445eed735701', class: {
                 'bal-list__item__icon': true,
                 'bal-list__item__icon--right': this.right,
-            } }, h("slot", { key: 'fc26e2dede7c6aec3cf9f2e6d6df5c42d4901d15' })));
+            } }, h("slot", { key: '9b34490944c48da6666883e7b7d4cb0ec6097e53' })));
     }
     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: 'a280cf7bf44a08047d371b5fc7aa5783ef681470', class: "bal-list__item__subtitle" }, h("slot", { key: '2a1c215ec3fe1d0ce38bb05fb4875f31dbb386e1' })));
+        return (h(Host, { key: 'aed0f61d51b0f2822432686915a0072320ba29d7', class: "bal-list__item__subtitle" }, h("slot", { key: '14bfb0cb477c8da62cef9ff2c51a7216462eb3de' })));
     }
     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: 'ac2a175360912da9d6ed64bfa3878040eefa9bb5', class: "bal-list__item__title" }, h("bal-heading", { key: '2e087de8fa14195b169a6c82fa23927b82c26b6d', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: '342f827ec168778d26c84e35e7118f5898ece9cb' }))));
+        return (h(Host, { key: 'b2afc2dad242ca699ed349d5767d66f2451486e1', class: "bal-list__item__title" }, h("bal-heading", { key: '38f5855e07ff971dc31ad56a6db20936f3825c02', level: this.level, visualLevel: this.visualLevel, space: "none" }, h("slot", { key: '032e327a6ad730378710bb8cd5ebe4ae0506665e' }))));
     }
     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: '3c54368bcf034dac4872b394740a373c38005c10', 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: '6d03491580aa8ec3db152ad67e988280cf21ca9f' })));
+        return (h(Host, { key: '66f8d907d203b0c270d1ad17780ba39fd38f3f76', 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: 'b518539637ca819f4cfc60c24571ec77c5c85ff1' })));
     }
     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: '3c895128a0fd7d948de71f4d95a002a3feb5fe57', class: "bal-modal__body" }, h("slot", { key: '3295eac615894ef69b17ac7e9d48f3ff621385da' })));
+        return (h(Host, { key: '2bef5892f7f6e90bb4c893f4c5ca5027dece343a', class: "bal-modal__body" }, h("slot", { key: '45b45f4141bd105c11f57628e6ea2ba989ef1a55' })));
     }
     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: '0489abea9bae77bf1e134362a19f28781108db5e', class: "bal-modal__header" }, h("div", { key: 'f560349556bcc00713544345d456f6b465d1935c', class: "bal-modal__header__title" }, h("bal-heading", { key: '7f0a4df6358cf0b7ae464d4e2965b64e8d169efc', level: "h2", space: "none" }, h("slot", { key: 'b6a1f74aeca6d9883c5520d9d3ac2e5cbb7b49a2' }))), ((_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: 'abcecb921453f0ec9ff5b989517ca1b1406daab0', class: "bal-modal__header" }, h("div", { key: '6e4606402740673c455e98c4f4160e17f82d0435', class: "bal-modal__header__title" }, h("bal-heading", { key: 'bf7df5c6677354f5c53b75d77fb8b7f23859f267', level: "h2", space: "none" }, h("slot", { key: '78648da85f2751f9aac04544083d62ba088beeae' }))), ((_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

@@ -183,17 +183,17 @@ export class Modal {
         return false;
     }
     render() {
-        return (h(Host, { key: '667cc09e4998cc5869da604116f6a53fe8f7b2fd', "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: {
+        return (h(Host, { key: '1d9ab99326366d164adf6fbd5fc9d6af27a8ba58', "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: '5b7a948469eafcc7997672721b6b5a12f6190256', class: {
+            } }, h("div", { key: '057c4355168926825f04f51300478a1393b31563', class: {
                 'bal-modal__background': true,
                 'is-hidden': !this.hasBackdrop,
-            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: '59f9cee78fdea711e0177fa51cb9d61ea7fda48d', class: {
+            }, ref: div => (this.modalBackgroundElement = div) }), h("div", { key: 'ffa93ee6d43b8ded4a2851e4c2578fce427de8c2', class: {
                 'bal-modal__container': true,
-            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '956925a0d9e32394f4a7f79bf868cff3f5e874c7', class: {
+            }, ref: div => (this.modalContainerElement = div) }, h("div", { key: '37ee9d19563be8e0a22b75d44b0cde5890342e1c', class: {
                 'bal-modal__content': true,
                 [`bal-modal__content--has-spacing-${this.space}`]: true,
-            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '410d120f1a9b2af8dbf2560ef73d87a4648b9570' })))));
+            }, ref: div => (this.modalContentElement = div) }, h("slot", { key: '0bdfc5b5e268ec2ade1b70753cd64517fa635290' })))));
     }
     static get is() { return "bal-modal"; }
     static get originalStyleUrls() {

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

@@ -7,6 +7,7 @@ export class NavLink {
         this.variant = '';
         this.selected = false;
         this.clickable = false;
+        this.rel = undefined;
         this.href = undefined;
         this.target = '_self';
     }
@@ -19,18 +20,18 @@ export class NavLink {
      */
     render() {
         const block = BEM.block('nav-link');
-        const { href, target } = this;
+        const { href, target, rel } = this;
         const hasLink = href !== undefined && href !== '';
         const hasVariant = this.variant !== '';
         const Link = hasLink ? 'a' : this.clickable ? 'button' : 'span';
         let linkAttributes = {};
         if (hasLink) {
-            linkAttributes = { href, target };
+            linkAttributes = { href, target, rel };
         }
-        return (h(Host, { key: '0a4cc0341e4aa5e2d5e8277eb89fb2678dcc03dc', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: '662178959afa6596e0e9f89bb4a9fdd5c608277d', "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: 'fe011833d71cd4fc35585f27ee3cb8fe11dadfb8', class: Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class(hasVariant)) }, h(Link, Object.assign({ key: 'e5175d94a5b5021e22b26116f36aba0bb28a9dcf', "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: '055e0eac728e115ba335c8b54c14b59572161444' }))));
+                .class(this.selected && (hasLink || this.clickable))) }, linkAttributes), h("slot", { key: '9189d57ba3a0f78af5c2ac4232c9231d6096ae02' }))));
     }
     static get is() { return "bal-nav-link"; }
     static get originalStyleUrls() {
@@ -110,6 +111,25 @@ export class NavLink {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "rel",
+                "reflect": false
+            },
             "href": {
                 "type": "string",
                 "mutable": false,

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: '74041f35372c9f2e7fdf95e62264fea35c4821a7', class: Object.assign({}, block.class()) }, h("slot", { key: '4f671f702bcb4910ccf31e6197970bdfa943424e' })));
+        return (h(Host, { key: '7e58a9b6c677d60837d56404af5f6b03a7d96073', class: Object.assign({}, block.class()) }, h("slot", { key: '4e7abb8d92056b3f99b42ebad4c1d7752cffca4e' })));
     }
     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: '3108a6561188ed77091b569d6e14160796e3dcf6', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '4a328de41e4e38eeafef399b59ced751d247e8ba', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'c42ced5cc61dc8182991b32eba3b4edd0661bd46' }))));
+        return (h(Host, { key: 'b4cba3fc9a569b19d2921f0f728d8865b97ccd55', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-static').class(this.staticCol)) }, h("div", { key: '36c2d569a02ea2dc1adb8ecedaab21576f61c0dc', class: Object.assign({}, innerEl.class()) }, h("slot", { key: 'c99e184492ca2665cdebad028cd3ab3e97d3249a' }))));
     }
     static get is() { return "bal-nav-link-grid-col"; }
     static get originalStyleUrls() {

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

@@ -16,7 +16,7 @@ export class NavLinkGroup {
     render() {
         const block = BEM.block('nav-link-group');
         const hasColor = this.color !== '';
-        return (h(Host, { key: 'b7224f7859d490b219fcdfadd2c4c33170fb07f2', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: 'd7054bf0d35e99ec9e54edcf3f2b8878c87ac5df' })));
+        return (h(Host, { key: '12c1c4d22dc3827a4c186c6591b7b043f1dd378b', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.color}`).class(hasColor)) }, h("slot", { key: '0c503bfaa7b2587f50936cc3d699e5a1bd9995a7' })));
     }
     static get is() { return "bal-nav-link-group"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-nav/bal-nav-menu-bar/bal-nav-menu-bar.js

@@ -26,7 +26,7 @@ export class NavMenuBar {
     render() {
         const block = BEM.block('nav-menu-bar');
         const innerBlock = block.element('inner');
-        return (h(Host, { key: 'a563dcfc6d647f400c20b13df79820c0ce88ea19', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { key: 'ec04e09581a0efd9029e20960fd340210cd4a773', class: Object.assign({}, innerBlock.class()) }, h("div", { key: 'de47464fad24e5ed10ac355fdaac926abcc7583c', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'a9624e3e83245fcddd0be123b0268b5ca0175041' })))));
+        return (h(Host, { key: 'c2ea73c8876d06127c4fee24edf6a2ecc623f199', id: this.navMenuBarId, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')), block.modifier(`position-${this.position}`).class(this.position !== 'none')) }, h("div", { key: 'd59d5d00f628748b91964b61692cca01d609a005', class: Object.assign({}, innerBlock.class()) }, h("div", { key: '3afd6861fef7c4d6e2b3d41bd7e626daa4aa06b1', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '380e064513ba797a10145e73bdc76dfe81dafaf6' })))));
     }
     static get is() { return "bal-nav-menu-bar"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.js

@@ -50,7 +50,7 @@ export class NavMenuFlyout {
     render() {
         const block = BEM.block('nav-menu-flyout');
         const line = block.element('line');
-        return (h(Host, { key: 'cc30e95d5a4f6037371cf4158a11b2ba832e98e0', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: 'c28934d355eda16304e02820fb85f373c8e7aaa1', class: Object.assign({}, line.class()) }), h("div", { key: '0dd9801e8bc0dc277251b353b2efe78f5499dd15', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '3d0e74c391e039a205ae77710151d03e8c94620f' }))));
+        return (h(Host, { key: '9d0c52ef158adb1dcdddff70f32c0b4846696577', id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, h("div", { key: '3405126297ac245862a006b2fd83f147e615d001', class: Object.assign({}, line.class()) }), h("div", { key: '2a8707468c3e6886dd91e6cf792de8e0e0f97aa9', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '7c98fd49abc6e6f3ff3e2dffd49f4ec69df72788' }))));
     }
     static get is() { return "bal-nav-menu-flyout"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.js

@@ -57,7 +57,7 @@ export class NavMetaBar {
      */
     render() {
         const block = BEM.block('nav-meta-bar');
-        return (h(Host, { key: '700eeb85fa353dc0059dd1b1d3e2e1bb58c3a381', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: '880efb6d57db1adb168e312c75f0bf0acdb54c6b', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: 'e2de7fdbd8e7ef205dc22bb23f9bcdb83c808add' }))));
+        return (h(Host, { key: 'c7aa3ccfe8e8b41e12c2e625eac9d23aba77ded3', id: this.navMetaBarId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`variant-${this.variant}`).class()), block.modifier(`size-${this.size}`).class()), block.modifier(`position-${this.position}`).class(this.position !== 'none')), block.modifier(`hidden-mobile`).class(this.invisible === 'mobile')), block.modifier(`hidden-tablet`).class(this.invisible === 'tablet')) }, h("div", { key: '0ad94b6ef1580bb8ae907d0ebe53721c32cee0f8', class: Object.assign({}, block.element('container').class()) }, h("slot", { key: '9cebb426b75f0d2cd743aa9e0efc26d1c584768c' }))));
     }
     static get is() { return "bal-nav-meta-bar"; }
     static get originalStyleUrls() {

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

@@ -1,61 +1,71 @@
 export const i18nNavBars = {
     de: {
-        meta: 'Hauptnavigation',
-        main: 'Subnavigation',
+        mainNavigation: 'Hauptnavigation',
+        navigation: 'Navigation',
+        subNavigation: 'Subnavigation',
         open: 'Menü öffnen',
         close: 'Menü schliessen',
     },
     en: {
-        meta: 'Main Navigation',
-        main: 'Sub Navigation',
+        mainNavigation: 'Main navigation',
+        navigation: 'Navigation',
+        subNavigation: 'Sub navigation',
         open: 'Open Menu',
         close: 'Close Menu',
     },
     fr: {
-        meta: 'Navigation principale',
-        main: 'Sous-navigation',
+        mainNavigation: 'Navigation principale',
+        navigation: 'Navigation',
+        subNavigation: 'Sous-navigation',
         open: 'Ouvrir le menu',
         close: 'Fermer le menu',
     },
     it: {
-        meta: 'Navigazione principale',
-        main: 'Sottomenu',
+        mainNavigation: 'Navigazione principale',
+        navigation: 'Navigazione',
+        subNavigation: 'Sottonavigazione',
         open: 'Apri Menù',
         close: 'Chiudi menù',
     },
     nl: {
-        meta: 'Hoofdnavigatie',
-        main: 'Subnavigatie',
+        mainNavigation: 'Hoofdnavigatie',
+        navigation: 'Navigatie',
+        subNavigation: 'Subnavigatie',
         open: 'Menu openen',
         close: 'Menu sluiten',
     },
     es: {
-        meta: 'Navegación principal',
-        main: 'Subnavegación',
+        mainNavigation: 'Navegación principal',
+        navigation: 'Navegación',
+        subNavigation: 'Subnavegación',
         open: 'Menú abierto',
         close: 'Cerrar menú',
     },
     pl: {
-        meta: 'Nawigacja główna',
-        main: 'Nawigacja podrzędna',
+        mainNavigation: 'Nawigacja główna',
+        navigation: 'Nawigacja',
+        subNavigation: 'Nawigacja podrzędna',
         open: 'Otwórz menu',
         close: 'Zamknij menu',
     },
     pt: {
-        meta: 'Navegação principal',
-        main: 'Subnavegação',
+        mainNavigation: 'Navegação principal',
+        navigation: 'Navegação',
+        subNavigation: 'Subnavegação',
         open: 'Menu aberto',
         close: 'Fechar menu',
     },
     sv: {
-        meta: 'Huvudnavigering',
-        main: 'Undernavigering',
+        mainNavigation: 'Huvudnavigering',
+        navigation: 'Navigering',
+        subNavigation: 'Undernavigering',
         open: 'Öppna menyn',
         close: 'Stäng menyn',
     },
     fi: {
-        meta: 'Päänavigointi',
-        main: 'Alinavigointi',
+        mainNavigation: 'Päänavigaatio',
+        navigation: 'Navigaatio',
+        subNavigation: 'Alinavigaatio',
         open: 'Avaa valikko',
         close: 'Sulje valikko',
     },

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

@@ -277,17 +277,17 @@ export class Nav {
         const block = BEM.block('nav');
         const flyoutBlock = block.element('flyout');
         this.hasRenderedWithFlyoutActive = this.isFlyoutActive;
-        return (h(Host, { key: '4d861d5a9beb8d5a0ac04a0471f0d5f49f8f4d27', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: 'cda5b1e8f0da114d3056b4f3a9d2d5a740ceb1c9', class: {
+        return (h(Host, { key: 'c384e25a9962ec11739b7594114d2ad19fd07937', id: this.navId, class: Object.assign({}, block.class()) }, h("div", { key: '06cf6bb549c278c98b41ef3d176ac58dfe95bacc', class: {
                 'bal-nav-meta-bar-transform': true,
                 'bal-nav-meta-bar-transform-touch': this.isTouch,
-            } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, "aria-label": i18nNavBars[this.language].meta, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
+            } }, this.isDesktop ? (h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, "aria-label": i18nNavBars[this.language].mainNavigation, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
             flyoutId: `${this.navId}-menu-flyout`,
-        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].main }, (_a = this.linkItems
+        })))) : (h("span", null)), h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue, "aria-label": i18nNavBars[this.language].navigation }, (_a = this.linkItems
             .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map(item => item.render({
             flyoutId: `${this.navId}-menu-flyout`,
             onClick: () => this.onMenuBarTabChange(item.value),
-        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
-            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '9159bbd2df222728e0249283ab2cc61425aefd22' }, h("slot", { key: '7af191383a98cfa549796c43c9b1034a6de2b83d' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
+        })))), this.isFlyoutActive ? (h("bal-nav-menu-flyout", { navId: this.navId, "aria-label": i18nNavBars[this.language].subNavigation }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
+            _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), h("div", { key: '7b17b61ea275f90fb5016d8ec0d26dece26caa4f' }, h("slot", { key: '8ae80d7fdacd29e171f136bfe3ace823290ff068' }))), this.isTouch ? (h("bal-nav-meta-bar", { variant: "white", size: "normal" }, h("bal-stack", { space: "auto" }, this.renderLogo(), h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
             activeMetaLinkValue: this.activeMetaLinkValue,
             activeMenuLinkValue: this.activeMenuLinkValue,
         })))))) : (''), this.isTouch && this.isFlyoutActive ? (h("bal-nav-meta-bar", { variant: "grey", size: "normal" }, h("bal-stack", { space: "x-small", align: "center" }, this.metaButtons.map(button => button.renderAtTouchBottomMetaBar())))) : ('')));