@zanichelli/albe-web-components 14.3.0 → 14.4.0

package/dist/cjs/z-section-title.cjs.entry.js

@@ -18,7 +18,7 @@ const ZSectionTitle = class {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (index.h(index.Host, { key: 'd691017e2953d129c291a8d1e8fa5411f0faf457' }, index.h("slot", { key: '99c8dce52dde7a85c2dd7423d08875b9a5ab4dfe', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.BEFORE && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" })), index.h("slot", { key: 'de5810f9b9a3db9c2fb81a59ac3dda261079b81f', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.AFTER && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (index.h(index.Host, { key: '98a5c82a7087e6a67f0d76f91f87274b9fb4dcaa' }, index.h("slot", { key: 'c24aeee90fdcf9e7a68c6cbaff2d1a490b252c46', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.BEFORE && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" })), index.h("slot", { key: 'c7f5595456cc7601afb0fccb20b948802c58ad41', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === index$1.ZSectionTitleDividerPosition.AFTER && (index.h("z-divider", { size: index$1.DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-select.cjs.entry.js

@@ -326,7 +326,7 @@ const ZSelect = class {
         return (index.h("z-input-message", { message: utils.boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size }));
     }
     render() {
-        return (index.h("div", { key: '5566ddc949ae9fee8724ebd22bb2ae21dfc0d19e', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (index.h("div", { key: '78ac427d8d3de7b8bd2d62bff9ffc07b0625da28', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-skip-to-content.cjs.entry.js

@@ -52,7 +52,7 @@ const ZSkipToContent = class {
         this.visible = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'a23874893887060f9581859334bd1a21603a46bb', class: {
+        return (index.h(index.Host, { key: '4c268f1358c2b8d099b43c8ca3800d460ddb3127', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

package/dist/cjs/z-stepper-item.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dc60bee7.js');
 
-const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:18px;line-height:28px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));text-align:center}:host(:not([disabled])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-active-primary);background:var(--color-active-primary);color:var(--color-text-inverse)}:host(:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}@media (min-width: 768px){:host{width:calc(var(--space-unit) * 10)}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10)}.stepper-item span{display:block}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
+const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-active-primary);background:var(--color-active-primary);color:var(--color-text-inverse)}:host(:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-success-default);color:var(--color-success-default)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-success-default)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
 const ZStepperItemStyle0 = stylesCss;
 
 const ZStepperItem = class {
@@ -13,13 +13,18 @@ const ZStepperItem = class {
         this.index = undefined;
         this.href = undefined;
         this.pressed = undefined;
+        this.checked = undefined;
         this.disabled = undefined;
     }
+    getAttributes() {
+        const href = this.href && !this.pressed && !this.disabled ? { onClick: () => (location.href = this.href) } : undefined;
+        const role = href ? { role: "link" } : undefined;
+        const current = this.pressed && !this.disabled ? { ariaCurrent: "step" } : undefined;
+        const tabindex = this.pressed || this.href === "" ? { tabindex: -1 } : undefined;
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
+    }
     render() {
-        if (this.href) {
-            return (index.h("a", { href: !this.disabled && this.href, class: "stepper-item" }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
-        }
-        return (index.h("button", { class: "stepper-item", disabled: this.disabled }, index.h("div", { class: "indicator" }, this.index), index.h("span", null, index.h("slot", null))));
+        return (index.h(index.Host, { key: 'c5ca192ca8a2dbf5a7df76d24059e2f312e2d6de', role: "listitem" }, index.h("button", Object.assign({ key: 'df91258ecfeef2cc2d42b7cdeb35fe4d74fa53d9', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), index.h("div", { key: '45a0b2b14d11094e753e89747c89ad6554b6f086', class: "indicator" }, this.checked ? index.h("z-icon", { name: "checkmark" }) : this.index), index.h("span", { key: 'fbb1e1340c9d200312814aac29bf76077b956ea8' }, index.h("slot", { key: '79791a5e64454e4b543b49e97f9af3592a18c4cf' })))));
     }
 };
 ZStepperItem.style = ZStepperItemStyle0;

package/dist/cjs/z-stepper-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-stepper-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,imEAAimE,CAAC;AACpnE,2BAAe,SAAS;;MCMX,YAAY;;;;;;;;IAyBvB,MAAM;QACJ,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,QACEA,eACE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,EACjC,KAAK,EAAC,cAAc,IAEpBA,iBAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAO,EACzCA,sBACEA,qBAAQ,CACH,CACL,EACJ;SACH;QAED,QACEA,oBACE,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvBA,iBAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAO,EACzCA,sBACEA,qBAAQ,CACH,CACA,EACT;KACH;;;;;;","names":["h"],"sources":["src/components/indicators/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/indicators/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  width: calc(var(--space-unit) * 5);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host(:not(:last-child)) {\n  flex: 1;\n}\n\n:host(:not(:last-child))::after {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);\n  right: calc(var(--space-unit) * 2);\n  left: calc(var(--space-unit) * 3);\n  display: block;\n  width: auto;\n  border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n  margin: 0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);\n  content: \"\";\n}\n\n.stepper-item {\n  display: flex;\n  width: calc(var(--space-unit) * 5);\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  appearance: none;\n  background: transparent;\n  color: inherit;\n  font-family: inherit;\n  font-size: 18px;\n  line-height: 28px;\n  outline: 0;\n  text-decoration: none;\n}\n\n.stepper-item span {\n  display: none;\n  width: calc(100% + calc(var(--space-unit) * 4));\n  text-align: center;\n}\n\n:host(:not([disabled])) .stepper-item {\n  cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n  pointer-events: none;\n}\n\n.indicator {\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: calc(var(--space-unit) * 4);\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  border: var(--border-size-medium) solid var(--color-primary01);\n  margin: calc(var(--space-unit) * 2);\n  background: var(--color-surface01);\n  border-radius: 50%;\n  color: var(--color-primary01);\n  content: counter(stepper);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  line-height: 1;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n  border-color: var(--color-active-primary);\n  background: var(--color-active-primary);\n  color: var(--color-text-inverse);\n}\n\n:host(:not([disabled]):focus-within) .indicator {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([disabled]) .indicator {\n  border-color: var(--color-disabled02);\n  background: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  :host {\n    width: calc(var(--space-unit) * 10);\n  }\n\n  :host(:not(:last-child))::after {\n    top: calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);\n    left: calc(var(--space-unit) * 8);\n  }\n\n  .stepper-item {\n    width: calc(var(--space-unit) * 10);\n  }\n\n  .stepper-item span {\n    display: block;\n  }\n\n  .indicator {\n    width: calc(var(--space-unit) * 6);\n    height: calc(var(--space-unit) * 6);\n    font-size: 16px;\n  }\n}\n","import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-stepper-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepperItem {\n  /**\n   * The number of the step item.\n   */\n  @Prop({attribute: \"index\"})\n  index: number;\n\n  /**\n   * The href to navigate on click.\n   */\n  @Prop({attribute: \"href\"})\n  href: string;\n\n  /**\n   * The pressed state of the item.\n   */\n  @Prop({attribute: \"pressed\"})\n  pressed: boolean;\n\n  /**\n   * The disabled state of the item.\n   */\n  @Prop({attribute: \"disabled\"})\n  disabled: boolean;\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    if (this.href) {\n      return (\n        <a\n          href={!this.disabled && this.href}\n          class=\"stepper-item\"\n        >\n          <div class=\"indicator\">{this.index}</div>\n          <span>\n            <slot />\n          </span>\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"stepper-item\"\n        disabled={this.disabled}\n      >\n        <div class=\"indicator\">{this.index}</div>\n        <span>\n          <slot />\n        </span>\n      </button>\n    );\n  }\n}\n"],"version":3}
+{"file":"z-stepper-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,urFAAurF,CAAC;AAC1sF,2BAAe,SAAS;;MCMX,YAAY;;;;;;;;;IA+Bf,aAAa;QACnB,MAAM,IAAI,GACR,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAC,OAAO,EAAE,OAAO,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAC,GAAG,SAAS,CAAC;QAC1G,MAAM,IAAI,GAAG,IAAI,GAAG,EAAC,IAAI,EAAE,MAAM,EAAC,GAAG,SAAS,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAC,WAAW,EAAE,MAAM,EAAC,GAAG,SAAS,CAAC;QACnF,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,GAAG,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,GAAG,SAAS,CAAC;QAE/E,mEACK,IAAI,GACJ,IAAI,GACJ,OAAO,GACP,QAAQ,EACX;KACH;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACnBD,mFACE,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACnB,IAAI,CAAC,aAAa,EAAE,GAExBA,kEAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,OAAO,GAAGA,oBAAQ,IAAI,EAAC,WAAW,GAAG,GAAG,IAAI,CAAC,KAAK,CAAO,EACtFA,qEACEA,oEAAQ,CACH,CACA,CACJ,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/indicators/z-stepper-item/styles.css?tag=z-stepper-item&encapsulation=shadow","src/components/indicators/z-stepper-item/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  width: calc(var(--space-unit) * 5);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n\n  --z-icon-width: 20px;\n  --z-icon-height: 20px;\n}\n\n:host(:not(:last-child)) {\n  flex: 1;\n}\n\n:host(:not(:last-child))::after {\n  position: absolute;\n  z-index: 1;\n  top: calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);\n  right: calc(var(--space-unit) * 2);\n  left: calc(var(--space-unit) * 3);\n  display: block;\n  width: auto;\n  border-bottom: var(--border-size-medium) solid var(--color-disabled03);\n  margin: 0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);\n  content: \"\";\n}\n\n.stepper-item {\n  display: flex;\n  width: calc(var(--space-unit) * 5);\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  border: 0;\n  appearance: none;\n  background: transparent;\n  color: inherit;\n  font-family: inherit;\n  font-size: 12px;\n  line-height: 16px;\n  outline: 0;\n  text-decoration: none;\n}\n\n.stepper-item span {\n  display: none;\n  width: calc(100% + calc(var(--space-unit) * 4));\n  color: var(--color-default-text);\n  text-align: center;\n}\n\n:host([href]:not([disabled], [pressed])) .stepper-item {\n  cursor: pointer;\n}\n\n:host([disabled]) .stepper-item {\n  pointer-events: none;\n}\n\n.indicator {\n  display: flex;\n  width: calc(var(--space-unit) * 4);\n  height: calc(var(--space-unit) * 4);\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  border: var(--border-size-medium) solid var(--color-primary01);\n  margin: calc(var(--space-unit) * 2);\n  background: var(--color-surface01);\n  border-radius: 50%;\n  color: var(--color-primary01);\n  content: counter(stepper);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  line-height: 1;\n}\n\n:host([pressed]:not([disabled])) .indicator {\n  border-color: var(--color-active-primary);\n  background: var(--color-active-primary);\n  color: var(--color-text-inverse);\n}\n\n:host(:not([disabled]):focus-within) .indicator {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {\n  border-color: var(--color-hover-primary);\n  color: var(--color-hover-primary);\n}\n\n:host([disabled]) .indicator {\n  border-color: var(--color-disabled02);\n  background: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n:host([checked]:not([disabled])) .indicator {\n  border-color: var(--color-success-default);\n  color: var(--color-success-default);\n}\n\n:host([checked]:not([disabled])) .indicator z-icon {\n  fill: var(--color-success-default);\n}\n\n:host([checked]) .indicator z-icon > svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* Tablet breakpoint */\n@media (min-width: 768px) {\n  .stepper-item span {\n    display: block;\n  }\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host {\n    width: calc(var(--space-unit) * 10);\n\n    --z-icon-width: 24px;\n    --z-icon-height: 24px;\n  }\n\n  :host(:not(:last-child))::after {\n    top: calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);\n    left: calc(var(--space-unit) * 8);\n  }\n\n  .stepper-item {\n    width: calc(var(--space-unit) * 10);\n    font-size: 18px;\n    line-height: 28px;\n  }\n\n  .indicator {\n    width: calc(var(--space-unit) * 6);\n    height: calc(var(--space-unit) * 6);\n    font-size: 16px;\n  }\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-stepper-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepperItem {\n  /**\n   * The number of the step item.\n   */\n  @Prop({attribute: \"index\"})\n  index: number;\n\n  /**\n   * The href to navigate on click.\n   */\n  @Prop({attribute: \"href\"})\n  href: string;\n\n  /**\n   * The pressed state of the item.\n   */\n  @Prop({attribute: \"pressed\"})\n  pressed: boolean;\n\n  /**\n   * The checked state of the item.\n   */\n  @Prop({attribute: \"checked\"})\n  checked: boolean;\n\n  /**\n   * The disabled state of the item.\n   */\n  @Prop({attribute: \"disabled\"})\n  disabled: boolean;\n\n  private getAttributes(): Record<string, unknown> {\n    const href =\n      this.href && !this.pressed && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n    const role = href ? {role: \"link\"} : undefined;\n    const current = this.pressed && !this.disabled ? {ariaCurrent: \"step\"} : undefined;\n    const tabindex = this.pressed || this.href === \"\" ? {tabindex: -1} : undefined;\n\n    return {\n      ...href,\n      ...role,\n      ...current,\n      ...tabindex,\n    };\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class=\"stepper-item\"\n          disabled={this.disabled}\n          {...this.getAttributes()}\n        >\n          <div class=\"indicator\">{this.checked ? <z-icon name=\"checkmark\" /> : this.index}</div>\n          <span>\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-stepper.cjs.entry.js

@@ -12,7 +12,7 @@ const ZStepper = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '043113235ab04ac3c32e73cecc87f3098b02a666' });
+        return (index.h(index.Host, { key: '8f9ead5ee6d332ff3279c5135cd581603235fd54', role: "list" }, index.h("slot", { key: '1e4c88be235b6c0e0baeb4f7ec6547a2af1d24cc' })));
     }
 };
 ZStepper.style = ZStepperStyle0;

package/dist/cjs/z-stepper.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"z-stepper.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,mSAAmS,CAAC;AACtT,uBAAe,SAAS;;MCSX,QAAQ;;;;IACnB,MAAM;QACJ,OAAOA,oEAAQ,CAAC;KACjB;;;;;;","names":["h"],"sources":["src/components/indicators/z-stepper/styles.css?tag=z-stepper&encapsulation=shadow","src/components/indicators/z-stepper/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  flex-direction: row;\n  padding: 0;\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  list-style: none;\n}\n\n@media only screen and (min-width: 768px) {\n  :host {\n    padding: 0 calc(var(--space-unit) * 2);\n  }\n}\n","import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot - z-stepper-item\n */\n@Component({\n  tag: \"z-stepper\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepper {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"],"version":3}
+{"file":"z-stepper.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,mSAAmS,CAAC;AACtT,uBAAe,SAAS;;MCSX,QAAQ;;;;IACnB,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,MAAM,IACfD,oEAAQ,CACH,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/indicators/z-stepper/styles.css?tag=z-stepper&encapsulation=shadow","src/components/indicators/z-stepper/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n  flex-direction: row;\n  padding: 0;\n  margin: 0;\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n  list-style: none;\n}\n\n@media only screen and (min-width: 768px) {\n  :host {\n    padding: 0 calc(var(--space-unit) * 2);\n  }\n}\n","import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * @slot - z-stepper-item\n */\n@Component({\n  tag: \"z-stepper\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepper {\n  render(): HTMLSlotElement {\n    return (\n      <Host role=\"list\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/z-table.cjs.entry.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-dc60bee7.js');
-require('./index-66168a3e.js');
-require('./index-bb02ef1e.js');
-require('./index-17ebc3c9.js');
-require('./index-866774f0.js');
+require('./index-8eae84b7.js');
+require('./index-178a9413.js');
+require('./index-7c62141b.js');
+require('./index-79559e1d.js');
 require('./utils-d0b10736.js');
 require('./index-39ce4edf.js');
 require('./breakpoints-5c22092a.js');
-require('./index-e61ccca6.js');
-require('./index-fe277fa1.js');
+require('./index-3836ecee.js');
+require('./index-e5ff8fd3.js');
 
 const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:max-content}";
 const ZTableStyle0 = stylesCss;
@@ -45,7 +45,7 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (index.h(index.Host, { key: 'd404e04cce15f5c9c01d1d90477b0b073ce4fb18', expandable: this.expandable }, index.h("div", { key: '093877b6d4f94257a4178c2d0647107a91cd782b', class: "table", role: "table" }, index.h("slot", { key: '19e147c5cb2e20287208e39085e816cfc62f3f5e' }))));
+        return (index.h(index.Host, { key: '7df0f17c2a8af3ffc26afb0eac92ff80201ea65a', expandable: this.expandable }, index.h("div", { key: '44d334758702e852bbafe3845c6904c13670c355', class: "table", role: "table" }, index.h("slot", { key: 'e53145cc9d7b07fc0a2384df635ca5adc5e47b91' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/z-tbody.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-bb02ef1e.js');
+const index = require('./index-178a9413.js');
 require('./index-dc60bee7.js');
 
 

package/dist/cjs/z-td.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e61ccca6.js');
+const index = require('./index-3836ecee.js');
 require('./index-dc60bee7.js');
 require('./index-39ce4edf.js');
 

package/dist/cjs/z-tfoot.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-866774f0.js');
+const index = require('./index-79559e1d.js');
 require('./index-dc60bee7.js');
 
 

package/dist/cjs/z-th.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-fe277fa1.js');
+const index = require('./index-e5ff8fd3.js');
 require('./index-dc60bee7.js');
 require('./index-39ce4edf.js');
 

package/dist/cjs/z-thead.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-66168a3e.js');
+const index = require('./index-8eae84b7.js');
 require('./index-dc60bee7.js');
 
 

package/dist/cjs/z-toast-notification-list.cjs.entry.js

@@ -45,7 +45,7 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return index.h("slot", { key: '43f93b7edca0a4245d9c79d63004617ad21063b0', name: "toasts" });
+        return index.h("slot", { key: '8cabaa4c789ff5519e3e42e952464f4c137cc157', name: "toasts" });
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/z-toast-notification.cjs.entry.js

@@ -181,7 +181,7 @@ const ZToastNotification = class {
             } }, index.h("div", { id: "flex-container", ref: (el) => (this.container = el) }, this.renderText(), this.renderButton()), this.renderCloseIcon()));
     }
     render() {
-        return (index.h(index.Host, { key: 'd6ea4a44c85076f5db4dca3513e6f659f3405d13', style: {
+        return (index.h(index.Host, { key: 'aeaadb9a5b9ee6e77cfd1e991eec225364456e9e', style: {
                 "--percentuale": `${this.percentage}%`,
             }, class: this.transition ? this.transition : index$1.ToastNotificationTransition.SLIDE_IN_DOWN, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {

package/dist/cjs/z-tooltip.cjs.entry.js

@@ -21,7 +21,7 @@ const ZTooltip = class {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (index.h("z-popover", { key: '307a54499b3c7c6b9929f427a226fbb784b4c620', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: '09baa9194d76cec1bb471d65a5903ac3642823b8' })));
+        return (index.h("z-popover", { key: '9f666fd17b7051e4ab7a766c46887c7e41579052', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, index.h("slot", { key: 'e50d24a8bebabcc40645baf2afd6cafb396b520a' })));
     }
 };
 ZTooltip.style = ZTooltipStyle0;

package/dist/cjs/z-tr.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-17ebc3c9.js');
+const index = require('./index-7c62141b.js');
 require('./index-dc60bee7.js');
 require('./utils-d0b10736.js');
 require('./index-39ce4edf.js');
 require('./breakpoints-5c22092a.js');
-require('./index-e61ccca6.js');
-require('./index-fe277fa1.js');
+require('./index-3836ecee.js');
+require('./index-e5ff8fd3.js');
 
 
 

package/dist/cjs/z-visually-hidden.cjs.entry.js

@@ -12,7 +12,7 @@ const ZVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h("slot", { key: '3621cee7a23fe68812b92d58a239dce03caf4724' });
+        return index.h("slot", { key: '3d88b0bfa19b14d1891a6693c557485767035f50' });
     }
 };
 ZVisuallyHidden.style = ZVisuallyHiddenStyle0;

package/dist/collection/components/indicators/z-stepper/index.js

@@ -1,10 +1,10 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * @slot - z-stepper-item
  */
 export class ZStepper {
     render() {
-        return h("slot", { key: '043113235ab04ac3c32e73cecc87f3098b02a666' });
+        return (h(Host, { key: '8f9ead5ee6d332ff3279c5135cd581603235fd54', role: "list" }, h("slot", { key: '1e4c88be235b6c0e0baeb4f7ec6547a2af1d24cc' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/indicators/z-stepper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE3C;;GAEG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, h} from \"@stencil/core\";\n\n/**\n * @slot - z-stepper-item\n */\n@Component({\n  tag: \"z-stepper\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepper {\n  render(): HTMLSlotElement {\n    return <slot />;\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEjD;;GAEG;AAMH,MAAM,OAAO,QAAQ;IACnB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import {Component, Host, h} from \"@stencil/core\";\n\n/**\n * @slot - z-stepper-item\n */\n@Component({\n  tag: \"z-stepper\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepper {\n  render(): HTMLSlotElement {\n    return (\n      <Host role=\"list\">\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/indicators/z-stepper/index.spec.js

@@ -7,7 +7,7 @@ describe("Suite test ZStepper", () => {
             html: `<z-stepper></z-stepper>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper>
+      <z-stepper role="list">
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>
@@ -24,7 +24,7 @@ describe("Suite test ZStepper", () => {
       </z-stepper>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper>
+      <z-stepper role="list">
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>

package/dist/collection/components/indicators/z-stepper/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;mBAIO;SACd,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZStepper} from \"./index\";\n\ndescribe(\"Suite test ZStepper\", () => {\n  it(\"Test render empty ZStepper\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepper],\n      html: `<z-stepper></z-stepper>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </z-stepper>\n    `);\n  });\n\n  it(\"Test render ZStepper with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepper],\n      html: `<z-stepper>\n        <z-stepper-item index=\"0\">First step</z-stepper-item>\n        <z-stepper-item index=\"1\">Second step</z-stepper-item>\n        <z-stepper-item index=\"2\">Third step</z-stepper-item>\n      </z-stepper>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <z-stepper-item index=\"0\">First step</z-stepper-item>\n        <z-stepper-item index=\"1\">Second step</z-stepper-item>\n        <z-stepper-item index=\"2\">Third step</z-stepper-item>\n      </z-stepper>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE,yBAAyB;SAChC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;YACtB,IAAI,EAAE;;;;mBAIO;SACd,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZStepper} from \"./index\";\n\ndescribe(\"Suite test ZStepper\", () => {\n  it(\"Test render empty ZStepper\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepper],\n      html: `<z-stepper></z-stepper>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper role=\"list\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </z-stepper>\n    `);\n  });\n\n  it(\"Test render ZStepper with items\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepper],\n      html: `<z-stepper>\n        <z-stepper-item index=\"0\">First step</z-stepper-item>\n        <z-stepper-item index=\"1\">Second step</z-stepper-item>\n        <z-stepper-item index=\"2\">Third step</z-stepper-item>\n      </z-stepper>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper role=\"list\">\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n        <z-stepper-item index=\"0\">First step</z-stepper-item>\n        <z-stepper-item index=\"1\">Second step</z-stepper-item>\n        <z-stepper-item index=\"2\">Third step</z-stepper-item>\n      </z-stepper>\n    `);\n  });\n});\n"]}

package/dist/collection/components/indicators/z-stepper-item/index.js

@@ -1,16 +1,21 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 export class ZStepperItem {
     constructor() {
         this.index = undefined;
         this.href = undefined;
         this.pressed = undefined;
+        this.checked = undefined;
         this.disabled = undefined;
     }
+    getAttributes() {
+        const href = this.href && !this.pressed && !this.disabled ? { onClick: () => (location.href = this.href) } : undefined;
+        const role = href ? { role: "link" } : undefined;
+        const current = this.pressed && !this.disabled ? { ariaCurrent: "step" } : undefined;
+        const tabindex = this.pressed || this.href === "" ? { tabindex: -1 } : undefined;
+        return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
+    }
     render() {
-        if (this.href) {
-            return (h("a", { href: !this.disabled && this.href, class: "stepper-item" }, h("div", { class: "indicator" }, this.index), h("span", null, h("slot", null))));
-        }
-        return (h("button", { class: "stepper-item", disabled: this.disabled }, h("div", { class: "indicator" }, this.index), h("span", null, h("slot", null))));
+        return (h(Host, { key: 'c5ca192ca8a2dbf5a7df76d24059e2f312e2d6de', role: "listitem" }, h("button", Object.assign({ key: 'df91258ecfeef2cc2d42b7cdeb35fe4d74fa53d9', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '45a0b2b14d11094e753e89747c89ad6554b6f086', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'fbb1e1340c9d200312814aac29bf76077b956ea8' }, h("slot", { key: '79791a5e64454e4b543b49e97f9af3592a18c4cf' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }
@@ -77,6 +82,23 @@ export class ZStepperItem {
                 "attribute": "pressed",
                 "reflect": false
             },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The checked state of the item."
+                },
+                "attribute": "checked",
+                "reflect": false
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/indicators/z-stepper-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper-item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOjD,MAAM,OAAO,YAAY;;;;;;;IAyBvB,MAAM;QACJ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,SACE,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,EACjC,KAAK,EAAC,cAAc;gBAEpB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAO;gBACzC;oBACE,eAAQ,CACH,CACL,CACL,CAAC;QACJ,CAAC;QAED,OAAO,CACL,cACE,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YAEvB,WAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAO;YACzC;gBACE,eAAQ,CACH,CACA,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-stepper-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepperItem {\n  /**\n   * The number of the step item.\n   */\n  @Prop({attribute: \"index\"})\n  index: number;\n\n  /**\n   * The href to navigate on click.\n   */\n  @Prop({attribute: \"href\"})\n  href: string;\n\n  /**\n   * The pressed state of the item.\n   */\n  @Prop({attribute: \"pressed\"})\n  pressed: boolean;\n\n  /**\n   * The disabled state of the item.\n   */\n  @Prop({attribute: \"disabled\"})\n  disabled: boolean;\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    if (this.href) {\n      return (\n        <a\n          href={!this.disabled && this.href}\n          class=\"stepper-item\"\n        >\n          <div class=\"indicator\">{this.index}</div>\n          <span>\n            <slot />\n          </span>\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"stepper-item\"\n        disabled={this.disabled}\n      >\n        <div class=\"indicator\">{this.index}</div>\n        <span>\n          <slot />\n        </span>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper-item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAOvD,MAAM,OAAO,YAAY;;;;;;;;IA+Bf,aAAa;QACnB,MAAM,IAAI,GACR,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC1G,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAC,WAAW,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QACnF,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE/E,mEACK,IAAI,GACJ,IAAI,GACJ,OAAO,GACP,QAAQ,EACX;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,6EACE,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACnB,IAAI,CAAC,aAAa,EAAE;gBAExB,4DAAK,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAQ,IAAI,EAAC,WAAW,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAO;gBACtF;oBACE,8DAAQ,CACH,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-stepper-item\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZStepperItem {\n  /**\n   * The number of the step item.\n   */\n  @Prop({attribute: \"index\"})\n  index: number;\n\n  /**\n   * The href to navigate on click.\n   */\n  @Prop({attribute: \"href\"})\n  href: string;\n\n  /**\n   * The pressed state of the item.\n   */\n  @Prop({attribute: \"pressed\"})\n  pressed: boolean;\n\n  /**\n   * The checked state of the item.\n   */\n  @Prop({attribute: \"checked\"})\n  checked: boolean;\n\n  /**\n   * The disabled state of the item.\n   */\n  @Prop({attribute: \"disabled\"})\n  disabled: boolean;\n\n  private getAttributes(): Record<string, unknown> {\n    const href =\n      this.href && !this.pressed && !this.disabled ? {onClick: () => (location.href = this.href)} : undefined;\n    const role = href ? {role: \"link\"} : undefined;\n    const current = this.pressed && !this.disabled ? {ariaCurrent: \"step\"} : undefined;\n    const tabindex = this.pressed || this.href === \"\" ? {tabindex: -1} : undefined;\n\n    return {\n      ...href,\n      ...role,\n      ...current,\n      ...tabindex,\n    };\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    return (\n      <Host role=\"listitem\">\n        <button\n          class=\"stepper-item\"\n          disabled={this.disabled}\n          {...this.getAttributes()}\n        >\n          <div class=\"indicator\">{this.checked ? <z-icon name=\"checkmark\" /> : this.index}</div>\n          <span>\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/indicators/z-stepper-item/index.spec.js

@@ -4,10 +4,10 @@ describe("Suite test ZStepperItem", () => {
     it("Test render empty ZStepperItem", async () => {
         const page = await newSpecPage({
             components: [ZStepperItem],
-            html: `<z-stepper-item></z-stepper-item>`,
+            html: `<z-stepper-item role="listitem"></z-stepper-item>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper-item>
+      <z-stepper-item role="listitem">
         <mock:shadow-root>
           <button class="stepper-item">
             <div class="indicator"></div>
@@ -20,10 +20,10 @@ describe("Suite test ZStepperItem", () => {
     it("Test render ZStepperItem with index", async () => {
         const page = await newSpecPage({
             components: [ZStepperItem],
-            html: `<z-stepper-item index="5"></z-stepper-item>`,
+            html: `<z-stepper-item index="5" role="listitem"></z-stepper-item>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper-item index="5">
+      <z-stepper-item index="5" role="listitem">
         <mock:shadow-root>
           <button class="stepper-item">
             <div class="indicator">5</div>
@@ -39,7 +39,7 @@ describe("Suite test ZStepperItem", () => {
             html: `<z-stepper-item index="4">Text</z-stepper-item>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper-item index="4">
+      <z-stepper-item index="4" role="listitem">
         <mock:shadow-root>
           <button class="stepper-item">
             <div class="indicator">4</div>
@@ -53,15 +53,15 @@ describe("Suite test ZStepperItem", () => {
     it("Test render ZStepperItem with index and text and href", async () => {
         const page = await newSpecPage({
             components: [ZStepperItem],
-            html: `<z-stepper-item href="#/test" index="4">Text</z-stepper-item>`,
+            html: `<z-stepper-item href="#/test" index="4" role="listitem">Text</z-stepper-item>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper-item href="#/test" index="4">
+      <z-stepper-item href="#/test" index="4" role="listitem">
         <mock:shadow-root>
-          <a href="#/test" class="stepper-item">
+          <button class="stepper-item" role="link">
             <div class="indicator">4</div>
             <span><slot></slot></span>
-          </a>
+          </button>
         </mock:shadow-root>
         Text
       </z-stepper-item>
@@ -73,7 +73,7 @@ describe("Suite test ZStepperItem", () => {
             html: `<z-stepper-item disabled>Text</z-stepper-item>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper-item disabled>
+      <z-stepper-item disabled role="listitem">
         <mock:shadow-root>
           <button class="stepper-item" disabled>
             <div class="indicator"></div>
@@ -90,12 +90,12 @@ describe("Suite test ZStepperItem", () => {
             html: `<z-stepper-item href="#/test" disabled>Text</z-stepper-item>`,
         });
         expect(page.root).toEqualHtml(`
-      <z-stepper-item href="#/test" disabled>
+      <z-stepper-item href="#/test" disabled role="listitem">
         <mock:shadow-root>
-          <a class="stepper-item" href="false">
+          <button class="stepper-item" disabled>
             <div class="indicator"></div>
             <span><slot></slot></span>
-          </a>
+          </button>
         </mock:shadow-root>
         Text
       </z-stepper-item>

package/dist/collection/components/indicators/z-stepper-item/index.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper-item/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,mCAAmC;SAC1C,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,6CAA6C;SACpD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;QACrE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,+DAA+D;SACtE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,gDAAgD;SACvD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZStepperItem} from \"./index\";\n\ndescribe(\"Suite test ZStepperItem\", () => {\n  it(\"Test render empty ZStepperItem\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item></z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item>\n        <mock:shadow-root>\n          <button class=\"stepper-item\">\n            <div class=\"indicator\"></div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render ZStepperItem with index\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item index=\"5\"></z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item index=\"5\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\">\n            <div class=\"indicator\">5</div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render ZStepperItem with index and text\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item index=\"4\">Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item index=\"4\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\">\n            <div class=\"indicator\">4</div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render ZStepperItem with index and text and href\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item href=\"#/test\" index=\"4\">Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item href=\"#/test\" index=\"4\">\n        <mock:shadow-root>\n          <a href=\"#/test\" class=\"stepper-item\">\n            <div class=\"indicator\">4</div>\n            <span><slot></slot></span>\n          </a>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render disabled ZStepperItem\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item disabled>Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item disabled>\n        <mock:shadow-root>\n          <button class=\"stepper-item\" disabled>\n            <div class=\"indicator\"></div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render disabled ZStepperItem with href\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item href=\"#/test\" disabled>Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item href=\"#/test\" disabled>\n        <mock:shadow-root>\n          <a class=\"stepper-item\" href=\"false\">\n            <div class=\"indicator\"></div>\n            <span><slot></slot></span>\n          </a>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../../src/components/indicators/z-stepper-item/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,QAAQ,CAAC,yBAAyB,EAAE,GAAG,EAAE;IACvC,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,mDAAmD;SAC1D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,6DAA6D;SACpE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,iDAAiD;SACxD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,KAAK,IAAI,EAAE;QACrE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,+EAA+E;SACtF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,gDAAgD;SACvD,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,8DAA8D;SACrE,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;KAU7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZStepperItem} from \"./index\";\n\ndescribe(\"Suite test ZStepperItem\", () => {\n  it(\"Test render empty ZStepperItem\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item role=\"listitem\"></z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item role=\"listitem\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\">\n            <div class=\"indicator\"></div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render ZStepperItem with index\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item index=\"5\" role=\"listitem\"></z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item index=\"5\" role=\"listitem\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\">\n            <div class=\"indicator\">5</div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render ZStepperItem with index and text\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item index=\"4\">Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item index=\"4\" role=\"listitem\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\">\n            <div class=\"indicator\">4</div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render ZStepperItem with index and text and href\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item href=\"#/test\" index=\"4\" role=\"listitem\">Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item href=\"#/test\" index=\"4\" role=\"listitem\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\" role=\"link\">\n            <div class=\"indicator\">4</div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render disabled ZStepperItem\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item disabled>Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item disabled role=\"listitem\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\" disabled>\n            <div class=\"indicator\"></div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n\n  it(\"Test render disabled ZStepperItem with href\", async () => {\n    const page = await newSpecPage({\n      components: [ZStepperItem],\n      html: `<z-stepper-item href=\"#/test\" disabled>Text</z-stepper-item>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-stepper-item href=\"#/test\" disabled role=\"listitem\">\n        <mock:shadow-root>\n          <button class=\"stepper-item\" disabled>\n            <div class=\"indicator\"></div>\n            <span><slot></slot></span>\n          </button>\n        </mock:shadow-root>\n        Text\n      </z-stepper-item>\n    `);\n  });\n});\n"]}

package/dist/collection/components/indicators/z-stepper-item/styles.css

@@ -3,6 +3,9 @@
   width: calc(var(--space-unit) * 5);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+
+  --z-icon-width: 20px;
+  --z-icon-height: 20px;
 }
 
 :host(:not(:last-child)) {
@@ -33,8 +36,8 @@
   background: transparent;
   color: inherit;
   font-family: inherit;
-  font-size: 18px;
-  line-height: 28px;
+  font-size: 12px;
+  line-height: 16px;
   outline: 0;
   text-decoration: none;
 }
@@ -42,10 +45,11 @@
 .stepper-item span {
   display: none;
   width: calc(100% + calc(var(--space-unit) * 4));
+  color: var(--color-default-text);
   text-align: center;
 }
 
-:host(:not([disabled])) .stepper-item {
+:host([href]:not([disabled], [pressed])) .stepper-item {
   cursor: pointer;
 }
 
@@ -81,16 +85,45 @@
   box-shadow: var(--shadow-focus-primary);
 }
 
+:host([href]:not([disabled], [pressed], [checked])) .indicator:hover {
+  border-color: var(--color-hover-primary);
+  color: var(--color-hover-primary);
+}
+
 :host([disabled]) .indicator {
   border-color: var(--color-disabled02);
   background: var(--color-disabled01);
   color: var(--color-disabled03);
 }
 
+:host([checked]:not([disabled])) .indicator {
+  border-color: var(--color-success-default);
+  color: var(--color-success-default);
+}
+
+:host([checked]:not([disabled])) .indicator z-icon {
+  fill: var(--color-success-default);
+}
+
+:host([checked]) .indicator z-icon > svg {
+  width: 24px;
+  height: 24px;
+}
+
 /* Tablet breakpoint */
 @media (min-width: 768px) {
+  .stepper-item span {
+    display: block;
+  }
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
   :host {
     width: calc(var(--space-unit) * 10);
+
+    --z-icon-width: 24px;
+    --z-icon-height: 24px;
   }
 
   :host(:not(:last-child))::after {
@@ -100,10 +133,8 @@
 
   .stepper-item {
     width: calc(var(--space-unit) * 10);
-  }
-
-  .stepper-item span {
-    display: block;
+    font-size: 18px;
+    line-height: 28px;
   }
 
   .indicator {

package/dist/collection/components/inputs/z-combobox/index.js

@@ -251,7 +251,7 @@ export class ZCombobox {
         return (h("div", { class: "check-all-wrapper" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, role: "option", "aria-selected": allChecked ? "true" : "false", onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: 'b369099672db77dc1c6415fe878a39079abcf99d', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: '9844f86b698bf44ddedcfd410ee185bd7c9bbfe3', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }