@zanichelli/albe-web-components 19.6.0 → 19.6.1

package/dist/collection/components/z-button/index.js

@@ -44,9 +44,8 @@ export class ZButton {
         var _a, _b;
         const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
         const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
-        const shouldRenderAsLink = normalizedRole === "link";
-        if (this.href || shouldRenderAsLink) {
-            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href || "#", target: this.target }), this.renderIcon(), h("slot", null)));
+        if (this.href) {
+            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
         return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
     }

package/dist/collection/components/z-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAa,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAE7F;;GAEG;AAOH,MAAM,OAAO,OAAO;IANpB;QASE,mGAAmG;QAEnG,cAAS,GAAuB,SAAS,CAAC;QAE1C;;;WAGG;QAEH,SAAI,GAAG,EAAE,CAAC;QAsBV,sCAAsC;QAEtC,aAAQ,GAAa,KAAK,CAAC;QAE3B,kCAAkC;QAElC,SAAI,GAAgB,UAAU,CAAC,MAAM,CAAC;QAEtC,oFAAoF;QAEpF,YAAO,GAAmB,aAAa,CAAC,OAAO,CAAC;QAMhD,mDAAmD;QAEnD,iBAAY,GAAkB,YAAY,CAAC,IAAI,CAAC;QAEhD,wEAAwE;QAExE,SAAI,GAA8B,WAAW,CAAC,GAAG,CAAC;QAE1C,YAAO,GAAG,KAAK,CAAC;KAqDzB;IAnDC,iBAAiB;;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,CAAC;IACxD,CAAC;IAED,IAAY,UAAU;QACpB,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI;gBAC3B,oBAAoB,EAAE,IAAI,CAAC,OAAO;aACnC;SACF,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAClD,CAAC;IAED,MAAM;;QACJ,MAAM,mBAAmB,GAAG,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,KAAI,SAAS,CAAC;QAChE,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,CAAA,IAAI,SAAS,CAAC;QACvE,MAAM,kBAAkB,GAAG,cAAc,KAAK,MAAM,CAAC;QAErD,IAAI,IAAI,CAAC,IAAI,IAAI,kBAAkB,EAAE,CAAC;YACpC,OAAO,CACL,yBACM,IAAI,CAAC,UAAU,kBACP,mBAAmB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,EACtB,MAAM,EAAE,IAAI,CAAC,MAAM;gBAElB,IAAI,CAAC,UAAU,EAAE;gBAClB,eAAQ,CACN,CACL,CAAC;QACJ,CAAC;QAED,OAAO,CACL,8BACM,IAAI,CAAC,UAAU,kBACP,mBAAmB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,cAAc;YAEnB,IAAI,CAAC,UAAU,EAAE;YAClB,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton implements ComponentInterface {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  htmlrole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private hasText = false;\n\n  componentWillLoad(): void {\n    this.hasText = !!this.hostElement.textContent?.trim();\n  }\n\n  private get attributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": this.hasText,\n      },\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    const normalizedAriaLabel = this.ariaLabel?.trim() || undefined;\n    const normalizedRole = this.htmlrole || this.role?.trim() || undefined;\n    const shouldRenderAsLink = normalizedRole === \"link\";\n\n    if (this.href || shouldRenderAsLink) {\n      return (\n        <a\n          {...this.attributes}\n          aria-label={normalizedAriaLabel}\n          href={this.href || \"#\"}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.attributes}\n        aria-label={normalizedAriaLabel}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={normalizedRole}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE9E,OAAO,EAAa,UAAU,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAE7F;;GAEG;AAOH,MAAM,OAAO,OAAO;IANpB;QASE,mGAAmG;QAEnG,cAAS,GAAuB,SAAS,CAAC;QAE1C;;;WAGG;QAEH,SAAI,GAAG,EAAE,CAAC;QAsBV,sCAAsC;QAEtC,aAAQ,GAAa,KAAK,CAAC;QAE3B,kCAAkC;QAElC,SAAI,GAAgB,UAAU,CAAC,MAAM,CAAC;QAEtC,oFAAoF;QAEpF,YAAO,GAAmB,aAAa,CAAC,OAAO,CAAC;QAMhD,mDAAmD;QAEnD,iBAAY,GAAkB,YAAY,CAAC,IAAI,CAAC;QAEhD,wEAAwE;QAExE,SAAI,GAA8B,WAAW,CAAC,GAAG,CAAC;QAE1C,YAAO,GAAG,KAAK,CAAC;KAoDzB;IAlDC,iBAAiB;;QACf,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,WAAW,CAAC,WAAW,0CAAE,IAAI,EAAE,CAAA,CAAC;IACxD,CAAC;IAED,IAAY,UAAU;QACpB,OAAO;YACL,EAAE,EAAE,IAAI,CAAC,MAAM;YACf,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI;gBAC3B,oBAAoB,EAAE,IAAI,CAAC,OAAO;aACnC;SACF,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAClD,CAAC;IAED,MAAM;;QACJ,MAAM,mBAAmB,GAAG,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,KAAI,SAAS,CAAC;QAChE,MAAM,cAAc,GAAG,IAAI,CAAC,QAAQ,KAAI,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,EAAE,CAAA,IAAI,SAAS,CAAC;QAEvE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,yBACM,IAAI,CAAC,UAAU,kBACP,mBAAmB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBAElB,IAAI,CAAC,UAAU,EAAE;gBAClB,eAAQ,CACN,CACL,CAAC;QACJ,CAAC;QAED,OAAO,CACL,8BACM,IAAI,CAAC,UAAU,kBACP,mBAAmB,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,cAAc;YAEnB,IAAI,CAAC,UAAU,EAAE;YAClB,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton implements ComponentInterface {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  htmlrole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private hasText = false;\n\n  componentWillLoad(): void {\n    this.hasText = !!this.hostElement.textContent?.trim();\n  }\n\n  private get attributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": this.hasText,\n      },\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    const normalizedAriaLabel = this.ariaLabel?.trim() || undefined;\n    const normalizedRole = this.htmlrole || this.role?.trim() || undefined;\n\n    if (this.href) {\n      return (\n        <a\n          {...this.attributes}\n          aria-label={normalizedAriaLabel}\n          href={this.href}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.attributes}\n        aria-label={normalizedAriaLabel}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={normalizedRole}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"]}

package/dist/components/index5.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as o,HTMLElement as r,h as t,transformTag as n}from"@stencil/core/internal/client";import{c as a,B as e,a1 as i,e as c}from"./index2.js";import{d as s}from"./index3.js";const l=()=>`.sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0;--z-icon-left-margin:0}[disabled].sc-z-button-h:not([disabled="false"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);column-gap:var(--space-unit);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}[icon-position="right"].sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{flex-direction:row-reverse}[size="big"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size="small"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size="x-small"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant="primary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled03)}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-button-secondary);color:var(--color-primary01)}@media (hover: hover){[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-button-secondary);color:var(--color-hover-primary)}}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-button-secondary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant="secondary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-button-secondary);color:var(--color-disabled03)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary02);background-color:var(--color-primary02);color:var(--color-primary01)}@media (hover: hover){[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-primary02);background-color:var(--color-primary02);color:var(--color-primary01)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-primary02);background-color:var(--color-primary02);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant="tertiary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled03)}`;const b=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.ariaLabel=undefined;this.role="";this.disabled=false;this.type=a.BUTTON;this.variant=e.PRIMARY;this.iconPosition=i.LEFT;this.size=c.BIG;this.hasText=false}componentWillLoad(){var o;this.hasText=!!((o=this.hostElement.textContent)===null||o===void 0?void 0:o.trim())}get attributes(){return{id:this.htmlid,class:{"z-button--container":true,"z-button--has-text":this.hasText}}}renderIcon(){return this.icon&&t("z-icon",{name:this.icon})}render(){var o,r;const n=((o=this.ariaLabel)===null||o===void 0?void 0:o.trim())||undefined;const a=this.htmlrole||((r=this.role)===null||r===void 0?void 0:r.trim())||undefined;const e=a==="link";if(this.href||e){return t("a",Object.assign({},this.attributes,{"aria-label":n,href:this.href||"#",target:this.target}),this.renderIcon(),t("slot",null))}return t("button",Object.assign({},this.attributes,{"aria-label":n,name:this.name,type:this.type,disabled:this.disabled,role:a}),this.renderIcon(),t("slot",null))}get hostElement(){return this}static get style(){return l()}},[262,"z-button",{ariaLabel:[1,"aria-label"],role:[1],htmlrole:[1],href:[1],target:[1],htmlid:[1],name:[1],disabled:[516],type:[1],variant:[513],icon:[1],iconPosition:[513,"icon-position"],size:[513]}]);function d(){if(typeof customElements==="undefined"){return}const o=["z-button","z-icon"];o.forEach((o=>{switch(o){case"z-button":if(!customElements.get(n(o))){customElements.define(n(o),b)}break;case"z-icon":if(!customElements.get(n(o))){s()}break}}))}export{b as Z,d};
+import{proxyCustomElement as o,HTMLElement as r,h as t,transformTag as n}from"@stencil/core/internal/client";import{c as a,B as e,a1 as i,e as c}from"./index2.js";import{d as s}from"./index3.js";const l=()=>`.sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0;--z-icon-left-margin:0}[disabled].sc-z-button-h:not([disabled="false"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);column-gap:var(--space-unit);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}[icon-position="right"].sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{flex-direction:row-reverse}[size="big"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size="small"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size="x-small"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant="primary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant="primary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled03)}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-button-secondary);color:var(--color-primary01)}@media (hover: hover){[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-button-secondary);color:var(--color-hover-primary)}}[variant="secondary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-button-secondary);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant="secondary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-button-secondary);color:var(--color-disabled03)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary02);background-color:var(--color-primary02);color:var(--color-primary01)}@media (hover: hover){[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-primary02);background-color:var(--color-primary02);color:var(--color-primary01)}[variant="tertiary"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-primary02);background-color:var(--color-primary02);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant="tertiary"][disabled].sc-z-button-h:not([disabled="false"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled03)}`;const b=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.ariaLabel=undefined;this.role="";this.disabled=false;this.type=a.BUTTON;this.variant=e.PRIMARY;this.iconPosition=i.LEFT;this.size=c.BIG;this.hasText=false}componentWillLoad(){var o;this.hasText=!!((o=this.hostElement.textContent)===null||o===void 0?void 0:o.trim())}get attributes(){return{id:this.htmlid,class:{"z-button--container":true,"z-button--has-text":this.hasText}}}renderIcon(){return this.icon&&t("z-icon",{name:this.icon})}render(){var o,r;const n=((o=this.ariaLabel)===null||o===void 0?void 0:o.trim())||undefined;const a=this.htmlrole||((r=this.role)===null||r===void 0?void 0:r.trim())||undefined;if(this.href){return t("a",Object.assign({},this.attributes,{"aria-label":n,href:this.href,target:this.target}),this.renderIcon(),t("slot",null))}return t("button",Object.assign({},this.attributes,{"aria-label":n,name:this.name,type:this.type,disabled:this.disabled,role:a}),this.renderIcon(),t("slot",null))}get hostElement(){return this}static get style(){return l()}},[262,"z-button",{ariaLabel:[1,"aria-label"],role:[1],htmlrole:[1],href:[1],target:[1],htmlid:[1],name:[1],disabled:[516],type:[1],variant:[513],icon:[1],iconPosition:[513,"icon-position"],size:[513]}]);function d(){if(typeof customElements==="undefined"){return}const o=["z-button","z-icon"];o.forEach((o=>{switch(o){case"z-button":if(!customElements.get(n(o))){customElements.define(n(o),b)}break;case"z-icon":if(!customElements.get(n(o))){s()}break}}))}export{b as Z,d};
 //# sourceMappingURL=index5.js.map

package/dist/components/index5.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","ariaLabel","undefined","role","disabled","type","ButtonType","BUTTON","variant","ButtonVariant","PRIMARY","iconPosition","IconPosition","LEFT","size","ControlSize","BIG","hasText","componentWillLoad","_a","hostElement","textContent","trim","attributes","id","htmlid","class","renderIcon","icon","h","name","render","normalizedAriaLabel","normalizedRole","htmlrole","_b","shouldRenderAsLink","href","Object","assign","target"],"sources":["src/components/z-button/styles.css?tag=z-button&encapsulation=scoped","src/components/z-button/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: 0;\n  --z-icon-left-margin: 0;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host .z-button--container {\n  display: inline-flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-width: var(--border-size-medium);\n  border-style: solid;\n  border-radius: var(--border-radius);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.3px;\n  line-height: 1;\n  outline: none;\n  text-decoration: none;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n:host .z-button--container:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host .z-button--container.z-button--has-text {\n  min-width: calc(var(--space-unit) * 8);\n  padding: 0 calc(var(--space-unit) * 2);\n}\n\n:host([icon-position=\"right\"]) .z-button--container.z-button--has-text {\n  flex-direction: row-reverse;\n}\n\n:host([size=\"big\"]) .z-button--container {\n  min-width: 44px;\n  height: 44px;\n}\n\n:host([size=\"small\"]) .z-button--container {\n  min-width: 36px;\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) .z-button--container {\n  min-width: 32px;\n  height: 32px;\n}\n\n:host([variant=\"primary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-primary01);\n  color: var(--color-text-inverse);\n}\n\n@media (hover: hover) {\n  :host([variant=\"primary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-hover-primary);\n    color: var(--color-text-inverse);\n  }\n}\n\n:host([variant=\"primary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n}\n\n:host([variant=\"primary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"secondary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"secondary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-button-secondary);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"secondary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-button-secondary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n}\n\n:host([variant=\"secondary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"tertiary\"]) .z-button--container:hover {\n    border-color: var(--color-primary03);\n    background-color: var(--color-primary03);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:focus:focus-visible {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:active {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  box-shadow: var(--shadow-2);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton implements ComponentInterface {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  htmlrole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private hasText = false;\n\n  componentWillLoad(): void {\n    this.hasText = !!this.hostElement.textContent?.trim();\n  }\n\n  private get attributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": this.hasText,\n      },\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    const normalizedAriaLabel = this.ariaLabel?.trim() || undefined;\n    const normalizedRole = this.htmlrole || this.role?.trim() || undefined;\n    const shouldRenderAsLink = normalizedRole === \"link\";\n\n    if (this.href || shouldRenderAsLink) {\n      return (\n        <a\n          {...this.attributes}\n          aria-label={normalizedAriaLabel}\n          href={this.href || \"#\"}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.attributes}\n        aria-label={normalizedAriaLabel}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={normalizedRole}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"],"mappings":"mMAAA,MAAMA,EAAY,IAAM,04H,MCaXC,EAAOC,EAAA,MAAAD,UAAAE,EANpB,WAAAC,CAAAC,G,4CAWEC,KAAAC,UAAgCC,UAOhCF,KAAAG,KAAO,GAwBPH,KAAAI,SAAqB,MAIrBJ,KAAAK,KAAoBC,EAAWC,OAI/BP,KAAAQ,QAA0BC,EAAcC,QAQxCV,KAAAW,aAA8BC,EAAaC,KAI3Cb,KAAAc,KAAkCC,EAAYC,IAEtChB,KAAAiB,QAAU,KAqDnB,CAnDC,iBAAAC,G,MACElB,KAAKiB,YAAYE,EAAAnB,KAAKoB,YAAYC,eAAW,MAAAF,SAAA,SAAAA,EAAEG,O,CAGjD,cAAYC,GACV,MAAO,CACLC,GAAIxB,KAAKyB,OACTC,MAAO,CACL,sBAAuB,KACvB,qBAAsB1B,KAAKiB,S,CAKzB,UAAAU,GACN,OAAO3B,KAAK4B,MAAQC,EAAA,UAAQC,KAAM9B,KAAK4B,M,CAGzC,MAAAG,G,QACE,MAAMC,IAAsBb,EAAAnB,KAAKC,aAAS,MAAAkB,SAAA,SAAAA,EAAEG,SAAUpB,UACtD,MAAM+B,EAAiBjC,KAAKkC,YAAYC,EAAAnC,KAAKG,QAAI,MAAAgC,SAAA,SAAAA,EAAEb,SAAUpB,UAC7D,MAAMkC,EAAqBH,IAAmB,OAE9C,GAAIjC,KAAKqC,MAAQD,EAAoB,CACnC,OACEP,EAAA,IAAAS,OAAAC,OAAA,GACMvC,KAAKuB,WAAU,cACPS,EACZK,KAAMrC,KAAKqC,MAAQ,IACnBG,OAAQxC,KAAKwC,SAEZxC,KAAK2B,aACNE,EAAA,a,CAKN,OACEA,EAAA,SAAAS,OAAAC,OAAA,GACMvC,KAAKuB,WAAU,cACPS,EACZF,KAAM9B,KAAK8B,KACXzB,KAAML,KAAKK,KACXD,SAAUJ,KAAKI,SACfD,KAAM8B,IAELjC,KAAK2B,aACNE,EAAA,a","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","ariaLabel","undefined","role","disabled","type","ButtonType","BUTTON","variant","ButtonVariant","PRIMARY","iconPosition","IconPosition","LEFT","size","ControlSize","BIG","hasText","componentWillLoad","_a","hostElement","textContent","trim","attributes","id","htmlid","class","renderIcon","icon","h","name","render","normalizedAriaLabel","normalizedRole","htmlrole","_b","href","Object","assign","target"],"sources":["src/components/z-button/styles.css?tag=z-button&encapsulation=scoped","src/components/z-button/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n\n  --z-icon-width: 16px;\n  --z-icon-height: 16px;\n  --z-icon-right-margin: 0;\n  --z-icon-left-margin: 0;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host .z-button--container {\n  display: inline-flex;\n  width: 100%;\n  box-sizing: border-box;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  border-width: var(--border-size-medium);\n  border-style: solid;\n  border-radius: var(--border-radius);\n  column-gap: var(--space-unit);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.3px;\n  line-height: 1;\n  outline: none;\n  text-decoration: none;\n  text-transform: uppercase;\n  white-space: nowrap;\n}\n\n:host .z-button--container:focus:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host .z-button--container.z-button--has-text {\n  min-width: calc(var(--space-unit) * 8);\n  padding: 0 calc(var(--space-unit) * 2);\n}\n\n:host([icon-position=\"right\"]) .z-button--container.z-button--has-text {\n  flex-direction: row-reverse;\n}\n\n:host([size=\"big\"]) .z-button--container {\n  min-width: 44px;\n  height: 44px;\n}\n\n:host([size=\"small\"]) .z-button--container {\n  min-width: 36px;\n  height: 36px;\n}\n\n:host([size=\"x-small\"]) .z-button--container {\n  min-width: 32px;\n  height: 32px;\n}\n\n:host([variant=\"primary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-primary01);\n  color: var(--color-text-inverse);\n}\n\n@media (hover: hover) {\n  :host([variant=\"primary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-hover-primary);\n    color: var(--color-text-inverse);\n  }\n}\n\n:host([variant=\"primary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-pressed-primary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-text-inverse);\n}\n\n:host([variant=\"primary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"secondary\"]) .z-button--container {\n  border-color: var(--color-primary01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"secondary\"]) .z-button--container:hover {\n    border-color: var(--color-hover-primary);\n    background-color: var(--color-button-secondary);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"secondary\"]) .z-button--container:active {\n  border-color: var(--color-pressed-primary);\n  background-color: var(--color-button-secondary);\n  box-shadow: var(--shadow-2);\n  color: var(--color-pressed-primary);\n}\n\n:host([variant=\"secondary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-button-secondary);\n  color: var(--color-disabled03);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n@media (hover: hover) {\n  :host([variant=\"tertiary\"]) .z-button--container:hover {\n    border-color: var(--color-primary03);\n    background-color: var(--color-primary03);\n    color: var(--color-hover-primary);\n  }\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:focus:focus-visible {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"]) .z-button--container:active {\n  border-color: var(--color-primary02);\n  background-color: var(--color-primary02);\n  box-shadow: var(--shadow-2);\n  color: var(--color-primary01);\n}\n\n:host([variant=\"tertiary\"][disabled]:not([disabled=\"false\"])) .z-button--container {\n  border-color: var(--color-disabled01);\n  background-color: var(--color-disabled01);\n  color: var(--color-disabled03);\n}\n","import {Component, ComponentInterface, Element, Prop, h} from \"@stencil/core\";\nimport {JSXBase} from \"@stencil/core/internal\";\nimport {ButtonSize, ButtonType, ButtonVariant, ControlSize, IconPosition} from \"../../beans\";\n\n/**\n * @slot - button label\n */\n@Component({\n  tag: \"z-button\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZButton implements ComponentInterface {\n  @Element() hostElement: HTMLZButtonElement;\n\n  /** defines a string value that labels the internal interactive element. Used for accessibility. */\n  @Prop()\n  ariaLabel: string | undefined = undefined;\n\n  /**\n   * Use `htmlrole` instead.\n   * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.\n   */\n  @Prop()\n  role = \"\";\n\n  /** defines role attribute, used for accessibility. */\n  @Prop()\n  htmlrole?: string;\n\n  /** HTML <a> href attribute. If it is set, it renders an HTML <a> tag. */\n  @Prop()\n  href?: string;\n\n  /** HTML a target attribute. */\n  @Prop()\n  target?: string;\n\n  /** Identifier, should be unique. */\n  @Prop()\n  htmlid?: string;\n\n  /** HTML button name attribute. */\n  @Prop()\n  name?: string;\n\n  /** HTML button disabled attribute. */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** HTML button type attribute. */\n  @Prop()\n  type?: ButtonType = ButtonType.BUTTON;\n\n  /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */\n  @Prop({reflect: true})\n  variant?: ButtonVariant = ButtonVariant.PRIMARY;\n\n  /** `z-icon` name to use (optional). */\n  @Prop()\n  icon?: string;\n\n  /** the button icon position. Defaults to `left` */\n  @Prop({reflect: true})\n  iconPosition?: IconPosition = IconPosition.LEFT;\n\n  /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */\n  @Prop({reflect: true})\n  size?: ButtonSize | ControlSize = ControlSize.BIG;\n\n  private hasText = false;\n\n  componentWillLoad(): void {\n    this.hasText = !!this.hostElement.textContent?.trim();\n  }\n\n  private get attributes(): JSXBase.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> {\n    return {\n      id: this.htmlid,\n      class: {\n        \"z-button--container\": true,\n        \"z-button--has-text\": this.hasText,\n      },\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    const normalizedAriaLabel = this.ariaLabel?.trim() || undefined;\n    const normalizedRole = this.htmlrole || this.role?.trim() || undefined;\n\n    if (this.href) {\n      return (\n        <a\n          {...this.attributes}\n          aria-label={normalizedAriaLabel}\n          href={this.href}\n          target={this.target}\n        >\n          {this.renderIcon()}\n          <slot />\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...this.attributes}\n        aria-label={normalizedAriaLabel}\n        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={normalizedRole}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"],"mappings":"mMAAA,MAAMA,EAAY,IAAM,04H,MCaXC,EAAOC,EAAA,MAAAD,UAAAE,EANpB,WAAAC,CAAAC,G,4CAWEC,KAAAC,UAAgCC,UAOhCF,KAAAG,KAAO,GAwBPH,KAAAI,SAAqB,MAIrBJ,KAAAK,KAAoBC,EAAWC,OAI/BP,KAAAQ,QAA0BC,EAAcC,QAQxCV,KAAAW,aAA8BC,EAAaC,KAI3Cb,KAAAc,KAAkCC,EAAYC,IAEtChB,KAAAiB,QAAU,KAoDnB,CAlDC,iBAAAC,G,MACElB,KAAKiB,YAAYE,EAAAnB,KAAKoB,YAAYC,eAAW,MAAAF,SAAA,SAAAA,EAAEG,O,CAGjD,cAAYC,GACV,MAAO,CACLC,GAAIxB,KAAKyB,OACTC,MAAO,CACL,sBAAuB,KACvB,qBAAsB1B,KAAKiB,S,CAKzB,UAAAU,GACN,OAAO3B,KAAK4B,MAAQC,EAAA,UAAQC,KAAM9B,KAAK4B,M,CAGzC,MAAAG,G,QACE,MAAMC,IAAsBb,EAAAnB,KAAKC,aAAS,MAAAkB,SAAA,SAAAA,EAAEG,SAAUpB,UACtD,MAAM+B,EAAiBjC,KAAKkC,YAAYC,EAAAnC,KAAKG,QAAI,MAAAgC,SAAA,SAAAA,EAAEb,SAAUpB,UAE7D,GAAIF,KAAKoC,KAAM,CACb,OACEP,EAAA,IAAAQ,OAAAC,OAAA,GACMtC,KAAKuB,WAAU,cACPS,EACZI,KAAMpC,KAAKoC,KACXG,OAAQvC,KAAKuC,SAEZvC,KAAK2B,aACNE,EAAA,a,CAKN,OACEA,EAAA,SAAAQ,OAAAC,OAAA,GACMtC,KAAKuB,WAAU,cACPS,EACZF,KAAM9B,KAAK8B,KACXzB,KAAML,KAAKK,KACXD,SAAUJ,KAAKI,SACfD,KAAM8B,IAELjC,KAAK2B,aACNE,EAAA,a","ignoreList":[]}

package/dist/esm/z-app-header_12.entry.js

@@ -335,9 +335,8 @@ const ZButton = class {
         var _a, _b;
         const normalizedAriaLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined;
         const normalizedRole = this.htmlrole || ((_b = this.role) === null || _b === void 0 ? void 0 : _b.trim()) || undefined;
-        const shouldRenderAsLink = normalizedRole === "link";
-        if (this.href || shouldRenderAsLink) {
-            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href || "#", target: this.target }), this.renderIcon(), h("slot", null)));
+        if (this.href) {
+            return (h("a", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, href: this.href, target: this.target }), this.renderIcon(), h("slot", null)));
         }
         return (h("button", Object.assign({}, this.attributes, { "aria-label": normalizedAriaLabel, name: this.name, type: this.type, disabled: this.disabled, role: normalizedRole }), this.renderIcon(), h("slot", null)));
     }