@zanichelli/albe-web-components 19.6.0 → 20.0.0-RC1

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

@@ -5,13 +5,6 @@ import { ButtonType, ButtonVariant, ControlSize, IconPosition } from "../../bean
  */
 export class ZButton {
     constructor() {
-        /** defines a string value that labels the internal interactive element. Used for accessibility. */
-        this.ariaLabel = undefined;
-        /**
-         * Use `htmlrole` instead.
-         * @deprecated This prop has been deprecated in favor of `htmlrole` for better accessibility.
-         */
-        this.role = "";
         /** HTML button disabled attribute. */
         this.disabled = false;
         /** HTML button type attribute. */
@@ -29,26 +22,24 @@ export class ZButton {
         this.hasText = !!((_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim());
     }
     get attributes() {
+        var _a;
         return {
-            id: this.htmlid,
-            class: {
+            "id": this.htmlid,
+            "class": {
                 "z-button--container": true,
                 "z-button--has-text": this.hasText,
             },
+            "aria-label": ((_a = this.htmlAriaLabel) === null || _a === void 0 ? void 0 : _a.trim()) || undefined,
         };
     }
     renderIcon() {
         return this.icon && h("z-icon", { name: this.icon });
     }
     render() {
-        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, { 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)));
+        return (h("button", Object.assign({}, this.attributes, { name: this.name, type: this.type, disabled: this.disabled, role: this.htmlRole || undefined }), this.renderIcon(), h("slot", null)));
     }
     static get is() { return "z-button"; }
     static get encapsulation() { return "scoped"; }
@@ -64,27 +55,7 @@ export class ZButton {
     }
     static get properties() {
         return {
-            "ariaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "defines a string value that labels the internal interactive element. Used for accessibility."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "aria-label",
-                "defaultValue": "undefined"
-            },
-            "role": {
+            "htmlAriaLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -93,21 +64,17 @@ export class ZButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop has been deprecated in favor of `htmlrole` for better accessibility."
-                        }],
-                    "text": "Use `htmlrole` instead."
+                    "tags": [],
+                    "text": "`aria-label` for the internal button element. Mostly needed when no text is present, like for an icon-only button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "role",
-                "defaultValue": "\"\""
+                "attribute": "html-aria-label"
             },
-            "htmlrole": {
+            "htmlRole": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -119,12 +86,12 @@ export class ZButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "defines role attribute, used for accessibility."
+                    "text": "`role` attribute for the internal button element. Used for accessibility."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "htmlrole"
+                "attribute": "html-role"
             },
             "href": {
                 "type": "string",

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;QAiCE,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;KAgDzB;IA9CC,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,IAAI,EAAE,IAAI,CAAC,MAAM;YACjB,OAAO,EAAE;gBACP,qBAAqB,EAAE,IAAI;gBAC3B,oBAAoB,EAAE,IAAI,CAAC,OAAO;aACnC;YACD,YAAY,EAAE,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,IAAI,EAAE,KAAI,SAAS;SACtD,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,IAAI,IAAI,cAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,CACL,yBACM,IAAI,CAAC,UAAU,IACnB,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,IACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS;YAE/B,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  /** `aria-label` for the internal button element. Mostly needed when no text is present, like for an icon-only button. */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** `role` attribute for the internal button element. 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() {\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      \"aria-label\": this.htmlAriaLabel?.trim() || undefined,\n    };\n  }\n\n  private renderIcon(): HTMLZIconElement | undefined {\n    return this.icon && <z-icon name={this.icon} />;\n  }\n\n  render(): HTMLAnchorElement | HTMLButtonElement {\n    if (this.href) {\n      return (\n        <a\n          {...this.attributes}\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        name={this.name}\n        type={this.type}\n        disabled={this.disabled}\n        role={this.htmlRole || undefined}\n      >\n        {this.renderIcon()}\n        <slot />\n      </button>\n    );\n  }\n}\n"]}

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

@@ -36,7 +36,7 @@ export class ZButtonSort {
         return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
     }
     render() {
-        return (h("button", { key: '269e2d1a959dde597965561177dde2374d92a27b', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: 'e33cb753f6c120cdd12f5ea4251ca626cfc28711', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: 'c852c01e557ca5245352ddcc7e35a9fe2d9710fb', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'abc484df3ccc4a976831c3664e1e451620741419', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'f6325a573dd1f8f2208fb3edd70d176a2b7ad141', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '9f6cc523db408ecd628ebeca367fcd5238b53242', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '15464a3717dc9c43f7355afc6c937c705ad76bc0', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '6b16b77136dc5792df55388293496c27c8421c3c', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: 'f5b3555d64385543220424bc0e5e65b3d9208cb4', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'b58a48b94aad9b5867ccc71c885e2f2d48da56d5', name: "caret-up-down", width: 16, height: 16 })));
     }
     static get is() { return "z-button-sort"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,16 +8,14 @@ export class ZChip {
         this.variant = ZChipVariant.OUTLINE;
         /** set z-chip as disabled */
         this.disabled = false;
-        /** z-chip aria-label string */
-        this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '9a098f7915cfbb84e2290a853fe59b7e30c6f555', class: {
+        return (h("div", { key: '1d7f780bb25a957983564f132f34014c443db4fb', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
                 [this.variant]: true,
-            }, "aria-disabled": this.disabled ? "true" : undefined }, this.icon && h("z-icon", { key: 'e563c31c093f46beeda6e658c5c05e7c16a56204', name: this.icon }), h("slot", { key: '9b186a85b090df0ab12c030ee3a517ef253e62d6' }), this.interactiveIcon && (h("button", { key: '4a5dd47a8ec40062d0b564f165adb81b11a3b4a5', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '092864aef71920ba68f9d778797489e476c51971', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled ? "true" : undefined }, this.icon && h("z-icon", { key: '713b643f92f56eb2ba3860620af7d825e4670aa7', name: this.icon }), h("slot", { key: 'f1b591dea14c29a3e5357a5fd063de560bae1497' }), this.interactiveIcon && (h("button", { key: '3ba72530a98214d2c82b8cd98ea44d91cb4a849d', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.htmlAriaLabel || undefined, disabled: this.disabled }, h("z-icon", { key: 'e2c247e4b372b800facc047fd20d13331b72c7d9', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -145,7 +143,7 @@ export class ZChip {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "ariaLabel": {
+            "htmlAriaLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -154,16 +152,15 @@ export class ZChip {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "z-chip aria-label string"
+                    "text": "`aria-label` for the icon button"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "aria-label",
-                "defaultValue": "\"\""
+                "attribute": "html-aria-label"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,SAAS,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAQpD,MAAM,OAAO,KAAK;IANlB;QAaE,wDAAwD;QAExD,SAAI,GAAe,SAAS,CAAC,OAAO,CAAC;QAErC,0DAA0D;QAE1D,YAAO,GAAkB,YAAY,CAAC,OAAO,CAAC;QAM9C,6BAA6B;QAE7B,aAAQ,GAAa,KAAK,CAAC;QAE3B,+BAA+B;QAE/B,cAAS,GAAG,EAAE,CAAC;KAmChB;IA7BC,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;gBACjB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;aACrB,mBACc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAEhD,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,8DAAQ;YACP,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType, ZChipVariant} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip implements ComponentInterface {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip variant type, can be outline, filled or soft */\n  @Prop({reflect: true})\n  variant?: ZChipVariant = ZChipVariant.OUTLINE;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n          [this.variant]: true,\n        }}\n        aria-disabled={this.disabled ? \"true\" : undefined}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,SAAS,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAQpD,MAAM,OAAO,KAAK;IANlB;QAaE,wDAAwD;QAExD,SAAI,GAAe,SAAS,CAAC,OAAO,CAAC;QAErC,0DAA0D;QAE1D,YAAO,GAAkB,YAAY,CAAC,OAAO,CAAC;QAM9C,6BAA6B;QAE7B,aAAQ,GAAa,KAAK,CAAC;KAuC5B;IA7BC,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;gBACjB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;aACrB,mBACc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAEhD,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,8DAAQ;YACP,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,aAAa,IAAI,SAAS,EAC3C,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType, ZChipVariant} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip implements ComponentInterface {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip variant type, can be outline, filled or soft */\n  @Prop({reflect: true})\n  variant?: ZChipVariant = ZChipVariant.OUTLINE;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** `aria-label` for the icon button */\n  @Prop()\n  htmlAriaLabel?: string;\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n          [this.variant]: true,\n        }}\n        aria-disabled={this.disabled ? \"true\" : undefined}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.htmlAriaLabel || undefined}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-color-picker/index.js

@@ -192,7 +192,7 @@ export class ZColorPicker {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: 'ea14b99e379cb85851c041edc4c4136afd693ba1', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: 'a20a725ec68d917c9611ee844e33014a63baca19', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));

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

@@ -297,7 +297,7 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: 'a2df3543d11b1e568d1aa397a0cc4acd78496a1b', "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: 'd8c312f0c68c902a7c063f5ef8bfc1429e9c0183', "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"; }

package/dist/collection/components/z-cover-hero/index.js

@@ -44,9 +44,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '94a8612be36a5b2b14c93e68b8b6ecbf2cfb47c9' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'd4ce22a56ef897f184ae2e36d4ebc1c0735cf91b' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '7b57691247bc581f9c43f36c475892cf7927abbf', class: "main-container" }, h("div", { key: '46ff0b8886b5450e2a2d3a5df5cc4fd3adf5962b', class: "cover-container" }, h("slot", { key: 'c84a53350c2077d1201cd938745cb2e5c797b76b', name: "cover" })), h("slot", { key: '6debb9704761c43ed9c485b66e1e97e41f7780da', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '2d790a351a963c4ba71af3a6542f2b942ff27d4d', class: "main-container" }, h("div", { key: '4b2e472817f19b8180c661030932e5371937a4ed', class: "cover-container" }, h("slot", { key: '6a4224585e584d2f04a4e722e64c65a6e02857fa', name: "cover" })), h("slot", { key: '03ca9f7b7add04644db979a62ed328bf0d866338', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

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

@@ -10,7 +10,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '43a290ca09c39c630779133fa5fd9912fca785e0', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '336d858e90aea1150ee35c4cb25bb49c00e658f7', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '15c0d5cc4985a23bd1cba510e6c1d323ac0be0c4' });
+        return h(Host, { key: 'a72ef89fbc42376f89d92807f65a095cb5fc0468' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -48,7 +48,7 @@ export class ZIcon {
         return (h("svg", { id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined, viewBox: "0 0 1000 1000", width: this.width, height: this.height, "aria-hidden": "true" }, this.selectPathOrPolygon(ICONS[this.getTransparentIndicatorIconIfNeeded()])));
     }
     render() {
-        return (h(Host, { key: '7c57cd059787e6ec7d12b0aceb02f8b6bb5b79a2', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
+        return (h(Host, { key: 'dfb975a522bb0efeee162d107c49e683c543edfd', "aria-hidden": "true" }, this.hasColorIndicator && !this.needsTransparentIndicator ? (h("div", { class: "icon-wrapper" }, this.renderColorIndicator(), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-icon/styles.css

@@ -1,4 +1,10 @@
 :host {
+  /**
+   * @prop --z-icon-width: Width of the icon. Default is 1.125rem (18px).
+   * @prop --z-icon-height: Height of the icon. Default is 1.125rem (18px).
+   * @prop --z-icon-left-margin: Left margin of the icon. Default is 0.
+   * @prop --z-icon-right-margin: Right margin of the icon. Default is 0.
+   */
   display: inline;
   margin-right: var(--z-icon-right-margin, 0);
   margin-left: var(--z-icon-left-margin, 0);

package/dist/collection/components/z-info-box/index.js

@@ -1,17 +1,19 @@
-import { h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * @slot content - set the info box content
  */
 export class ZInfoBox {
     constructor() {
-        /** render close icon flag */
+        /** render close icon */
         this.isclosable = true;
+        /** Aria label for the close button */
+        this.closeButtonAriaLabel = "Chiudi pannello informazioni";
     }
     emitInfoBoxClose() {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '3cc569ffebd21d03c33f5764291fca612caae620', id: this.boxid }, h("slot", { key: 'a4110163e695bbbfa7e291771e3b531f3f678a3b', name: "content" }), this.isclosable && (h("z-icon", { key: 'bb3ec9d56fa2c52b38ceea0cfaf70a5c04dffd65', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h(Host, { key: '9a10d9eb99bec3ab96a9f2d76f22a82b88ef5d93', id: this.boxid }, h("div", { key: '3c1a9b5aed8fcd4e7edfd6103184043797db0611', class: "main-content" }, this.leftIcon && (h("div", { key: '4937f035f9734d141e3040d2b306eedc760fd52d', class: "left-icon" }, h("z-icon", { key: '6ddcc20b0985831563a297c47181902bf7724513', name: this.leftIcon }))), h("slot", { key: '2f0cbf4d39f61c3525e386400ec6246bd7c9e836', name: "content" }), this.isclosable && (h("button", { key: '977c3bc85ce7b21d4651258c912d54a43e031b52', class: "close-button", "aria-label": this.closeButtonAriaLabel, onClick: () => this.emitInfoBoxClose() }, h("z-icon", { key: '374bd9fa23bfda2f053f4d48c3fad67b75edee7e', name: "multiply" })))), h("slot", { key: '72945f9fee87f68a7de5f2aae470d8331b887dac', name: "additional-content" })));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }
@@ -58,13 +60,59 @@ export class ZInfoBox {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "render close icon flag"
+                    "text": "render close icon"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "isclosable",
                 "defaultValue": "true"
+            },
+            "closeButtonAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the close button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-button-aria-label",
+                "defaultValue": "\"Chiudi pannello informazioni\""
+            },
+            "leftIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconName",
+                    "resolved": "\"accessibility\" | \"accessibility-filled\" | \"active-note\" | \"active-note-filled\" | \"add-image\" | \"add-image-filled\" | \"add-note\" | \"add-note-filled\" | \"ai\" | \"ai-filled\" | \"ai-tips\" | \"ai-tips-filled\" | \"angle-settings\" | \"angle-settings-filled\" | \"app-switcher\" | \"app-switcher-button\" | \"app-switcher-filled\" | \"arrow-clockwise-down-left\" | \"arrow-clockwise-down-left-filled\" | \"arrow-clockwise-down-right\" | \"arrow-clockwise-down-right-filled\" | \"arrow-clockwise-up-left\" | \"arrow-clockwise-up-left-filled\" | \"arrow-clockwise-up-right\" | \"arrow-clockwise-up-right-filled\" | \"arrow-counterclockwise-down-left\" | \"arrow-counterclockwise-down-left-filled\" | \"arrow-counterclockwise-up-left\" | \"arrow-counterclockwise-up-left-filled\" | \"arrow-counterclockwise-up-right\" | \"arrow-counterclockwise-up-right-filled\" | \"arrow-down\" | \"arrow-down-filled\" | \"arrow-left\" | \"arrow-left-filled\" | \"arrow-left-right\" | \"arrow-left-right-filled\" | \"arrow-left-rounded\" | \"arrow-left-rounded-filled\" | \"arrow-left-square\" | \"arrow-left-square-filled\" | \"arrow-north-east\" | \"arrow-north-east-filled\" | \"arrow-north-east-square\" | \"arrow-north-east-square-filled\" | \"arrow-north-west\" | \"arrow-north-west-filled\" | \"arrow-north-west-square\" | \"arrow-north-west-square-filled\" | \"arrow-quad-down\" | \"arrow-quad-down-filled\" | \"arrow-quad-left\" | \"arrow-quad-left-filled\" | \"arrow-quad-north-east\" | \"arrow-quad-north-east-filled\" | \"arrow-quad-north-west\" | \"arrow-quad-north-west-filled\" | \"arrow-quad-right\" | \"arrow-quad-right-filled\" | \"arrow-quad-south-east\" | \"arrow-quad-south-east-filled\" | \"arrow-quad-south-west\" | \"arrow-quad-south-west-filled\" | \"arrow-quad-up\" | \"arrow-quad-up-filled\" | \"arrow-right\" | \"arrow-right-filled\" | \"arrow-right-rounded\" | \"arrow-right-rounded-filled\" | \"arrow-right-square\" | \"arrow-right-square-filled\" | \"arrow-simple-down\" | \"arrow-simple-down-filled\" | \"arrow-simple-left\" | \"arrow-simple-left-filled\" | \"arrow-simple-north-east\" | \"arrow-simple-north-east-filled\" | \"arrow-simple-north-west\" | \"arrow-simple-north-west-filled\" | \"arrow-simple-right\" | \"arrow-simple-right-filled\" | \"arrow-simple-south-east\" | \"arrow-simple-south-east-filled\" | \"arrow-simple-south-west\" | \"arrow-simple-south-west-filled\" | \"arrow-simple-up\" | \"arrow-simple-up-filled\" | \"arrow-small-left\" | \"arrow-small-left-filled\" | \"arrow-small-right\" | \"arrow-small-right-filled\" | \"arrow-south-east\" | \"arrow-south-east-filled\" | \"arrow-south-east-square\" | \"arrow-south-east-square-filled\" | \"arrow-south-west\" | \"arrow-south-west-filled\" | \"arrow-south-west-square\" | \"arrow-south-west-square-filled\" | \"arrow-square-down\" | \"arrow-square-down-filled\" | \"arrow-square-left\" | \"arrow-square-left-filled\" | \"arrow-square-north-east\" | \"arrow-square-north-east-filled\" | \"arrow-square-north-west\" | \"arrow-square-north-west-filled\" | \"arrow-square-right\" | \"arrow-square-right-filled\" | \"arrow-square-south-east\" | \"arrow-square-south-east-filled\" | \"arrow-square-south-west\" | \"arrow-square-south-west-filled\" | \"arrow-style\" | \"arrow-style-filled\" | \"arrow-style-line\" | \"arrow-style-line-filled\" | \"arrow-up\" | \"arrow-up-and-down\" | \"arrow-up-and-down-filled\" | \"arrow-up-down\" | \"arrow-up-down-double\" | \"arrow-up-down-double-filled\" | \"arrow-up-down-filled\" | \"arrow-up-filled\" | \"arrow-up-rounded\" | \"arrow-up-rounded-filled\" | \"arrow-up-square\" | \"arrow-up-square-filled\" | \"arrows-to-dot\" | \"arrows-to-dot-filled\" | \"art\" | \"art-filled\" | \"artist\" | \"artist-filled\" | \"artist-quote\" | \"artist-quote-filled\" | \"artistic-education\" | \"artistic-education-filled\" | \"artwork\" | \"artwork-filled\" | \"artworks\" | \"artworks-filled\" | \"ask-your-manager\" | \"assign-task\" | \"assign-task-button\" | \"assign-task-filled\" | \"atom\" | \"atom-button\" | \"atom-filled\" | \"back\" | \"back-filled\" | \"back-top\" | \"back-top-filled\" | \"barrage-questions\" | \"barrage-questions-filled\" | \"bg-color\" | \"bg-color-filled\" | \"bg-color-transparent\" | \"bg-color-transparent-filled\" | \"biology\" | \"biology-filled\" | \"black-circle\" | \"black-circle-filled\" | \"black-diamond\" | \"black-diamond-filled\" | \"black-nib\" | \"black-nib-filled\" | \"black-sun-with-rays\" | \"black-sun-with-rays-filled\" | \"blockquote\" | \"blockquote-filled\" | \"bold\" | \"bold-filled\" | \"book\" | \"book-add\" | \"book-author\" | \"book-author-filled\" | \"book-delete\" | \"book-filled\" | \"book-minus\" | \"book-minus-filled\" | \"book-plus\" | \"book-plus-filled\" | \"book-view\" | \"book-view-filled\" | \"bookmark\" | \"bookmark-filled\" | \"breaking-line\" | \"breaking-line-filled\" | \"bulleted-list\" | \"bulleted-list-filled\" | \"bulleted-list-square\" | \"bulleted-list-square-filled\" | \"bulls-eye\" | \"bulls-eye-filled\" | \"burger-menu\" | \"burger-menu-booktab\" | \"burger-menu-booktab-button\" | \"burger-menu-booktab-filled\" | \"burger-menu-filled\" | \"burger-menu-mobile\" | \"burger-menu-mobile-filled\" | \"c-circled\" | \"c-circled-filled\" | \"c-square\" | \"c-square-filled\" | \"calligraphic\" | \"calligraphic-filled\" | \"camera\" | \"camera-filled\" | \"caret-down\" | \"caret-down-filled\" | \"caret-up\" | \"caret-up-down\" | \"caret-up-down-filled\" | \"caret-up-filled\" | \"cart\" | \"catalog-card\" | \"catalog-card-filled\" | \"chapter\" | \"chapter-filled\" | \"character-panel\" | \"character-panel-filled\" | \"check-task\" | \"check-task-button\" | \"check-task-filled\" | \"checkbox\" | \"checkbox-checked\" | \"checkbox-checked-filled\" | \"checkbox-filled\" | \"checkbox-selected\" | \"checkbox-unchecked\" | \"checkmark\" | \"checkmark-circle\" | \"checkmark-circle-filled\" | \"checkmark-filled\" | \"checkmark-square\" | \"checkmark-square-button\" | \"checkmark-square-filled\" | \"chemistry\" | \"chemistry-filled\" | \"chevron-circle-down\" | \"chevron-circle-down-filled\" | \"chevron-circle-left\" | \"chevron-circle-left-filled\" | \"chevron-circle-right\" | \"chevron-circle-right-filled\" | \"chevron-circle-up\" | \"chevron-circle-up-filled\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-down-circle-filled\" | \"chevron-down-filled\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-left-circle-filled\" | \"chevron-left-filled\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-right-circle-filled\" | \"chevron-right-filled\" | \"chevron-up\" | \"chevron-up-circle\" | \"chevron-up-circle-filled\" | \"chevron-up-filled\" | \"cinese\" | \"cinese-filled\" | \"circle-black\" | \"circle-black-filled\" | \"circle-check\" | \"circle-chevron-down\" | \"circle-chevron-left\" | \"circle-chevron-up\" | \"circle-cross\" | \"circle-cross-fill\" | \"circle-cross-stroke\" | \"circle-plus\" | \"circle-warning\" | \"circle-white\" | \"circle-white-filled\" | \"civics\" | \"civics-filled\" | \"class-assign\" | \"class-assign-filled\" | \"clean\" | \"clean-filled\" | \"close\" | \"cloud-delete\" | \"cloud-delete-filled\" | \"cloud-download\" | \"cloud-download-filled\" | \"cloud-x\" | \"cloud-x-filled\" | \"club-black-suit\" | \"club-black-suit-filled\" | \"code\" | \"code-button\" | \"code-filled\" | \"collezioni\" | \"collezioni-filled\" | \"color-selected\" | \"color-selected-filled\" | \"communication\" | \"communication-filled\" | \"compare\" | \"compare-filled\" | \"compress\" | \"compress-filled\" | \"contextual-menu\" | \"contextual-menu-filled\" | \"copy\" | \"copy-filled\" | \"copy-to-clipboard\" | \"copy-to-clipboard-filled\" | \"copyright\" | \"copyright-filled\" | \"course\" | \"course-filled\" | \"cross\" | \"cursor-index\" | \"cursor-index-button\" | \"cursor-index-filled\" | \"curved-line\" | \"curved-line-filled\" | \"dagger\" | \"dagger-filled\" | \"daggerdbl\" | \"daggerdbl-filled\" | \"deactivate-note\" | \"deactivate-note-filled\" | \"decrease-indentation\" | \"decrease-indentation-filled\" | \"delete\" | \"delete-filled\" | \"diamond-black-suit\" | \"diamond-black-suit-filled\" | \"diamond-white\" | \"diamond-white-filled\" | \"dictionary-switch\" | \"dictionary-switch-filled\" | \"dictonary\" | \"dictonary-filled\" | \"disegno-arrow\" | \"disegno-arrow-filled\" | \"disegno-colours-intersection\" | \"disegno-colours-intersection-filled\" | \"disegno-compass\" | \"disegno-compass-filled\" | \"disegno-curve\" | \"disegno-curve-filled\" | \"disegno-ellipsis\" | \"disegno-ellipsis-filled\" | \"disegno-grid-settings\" | \"disegno-grid-settings-filled\" | \"disegno-half-line\" | \"disegno-half-line-filled\" | \"disegno-hide-tools\" | \"disegno-hide-tools-filled\" | \"disegno-irregular-polygon\" | \"disegno-irregular-polygon-filled\" | \"disegno-levels\" | \"disegno-levels-filled\" | \"disegno-poly-line\" | \"disegno-poly-line-filled\" | \"disegno-polygon-vertices\" | \"disegno-polygon-vertices-filled\" | \"disegno-protractor\" | \"disegno-protractor-filled\" | \"disegno-regular-polygon\" | \"disegno-regular-polygon-filled\" | \"disegno-ruler\" | \"disegno-ruler-filled\" | \"disegno-segment\" | \"disegno-segment-filled\" | \"disegno-straight-line\" | \"disegno-straight-line-filled\" | \"document\" | \"document-button\" | \"document-filled\" | \"document-with-text\" | \"document-with-text-filled\" | \"down-white-index\" | \"down-white-index-filled\" | \"download\" | \"download-filled\" | \"draft\" | \"draft-filled\" | \"drag-drop\" | \"drag-drop-filled\" | \"drag-indicator\" | \"drag-indicator-filled\" | \"drop-down\" | \"drop-up-down\" | \"economic\" | \"economic-filled\" | \"edit\" | \"edit-field\" | \"edit-field-filled\" | \"edit-filled\" | \"edit-picture\" | \"edit-picture-filled\" | \"electric-light-bulb\" | \"electric-light-bulb-filled\" | \"electrical-engineering\" | \"electrical-engineering-filled\" | \"email\" | \"email-filled\" | \"english\" | \"english-filled\" | \"enter\" | \"erase-tool\" | \"erase-tool-filled\" | \"event\" | \"event-cancelled\" | \"event-cancelled-filled\" | \"event-filled\" | \"excel-doc\" | \"excel-doc-button\" | \"excel-doc-filled\" | \"exclamation-circle\" | \"exclamation-circle-filled\" | \"exclamation-square\" | \"exclamation-square-filled\" | \"exercises\" | \"exercises-filled\" | \"exercises-interactive\" | \"exercises-interactive-button\" | \"exercises-interactive-filled\" | \"exercises-online\" | \"exercises-online-button\" | \"exercises-online-filled\" | \"exercises-plus\" | \"exercises-plus-button\" | \"exercises-plus-filled\" | \"exit\" | \"expand\" | \"expand-filled\" | \"external-link-down\" | \"external-link-left\" | \"external-link-right\" | \"external-link-right-up\" | \"extra\" | \"extra-filled\" | \"facebook\" | \"facebook-filled\" | \"favorites\" | \"favorites-filled\" | \"feed\" | \"feed-filled\" | \"file-zip\" | \"file-zip-button\" | \"file-zip-filled\" | \"fill-blanks\" | \"fill-blanks-filled\" | \"fill-choice\" | \"fill-choice-filled\" | \"film-frames\" | \"film-frames-button\" | \"film-frames-filled\" | \"find-error\" | \"find-error-filled\" | \"fit-height-view\" | \"fit-height-view-filled\" | \"fit-width-view\" | \"fit-width-view-filled\" | \"folder\" | \"folder-filled\" | \"font-book\" | \"font-book-filled\" | \"font-color\" | \"font-color-filled\" | \"frame-with-picture\" | \"frame-with-picture-filled\" | \"french\" | \"french-filled\" | \"fun\" | \"fun-filled\" | \"gap\" | \"gap-filled\" | \"gear\" | \"gear-filled\" | \"generic-note\" | \"generic-note-filled\" | \"geogebra\" | \"geogebra-button\" | \"geogebra-filled\" | \"geographical-map\" | \"geographical-map-filled\" | \"geography\" | \"geography-filled\" | \"german\" | \"german-filled\" | \"go-page\" | \"go-page-button\" | \"go-page-filled\" | \"golden-pen\" | \"golden-pen-filled\" | \"grades\" | \"grades-filled\" | \"graphic\" | \"graphic-filled\" | \"greek\" | \"greek-filled\" | \"headphone\" | \"headphone-button\" | \"headphone-filled\" | \"heart-black-suit\" | \"heart-black-suit-filled\" | \"helm\" | \"helm-filled\" | \"helmsymbol\" | \"helmsymbol-filled\" | \"highlights\" | \"highlights-filled\" | \"history\" | \"history-filled\" | \"history-next\" | \"history-next-filled\" | \"history-previous\" | \"history-previous-filled\" | \"home\" | \"home-filled\" | \"hourglass-flowing\" | \"hourglass-flowing-filled\" | \"hourglass-half-bottom\" | \"hourglass-half-bottom-filled\" | \"house\" | \"house-filled\" | \"human-sciences\" | \"human-sciences-filled\" | \"image\" | \"image-add\" | \"image-add-filled\" | \"image-button\" | \"image-edit\" | \"image-edit-filled\" | \"image-filled\" | \"image-jpg\" | \"image-jpg-filled\" | \"image-list\" | \"image-list-filled\" | \"image-png\" | \"image-png-filled\" | \"image-tiff\" | \"image-tiff-filled\" | \"immersive-reading\" | \"immersive-reading-filled\" | \"inbox-tray\" | \"inbox-tray-filled\" | \"increase-indentation\" | \"increase-indentation-filled\" | \"indeterminated-checkbox\" | \"indeterminated-checkbox-filled\" | \"index-down\" | \"index-down-filled\" | \"index-left\" | \"index-left-filled\" | \"index-right\" | \"index-right-filled\" | \"index-up\" | \"index-up-filled\" | \"info\" | \"info-filled\" | \"informatics\" | \"informatics-filled\" | \"informationsource\" | \"informationsource-filled\" | \"interactive-glossaries\" | \"interactive-glossaries-filled\" | \"interactives-maps\" | \"interactives-maps-button\" | \"interactives-maps-filled\" | \"italian\" | \"italian-filled\" | \"italic\" | \"italic-filled\" | \"laboratory\" | \"laboratory-filled\" | \"land-management\" | \"land-management-filled\" | \"latin\" | \"latin-filled\" | \"law\" | \"law-filled\" | \"lecture\" | \"lecture-button\" | \"lecture-filled\" | \"left-magnifying-glass\" | \"left-magnifying-glass-filled\" | \"left-white-index\" | \"left-white-index-filled\" | \"light-bulb\" | \"light-bulb-filled\" | \"link\" | \"link-button\" | \"link-filled\" | \"liquid-version\" | \"liquid-version-filled\" | \"list-bulleted-square\" | \"list-bulleted-square-filled\" | \"location\" | \"location-filled\" | \"lock\" | \"lock-filled\" | \"lock-open\" | \"lock-open-filled\" | \"login\" | \"login-button\" | \"login-filled\" | \"logout\" | \"logout-filled\" | \"lozenge\" | \"lozenge-filled\" | \"magnet-snap\" | \"magnet-snap-filled\" | \"magnfying-glass\" | \"magnfying-glass-filled\" | \"map\" | \"map-filled\" | \"math\" | \"math-filled\" | \"mechanics\" | \"mechanics-filled\" | \"medium-black-square\" | \"medium-black-square-filled\" | \"medium-white-square\" | \"medium-white-square-filled\" | \"menu-burger\" | \"minus\" | \"minus-circled\" | \"minus-circled-filled\" | \"minus-filled\" | \"minus-square\" | \"minus-square-filled\" | \"monospace\" | \"monospace-filled\" | \"multi-marks\" | \"multi-marks-button\" | \"multi-marks-filled\" | \"multiple-choice\" | \"multiple-choice-filled\" | \"multiply\" | \"multiply-circle\" | \"multiply-circle-filled\" | \"multiply-circled\" | \"multiply-circled-filled\" | \"multiply-filled\" | \"multiply-square\" | \"multiply-square-filled\" | \"music\" | \"music-filled\" | \"my-data\" | \"my-data-filled\" | \"natural-science\" | \"natural-science-filled\" | \"next-text-to-speech\" | \"next-text-to-speech-filled\" | \"nib\" | \"nib-filled\" | \"nobel\" | \"nobel-filled\" | \"note\" | \"note-filled\" | \"notification\" | \"notification-filled\" | \"notification-new\" | \"notification-new-filled\" | \"notification-off\" | \"notification-off-filled\" | \"numbered-list\" | \"numbered-list-filled\" | \"nutritional-sciences\" | \"nutritional-sciences-filled\" | \"open-answer\" | \"open-answer-filled\" | \"open-file-folder\" | \"open-file-folder-filled\" | \"open-lock\" | \"open-lock-filled\" | \"oval\" | \"oval-filled\" | \"paragraph\" | \"paragraph-filled\" | \"pause\" | \"pause-filled\" | \"pdf\" | \"pdf-button\" | \"pdf-filled\" | \"pen-thickness\" | \"pen-thickness-filled\" | \"people\" | \"people-filled\" | \"periodic-table\" | \"periodic-table-button\" | \"periodic-table-filled\" | \"philosophy\" | \"philosophy-filled\" | \"physics\" | \"physics-filled\" | \"picker-color\" | \"picker-color-filled\" | \"play\" | \"play-button\" | \"play-filled\" | \"plus\" | \"plus-circled\" | \"plus-circled-filled\" | \"plus-filled\" | \"plus-square\" | \"plus-square-filled\" | \"pointer\" | \"pointer-button\" | \"pointer-filled\" | \"powerpoint\" | \"powerpoint-button\" | \"powerpoint-filled\" | \"previous-text-to-speech\" | \"previous-text-to-speech-filled\" | \"print\" | \"print-filled\" | \"progress-percentage\" | \"progress-percentage-filled\" | \"projection\" | \"projection-filled\" | \"projection-room\" | \"projection-room-filled\" | \"python-code\" | \"python-code-button\" | \"python-code-filled\" | \"qrcode\" | \"qrcode-filled\" | \"quad\" | \"quad-filled\" | \"question-mark\" | \"question-mark-circle\" | \"question-mark-circle-filled\" | \"question-mark-square\" | \"question-mark-square-filled\" | \"quick-assign\" | \"quick-assign-filled\" | \"quiz\" | \"quiz-filled\" | \"radio-button\" | \"radio-button-checked\" | \"radio-button-checked-filled\" | \"radio-button-filled\" | \"reading-settings\" | \"reading-settings-filled\" | \"recently-viewed\" | \"recently-viewed-filled\" | \"redo\" | \"redo-filled\" | \"reduce-screen\" | \"reduce-screen-filled\" | \"registro-filter\" | \"registro-filter-filled\" | \"reload\" | \"reload-filled\" | \"remove-formatting\" | \"remove-formatting-filled\" | \"right-white-index\" | \"right-white-index-filled\" | \"russian\" | \"russian-filled\" | \"sans-serif\" | \"sans-serif-filled\" | \"save\" | \"save-filled\" | \"school\" | \"school-filled\" | \"science\" | \"science-earth\" | \"science-earth-filled\" | \"science-filled\" | \"screenfull\" | \"screenfull-filled\" | \"search\" | \"search-filled\" | \"send\" | \"send-filled\" | \"serif\" | \"serif-filled\" | \"share\" | \"share-filled\" | \"shopping-cart\" | \"shopping-cart-filled\" | \"short-cut\" | \"short-cut-filled\" | \"show-video\" | \"show-video-button\" | \"show-video-filled\" | \"site-resources\" | \"site-resources-filled\" | \"skip-back\" | \"skip-back-by-10\" | \"skip-back-by-10-filled\" | \"skip-back-filled\" | \"skip-forward\" | \"skip-forward-by-10\" | \"skip-forward-by-10-filled\" | \"skip-forward-filled\" | \"smartphone\" | \"smartphone-filled\" | \"snap-grid\" | \"snap-grid-filled\" | \"snap-grid-off\" | \"snap-grid-off-filled\" | \"spade-black-suit\" | \"spade-black-suit-filled\" | \"spanish\" | \"spanish-filled\" | \"speaker-off\" | \"speaker-off-filled\" | \"speaker-on\" | \"speaker-on-filled\" | \"speech-synthesis\" | \"speech-synthesis-filled\" | \"sport-sciences\" | \"sport-sciences-filled\" | \"square-black\" | \"square-black-filled\" | \"square-white\" | \"square-white-filled\" | \"star-empty\" | \"star-empty-filled\" | \"star-full\" | \"star-full-filled\" | \"story\" | \"story-filled\" | \"straight-line\" | \"straight-line-filled\" | \"strike-through-text\" | \"strike-through-text-filled\" | \"strikethrough-text\" | \"strikethrough-text-filled\" | \"stroke-color\" | \"stroke-color-filled\" | \"stroke-size\" | \"stroke-size-filled\" | \"stroke-size-large\" | \"stroke-size-large-filled\" | \"stroke-size-medium\" | \"stroke-size-medium-filled\" | \"stroke-size-small\" | \"stroke-size-small-filled\" | \"stroke-solid\" | \"stroke-solid-dash\" | \"stroke-solid-dash-filled\" | \"stroke-solid-dot\" | \"stroke-solid-dot-filled\" | \"stroke-solid-filled\" | \"stroke-style\" | \"stroke-style-filled\" | \"student\" | \"student-filled\" | \"subscript\" | \"subscript-filled\" | \"subtitles\" | \"subtitles-filled\" | \"suit-club\" | \"suit-club-filled\" | \"suit-diamond\" | \"suit-diamond-filled\" | \"suit-heart\" | \"suit-heart-filled\" | \"suit-spade\" | \"suit-spade-filled\" | \"sun-with-rays\" | \"sun-with-rays-black\" | \"sun-with-rays-black-filled\" | \"sun-with-rays-filled\" | \"support\" | \"support-filled\" | \"supscript\" | \"supscript-filled\" | \"switch\" | \"switch-filled\" | \"synchronize\" | \"synchronize-filled\" | \"table-insert\" | \"table-insert-filled\" | \"target\" | \"target-filled\" | \"teacher\" | \"teacher-filled\" | \"technique\" | \"technique-filled\" | \"technology\" | \"technology-filled\" | \"text\" | \"text-align-center\" | \"text-align-center-filled\" | \"text-align-justify\" | \"text-align-justify-filled\" | \"text-align-left\" | \"text-align-left-filled\" | \"text-align-right\" | \"text-align-right-filled\" | \"text-filled\" | \"text-large\" | \"text-large-filled\" | \"text-medium\" | \"text-medium-filled\" | \"text-scale\" | \"text-scale-filled\" | \"text-small\" | \"text-small-filled\" | \"text-to-speech\" | \"text-to-speech-filled\" | \"textual-analysis\" | \"textual-analysis-button\" | \"textual-analysis-filled\" | \"theory-help\" | \"theory-help-filled\" | \"thumbnail\" | \"thumbnail-filled\" | \"thumbs-down\" | \"thumbs-down-filled\" | \"thumbs-up\" | \"thumbs-up-filled\" | \"ticket\" | \"ticket-filled\" | \"timeline\" | \"timeline-filled\" | \"timer-clock\" | \"timer-clock-filled\" | \"topic\" | \"topic-filled\" | \"topography\" | \"topography-filled\" | \"tourist-technique\" | \"tourist-technique-filled\" | \"translation\" | \"translation-filled\" | \"true-false\" | \"true-false-filled\" | \"u-circle\" | \"u-circle-filled\" | \"u-square\" | \"u-square-filled\" | \"underlined-text\" | \"underlined-text-filled\" | \"undo\" | \"undo-filled\" | \"up-white-index\" | \"up-white-index-filled\" | \"upload\" | \"upload-filled\" | \"user\" | \"user-avatar\" | \"user-avatar-filled\" | \"view\" | \"view-double-page\" | \"view-double-page-filled\" | \"view-filled\" | \"view-off\" | \"view-off-filled\" | \"view-options\" | \"view-options-filled\" | \"view-single-page\" | \"view-single-page-filled\" | \"virtual-class\" | \"virtual-class-filled\" | \"virtual-reality\" | \"virtual-reality-button\" | \"virtual-reality-filled\" | \"white-circle\" | \"white-circle-filled\" | \"white-diamond\" | \"white-diamond-filled\" | \"word\" | \"word-button\" | \"word-filled\" | \"working-bag\" | \"working-bag-filled\" | \"workplace-zanichelli\" | \"workplace-zanichelli-filled\" | \"workspace-zanichelli\" | \"workspace-zanichelli-filled\" | \"youtube\" | \"youtube-filled\" | \"zoom-in\" | \"zoom-in-filled\" | \"zoom-out\" | \"zoom-out-filled\" | \"zte\" | \"zte-filled\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../constants/iconset",
+                            "id": "src/constants/iconset.ts::IconName",
+                            "referenceLocation": "IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the icon to display on the top left of the info box.\nThe icon's color will be inherited from the border color set through the `--z-info-box--border-color` CSS variable, if set.\nOtherwise it can be customized using the `--z-info-box--left-icon-color` CSS variable.\nIf none of them is set, the icon will be colored using the `--color-primary01-icon` token."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-icon"
             }
         };
     }
@@ -80,8 +128,8 @@ export class ZInfoBox {
                     "text": "emitted on close icon click"
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "{boxid: string}",
+                    "resolved": "{ boxid: string; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/z-info-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE1F;;GAEG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAUE,6BAA6B;QAE7B,eAAU,GAAG,IAAI,CAAC;KAwBnB;IAlBS,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,EAAE,EAAE,IAAI,CAAC,KAAK;YACjB,6DAAM,IAAI,EAAC,SAAS,GAAG;YACtB,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,IAAI,EAAC,UAAU,iBACH,cAAc,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,GACtC,CACH,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Event, EventEmitter, Prop, h} from \"@stencil/core\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n  tag: \"z-info-box\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoBox implements ComponentInterface {\n  /** info box unique id */\n  @Prop()\n  boxid: string;\n\n  /** render close icon flag */\n  @Prop()\n  isclosable = true;\n\n  /** emitted on close icon click */\n  @Event()\n  infoBoxClose: EventEmitter;\n\n  private emitInfoBoxClose(): void {\n    this.infoBoxClose.emit({boxid: this.boxid});\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <div id={this.boxid}>\n        <slot name=\"content\" />\n        {this.isclosable && (\n          <z-icon\n            name=\"multiply\"\n            data-action=\"infoBoxClose\"\n            onClick={() => this.emitInfoBoxClose()}\n          />\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-info-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAGhG;;GAEG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAUE,wBAAwB;QAExB,eAAU,GAAG,IAAI,CAAC;QAElB,sCAAsC;QAEtC,yBAAoB,GAAG,8BAA8B,CAAC;KA8CvD;IA/BS,gBAAgB;QACtB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,EAAE,EAAE,IAAI,CAAC,KAAK;YAClB,4DAAK,KAAK,EAAC,cAAc;gBACtB,IAAI,CAAC,QAAQ,IAAI,CAChB,4DAAK,KAAK,EAAC,WAAW;oBACpB,+DAAQ,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAI,CAC3B,CACP;gBAED,6DAAM,IAAI,EAAC,SAAS,GAAG;gBAEtB,IAAI,CAAC,UAAU,IAAI,CAClB,+DACE,KAAK,EAAC,cAAc,gBACR,IAAI,CAAC,oBAAoB,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE;oBAEtC,+DAAQ,IAAI,EAAC,UAAU,GAAG,CACnB,CACV,CACG;YAEN,6DAAM,IAAI,EAAC,oBAAoB,GAAG,CAC7B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Event, EventEmitter, Host, Prop, h} from \"@stencil/core\";\nimport {IconName} from \"../../constants/iconset\";\n\n/**\n * @slot content - set the info box content\n */\n@Component({\n  tag: \"z-info-box\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZInfoBox implements ComponentInterface {\n  /** info box unique id */\n  @Prop()\n  boxid: string;\n\n  /** render close icon */\n  @Prop({reflect: true})\n  isclosable = true;\n\n  /** Aria label for the close button */\n  @Prop()\n  closeButtonAriaLabel = \"Chiudi pannello informazioni\";\n\n  /**\n   * Name of the icon to display on the top left of the info box.\n   * The icon's color will be inherited from the border color set through the `--z-info-box--border-color` CSS variable, if set.\n   * Otherwise it can be customized using the `--z-info-box--left-icon-color` CSS variable.\n   * If none of them is set, the icon will be colored using the `--color-primary01-icon` token.\n   */\n  @Prop()\n  leftIcon: IconName;\n\n  /** emitted on close icon click */\n  @Event()\n  infoBoxClose: EventEmitter<{boxid: string}>;\n\n  private emitInfoBoxClose(): void {\n    this.infoBoxClose.emit({boxid: this.boxid});\n  }\n\n  render(): HTMLDivElement {\n    return (\n      <Host id={this.boxid}>\n        <div class=\"main-content\">\n          {this.leftIcon && (\n            <div class=\"left-icon\">\n              <z-icon name={this.leftIcon} />\n            </div>\n          )}\n\n          <slot name=\"content\" />\n\n          {this.isclosable && (\n            <button\n              class=\"close-button\"\n              aria-label={this.closeButtonAriaLabel}\n              onClick={() => this.emitInfoBoxClose()}\n            >\n              <z-icon name=\"multiply\" />\n            </button>\n          )}\n        </div>\n\n        <slot name=\"additional-content\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/z-info-box/styles.css

@@ -1,23 +1,73 @@
+:host,
+*,
+::slotted(*) {
+  box-sizing: border-box;
+}
+
 :host {
+  /**
+   * @prop --z-info-box--border-color: The border color of the info box.
+   * @prop --z-info-box--background-color: The background color of the info box.
+   * @prop --z-info-box--left-icon-color: The fill color of the icon displayed on the top left of the info box. If `--z-info-box--border-color` is set, this property will default to that value. Otherwise, it will default to `--color-primary01-icon`.
+   */
+  --z-info-box--border-color: unset;
+  --z-info-box--left-icon-color: var(--z-info-box--border-color, var(--color-primary01-icon));
+  --z-info-box--background-color: var(--color-primary03);
+
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);
+  border: var(--border-size-medium) solid var(--z-info-box--border-color, transparent);
+  background: var(--z-info-box--background-color);
+  border-radius: var(--border-radius);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  gap: calc(var(--space-unit) * 2);
 }
 
-:host > div {
+.main-content {
   display: flex;
-  width: inherit;
-  padding: calc(var(--space-unit) * 2);
-  background: var(--color-primary03);
-  border-radius: var(--border-radius);
+  align-items: flex-start;
+}
+
+/* visually vertically align the icons to the first line of the text content */
+.main-content .left-icon,
+.close-button {
+  display: flex;
+  height: 1.25rem;
+  align-items: center;
 }
 
-:host > div > slot {
+.main-content .left-icon z-icon {
+  --z-icon-width: 1rem;
+  --z-icon-height: 1rem;
+
+  fill: var(--z-info-box--left-icon-color);
+}
+
+::slotted([slot="content"]) {
   color: var(--color-default-text);
-  font-size: 14px;
+  font-size: var(--font-size-2);
+  line-height: 1.25rem;
+}
+
+.main-content .left-icon + ::slotted([slot="content"]) {
+  margin-left: var(--space-unit);
 }
 
-:host > div > z-icon {
-  margin-left: calc(var(--space-unit) * 2);
+:host([isclosable]) ::slotted([slot="content"]) {
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.close-button {
+  padding: 0;
+  border: none;
+  margin: 0;
+  margin-left: auto;
+  background: none;
   cursor: pointer;
-  fill: var(--color-primary01);
+}
+
+.close-button z-icon {
+  fill: var(--color-primary01-icon);
 }