@baloise/ds-core 17.2.1 → 17.2.2

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

@@ -8,10 +8,10 @@ export class StageBackLink {
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: 'bc5906c288b5be99aba87a5c8b24773f8e980fe5', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'd3ee0d9c434e58bcfbf6b70355dfd5b96b5a0d4d', class: {
+        return (h(Host, { key: 'b759ddecb2f96b0a7c9b82935257270022c61221', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: '4e39e44fddadc8ddbee24642205ef827aa67bb46', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href }, h("bal-icon", { key: '9ea9ce3b98138878573dd43f43e174da381a5cf2', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '95ad39a717f47a0d02940a6b6f609ae90226cd76' }))));
+            }, href: this.href }, h("bal-icon", { key: '4f0f6b430046d3509c8c82c559aa01af3ff92340', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '7d689bca25898c187a5bbb507a1cecd18e17c46f' }))));
     }
     static get is() { return "bal-stage-back-link"; }
     static get properties() {
@@ -30,6 +30,8 @@ export class StageBackLink {
                     "tags": [],
                     "text": "Specifies the URL of the page the link goes to"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": false
             },
@@ -47,6 +49,8 @@ export class StageBackLink {
                     "tags": [],
                     "text": "If `true` adds a text shadow to improve readability on image background"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "shadow",
                 "reflect": false,
                 "defaultValue": "false"
@@ -65,6 +69,8 @@ export class StageBackLink {
                     "tags": [],
                     "text": "If `true` the color gets inverted for dark backgrounds"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -3,7 +3,7 @@ import { BEM } from "../../../utils/bem";
 export class StageBody {
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { key: '8d78c9777215c84373e246ae0495512137620d0c', class: Object.assign({}, block.class()) }, h("slot", { key: 'e866a1e129ad6c87567018a3538e526cc432bdcc' })));
+        return (h(Host, { key: 'ea116cb3554072981fe5ea1773ee1df1178c08a6', class: Object.assign({}, block.class()) }, h("slot", { key: '4b24bbf7b1503fd29d710722fbe697ae3a14f0ba' })));
     }
     static get is() { return "bal-stage-body"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-foot/bal-stage-foot.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class StageFoot {
     render() {
-        return (h(Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-foot" }, h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
+        return (h(Host, { key: '9217b4fe523082782e8c56466811e1ee452b2763', class: "hero-foot" }, h("slot", { key: '5ad55c58d8d833afee7889a2032891cb58631a1b' })));
     }
     static get is() { return "bal-stage-foot"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-head/bal-stage-head.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class StageHead {
     render() {
-        return (h(Host, { key: '1d3ba006d2d6aafe5795cdb2f59d9cb02822c927', class: "hero-head" }, h("slot", { key: '2c24fa40d9505b5b7b673d99d7b831161372e35b' })));
+        return (h(Host, { key: 'f42eb0dbf4d7459ecff34e7ef9d3669140f55da4', class: "hero-head" }, h("slot", { key: 'baf5b283e24d1d135686e32a9c2f8c7ead74bc52' })));
     }
     static get is() { return "bal-stage-head"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-image/bal-stage-image.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { inheritAttributes } from "../../../utils/attributes";
-import { rLCP } from "../../../utils/helpers";
+import { rOnLoad } from "../../../utils/helpers";
 export class StageImage {
     constructor() {
         this.imageInheritAttributes = {};
@@ -10,7 +10,7 @@ export class StageImage {
         this.fallback = undefined;
     }
     componentDidLoad() {
-        rLCP(() => {
+        rOnLoad(() => {
             this.isLargestContentfulPaintDone = true;
         });
     }
@@ -20,7 +20,7 @@ export class StageImage {
     render() {
         const block = BEM.block('stage-image');
         const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
-        return (h(Host, { key: 'fc6b85b3671ee0ef029f22d3e0468849cf09c3ac', class: Object.assign({}, block.class()) }, this.isLargestContentfulPaintDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
+        return (h(Host, { key: '36bdac6c98ff87bcacf59fd10eda53618bddb507', class: Object.assign({}, block.class()) }, this.isLargestContentfulPaintDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     static get is() { return "bal-stage-image"; }
     static get properties() {
@@ -39,6 +39,8 @@ export class StageImage {
                     "tags": [],
                     "text": "set of images to be used as background image"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "src-set",
                 "reflect": false
             },
@@ -56,6 +58,8 @@ export class StageImage {
                     "tags": [],
                     "text": "optional fallback image in case the srcSet fails"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fallback",
                 "reflect": false
             }

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

@@ -41,7 +41,7 @@ export class Stage {
     render() {
         const block = BEM.block('stage');
         const element = BEM.block('stage-content');
-        return (h(Host, { key: 'e24550c75ccbc228367fcfec8a24f1cc55101fc8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: 'd925080116d60d4891ac4e141e3d6fa68338aaa8', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'f4d2eb4d16600695f336b076c07518d553a93cdf' }), this.shape && (h("div", { key: 'cf059b309141555194945d62124437a3d90145f0', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: '99b25f746ad8858c885b6bf15df6246492b26b84', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (h(Host, { key: 'cebb6bb53e0d96094c6ddbd8e8cf1ce94ac3e24f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: '17310e9c145cd19b947c21a2ef10691eba42298d', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: '749e4985a3756ca02f309bf15a20c08854a873f7' }), this.shape && (h("div", { key: '0e9c6c1742114a042b4320048fca983b123029d6', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: '59810aca102e9beff8db9344d774cc29ac8aab3d', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
     static get is() { return "bal-stage"; }
     static get originalStyleUrls() {
@@ -75,6 +75,8 @@ export class Stage {
                     "tags": [],
                     "text": "Defines content width of the stage"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "container-size",
                 "reflect": false,
                 "defaultValue": "''"
@@ -98,6 +100,8 @@ export class Stage {
                     "tags": [],
                     "text": "Defines size of the stage"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "''"
@@ -121,6 +125,8 @@ export class Stage {
                     "tags": [],
                     "text": "Defines the background color of the stage section"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'purple'"
@@ -139,6 +145,8 @@ export class Stage {
                     "tags": [],
                     "text": "If true the Baloise Shape is set"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "shape",
                 "reflect": false,
                 "defaultValue": "false"
@@ -162,6 +170,8 @@ export class Stage {
                     "tags": [],
                     "text": "Shape Variation"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "shape-variation",
                 "reflect": false
             },
@@ -184,6 +194,8 @@ export class Stage {
                     "tags": [],
                     "text": "Shape Rotation"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "shape-rotation",
                 "reflect": false
             }

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

@@ -48,10 +48,10 @@ export class StepItem {
         };
     }
     render() {
-        return (h(Host, { key: '8ee5cc145653a031dd60e10cd8e15a5cea413ded', role: "tabpanel", class: {
+        return (h(Host, { key: '9b9322c92f3e7182359bd81ddead34efe7731b0c', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: 'e424db22122910323793ae2b93c4dd8dcf9f2c31' })));
+            } }, h("slot", { key: 'bde852be10cae07db611abc2ed292eca77a48ad4' })));
     }
     static get is() { return "bal-step-item"; }
     static get properties() {
@@ -70,6 +70,8 @@ export class StepItem {
                     "tags": [],
                     "text": "Tells if this route is active and overrides the bal-tabs value property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -88,6 +90,8 @@ export class StepItem {
                     "tags": [],
                     "text": "This is the key of the tab."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -106,6 +110,8 @@ export class StepItem {
                     "tags": [],
                     "text": "Label for the tab."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true,
                 "defaultValue": "''"
@@ -124,6 +130,8 @@ export class StepItem {
                     "tags": [],
                     "text": "Link to path."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": true,
                 "defaultValue": "''"
@@ -147,6 +155,8 @@ export class StepItem {
                     "tags": [],
                     "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
@@ -165,6 +175,8 @@ export class StepItem {
                     "tags": [],
                     "text": "If `true` the tab is disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -183,6 +195,8 @@ export class StepItem {
                     "tags": [],
                     "text": "If `true` the step is marked as done."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "done",
                 "reflect": true,
                 "defaultValue": "false"
@@ -201,6 +215,8 @@ export class StepItem {
                     "tags": [],
                     "text": "If `true` the step is hidden."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invisible",
                 "reflect": true,
                 "defaultValue": "false"
@@ -219,6 +235,8 @@ export class StepItem {
                     "tags": [],
                     "text": "If `true` the step is marked as failed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "failed",
                 "reflect": true,
                 "defaultValue": "false"
@@ -237,6 +255,8 @@ export class StepItem {
                     "tags": [],
                     "text": "Tell's if the linking is done by a router."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "prevent",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1 +1 @@
-@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue: var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple: var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green: var(--bal-color-green-2);--bal-steps-step-button-passed-background-green: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red: var(--bal-color-red-2);--bal-steps-step-button-passed-background-red: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow: var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow: var(--bal-color-primary);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item{display:flex;box-sizing:border-box;gap:.5rem;flex-direction:column;flex-basis:1rem;flex-grow:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:" ";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__carousel__item{flex:1;min-width:3rem}.bal-steps__nav__carousel__item:not(:last-child)::after{content:" ";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-carousel-item-background-after);border-radius:var(--bal-steps-step-button-carousel-item-radius);margin-top:3px;margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__carousel__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:1.5rem;margin-right:1.5rem}}.bal-steps__nav__carousel__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-carousel-item-passed-background-after)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-passed-background-light-blue)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-passed-background-purple)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-passed-background-red)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-passed-background-yellow)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-passed-background-green)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue: var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple: var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green: var(--bal-color-green-2);--bal-steps-step-button-passed-background-green: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red: var(--bal-color-red-2);--bal-steps-step-button-passed-background-red: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow: var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow: var(--bal-color-primary);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;hyphens:auto;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}
+@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue: var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple: var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green: var(--bal-color-green-2);--bal-steps-step-button-passed-background-green: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red: var(--bal-color-red-2);--bal-steps-step-button-passed-background-red: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow: var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow: var(--bal-color-primary);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item{display:flex;box-sizing:border-box;gap:.5rem;flex-direction:column;flex-basis:1rem;flex-grow:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:" ";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue: var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple: var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green: var(--bal-color-green-2);--bal-steps-step-button-passed-background-green: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red: var(--bal-color-red-2);--bal-steps-step-button-passed-background-red: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow: var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow: var(--bal-color-primary);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;hyphens:auto;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;overflow-x:auto}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}

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

@@ -79,8 +79,8 @@ export class Steps {
                 }
             }
         };
-        this.isMobile = balBreakpoints.isMobile;
         this.store = [];
+        this.isMobile = balBreakpoints.isMobile;
         this.options = [];
         this.clickable = true;
         this.color = 'primary';
@@ -124,6 +124,10 @@ export class Steps {
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
     }
+    swiperOnChange(index) {
+        // this.value = index
+        // this.balChange.emit(index)
+    }
     /**
      * PUBLIC METHODS
      * ------------------------------------------------------
@@ -177,9 +181,9 @@ export class Steps {
                 .join(','), "data-label": this.store
                 .filter(t => this.isActive(t))
                 .map(t => t.label)
-                .join(',') }, h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), htmlRole: '', onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
+                .join(',') }, h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, steps
             .filter(step => !step.invisible)
-            .map(step => (h("bal-carousel-item", { key: step.value, htmlRole: '', class: Object.assign(Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier(`color-${this.color}`).class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
+            .map(step => (h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
     }
     static get is() { return "bal-steps"; }
     static get originalStyleUrls() {
@@ -214,6 +218,8 @@ export class Steps {
                     "tags": [],
                     "text": "Steps can be passed as a property or through HTML markup."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             },
             "clickable": {
@@ -230,6 +236,8 @@ export class Steps {
                     "tags": [],
                     "text": "If `true` the tabs or steps can be clicked."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "true"
@@ -253,6 +261,8 @@ export class Steps {
                     "tags": [],
                     "text": "Defines the color of the steps so it can be placed on colored backgrounds"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'primary'"
@@ -271,6 +281,8 @@ export class Steps {
                     "tags": [],
                     "text": "Set the amount of time, in milliseconds, to wait to trigger the `balChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
@@ -289,6 +301,8 @@ export class Steps {
                     "tags": [],
                     "text": "Value of the current active step"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -297,8 +311,8 @@ export class Steps {
     }
     static get states() {
         return {
-            "isMobile": {},
-            "store": {}
+            "store": {},
+            "isMobile": {}
         };
     }
     static get events() {

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

@@ -8,7 +8,7 @@ export class Table {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { key: '1059612d6670d6a8c333a6903dfa1ffff7150964', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: '22d1e47908682547a1d22d17348bfb66dfd81e7a' })));
+        return (h(Host, { key: '44262d7f133d1124da1ceb878840039cbf2c7ff6', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'ecbc47dc22edf2bfd54a4d72e9813b7e425a5a00' })));
     }
     static get is() { return "bal-table"; }
     static get originalStyleUrls() {
@@ -37,6 +37,8 @@ export class Table {
                     "tags": [],
                     "text": "If `true` the table has a full width"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "expanded",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/bal-tabs/bal-tab-item/bal-tab-item.js

@@ -60,10 +60,10 @@ export class TabItem {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '73cd7faf737780486e58b71b4c51508e0311e277', id: this.tabPanelID, class: {
+        return (h(Host, { key: '9c52bfb73f94ac8b9482fbd7d5d0e72462ea7073', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'd533d087306ee17ba5b78c9b756db6cf923ef1a5' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'fc17bf76c24c61134bd35341fc61859ab99fb798' })));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {
@@ -82,6 +82,8 @@ export class TabItem {
                     "tags": [],
                     "text": "Tells if this route is active and overrides the bal-tabs value property."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "active",
                 "reflect": true,
                 "defaultValue": "false"
@@ -100,6 +102,8 @@ export class TabItem {
                     "tags": [],
                     "text": "This is the key of the tab."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true,
                 "defaultValue": "''"
@@ -118,6 +122,8 @@ export class TabItem {
                     "tags": [],
                     "text": "Label for the tab."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": true,
                 "defaultValue": "''"
@@ -136,6 +142,8 @@ export class TabItem {
                     "tags": [],
                     "text": "Link to path."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "href",
                 "reflect": true,
                 "defaultValue": "''"
@@ -159,6 +167,8 @@ export class TabItem {
                     "tags": [],
                     "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
@@ -177,6 +187,8 @@ export class TabItem {
                     "tags": [],
                     "text": "If `true` a small red bubble is added to the tab."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "bubble",
                 "reflect": true,
                 "defaultValue": "false"
@@ -195,6 +207,8 @@ export class TabItem {
                     "tags": [],
                     "text": "If `true` the tab is disabled."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
@@ -213,6 +227,8 @@ export class TabItem {
                     "tags": [],
                     "text": "If `true` the step is hidden."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "invisible",
                 "reflect": true,
                 "defaultValue": "false"
@@ -231,6 +247,8 @@ export class TabItem {
                     "tags": [],
                     "text": "Tell's if the linking is done by a router."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "prevent",
                 "reflect": false,
                 "defaultValue": "false"
@@ -249,6 +267,8 @@ export class TabItem {
                     "tags": [],
                     "text": "Tab icon not available for the steps."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
@@ -267,6 +287,8 @@ export class TabItem {
                     "tags": [],
                     "text": "If `true` the tab does not have a panel"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "no-panel",
                 "reflect": false,
                 "defaultValue": "false"
@@ -290,6 +312,8 @@ export class TabItem {
                     "tags": [],
                     "text": "A11y attributes for the native tab element."
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "undefined"
             },
             "subLabel": {
@@ -306,6 +330,8 @@ export class TabItem {
                     "tags": [],
                     "text": "Sub label for the tab."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "sub-label",
                 "reflect": true,
                 "defaultValue": "''"
@@ -324,6 +350,8 @@ export class TabItem {
                     "tags": [],
                     "text": "source for the svg icon"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "svg",
                 "reflect": false,
                 "defaultValue": "''"