@baloise/ds-core 18.1.0 → 18.2.0-nightly.20250327

package/dist/collection/components/bal-nav/models/bal-nav-section-link-item.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
-import { NavLinkItem } from "./bal-nav-link-item";
 import { BEM } from "../../../utils/bem";
+import { NavLinkItem } from "./bal-nav-link-item";
 export class NavSectionLinkItem extends NavLinkItem {
     constructor(item, observer) {
         super(item, observer);
@@ -19,7 +19,7 @@ export class NavSectionLinkItem extends NavLinkItem {
     renderTouch(_context) {
         const block = BEM.block('nav');
         const hasItems = this.linkItems && this.linkItems.length > 0;
-        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
+        return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-section-item').class()), block.element('mobile-section-item').modifier('selected').class(this.active)), block.element('mobile-section-item').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
     }
     render(_context) {
         return (h("bal-nav-link-group", { role: "list" }, h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label), this.linkItems.map(item => item.render())));

package/dist/collection/components/bal-nav/models/bal-nav-service-link-item.js

@@ -17,7 +17,7 @@ export class NavServiceLinkItem extends NavLinkItem {
     renderTouch(_context) {
         const block = BEM.block('nav');
         const hasItems = this.linkItems && this.linkItems.length > 0;
-        return (h("li", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('mobile-service-item').class()), block.element('mobile-service-item').modifier(`color-${this.color}`).class()), block.element('mobile-service-item').modifier('selected').class(this.active)), block.element('mobile-service-item').modifier('clickable').class(this.clickable)) }, h("a", { id: this.id, href: this.href, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
+        return (h("li", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('mobile-service-item').class()), block.element('mobile-service-item').modifier(`color-${this.color}`).class()), block.element('mobile-service-item').modifier('selected').class(this.active)), block.element('mobile-service-item').modifier('clickable').class(this.clickable)) }, h("a", { id: this.id, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label), hasItems ? (h("ul", { class: Object.assign({}, block.element('mobile-links-list').class()) }, this.linkItems.map(item => item.renderTouch()))) : ('')));
     }
     render(_context) {
         return (h("bal-nav-link-group", { color: this.color, role: "list" }, h("bal-nav-link", { role: "listitem", variant: "title", href: this.href, target: this.target, selected: this.active, onClick: ev => this.onClick(ev) }, this.label), this.linkItems.map(item => item.render())));

package/dist/collection/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.js

@@ -1,17 +1,18 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
-import { BalScrollHandler } from "../../../utils/scroll";
 import { balBrowser } from "../../../utils/browser";
+import { defaultConfig, ListenToConfig } from "../../../utils/config";
 import { wait } from "../../../utils/helpers";
+import { BalScrollHandler } from "../../../utils/scroll";
 import { i18nBalNavbarBrand } from "./bal-navbar-brand.i18n";
-import { defaultConfig, ListenToConfig } from "../../../utils/config";
 export class NavbarBrand {
     constructor() {
         this.bodyScrollHandler = new BalScrollHandler();
         this.language = defaultConfig.language;
         this.isMenuActive = false;
         this.href = '';
+        this.rel = undefined;
         this.logoClickable = false;
         this.logoLabel = undefined;
         this.target = '_self';
@@ -74,7 +75,7 @@ export class NavbarBrand {
         const navbarBrandEl = BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
         const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
-        return (h(Host, { key: '68848bc9042cea0a8da2368dce7bddb8ffa349f1', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '048af402cdd3bd273b62373dd9b99cbf1f744c56', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: 'e03caae5038304a1513400972c36e2eb2e8981a6' })), h("bal-button", { key: 'c9aa9ea6503771f47fa7fd6e6f12cb0030903a86', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: '89cac098cf15e08c2d48748b6eb2cc184ed57292', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'b5807bd115fe7e7d5f75a7d319b810ad33c1db39', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '14741534401ef235bee19db0d4aead5ec437c501' })), h("bal-button", { key: '9104e683dd114554c8ec84f4b20abd13e2c77dfe', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));
@@ -102,6 +103,25 @@ export class NavbarBrand {
                 "reflect": false,
                 "defaultValue": "''"
             },
+            "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
+            },
             "logoClickable": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -170,7 +170,7 @@ export class Select {
     updateRawValue(newValue, isHuman = true) {
         if (!areArraysEqual(newValue, this.rawValue || [])) {
             this.rawValue = [...newValue];
-            this.syncNativeInput();
+            this.syncNativeInput(isHuman);
             if (this.didInit && isHuman === true) {
                 if (this.multiple) {
                     if (isNil(this.rawValue)) {
@@ -631,7 +631,7 @@ export class Select {
             this.updateRawValue(newRawValue, isHuman);
         }
     }
-    syncNativeInput() {
+    syncNativeInput(isHuman = true) {
         if (!this.multiple) {
             if (length(this.rawValue) > 0) {
                 const valuesArray = getValues(this.rawValue);
@@ -641,9 +641,9 @@ export class Select {
                 }
                 return this.updateInputValue(label);
             }
-            else {
-                return this.updateInputValue('');
-            }
+        }
+        if (!isHuman && length(this.rawValue) === 0) {
+            return this.updateInputValue('');
         }
         return Promise.resolve();
     }
@@ -684,7 +684,7 @@ export class Select {
      */
     render() {
         var _a;
-        const Chip = (props) => (h("bal-tag", { key: '7533b62273766a103266239b7ca7388a29a7ca2c', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
+        const Chip = (props) => (h("bal-tag", { key: '5bcf5db754537ec86b2c332f2c63ae1d28f04f98', size: "", closable: !this.disabled, disabled: this.disabled, invalid: this.invalid, tabindex: -1, onBalCloseClick: _ => this.removeValue(props.value), "data-testid": "bal-select-chip" }, findLabelByValue(this.options, props.value) || props.value));
         const valuesArray = getValues(this.rawValue);
         const block = BEM.block('select');
         const nativeEl = block.element('native');
@@ -698,19 +698,19 @@ export class Select {
         const optionContentEl = optionEl.element('content');
         const optionContentCheckboxEl = optionContentEl.element('checkbox');
         const optionContentLabelEl = optionContentEl.element('label');
-        return (h(Host, { key: '2b5f68df5724be552d0e52b80e3f2f3cf4904904', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: '86217a832be6b5b4ffe4e624082cc7f21dd92c93', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: 'b051798999057bd3d58279b2bdae7a2e66f1f8c5', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '6a2201296c6937a30aa176899d6774878728b096', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '21306e3a37d4e5ac70a0487c704455ab76d90873', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
+        return (h(Host, { key: '8a2ed44d1007220a11cba788bc215e07417797f8', role: "listbox", onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), "data-value": (_a = this.rawValue) === null || _a === void 0 ? void 0 : _a.map(v => findLabelByValue(this.options, v)).join(','), class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('inverted').class(this.inverted)), block.modifier('inverted-footer').class(this.inverted)) }, h("select", { key: 'b9605f9d566c9b5637dc4fed4a49370e04ce238b', class: Object.assign({}, nativeEl.class()), name: this.name, multiple: this.multiple, required: this.required, tabindex: -1, ref: el => (this.nativeSelectEl = el) }, valuesArray.map((value) => (h("option", { key: value, value: value, selected: true }, value)))), h("bal-popover", { key: '2116e76113fb0cd238e6a1b7a551c1e45c8cee47', onBalChange: this.handlePopoverChange, ref: el => (this.popoverElement = el) }, h("div", { key: '7d77bf05a11bdf40b06732099f21fb4eb151ed52', "bal-popover-trigger": true, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, controlEl.class()), controlEl.modifier('invalid').class(this.invalid)), controlEl.modifier('disabled').class(this.disabled || this.readonly)), controlEl.modifier('focused').class(this.isPopoverOpen)), controlEl.modifier('inverted-footer').class(this.inverted)) }, h("div", { key: '5a52ce88c32363ea2c69e3b4008568674f9040b2', class: Object.assign(Object.assign({}, controlSelectionsEl.class()), controlSelectionsEl
                 .modifier('clickable')
                 .class(!this.isPopoverOpen && !this.disabled && !this.readonly)), onClick: this.handleInputClick, ref: el => (this.selectionEl = el) }, valuesArray
             .filter(_ => this.multiple)
-            .map((value) => (h(Chip, { value: value }))), h("input", { key: '1225023645508847339dd1fbd6815771fd52b923', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), 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-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
+            .map((value) => (h(Chip, { value: value }))), h("input", { key: '1329705b31e8846d7c8cad7736204575d2bb68a6', type: "text", class: Object.assign(Object.assign({}, controlInputEl.class()), { 'input': true, 'is-inverted': this.inverted, 'is-danger': this.invalid, 'is-disabled': this.disabled || this.readonly, 'is-clickable': !this.isPopoverOpen && !this.disabled && !this.readonly, 'data-test-select-input': true }), 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-select-input", autocomplete: this.autocomplete, "aria-autocomplete": this.autocomplete === 'off' ? 'none' : null, placeholder: this.inputPlaceholder, readonly: !this.typeahead || this.disabled || this.readonly, contentEditable: this.typeahead, disabled: this.disabled, maxLength: this.maxLength, tabindex: this.balTabindex, onInput: this.handleInput, onClick: this.handleInputClick, onChange: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onKeyPress: this.handleKeyPress, ref: el => (this.inputElement = el) })), !this.freeSolo && !this.loading ? (h("bal-icon", { class: Object.assign(Object.assign(Object.assign({}, controlIconEl.class()), controlIconEl.modifier('loading').class(this.loading)), controlIconEl.modifier('clickable').class(!this.disabled && !this.readonly)), name: !this.inverted ? 'caret-down' : 'caret-up', color: this.disabled || this.readonly
                 ? 'grey-light'
                 : this.inverted
                     ? 'white'
                     : this.invalid
                         ? 'danger'
-                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: 'bf3bf117bda916e83f1c0429384ac4c810a7e766', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
+                        : 'primary', turn: this.isPopoverOpen, onClick: ev => this.handleInputClick(ev, true), size: !this.inverted ? '' : 'x-small' })) : ('')), h("bal-popover-content", { key: 'ecc1305ae4c29e9fd3d131e69dc781deb4bd4bdc', class: Object.assign({}, popoverContentEl.class()), scrollable: this.scrollable, spaceless: true, expanded: true }, this.optionArray.map((option, index) => (h("button", { key: option.value, type: "button", role: "option", id: option.id, "data-value": option.value, "data-label": option.label, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, optionEl.class()), optionEl
                 .modifier('selected')
-                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'bc03c95d90225dd34a7062113c2b58882f039ca9', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
+                .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple))), optionEl.modifier('focused').class(this.focusIndex === index)), optionEl.modifier('checkbox').class(this.multiple)), optionEl.modifier('disabled').class(option.disabled === true)), "data-testid": "bal-select-option", disabled: option.disabled, tabIndex: -1, onMouseEnter: () => this.handleOptionMouseEnter(index), onClick: () => this.optionSelected(option) }, h("div", { class: Object.assign({}, optionContentEl.class()) }, h("span", { class: Object.assign({}, optionContentCheckboxEl.class()), style: { display: this.multiple ? 'flex' : 'none' } }, h("bal-checkbox", { checked: valuesArray.includes(option.value), tabindex: -1, nonSubmit: true, flat: true, onBalChange: preventDefault })), h("span", { class: Object.assign({}, optionContentLabelEl.class()), innerHTML: option.innerHTML }))))), h("div", { key: 'c24a3bf08a3c8c5c403a8eab86ee2adce14f896f', class: Object.assign(Object.assign({}, popoverContentEmptyEl.class()), popoverContentEmptyEl
                 .modifier('hidden')
                 .class(this.noDataLabel === undefined || this.hasOptions() || !this.typeahead || this.selectionOptional)) }, this.noDataLabel)))));
     }

package/dist/collection/components/bal-stage/bal-stage-back-link/bal-stage-back-link.js

@@ -3,15 +3,16 @@ import { BEM } from "../../../utils/bem";
 export class StageBackLink {
     constructor() {
         this.href = undefined;
+        this.rel = undefined;
         this.shadow = false;
         this.inverted = false;
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: '694c383572bafaa4202bba16706281834fb48b2c', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'a8b7bc405efac0263298ed194ee0a90153b16a32', class: {
+        return (h(Host, { key: '5158c9c4cff372138c88a8af2997d6f85bd8d885', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: '205e1ae01e652fb595e088879287d9b25315b234', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href }, h("bal-icon", { key: '786b949805a3ae3c99bfc7c713bcd4d8872f94a5', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'e7c639e47c25370416eade21dd2e67f82588fe6b' }))));
+            }, href: this.href, rel: this.rel }, h("bal-icon", { key: 'db43094884a07ab6e079b3ac6f89d7c2f927b1b6', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'a680c6fac50060190d267890f6c7d7ccbec1f3f4' }))));
     }
     static get is() { return "bal-stage-back-link"; }
     static get properties() {
@@ -35,6 +36,25 @@ export class StageBackLink {
                 "attribute": "href",
                 "reflect": 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
+            },
             "shadow": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/bal-steps/bal-step-item/bal-step-item.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritTrackingAttributes } from "../../../utils/attributes";
 export class StepItem {
     constructor() {
@@ -8,6 +8,7 @@ export class StepItem {
         this.value = '';
         this.label = '';
         this.href = '';
+        this.rel = undefined;
         this.target = '_self';
         this.disabled = false;
         this.done = false;
@@ -35,6 +36,7 @@ export class StepItem {
             value: this.value,
             label: this.label,
             href: this.href,
+            rel: this.rel,
             target: this.target,
             active: this.active,
             disabled: this.disabled,
@@ -48,10 +50,10 @@ export class StepItem {
         };
     }
     render() {
-        return (h(Host, { key: '84503710841441b7a06efcdddd6c424ce2b59443', role: "tabpanel", class: {
+        return (h(Host, { key: '6d93a7d6ac124b26f15803167945b1316915f303', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: '3fa668162fb4bb1a96b1dc08352ade05c301f756' })));
+            } }, h("slot", { key: '563c4d2ea864f40885618e92743d44656d469067' })));
     }
     static get is() { return "bal-step-item"; }
     static get properties() {
@@ -136,6 +138,25 @@ export class StepItem {
                 "reflect": true,
                 "defaultValue": "''"
             },
+            "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
+            },
             "target": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/bal-steps/components/step-button.js

@@ -7,5 +7,5 @@ export const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) =>
     if (item.invisible) {
         return;
     }
-    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
+    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
 };