@zanichelli/albe-web-components 19.2.0 → 19.2.1-RC

package/dist/collection/components/z-accordion/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Args, Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZAccordion} from \".\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\nconst cssPropsArgs = {\n  \"--z-accordion-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-label-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-disabled-label-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"isDisabled\",\n      truthy: true,\n    },\n  },\n  \"--z-accordion-content-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-content-fg\": getColorTokenArgConfig(true),\n  \"--z-accordion-hover-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-highlight-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"highlight\",\n      truthy: true,\n    },\n  },\n} as const;\n\ntype ZAccordionStoriesArgs = ZAccordion &\n  CSSVarsArguments<\n    | keyof typeof cssPropsArgs\n    | `z-accordion-${\"left\" | \"right\"}-padding`\n    | \"z-accordion-label-font-weight\"\n    | `z-accordion-highlight-color${number | undefined}`\n  >;\n\n/**\n * To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.\n */\nconst StoryMeta = {\n  title: \"ZAccordion\",\n  component: \"z-accordion\",\n  argTypes: {\n    ...cssPropsArgs,\n    icon: {\n      options: [null, ...Object.keys(ICONS).sort()],\n      control: {\n        type: \"select\",\n        labels: {\n          null: \"—\",\n        },\n      },\n    },\n    shadow: {\n      if: {\n        arg: \"variant\",\n        eq: AccordionVariant.BACKGROUND,\n      },\n    },\n    size: {\n      options: Object.values(ControlSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    variant: {\n      options: Object.values(AccordionVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    \"--z-accordion-bg\": null,\n    \"--z-accordion-label-color\": null,\n    \"--z-accordion-disabled-label-color\": null,\n    \"--z-accordion-content-bg\": null,\n    \"--z-accordion-content-fg\": null,\n    \"--z-accordion-hover-color\": null,\n    \"--z-accordion-highlight-color\": null,\n    \"--z-accordion-right-padding\": \"var(--space-unit)\",\n    \"--z-accordion-left-padding\": \"calc(var(--space-unit) * 2)\",\n    \"--z-accordion-label-font-weight\": \"var(--font-sb)\",\n    \"highlight\": false,\n    \"icon\": null,\n    \"isDisabled\": false,\n    \"label\": \"Text label\",\n    \"open\": false,\n    \"shadow\": true,\n    \"size\": ControlSize.BIG,\n    \"variant\": AccordionVariant.DEFAULT,\n  },\n  render: (args: Args): TemplateResult =>\n    html`<z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>`,\n} satisfies Meta<ZAccordionStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZAccordionStoriesArgs>;\n\nexport const Default = {};\n\n/**\n * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.\n */\nexport const Stack = {\n  argTypes: {\n    \"--z-accordion-highlight-color2\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color3\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color4\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n  },\n  args: {\n    \"--z-accordion-highlight-color2\": null,\n    \"--z-accordion-highlight-color3\": null,\n    \"--z-accordion-highlight-color4\": null,\n  },\n  parameters: {\n    controls: {\n      exclude: [\"open\"],\n    },\n  },\n  render: (args) =>\n    html`${[\n      StoryMeta.render(args),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color2\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color3\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color4\"],\n      }),\n    ]}`,\n} satisfies Story;\n\nexport const WithTags = {\n  render: (args) => html`\n    <z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      <z-tag slot=\"tag\">Tag 1</z-tag>\n      <z-tag slot=\"tag\">Tag 2</z-tag>\n      <z-tag slot=\"tag\">Tag 3</z-tag>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-accordion/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Args, Meta, StoryObj} from \"@storybook/web-components\";\nimport {html, type TemplateResult} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZAccordion} from \".\";\nimport {AccordionVariant, ControlSize} from \"../../beans\";\nimport {ICONS} from \"../../constants/iconset\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-tag/index\";\nimport \"./index\";\n\nconst cssPropsArgs = {\n  \"--z-accordion-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-label-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-disabled-label-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"isDisabled\",\n      truthy: true,\n    },\n  },\n  \"--z-accordion-content-bg\": getColorTokenArgConfig(true),\n  \"--z-accordion-content-fg\": getColorTokenArgConfig(true),\n  \"--z-accordion-hover-color\": getColorTokenArgConfig(true),\n  \"--z-accordion-highlight-color\": {\n    ...getColorTokenArgConfig(true),\n    if: {\n      arg: \"highlight\",\n      truthy: true,\n    },\n  },\n} as const;\n\ntype ZAccordionStoriesArgs = ZAccordion &\n  CSSVarsArguments<\n    | keyof typeof cssPropsArgs\n    | `z-accordion-${\"left\" | \"right\"}-padding`\n    | \"z-accordion-label-font-weight\"\n    | `z-accordion-highlight-color${number | undefined}`\n  >;\n\n/**\n * To add the highlight band on the left, set the `highlight` property to `true` then set the `--z-accordion-highlight-color` CSS variable to the desired color.\n */\nconst StoryMeta = {\n  title: \"ZAccordion\",\n  component: \"z-accordion\",\n  argTypes: {\n    ...cssPropsArgs,\n    icon: {\n      options: [null, ...Object.keys(ICONS).sort()],\n      control: {\n        type: \"select\",\n        labels: {\n          null: \"—\",\n        },\n      },\n    },\n    shadow: {\n      if: {\n        arg: \"variant\",\n        eq: AccordionVariant.BACKGROUND,\n      },\n    },\n    size: {\n      options: Object.values(ControlSize),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n    variant: {\n      options: Object.values(AccordionVariant),\n      control: {\n        type: \"inline-radio\",\n      },\n    },\n  },\n  args: {\n    \"--z-accordion-bg\": null,\n    \"--z-accordion-label-color\": null,\n    \"--z-accordion-disabled-label-color\": null,\n    \"--z-accordion-content-bg\": null,\n    \"--z-accordion-content-fg\": null,\n    \"--z-accordion-hover-color\": null,\n    \"--z-accordion-highlight-color\": \"var(--color-primary01)\",\n    \"--z-accordion-right-padding\": \"var(--space-unit)\",\n    \"--z-accordion-left-padding\": \"calc(var(--space-unit) * 2)\",\n    \"--z-accordion-label-font-weight\": \"var(--font-sb)\",\n    \"highlight\": false,\n    \"icon\": null,\n    \"isDisabled\": false,\n    \"label\": \"Text label\",\n    \"open\": false,\n    \"shadow\": true,\n    \"size\": ControlSize.BIG,\n    \"variant\": AccordionVariant.DEFAULT,\n  },\n  render: (args: Args): TemplateResult =>\n    html`<z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>`,\n} satisfies Meta<ZAccordionStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZAccordionStoriesArgs>;\n\nexport const Default = {};\n\n/**\n * When multiple `ZAccordion`s are placed in stack, the style is automatically optimized through global styles.\n */\nexport const Stack = {\n  argTypes: {\n    \"--z-accordion-highlight-color2\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color3\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n    \"--z-accordion-highlight-color4\": cssPropsArgs[\"--z-accordion-highlight-color\"],\n  },\n  args: {\n    \"--z-accordion-highlight-color2\": \"var(--color-primary01)\",\n    \"--z-accordion-highlight-color3\": \"var(--color-primary01)\",\n    \"--z-accordion-highlight-color4\": \"var(--color-primary01)\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"open\"],\n    },\n  },\n  render: (args) =>\n    html`${[\n      StoryMeta.render(args),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color2\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color3\"],\n      }),\n      StoryMeta.render({\n        ...args,\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color4\"],\n      }),\n    ]}`,\n} satisfies Story;\n\nexport const WithTags = {\n  render: (args) => html`\n    <z-accordion\n      .highlight=${args.highlight}\n      .icon=${args.icon}\n      .isDisabled=${args.isDisabled}\n      .open=${args.open}\n      .shadow=${args.shadow}\n      label=${args.label}\n      size=${args.size}\n      variant=${args.variant}\n      style=${styleMap({\n        \"--z-accordion-highlight-color\": args[\"--z-accordion-highlight-color\"],\n        \"--z-accordion-bg\": args[\"--z-accordion-bg\"],\n        \"--z-accordion-label-color\": args[\"--z-accordion-label-color\"],\n        \"--z-accordion-disabled-label-color\": args[\"--z-accordion-disabled-label-color\"],\n        \"--z-accordion-content-bg\": args[\"--z-accordion-content-bg\"],\n        \"--z-accordion-content-fg\": args[\"--z-accordion-content-fg\"],\n        \"--z-accordion-hover-color\": args[\"--z-accordion-hover-color\"],\n        \"--z-accordion-right-padding\": args[\"--z-accordion-right-padding\"],\n        \"--z-accordion-left-padding\": args[\"--z-accordion-left-padding\"],\n        \"--z-accordion-label-font-weight\": args[\"--z-accordion-label-font-weight\"],\n      })}\n    >\n      <z-tag slot=\"tag\">Tag 1</z-tag>\n      <z-tag slot=\"tag\">Tag 2</z-tag>\n      <z-tag slot=\"tag\">Tag 3</z-tag>\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede,\n      qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n      summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n      torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero\n      sum nescius esse utilitatem in historia, non modo voluptatem.\n    </z-accordion>\n  `,\n} satisfies Story;\n"]}

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

@@ -177,6 +177,8 @@ summary z-icon.z-accordion-chevron {
 
 :host([variant="background"]) .z-accordion-content {
   padding-right: calc(var(--space-unit) * 2);
+  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
+  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
 }
 
 :host([is-disabled]) .z-accordion-label {
@@ -224,37 +226,3 @@ summary z-icon.z-accordion-chevron {
     --z-icon-height: 18px;
   }
 }
-
-/* Style for sibling accordions in a stack context */
-
-z-accordion + z-accordion {
-  border-top: none;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"] {
-  border-radius: 0;
-}
-
-z-accordion[variant="background"]:first-of-type:not(:last-of-type) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary) {
-  border-radius: 0;
-}
-
-z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
-  border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
-  border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
-}

package/dist/collection/components/z-anchor-navigation/index.js

@@ -51,7 +51,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '3d9a8c823dae6090990a8f0a1b7498589824e629', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: 'bf5858d8dcba5601c94b36ae087c44ace5a047a9', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: '78812ef819a063dd7e8f0bcd55ceab6bbb419219', ref: (el) => (this.nav = el) }, h("slot", { key: '1c2aa06b4837962e032379844fc2fb642bbf8d10' }))));
+        return (h(Host, { key: 'd019c9a42fbdf7987ad2115fac3803e35e2c838a', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: 'cca133f6627d30ef523923dd288c351fe73a37d8', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'ae497ef7b0c4a54445aadadf90c5e2e0119a2d11', ref: (el) => (this.nav = el) }, h("slot", { key: 'b0aad81924302ff9b73ac6a8fceaa07a7aefac13' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-app-header/index.js

@@ -257,7 +257,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'cabccb026186feb602cd31cc410ac12bb374326d', "menu-length": this.menuLength }, h("div", { key: 'c684735c076498f245c528f48cf306bf21cbb8ba', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '30beac4e17122b912943f83cd9f57498200cc5d5', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'cd5ceee248c0ef5283df7d846be121256933e75e', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '96d7891d2fef52dd8b601d31a4a36e3635428775', name: "top-subtitle" }))), h("div", { key: '552c146d1edc5ecad7ed354859787c9ae811bbe1', class: "heading-title" }, h("slot", { key: 'a03a2cb293b596de013ccf6279a75d11b719f054', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '47899e75dea4f44b50ef4f981037e7a8d7652403', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '46d0be7f5ac779ed93ff061332dbf8289d041b6d', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'a552a43cbf8b3bab46285bc2b5846c4925341eaa', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '7f93c00e6183af3a08b87513f2a41a0ec16c0b1d', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a823113610378e9d634bf1779f5be2f5dc0c39f1', "menu-length": this.menuLength }, h("div", { key: 'c93cc0d8ef6cfba9875b2a4be50f065a4c276329', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '5138c2f0828d182ca610696b341f7292a12dc29b', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '3ccea8b1134d18c47e7736683090a5cff1f5805c', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: '7f2e046036bb62644b4d20ebcea6879d146f7900', name: "top-subtitle" }))), h("div", { key: 'a6be051f516f7e23348c7e3781463048f49c4fb5', class: "heading-title" }, h("slot", { key: '561fab39ded745bfc44a3ed6b16df481771b71eb', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'd0339b71194c5b61da665a3ccf38f9188a6b11c9', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '016d2598ab5e436713dc70a100100ecc7490729e', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '8cef304ecced8d2f4f6ba454db5c7ef74fcaed87', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9bd29440ce257ab3b6f58567713823c2047d7b2c', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-aria-alert/index.js

@@ -5,7 +5,7 @@ export class ZAriaAlert {
         this.mode = ZAriaAlertMode.POLITE;
     }
     render() {
-        return (h(Host, { key: '14f0e24e89aba53c3ef6147cc371f3123f5ff688', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: '1e1f8ef102be9d3f3302059f74e170c43158855b' })));
+        return (h(Host, { key: '507fd85bea3bc6cdfa0915afaf57866e29cc36e3', "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, h("slot", { key: 'b28a7129f907a00beb9e5aa186f2960d7d6c4d1d' })));
     }
     static get is() { return "z-aria-alert"; }
     static get properties() {

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

@@ -24,10 +24,10 @@ export class ZAvatar {
         }
     }
     render() {
-        return (h(Host, { key: 'dc2adbb87d2c5f77e364434c7567612e0ad2328d', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        return (h(Host, { key: '8ce8c6ffe56b55036f9f47146041fcb91051ad36', class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
                 color: `var(--${this.textColor})`,
                 backgroundColor: `var(--${this.backgroundColor})`,
-            } }, this.text && !this.image && h("span", { key: '3fe07d541e5afe7116066e8e18bdaa844d06b170' }, this.text.substring(0, 2)), this.image && (h("img", { key: '8e4154861822c5811f8dbe561f9ae01b88d5329e', src: this.image, onError: () => (this.image = "") }))));
+            } }, this.text && !this.image && h("span", { key: 'b989378860518c05074dcf3cf445df062679f3c1' }, this.text.substring(0, 2)), this.image && (h("img", { key: '56a3a248fe3f88b2ed285f6a7c133b542ca21940', src: this.image, onError: () => (this.image = "") }))));
     }
     static get is() { return "z-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -21,7 +21,7 @@ export class ZBookCover {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'cb9ca394ffb718b1ee17b30de51d1ef4d18bb284' }, this.multiple && (h(Fragment, { key: 'd4dc53f421ea3ca6b10c2a5e2462eb650788d0a1' }, h("div", { key: 'fd2f7bb51d5f9d1e7d56b09826b699cbc31a6e9f', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: '9a6330bc9f4475779b202dcb243b39e94a0b3d93', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '98e5002bfdc0bd0de7d8099e6e492cd6c6ad1d50', class: "cover-container" }, h("img", { key: 'a2ade090738ddfc7997bfd3b398714cd030b94bd', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '903b917bb54fe41da063606f2848390b168e3ccd', name: "coverOverlay" }))));
+        return (h(Host, { key: 'a39c5ae748e87831c5032997d7b98ec3884bce13' }, this.multiple && (h(Fragment, { key: 'ffbce1953710801b0967cef86d3f3d525a08e83a' }, h("div", { key: '29fa36521978e853ae6518cf39c62479f83fe876', class: "shifted-stack-cover stack-cover-2" }), h("div", { key: 'a3922017b9e6d1492bb0a4d3f29ee3438a674f11', class: "shifted-stack-cover stack-cover-1" }))), h("div", { key: '73141066121f7d8a66319962294af2f368fe4523', class: "cover-container" }, h("img", { key: '41de1cbfe5faae14c4e6c52e25e0f64a80792555', src: (_a = this.cover) !== null && _a !== void 0 ? _a : defaultFallbackCover, "aria-hidden": "true", alt: "", onError: () => (this.cover = this.fallbackCover || defaultFallbackCover) }), h("slot", { key: '9c49173fd6a0234c960aa8ae612f026a24521231', name: "coverOverlay" }))));
     }
     static get is() { return "z-book-cover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,10 +199,10 @@ export class ZBreadcrumb {
         ];
     }
     render() {
-        return (h(Host, { key: '0033a685e96e73ad2f8be9a47a6967177c4c0506', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: 'bddeff377a61b25a391791cd5114e64a3499fbeb', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
+        return (h(Host, { key: 'd1237ebe6e8f96e4b43f4197a85c0084050f076d', style: { "--line-clamp-popover": `${this.overflowMenuItemRows}` } }, h("nav", { key: '03fb62eefc39de3f78890d857ae23fb4f4a3307f', ref: (val) => (this.wrapElement = val), "aria-label": "Breadcrumb", class: {
                 semibold: this.pathStyle === BreadcrumbPathStyle.SEMIBOLD,
                 underlined: this.pathStyle === BreadcrumbPathStyle.UNDERLINED,
-            } }, h("ol", { key: '14f0af6e35def828015eea1f2e3960b7345a08ef' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
+            } }, h("ol", { key: 'bccdd02377c6bb41f54baf717c987fcef541d95a' }, this.viewPortWidth === Device.MOBILE ? this.renderMobileItems() : this.renderItems()))));
     }
     static get is() { return "z-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

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: '6aebfeebb2882a1207aa32859e4c463f785360c2', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: 'c7a7a840ef0365ad7d56bf8fa8a0a81b421f4bed', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '76768e04bdb9409dbbc954da9097ce3d5bf2fd1b', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '932bc97f8c6cd54907de7e970d3f0a1895026fde', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'b91e6422c7325bb5646211e2013a5a3226b30a7c', name: "caret-up-down", width: 16, height: 16 })));
+        return (h("button", { key: '6a27bbc29c4feedda219d3c48351e98e5424fc35', title: this.setButtonTitle(), id: this.buttonid, class: { selected: this.isselected }, onClick: () => this.emitButtonSortClick() }, h("span", { key: '415ed91622a75e04dae5df0112d892f14015af61', ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { key: '58bd9c2614021ee41fcd4f0f27ef3fa41771c7b8', class: "counter" }, this.counter && ` (${this.counter})`), h("span", { key: '66689c59c79cf1d6ad15640d424fbb3ac14edde2', class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { key: 'c6638b7e129f261bbcc9a7c79f02080accb6eed6', 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

@@ -9,11 +9,11 @@ export class ZChip {
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: 'f696700f7e7634093acb40080f72f9261f3aae36', class: {
+        return (h("div", { key: '7dd8f9f2d4c632559d1e9b3b04e2d139d3cdd1ce', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '549bec3f429ffaf44eb3fe285b57b45bfd67f3ee', name: this.icon }), h("slot", { key: 'ae32cb0af653344dfce38449f55eea24772792ed' }), this.interactiveIcon && (h("button", { key: '0d6daafae8c1580d3107050b4e964f89ccbb3475', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'db816882f84afbfa35d44ec47aeefe7f3a4ad254', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'af4721aa7ef2e3c8381685bb2eadd19a35effc81', name: this.icon }), h("slot", { key: '521b4fc72980f48dec8ee49c6fc3c06df3c9bf9a' }), this.interactiveIcon && (h("button", { key: '15cb6244073a9402ee3cb147f74cf3763b2a02cd', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a7c434efafd9891a5262dffa24136724acc0f791', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -187,7 +187,7 @@ export class ZColorPicker {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: '4fabea9e988ceec44c05e5885aa4ad0eb0ad5076', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: '24f0e76aecda9731ed826e8228f49ca5e08a14a5', 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

@@ -262,7 +262,7 @@ export class ZCombobox {
         return (h("div", { class: "check-all-wrapper", id: "option-check-all", role: "option" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
     }
     render() {
-        return (h("div", { key: '9a0d431f62c66d50dfbafedef62515f282909bf5', "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: '6cb14e4919c53bae374f2c9441b0524a06a4233d', "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

@@ -35,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: 'b10d16e5490c00d087ec8677e5453a989aca05cd' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '1eb5d39f26e19f213d435c185167eb83500225f3' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'c920eda8a79cd4b7f70f3cdc7e3690b57a117bd9', class: "main-container" }, h("div", { key: '4b74fde8b3d196a772489f381e46ef5690f1d9cf', class: "cover-container" }, h("slot", { key: '4a67176c23dd62d34bc69a0c236bf9adc3b5088c', name: "cover" })), h("slot", { key: 'e71151ae06cc7c30436af153d6192fc2faf4f6ba', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: '61c495773839b7741f674719325fe98a65956986', class: "main-container" }, h("div", { key: '0ea2f83f40f60017fb2e7a4501cb67c34d954f6c', class: "cover-container" }, h("slot", { key: '68a40d93440b22ce2afb9ff8db3cb9ca90ec7263', name: "cover" })), h("slot", { key: 'c29feaf859382807e0e55bcf2db27a98387c2e96', 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

@@ -7,7 +7,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '59e2f811ae879f15bfacb97769a2d43cf68b40a5', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '84826110c0a563d1b6f2654c540df49cdd0dfc7c', 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: 'a1cdec0e15f102c34f4db49158857692298341b1' });
+        return h(Host, { key: '597d6715119bb24d4a8427f9cb3ebd3b5a20f5fc' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,13 +23,11 @@ export class ZIcon {
         }
         return h("polygon", { points: iconValue });
     }
+    renderBaseIcon() {
+        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 }, this.selectPathOrPolygon(ICONS[this.name])));
+    }
     render() {
-        const svgAttrs = {
-            viewBox: "0 0 1000 1000",
-            width: this.width,
-            height: this.height,
-        };
-        return (h(Host, { key: '09183fdee2304748943d57bcfb10921369a84159', "aria-hidden": "true" }, h("div", { key: '8d1f3b6dd3a7cc69383be36f1951ee29694655b6', class: "icon-wrapper" }, h("svg", Object.assign({ key: '0ac79b86fdfa9083a7c4dc89d5a970d3fd89ded5', id: this.iconid || undefined, fill: this.fill ? `var(--${this.fill})` : undefined }, svgAttrs), this.selectPathOrPolygon(ICONS[this.name])), COLOR_INDICATOR_ICONS.includes(this.name) && (h("svg", Object.assign({ key: '9b08ff27c45ced5b70184b495f66ca3accf756df', class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00" }, svgAttrs), this.selectPathOrPolygon(ICONS["picker-color"]))))));
+        return (h(Host, { key: '8e6cee155a15fc1b19f9907a6f6155c8d607bfa4', "aria-hidden": "true" }, COLOR_INDICATOR_ICONS.includes(this.name) ? (h("div", { class: "icon-wrapper" }, h("svg", { class: "color-indicator", fill: this.indicatorColor || "#FFFFFF00", viewBox: "0 0 1000 1000", width: this.width, height: this.height }, this.selectPathOrPolygon(ICONS["picker-color"])), this.renderBaseIcon())) : (this.renderBaseIcon())));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,qBAAqB,EAAE,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAErE;;;GAGG;AAMH,MAAM,OAAO,KAAK;;;;;;;;;IA6BhB;;;OAGG;IACK,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,SAAS,GAAS,CAAC;QACrC,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,SAAS,GAAY,CAAC;IAChD,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG;YACf,OAAO,EAAE,eAAe;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM;YACtB,4DAAK,KAAK,EAAC,cAAc;gBACvB,0EACE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,IAC/C,QAAQ,GAEX,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC;gBACL,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAC5C,0EACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,IAAI,WAAW,IACpC,QAAQ,GAEX,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAC5C,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon {\n  /** Icon name */\n  @Prop()\n  name: string;\n\n  /** Icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** Icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** HTML `id` attribute (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n  @Prop()\n  fill?: string;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n   */\n  @Prop()\n  indicatorColor?: string;\n\n  /**\n   * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n   * @param iconValue The SVG path data or polygon points from the ICONS set.\n   */\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={iconValue}></path>;\n    }\n\n    return <polygon points={iconValue}></polygon>;\n  }\n\n  render(): SVGElement {\n    const svgAttrs = {\n      viewBox: \"0 0 1000 1000\",\n      width: this.width,\n      height: this.height,\n    };\n\n    return (\n      <Host aria-hidden=\"true\">\n        <div class=\"icon-wrapper\">\n          <svg\n            id={this.iconid || undefined}\n            fill={this.fill ? `var(--${this.fill})` : undefined}\n            {...svgAttrs}\n          >\n            {this.selectPathOrPolygon(ICONS[this.name])}\n          </svg>\n          {COLOR_INDICATOR_ICONS.includes(this.name) && (\n            <svg\n              class=\"color-indicator\"\n              fill={this.indicatorColor || \"#FFFFFF00\"}\n              {...svgAttrs}\n            >\n              {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n            </svg>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACvD,OAAO,EAAC,qBAAqB,EAAE,KAAK,EAAC,MAAM,yBAAyB,CAAC;AAErE;;;GAGG;AAMH,MAAM,OAAO,KAAK;;;;;;;;;IA6BhB;;;OAGG;IACK,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,YAAM,CAAC,EAAE,SAAS,GAAS,CAAC;QACrC,CAAC;QAED,OAAO,eAAS,MAAM,EAAE,SAAS,GAAY,CAAC;IAChD,CAAC;IAEO,cAAc;QACpB,OAAO,CACL,WACE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAI,SAAS,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,EACnD,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,oEAAa,MAAM,IACrB,qBAAqB,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAC3C,WAAK,KAAK,EAAC,cAAc;YACvB,WACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,IAAI,WAAW,EACxC,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAC5C;YAEL,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,cAAc,EAAE,CACtB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {COLOR_INDICATOR_ICONS, ICONS} from \"../../constants/iconset\";\n\n/**\n * Component to render an SVG icon from the internal icon set, selected by `name`.\n * This component automatically recognizes icons that have an indicator (e.g. `bg-color`, `font-color`, etc.), that can be filled with a custom color via the `indicatorColor` prop.\n */\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon {\n  /** Icon name */\n  @Prop()\n  name: string;\n\n  /** Icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** Icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** HTML `id` attribute (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** Name of the CSS color token to use for the icon fill color (e.g. `blue500`). */\n  @Prop()\n  fill?: string;\n\n  /**\n   * Color to use to fill the icon's color indicator, if it has one.\n   * Can be any valid value for the `fill` svg attribute.\n   * If the icon passed through the `name` prop doesn't have a color indicator, this prop has no effect.\n   */\n  @Prop()\n  indicatorColor?: string;\n\n  /**\n   * Selects either a `<path>` or `<polygon>` element based on the format of the icon data.\n   * @param iconValue The SVG path data or polygon points from the ICONS set.\n   */\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={iconValue}></path>;\n    }\n\n    return <polygon points={iconValue}></polygon>;\n  }\n\n  private renderBaseIcon(): SVGElement {\n    return (\n      <svg\n        id={this.iconid || undefined}\n        fill={this.fill ? `var(--${this.fill})` : undefined}\n        viewBox=\"0 0 1000 1000\"\n        width={this.width}\n        height={this.height}\n      >\n        {this.selectPathOrPolygon(ICONS[this.name])}\n      </svg>\n    );\n  }\n\n  render(): HTMLZIconElement {\n    return (\n      <Host aria-hidden=\"true\">\n        {COLOR_INDICATOR_ICONS.includes(this.name) ? (\n          <div class=\"icon-wrapper\">\n            <svg\n              class=\"color-indicator\"\n              fill={this.indicatorColor || \"#FFFFFF00\"}\n              viewBox=\"0 0 1000 1000\"\n              width={this.width}\n              height={this.height}\n            >\n              {this.selectPathOrPolygon(ICONS[\"picker-color\"])}\n            </svg>\n\n            {this.renderBaseIcon()}\n          </div>\n        ) : (\n          this.renderBaseIcon()\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,4 +1,5 @@
 :host {
+  display: inline;
   margin-right: var(--z-icon-right-margin, 0);
   margin-left: var(--z-icon-left-margin, 0);
   line-height: 0;
@@ -8,7 +9,7 @@
 .icon-wrapper {
   position: relative;
   z-index: 0;
-  display: block;
+  display: inline-block;
 }
 
 svg:not([width]) {
@@ -19,7 +20,7 @@ svg:not([height]) {
   height: var(--z-icon-height, 1.125rem);
 }
 
-svg.color-indicator {
+.icon-wrapper svg.color-indicator {
   position: absolute;
   z-index: -1;
   bottom: 0;

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

@@ -11,7 +11,7 @@ export class ZInfoBox {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: '770d8904081080758219f87d24f5a56846f1fad1', id: this.boxid }, h("slot", { key: 'a6fa079647709fc3c8326c2d73cdd1da884c4b58', name: "content" }), this.isclosable && (h("z-icon", { key: '63de143e010971175608c651d2d2f0c87ee98797', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '18298328abf8d0e88340408882bdc529b55c1a28', id: this.boxid }, h("slot", { key: '297bb1bbd8e6adc082e3552ac2222983b1b11211', name: "content" }), this.isclosable && (h("z-icon", { key: 'fa3fa5831984754d4c8533d23437a4773bf926a6', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '1513bcc5c069d2139b545336a7727318c858715a', open: this.open }, h("button", { key: 'c9be4b8852ea1b3c304e0cb4ad4fb91cd6317b89', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '28ca4682e7b5df0f0f32e35347ff5ee6fadf5e50', name: this.icon }), this.label && h("span", { key: '5addb4ddd3faafda6c8643d601589ffa6401b736', class: "z-info-reveal-label" }, this.label)), h("div", { key: '303f34b830370e5272ef88ebbcba57a7167f8ff8', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'df5e74f3c5b119ae6dd76d817e0f4040abddfdc7' }), h("button", { key: 'cec932ffcdb5f5d1c2738f3ba5bf59621f3f114c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'c47908d600b21d38fc3135755c83545ed78fffcb', name: "multiply" })))));
+        return (h(Host, { key: '250676e5bde8cb158ff19dd85c5b65aba329ab6d', open: this.open }, h("button", { key: 'ae9bd0a7a96c781ebc6e68f70b0553d9d08b8c4d', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'cda367464294fcdb6e87b7dd8804470fc600a196', name: this.icon }), this.label && h("span", { key: '33ee450958960b0eed18c6b630655c87d34d4b0f', class: "z-info-reveal-label" }, this.label)), h("div", { key: '717f241bbbd1034b8f7117d0875a859a27ecc3d0', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'f44d74a6183fdda5560fe8ced2e07ef12748b4b9' }), h("button", { key: '5071effe3449b8fe0285c080a0d9cb14be2b033c', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '9f3088b1e5398bea476ea2da203cb8e2e106ea89', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -261,7 +261,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: '12e6993a9f2e94db2300ccce3df5b839db56b09b' }, input);
+        return h(Host, { key: '659906d684e53987ffe6ca8f05d74abb98594367' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-input-message/index.js

@@ -18,7 +18,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: '316945f2c121bb059ee4faebee44901d1e0169bf' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'f0732ad997a4d0ae8c51149e084bac772fd6bc59', name: this.statusIcons[this.status] }), h("span", { key: '466898eee1e923d9ffa259ec8a32585be01e3b7b', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: 'd3c9ebc08047c7dda297e667f0923025a123c218' }, this.statusRole), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'fd12602621b437c130e82fe747e422fc98b3a87e', name: this.statusIcons[this.status] }), h("span", { key: 'b3af731acdef8e2c890789f158d9db68e426f798', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '7e752127614823afe2441a9d3d316d9974f593d1', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '75a515faadd75ea3f21ae80ca6a4f579223ad1cd', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-menu-section/index.js

@@ -174,7 +174,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: 'a859947e3015a104f32db157c715982a1ed29cf5', open: this.open }, h("button", { key: '5c130955c62fcce5d88b92312076da69f307eaee', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '28557c741c733149ea51ca68f499374dcf2eb134', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'bfa97fe61fde93902531e09dcdeb729066d2e66f', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: 'd9a7df39c426fecbc3beeefc2f5a08aed3f2ccbf', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'e2f14a7cf055715bbbb8b712a3d112af3b712031', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: '4dce34f277ab3c8c41171a15a02fd174c45742cd', open: this.open }, h("button", { key: 'b6c535e87dbb5af8808d7a19556ad116cbcca72b', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'fbbba483ca5fe6d45440c01a89f061565ce641aa', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: 'b4c67b7cada94580b4f5853aaa8cbb9818bece74', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '711c085b5d74affb2c23ebd1acdd774b5903e7e5', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'a2fe12f235f6b23a96f2bd3a8a18f3a095fcff2d', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,16 +123,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '67f0fc8f114e0a5d91b389fdb245106582cc642d', class: {
+        return (h("dialog", { key: 'ff8e8cf9ce5684a8ca081ab2aec3ef1c8824b6ae', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'e8f4faf3d8a8e43294d6d1bfc97e20e1706a1991', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '94c33c53083aafc4607fcb4b9c099c7d02c035b4', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: 'f039718406c6e3459ad5fa83fa596eb4f266f986', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: 'bf8c4f222aa0c89e8ffe98a7e266b043245c6901' }, this.modaltitle && h("h1", { key: '3dc7922ebe77d3ccf404101e138913a8f236e888', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: 'f8e5d4384f44f87b4b3925041caa4ad6037a9c8e', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: '8834d8d97223d0653c853ca5ff4f93c5ebdaf3a7', class: {
+            }, id: this.modalid }, h("header", { key: '0e17ec7ccaa1376b9cdabde14355fc6dcbec4f26', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '09a5a59ca386289939c61e29f79d201454d41165' }, this.modaltitle && h("h1", { key: '0cf7deea5e044b358882ae0e7bfe4502de1318f5', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '2fde62ccc507d999ccd4fd83aa369128e97b9b0c', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'e778555f2d7d88a965e454ee1231004da8d293e7', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: '37dd8afe8e3926853e22da79e853ba802cb379a9', name: "modalContent" }))), h("div", { key: '0637fefbec2fa0a620be36be10ce0704f39c72ed', class: {
+            }, id: "modal-content" }, h("slot", { key: 'acee4bb3444264df0b26a465c52f2ee282ccca76', name: "modalContent" }))), h("div", { key: '9abb8e64380030960d5669bec37a7f2f64d78693', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/collection/components/z-navigation-tabs/index.js

@@ -221,10 +221,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'c676fe99b0eb18fceb58ffa7412e4e1659acc89e', class: {
+        return (h(Host, { key: '69bc5562051734e576c1dbb2af850ef01a70a693', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: 'e353cd0e1e22d6e4422f547a318819b3f2736479', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '9d7e5126d77fbebf48423f0b34103bd1eb59dc3a', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '854e67c8c662c21926c71fab0725113632f6f14e', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'a4fdefd6a4419c97b4bfab349c88285abe37f14f' })), h("button", { key: 'bf0247eaef092c9b0dd068fe0d4876e3aaecad4e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '02018a4474db67cf853941a2d6daa002303419c7', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'c851af9053873ea70d1dee5216bb680deea111f0', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '6a69b89400fea7a87fd18d8d59e183b85aa0c87f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '997e215eecc0454b96e0034fece50be22cb1eef0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '8a214ee36e66badda0a8825fbe7c2268ff0fc6df' })), h("button", { key: '627501af784136a1eff68c0e002812144062128e', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '68728de5a048363fd186c4a26cc8872fd4b0253e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

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

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5bc1e8046c14e46f02f9667939709a267cb1265a' }, this.contenticonname && (h("z-icon", { key: '7a944afae100f5fea48ca8499b6a0a035a6d289e', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '038391eb846f043bc83c236e6e18998797bcb7a3', class: "content-container" }, h("div", { key: '330233ee7524fb271ffa5231a86b6cd906b2994d', class: "content-text" }, h("slot", { key: '290343fa633f1969d4f1059047797b16c3da9860' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '096b5cfdb55bac40adc9b2f56b9a4dc739ad4cc1', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '80d985cbcd6501f9640dc2e16ac978de731a0d24', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'd7fe5573c93ac7ab36ccbecc01972b8d3cccc8bd', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: 'aac3e6385d2f77e80c9933e666770e3da17c21a5' }, this.contenticonname && (h("z-icon", { key: '1ba77acd6db4e01ac47ae605c4ab05a345999462', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '9df24bcba7a1f49c803f339a0ac5ddafc08c03c9', class: "content-container" }, h("div", { key: 'bd1a76905a9c14fa77a1704a127a65a8ba9adab8', class: "content-text" }, h("slot", { key: 'b126d399950149b0d4cd94d3c2480678d7f91a97' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '63f56578ed42e720c20b57424c1d824729279e36', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '81ccf6858d6b559a23b1c9266d8af55e7bd3a2f2', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '96c95d07ef561d4b900acefaef90e00d85dc3904', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -140,8 +140,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '8d7045110c92bf5ef1ef2f8d60ddaf1af55ace92', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'ef823ffd39a7f63aae8ef95333da611ec4485292', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '7a6586d273275f1686fe0b1406d71e782d5d71c3', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '5930bb55687c9dd286828dc262c1f2cb18ebdd75', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: 'a65de1a8b0e92e0520d410a88c98edfe5bb56100', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '35307af5a5454ffd6269b5bc02226b72a483ca5c', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '3acc8e3a21920bae59ed55682b7c53e030e79664', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '2a9d364c65a16bec1e2b2a2fff4da8fdfea12dce', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '1e853eb4d5d79882ad71e045d29c1806b008fa50', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '13c6552f10632ff199916b208a20a1dfb70a76bf', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-panel-elem/index.js

@@ -16,12 +16,12 @@ export class ZPanelElem {
     }
     render() {
         const elemId = this.elemid ? this.elemid : "";
-        return (h("div", { key: '28f5d98850bf13270b4ddf9585722c39f87ee12e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '065c198cfef6d982df79871d084454f425e0d57d', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '5b42b99982e78dea89cf144a717e619b65904ab9', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'd15c0e008ca2f5172228217b5418d263a59af932', class: "panel-elem-link" }, h("a", { key: 'ca5a726f71b2dd8de6ddf1f32864bc2cdd823730', class: {
+        return (h("div", { key: '7ccde7a594052fb877c381d8f2db8df80d64e96e', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: 'f925fb70d03baa4a8a7f96006c515c9116785ff7', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: 'b0349cf006ded4cc02f686e1ea1adfbd76550fb8', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'c9393757ba1c849c8558dc668189f6f27b232e94', class: "panel-elem-link" }, h("a", { key: '7c552ae67030c9bf12a6e52e8d8f6f82df88b4a2', class: {
                 "z-link": true,
                 "z-link-disabled": this.isdisabled,
                 "z-link-icon": true,
                 "z-link-blue": true,
-            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'b8f07a80e9260bb0a142037d3f6a64a64acebafb', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '8d6524f5e8b70798cd846d4c99a2631161ae265d', class: "panel-elem-desc" }, h("slot", { key: 'b122e24bbb3ee418a393b348157f54fad3a6f1a9', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'f72a6a2634b41803ea7eaf8d51ba3439f095457a', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '6cd08ffd2e65f13d500f88682724f4f762c1f118', class: "panel-elem-desc" }, h("slot", { key: '01f55703602ee64f92eed8bc918ac5032927850c', name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }

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

@@ -497,7 +497,7 @@ export class ZPopover {
         cancelAnimationFrame(this.animationFrameRequestId);
     }
     render() {
-        return (h(Host, { key: '83d24ed11a01f0ff29486a6c2e3a3716960d44a1', "current-position": this.currentPosition }, h("slot", { key: '7c048c564bc76ee6dda7df4dfb55eb80c5b5ebae' })));
+        return (h(Host, { key: 'c3483157f2664088a337118936d81f551dcf25b1', "current-position": this.currentPosition }, h("slot", { key: 'fc9856b30959fc041dbf295fe7bbf523ce6adaf6' })));
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -288,7 +288,7 @@ export class ZSearchbar {
         return (h("z-list-element", { role: "option", tabindex: 0, clickable: true, id: `list-item-${this.htmlid}-show-all`, onClickItem: () => (this.currResultsCount = 0), color: "color-primary01" }, h("div", { class: "item-show-all" }, "Vedi tutti i risultati")));
     }
     render() {
-        return (h(Host, { key: '403cde71029ade87b32bac86991c6ea3b1003150', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '66ca1b6a187f3ffd8a932144a9ace0f557c58bd5', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '80709d742a085bb3045a2a8795e5e77ce8aa9e3e', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: 'fb03a352402836b09da8b315e84a37c8bee98583', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
     }
     static get is() { return "z-searchbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -504,7 +504,7 @@ export class ZSelect {
         return (h("z-input-message", { message: boolean(this.message) === true ? undefined : this.message, status: this.status, class: this.size, disabled: this.disabled }));
     }
     render() {
-        return (h("div", { key: '3deed6802514d840f78d366b86391a449234c9ca', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '7a00d71c47441c98748ff45d90705c0450e668af', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
     }
     static get is() { return "z-select"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '8b913cd494118ddb3e53d529d40a60693b75a157', class: {
+        return (h(Host, { key: '1a7ea404cfe0bc4dcf7f60787b218cdf58f28a28', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

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

@@ -4,7 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class ZStepper {
     render() {
-        return (h(Host, { key: '1d1f9c22822efd4ff78ada101c84a0989da9f71b', role: "navigation" }, h("slot", { key: 'f6068efbdab8ba800c82f5c89ed1e88e983ef369' })));
+        return (h(Host, { key: 'aa8c3ef6cca54442496944c748d1c224814ecc1a', role: "navigation" }, h("slot", { key: '9065c4077e08c252406e618e548f13aac5ed40d9' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class ZStepperItem {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: '19c73e3cc4e553720f5fb782f73931737007f7a4', role: "listitem" }, h("button", Object.assign({ key: 'b2bcbd197fe0ba3b90442544f354589394ac0007', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'bc7e3054c6ece39171d65a03360ff16502a46b3c', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'e18deeb657c6ff859ba1e6cff18103550bf0a4db' }, h("slot", { key: '7646d57e96b50b8268e5353003a118737687c2b5' })))));
+        return (h(Host, { key: 'eee285538af50ff09c49ead53e0589f20f810567', role: "listitem" }, h("button", Object.assign({ key: '0b354bc4e0ad809044e1cf0beb80a6259b2df43a', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '3227f3ce382e6340cfc9bec365cb2d7b79dba2ed', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '1099214dda81271f48d2453d1e111042a79207af' }, h("slot", { key: '50262e5fbb88d2b628de778243d52087225eec7b' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }