@zanichelli/albe-web-components 19.2.2 → 19.2.3

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

@@ -14,11 +14,12 @@ const StoryMeta = {
         },
     },
     args: {
-        contenticonname: "checkmark-circle-filled",
-        actiontext: "Annulla",
-        showclose: false,
-        sticky: false,
-        type: NotificationType.SUCCESS,
+        "--z-notification--content-max-width": "100%",
+        "contenticonname": "checkmark-circle-filled",
+        "actiontext": "Annulla",
+        "showclose": false,
+        "sticky": false,
+        "type": NotificationType.SUCCESS,
     },
 };
 export default StoryMeta;
@@ -30,6 +31,28 @@ export const Default = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
+    >
+      <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
+    </z-notification>
+  `,
+};
+/**
+ * To use the border top variant set the `borderposition` property to `top`.
+ */
+export const BorderTop = {
+    args: {
+        borderposition: "top",
+    },
+    render: (args) => html `
+    <z-notification
+      .contenticonname=${args.contenticonname}
+      .actiontext=${args.actiontext}
+      .type=${args.type}
+      .showclose=${args.showclose}
+      .sticky=${args.sticky}
+      .borderposition=${args.borderposition}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
       <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
     </z-notification>
@@ -43,6 +66,7 @@ export const LongText = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
       Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
@@ -71,6 +95,7 @@ export const BannerVariant = {
         .type=${args.type}
         .showclose=${args.showclose}
         sticky="true"
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
         ${args.notificationText}
       </z-notification>
@@ -131,6 +156,7 @@ export const InlineVariant = {
         type=${args.type}
         showclose=${args.showclose}
         sticky="false"
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
         ${args.notificationText}
       </z-notification>

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAC7C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;SACzC;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,yBAAyB;QAC1C,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,KAAK;QACb,IAAI,EAAE,gBAAgB,CAAC,OAAO;KAC/B;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;GAIxB;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;;;;;;;GAOxB;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;2BAGG,IAAI,CAAC,eAAe;sBACzB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,IAAI;qBACJ,IAAI,CAAC,SAAS;;;UAGzB,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC5B;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;0BAGE,IAAI,CAAC,eAAe;qBACzB,IAAI,CAAC,UAAU;eACrB,IAAI,CAAC,IAAI;oBACJ,IAAI,CAAC,SAAS;;;UAGxB,IAAI,CAAC,gBAAgB;;;;;;;;;;GAU5B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZNotification} from \".\";\nimport {NotificationType} from \"../../beans\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNotificationStoriesArgs = ZNotification & {notificationText: string};\n\nconst StoryMeta = {\n  title: \"ZNotification\",\n  component: \"z-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(NotificationType),\n    },\n  },\n  args: {\n    contenticonname: \"checkmark-circle-filled\",\n    actiontext: \"Annulla\",\n    showclose: false,\n    sticky: false,\n    type: NotificationType.SUCCESS,\n  },\n} satisfies Meta<ZNotificationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNotificationStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n    >\n      <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n    </z-notification>\n  `,\n} satisfies Story;\n\nexport const LongText = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n      Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue\n      turpis, eu consectetur purus consectetur vitae.\n    </z-notification>\n  `,\n} satisfies Story;\n\n/**\n * To use the banner variant set the `sticky` property to `true`.\n */\nexport const BannerVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"banner-notification-demo\">\n      <z-notification\n        .contenticonname=${args.contenticonname}\n        .actiontext=${args.actiontext}\n        .type=${args.type}\n        .showclose=${args.showclose}\n        sticky=\"true\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <h2 class=\"heading-1-sb\">Titolo della pagina</h2>\n      <div class=\"body-1\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis\n        augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.\n        Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed\n        felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus\n        fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante\n        felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,\n        pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,\n        tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a\n        facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper\n        risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus\n        lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius\n        facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet\n        mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem\n        posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus\n        hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.\n        Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu\n        nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque\n        dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet\n        posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,\n        non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,\n        elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent\n        quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis\n        vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec\n        fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in\n        ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et\n        condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est\n        vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus\n        massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at\n        sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.\n      </div>\n    </div>\n  `,\n} satisfies Story;\n\n/**\n * To use the inline variant set the `sticky` property to `false`.\n */\nexport const InlineVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"inline-notification-demo\">\n      <z-notification\n        contenticonname=${args.contenticonname}\n        actiontext=${args.actiontext}\n        type=${args.type}\n        showclose=${args.showclose}\n        sticky=\"false\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <div class=\"content\">\n        <h2 class=\"heading-1\">Titolo della scheda</h2>\n        <div class=\"body-1\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n          Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.\n        </div>\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-notification/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAE7C,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAM7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;SACzC;KACF;IACD,IAAI,EAAE;QACJ,qCAAqC,EAAE,MAAM;QAC7C,iBAAiB,EAAE,yBAAyB;QAC5C,YAAY,EAAE,SAAS;QACvB,WAAW,EAAE,KAAK;QAClB,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,gBAAgB,CAAC,OAAO;KACjC;CACuC,CAAC;AAE3C,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;oDACyB,IAAI,CAAC,qCAAqC,CAAC;;;;GAI5F;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,cAAc,EAAE,KAAK;KACtB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;wBACH,IAAI,CAAC,cAAc;oDACS,IAAI,CAAC,qCAAqC,CAAC;;;;GAI5F;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEC,IAAI,CAAC,eAAe;oBACzB,IAAI,CAAC,UAAU;cACrB,IAAI,CAAC,IAAI;mBACJ,IAAI,CAAC,SAAS;gBACjB,IAAI,CAAC,MAAM;oDACyB,IAAI,CAAC,qCAAqC,CAAC;;;;;;;GAO5F;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;2BAGG,IAAI,CAAC,eAAe;sBACzB,IAAI,CAAC,UAAU;gBACrB,IAAI,CAAC,IAAI;qBACJ,IAAI,CAAC,SAAS;;sDAEmB,IAAI,CAAC,qCAAqC,CAAC;;UAEvF,IAAI,CAAC,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqC5B;CACc,CAAC;AAElB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,IAAI,EAAE;QACJ,gBAAgB,EAAE,kCAAkC;KACrD;IACD,UAAU,EAAE;QACV,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,QAAQ,CAAC;SACpB;KACF;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;0BAGE,IAAI,CAAC,eAAe;qBACzB,IAAI,CAAC,UAAU;eACrB,IAAI,CAAC,IAAI;oBACJ,IAAI,CAAC,SAAS;;sDAEoB,IAAI,CAAC,qCAAqC,CAAC;;UAEvF,IAAI,CAAC,gBAAgB;;;;;;;;;;GAU5B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZNotification} from \".\";\nimport {NotificationType} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZNotificationStoriesArgs = ZNotification & {\n  notificationText: string;\n} & CSSVarsArguments<\"--z-notification--content-max-width\">;\n\nconst StoryMeta = {\n  title: \"ZNotification\",\n  component: \"z-notification\",\n  argTypes: {\n    type: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(NotificationType),\n    },\n  },\n  args: {\n    \"--z-notification--content-max-width\": \"100%\",\n    \"contenticonname\": \"checkmark-circle-filled\",\n    \"actiontext\": \"Annulla\",\n    \"showclose\": false,\n    \"sticky\": false,\n    \"type\": NotificationType.SUCCESS,\n  },\n} satisfies Meta<ZNotificationStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZNotificationStoriesArgs>;\n\nexport const Default = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n      style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n    >\n      <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n    </z-notification>\n  `,\n} satisfies Story;\n\n/**\n * To use the border top variant set the `borderposition` property to `top`.\n */\nexport const BorderTop = {\n  args: {\n    borderposition: \"top\",\n  },\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n      .borderposition=${args.borderposition}\n      style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n    >\n      <div class=\"notification-container\"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>\n    </z-notification>\n  `,\n} satisfies Story;\n\nexport const LongText = {\n  render: (args) => html`\n    <z-notification\n      .contenticonname=${args.contenticonname}\n      .actiontext=${args.actiontext}\n      .type=${args.type}\n      .showclose=${args.showclose}\n      .sticky=${args.sticky}\n      style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n    >\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n      Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue\n      turpis, eu consectetur purus consectetur vitae.\n    </z-notification>\n  `,\n} satisfies Story;\n\n/**\n * To use the banner variant set the `sticky` property to `true`.\n */\nexport const BannerVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"banner-notification-demo\">\n      <z-notification\n        .contenticonname=${args.contenticonname}\n        .actiontext=${args.actiontext}\n        .type=${args.type}\n        .showclose=${args.showclose}\n        sticky=\"true\"\n        style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <h2 class=\"heading-1-sb\">Titolo della pagina</h2>\n      <div class=\"body-1\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,\n        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis\n        augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.\n        Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed\n        felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus\n        fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante\n        felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,\n        pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,\n        tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a\n        facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper\n        risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus\n        lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius\n        facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet\n        mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem\n        posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus\n        hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.\n        Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu\n        nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque\n        dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet\n        posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,\n        non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,\n        elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent\n        quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis\n        vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec\n        fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in\n        ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et\n        condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est\n        vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus\n        massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at\n        sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.\n      </div>\n    </div>\n  `,\n} satisfies Story;\n\n/**\n * To use the inline variant set the `sticky` property to `false`.\n */\nexport const InlineVariant = {\n  args: {\n    notificationText: \"Questo è il testo della notifica\",\n  },\n  parameters: {\n    controls: {\n      exclude: [\"sticky\"],\n    },\n  },\n  render: (args) => html`\n    <div class=\"inline-notification-demo\">\n      <z-notification\n        contenticonname=${args.contenticonname}\n        actiontext=${args.actiontext}\n        type=${args.type}\n        showclose=${args.showclose}\n        sticky=\"false\"\n        style=\"--z-notification--content-max-width: ${args[\"--z-notification--content-max-width\"]}\"\n      >\n        ${args.notificationText}\n      </z-notification>\n      <div class=\"content\">\n        <h2 class=\"heading-1\">Titolo della scheda</h2>\n        <div class=\"body-1\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.\n          Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.\n        </div>\n      </div>\n    </div>\n  `,\n} satisfies Story;\n"]}

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

@@ -1,14 +1,19 @@
 :host {
   --z-notification--top-offset: 0;
+  --z-notification--content-max-width: 100%;
 
-  display: flex;
+  display: block;
   width: 100%;
-  box-sizing: border-box;
+}
+
+.main-container {
+  display: flex;
+  max-width: var(--z-notification--content-max-width);
   align-items: flex-start;
   padding: calc(var(--space-unit) * 2);
-  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+  margin: 0 auto;
+  background-color: transparent;
   font-family: var(--font-family-sans);
-  outline: none;
 }
 
 :host([sticky]) {
@@ -54,8 +59,15 @@
   fill: var(--color-default-error);
 }
 
-:host > button,
-.content-container > button {
+:host([borderposition="bottom"]) {
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+}
+
+:host([borderposition="top"]) {
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+}
+
+button {
   padding: 0;
   border: none;
   margin: 0;
@@ -78,7 +90,6 @@
 }
 
 .content-text {
-  max-width: 800px;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);

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

@@ -140,8 +140,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        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) }))));
+        return (h(Host, { key: 'aafb9bddcf3eb99e0b77dc0eb86703294dab0b56', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '1a73bcc5abb6fd674a9624f8a4390849b2383323', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '412138eb75e5c8afee64269ee5d9c2da5fccf7fb', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '149934216905198a8c0b8cfaff7851b4d1934706', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '555fe547b7c672189987edd94e0a2fc64ead2b25', 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: '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: {
+        return (h("div", { key: '5d734919b0fd927095c2e65ff1200ed550e48bd2', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '3d315fef58dfe7ecf601ade8f1652e447fdbe636', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '47f8a1c400949b67c984d25c5bdf9f20ee3d846b', src: this.imgurl, alt: this.imgalt }))), h("div", { key: '9757e879ebe255ccdbdd815c7404a6cfe9f9cb1e', class: "panel-elem-link" }, h("a", { key: '4ee9897a9875081e871e4a72d7cdd9c6df23f6e1', 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: '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 })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: 'b651e1ab06b937189e46634c0a91470afcde9168', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '5ab6f6ba7f8f3f50a3018b56b7ff3ea75f7e5aa5', class: "panel-elem-desc" }, h("slot", { key: 'c4d1f5928e8be8f25e36f1a3bf9a33f603b37148', 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: 'c3483157f2664088a337118936d81f551dcf25b1', "current-position": this.currentPosition }, h("slot", { key: 'fc9856b30959fc041dbf295fe7bbf523ce6adaf6' })));
+        return (h(Host, { key: '0a8cd5736765d61bf31b6f19f6fd6b3b61ffb414', "current-position": this.currentPosition }, h("slot", { key: '269e9c027b0636583b199d91e724ca2093aac615' })));
     }
     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: '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()));
+        return (h(Host, { key: '0364ab12f13469240465abf3fa7688c764406d17', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '80f78bac48913d4ca1f692ef0576eeac16bafb61', 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-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '1a7ea404cfe0bc4dcf7f60787b218cdf58f28a28', class: {
+        return (h(Host, { key: 'b28906d64e95ddb5bac9fe36fc2b522b1b77f51d', 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: 'aa8c3ef6cca54442496944c748d1c224814ecc1a', role: "navigation" }, h("slot", { key: '9065c4077e08c252406e618e548f13aac5ed40d9' })));
+        return (h(Host, { key: '9328d928ff48b951720a6f0ca95b1d051a687cf4', role: "navigation" }, h("slot", { key: 'bd77ebf98a3eda51bf3124edae6aa96d0ad6cc7a' })));
     }
     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: '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' })))));
+        return (h(Host, { key: '91f2e37b743cbd76bad5b23d6a7038377ed325c3', role: "listitem" }, h("button", Object.assign({ key: '8f9c85524aff451dfa316fe050295cd17a95d817', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '5f28d57cc6bc5508655297367ac09252f6df9452', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'e24121243032ab104e2e19a373ec264db070525a' }, h("slot", { key: '06e7d27fa7a997c7fff44a539d065af3f7814880' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -152,19 +152,19 @@ export class ZToastNotification {
         this.isdraggable && this.handleSlideOutDragAnimation();
     }
     render() {
-        return (h(Host, { key: '4dddb200f4671bbd69e8d1470d0d441678da3039', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
+        return (h(Host, { key: 'a5863e7ce8d266fba25e2a0503b57413ea276420', style: { "--percentuale": `${this.percentage}%` }, class: { [this.transition]: !!this.transition, [this.type]: !!this.type }, onAnimationEnd: (e) => {
                 if (this.autoclose && e.animationName.includes("slidein")) {
                     this.startClosingTimeout(this.autoclose);
                 }
                 if (e.animationName.includes("slideout")) {
                     this.hostElement.parentNode.removeChild(this.hostElement);
                 }
-            } }, h("div", { key: '424761a172e8f139e35d9c1b2139a4093e5ac48d', class: "toast-notification-container" }, h("div", { key: 'f1f8f3b2cfb8dde84ba0e136ac94631b47993975', class: "toast-notification-content" }, h("div", { key: '75c17b6a15c05dea66744ddb08a9abfcda21be28', class: "toast-notification-text" }, this.heading && h("span", { key: '94eda50ee38a39cec7056ee113b9863b54ed1555', class: "title" }, this.heading), h("span", { key: 'def713dd54fac1d0332c82c12ec4878672dddf1f', class: "message" }, h("slot", { key: '30cd97c7a2381c5a25e1b184524cb2fce29a549c', name: "message" }, this.message && h("span", { key: 'fc4c5cf459f595cb3727d5328ecb12419d1ea405', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '994505f881dbe43ab69eb42c449afb0dc4d46336', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: 'b4a78b86c8d3b98750bcafee88d43bb47712558c', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '6658b9fe87e402ad434afe3bc50d4bf99f19b7a4', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
+            } }, h("div", { key: '2ff98af17ebad39c00098acfc17b842784b268e0', class: "toast-notification-container" }, h("div", { key: '9e12233cc275ad5f4d00b72253005d1b6d45feab', class: "toast-notification-content" }, h("div", { key: 'a10e179aa0895c1ed51861e8818ae35eaeed195c', class: "toast-notification-text" }, this.heading && h("span", { key: '88d3e049e558a3f107e6a8fcab1f4c3835173def', class: "title" }, this.heading), h("span", { key: '73624c5b86d0d842477e9a5f0512d24359b6f939', class: "message" }, h("slot", { key: 'e7ad8066daef392d83fa77340a16d384204f59fc', name: "message" }, this.message && h("span", { key: '59582a721c306d09cd5c2ca12bfaac649b2e5a1f', innerHTML: DOMPurify.sanitize(this.message) })))), h("div", { key: '071e7a3a9a85f931bf8cc7d264c76f5109f69cc0', class: "button-container", hidden: !this.hasSlottedButton }, h("slot", { key: '3ff74ad6ce9cc2d4fca76032ff0aa68c7553f8de', name: "button", onSlotchange: () => this.checkSlottedButton() }))), this.closebutton && (h("button", { key: '26e256f736a3b04e5ccc7ed158305f69d806c42d', class: "close-button", "aria-label": "Chiudi notifica", onClick: () => this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true), onKeyDown: (e) => {
                 if (e.code == KeyboardCode.SPACE || e.code == KeyboardCode.ENTER) {
                     e.preventDefault();
                     this.close(SLIDE_OUT_TRANSITION_MAP[this.transition], true);
                 }
-            } }, h("z-icon", { key: '2edf589b7755c20c21217a8161736eeee5859cc9', name: "multiply-circled" }))))));
+            } }, h("z-icon", { key: '25a4e24b16fb29ecd7148700367d319dbb9d9c6d', name: "multiply-circled" }))))));
     }
     static get is() { return "z-toast-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: 'f7657893cc0491e9d29c5801bfbae9df4b22a33b', name: "toasts" });
+        return h("slot", { key: '188e85fc561b690f63f4f66edbbf63a0ed434cdf', name: "toasts" });
     }
     static get is() { return "z-toast-notification-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,10 +15,10 @@ export class ZToggleButton {
         this.toggleClick.emit(this.opened);
     }
     render() {
-        return (h("button", { key: '6df0aee8dfd4785cd9787b2940c12cc3d680ef0c', tabindex: this.avoidclick ? "-1" : "0", class: {
+        return (h("button", { key: '6e9fbd985e60b38770ced1d2b681c57952616cc3', tabindex: this.avoidclick ? "-1" : "0", class: {
                 "isopen": this.opened,
                 "avoid-clicks": this.avoidclick,
-            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: 'ab52cd6023b492b5bba8086fd189112e5329c3ad', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
+            }, disabled: this.isdisabled, "aria-expanded": this.opened ? "true" : "false", "aria-label": this.ariaLabel, onClick: () => this.emitToggleClick() }, h("z-icon", { key: '0a1cf5cd9da7ef67a5e62dcf77fe7af27d7328a6', name: this.opened ? "chevron-down" : "chevron-up", width: 16, height: 16 }), this.label));
     }
     static get is() { return "z-toggle-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-toggle-switch/index.js

@@ -22,14 +22,14 @@ export class ZToggleSwitch {
         this.emitToggleClick();
     }
     render() {
-        return (h(Host, { key: 'b572a91e4ed2f91cbe0b7a393371425a5b9b896a' }, h("input", { key: 'acff3447044eba6dd7622feb954a03d5503111f1', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '58b70932d34e39bb1c078947eea614d6384b9660', htmlFor: this.htmlid, class: {
+        return (h(Host, { key: '8f4df999fbedf80bcc55745ccf2bc9e973b042b4' }, h("input", { key: '8b76f5a66b5d9d331338f50622c61021bb5a28f7', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: '64a7c132da51820ebcd9b078cfc4981cf1981c30', htmlFor: this.htmlid, class: {
                 [this.labelPosition]: true,
                 disabled: this.disabled,
-            } }, h("span", { key: '824e029aeb434813b35f72891d991f19a90daded' }, h("slot", { key: '37e8bad4378c65f4a3411fee47a960b9220af5d3' })), h("span", { key: '55eaf2b824ce8e91b77b5f8f2677724b2834fad6', class: {
+            } }, h("span", { key: 'ea293ee5515a6c901c571d21f11689b442add25d' }, h("slot", { key: 'a20e7ec3dae106f9d5e0df3b0a8766092cc7b42a' })), h("span", { key: 'cb49f19d1cdc68d6cb2330a035e7a7720b21e863', class: {
                 container: true,
                 disabled: this.disabled,
                 checked: this.checked,
-            } }, h("span", { key: '41b7660f89b5ba9829782d3e6b041323357fdefa', class: "circle" }, this.checked && (h("z-icon", { key: 'ae68c35e2765c6eece7dcee8f7ad570a6fc0aa34', width: 12, height: 12, name: "checkmark" })))))));
+            } }, h("span", { key: 'b6fb8026f43c0bd12a65f1cee9bb90c476e4cf3c', class: "circle" }, this.checked && (h("z-icon", { key: 'a4e6313096647089e7fccdcb3fb40b42bf7ad2f3', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }

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

@@ -181,10 +181,10 @@ export class ZTool {
         (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", this.onMobileViewChange);
     }
     render() {
-        return (h(Host, { key: '206a8594f395b3be01956358cb59968c69cc1317', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '0ad3f51d384386005f5cd4ca2bdf9e9c9b49c7d2', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, h("z-icon", { key: '67a9360a49a09d6cb715314a610af87aec542608', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '7c66f173dc55e4757302c659d56f8d0acf310b76', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: '7ceeeb537eb0292e629952da4aa932644a7468cf', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '27fde7bbc6dddb8f081bd47491dc91a70538271a', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
+        return (h(Host, { key: 'e193d45ced8a7d4aa880d3a506d43614a76ffa71', class: { "z-tool-tooltip-open": this.tooltipOpen } }, h("button", { key: '6549559a4a5125d3db07d12d8b2ac4c68e8eee6a', class: "z-tool", type: "button", ref: (el) => (this.buttonRef = el), "aria-pressed": this.hasSlottedContent ? undefined : this.active ? "true" : "false", "aria-expanded": this.hasSlottedContent ? (this.open ? "true" : "false") : undefined, "aria-haspopup": this.hasSlottedContent ? "true" : undefined, "aria-label": this.htmlAriaLabel || this.tooltip || undefined, disabled: this.disabled, onClick: this.handleClick, onMouseEnter: this.handleTooltipOpen, onMouseLeave: this.handleTooltipClose, onFocus: this.handleTooltipOpen, onBlur: this.handleTooltipClose }, h("z-icon", { key: '0aac9cc6854a9d4a4ac83866eb34cc8d12140f69', ref: (el) => (this.iconRef = el), name: this.icon, indicatorColor: this.indicatorColor })), this.tooltip && (h("z-tooltip", { key: '2d403e91916f5d7909d0085f2f89db8514de32cc', class: "z-tool-tooltip", ref: (el) => (this.tooltipRef = el), bindTo: this.iconRef, open: this.tooltipOpen && !this.open, position: this.isNested ? PopoverPosition.BOTTOM : this.tooltipPosition, dark: true, onMouseLeave: this.handleTooltipClose, onBlur: this.handleTooltipClose, onOpenChange: this.onTooltipOpenChange }, h("span", { key: 'a94e6a413686d9668399137f331e499ceb9d6516', class: "body-4" }, this.tooltip))), this.hasSlottedContent && (h("z-popover", { key: '2d103f6d9b8643cc1dd30bc6bd238be593971586', class: "z-tool-submenu", open: this.open, bindTo: this.isMobile && this.mainToolbar ? this.mainToolbar : this.hostElement, center: true,
             /* disable auto-close to prevent unwanted close behaviors on mobile,
             when the bound element is the main toolbar */
-            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: 'e31fd30c100e732f4aca6b038d277d99b6543589' })))));
+            closable: false, position: this.isMobile ? PopoverPosition.TOP : PopoverPosition.BOTTOM }, h("slot", { key: 'b8e79406df1de9fa4df0b8b4aa42b27477407a05' })))));
     }
     static get is() { return "z-tool"; }
     static get encapsulation() { return "shadow"; }

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

@@ -133,7 +133,7 @@ export class ZToolbar {
         }
     }
     render() {
-        return (h(Host, { key: 'dc26c2f0e3a48566e671476dce7241e326cacac8', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: 'ff7b8ae41331be87db8f71ff0cbaf4882a7d684d', onSlotchange: () => {
+        return (h(Host, { key: '5e00c2233560e5050ede29f987b8eb42e2af5935', role: "toolbar", "aria-label": this.htmlAriaLabel }, h("slot", { key: '9ea69fc40ffaa25d900ad80dc9ca42b8ddcb1140', onSlotchange: () => {
                 this.collectToolItems();
                 this.updateTabIndexes();
             } })));

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

@@ -20,7 +20,7 @@ export class ZTooltip {
         this.open = this.popoverEl.open;
     }
     render() {
-        return (h("z-popover", { key: '8290e0b20bc315ce438e6407ff40c51d227f719d', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: 'e4f62754fc30723f63f99b79d53d72310f2cae91' })));
+        return (h("z-popover", { key: 'cbfcd9d92fdb27c998b9293aea1520993bf6cc1a', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true, onOpenChange: (event) => this.openChange.emit(event.detail) }, h("slot", { key: '9638b5e67aba8472eea8894b1b39bf1aa5f2986e' })));
     }
     static get is() { return "z-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card/index.js

@@ -33,7 +33,7 @@ export class ZMyzCardComponent {
         return elemClasses;
     }
     render() {
-        return (h("div", { key: 'fe9682514ff12467eff3a0f844690aaad51ac1e5', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'b38b157360d99c9f0fd6009343547877c51fd59a' })));
+        return (h("div", { key: 'f67975d8bf57387a4e4b0fc45df88e5b570c23e4', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'be9495f0b9a9c8270c22511d2afa68f940eae945' })));
     }
     static get is() { return "z-myz-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js

@@ -46,7 +46,7 @@ export class ZMyzCardAlert {
         }
     }
     render() {
-        return (h("div", { key: 'cfc5ba625b1f657d2717a2ac5aae0ad070ad4177', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: 'c74a674717764ac11f4e71dcaa034ba950c0a1f8', type: this.getAlertType() }, h("div", { key: 'e289a588eee12751d10964bd9244251d0fef88b4', class: "relative-container" }, h("z-icon", { key: 'afe5a16bd61de53fdb2ac55e722c3d64ecf22bdf', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'e7b11a13ba83bcd214b11e0e8bb89ef7976b356c', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: 'cb5e55bbfb7afdbd2a19b7b612b2412b1a35fa80', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: '4dde539d077258de85bceb9a99ce2245b5fb59b6', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '88285961e5ee72342253e3cbb8872df6bdb1d980', type: this.getAlertType() }, h("div", { key: 'fff86788515042337d0c03dd4fbf469d79a697a9', class: "relative-container" }, h("z-icon", { key: '1a70753172840860985935cf0a00ba7f7370fdc2', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'a17dd5f7e173b10a8aa76ab6f77bcb8bb75508ca', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: '026a58d486e4d0b2bd7c150b9e05695f8c3c1f26', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
                 this.handleActionButtonClick(e);
             }, onKeyPress: (e) => {
                 this.handleSpaceKeyPress(e);

package/dist/collection/snowflakes/myz/card/z-myz-card-body/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZMyzCardBody {
     render() {
-        return (h("div", { key: 'ce8e2f29bbbe43340a86049182f38586e14b8e47' }, h("slot", { key: '2b3c1274ab1df4995039e7dfc82a06e10ac66be9', name: "alert" }), h("slot", { key: 'c92240268966ca58f7844e6a43693582152b59f5', name: "cover" })));
+        return (h("div", { key: 'f979e99bc3e8640e4c6ff7603d0bdba1bcd4f10f' }, h("slot", { key: 'e246c5398ab2e8d1917f3a42c1037c3caedee6fa', name: "alert" }), h("slot", { key: 'aa79cbf40366c68b839aa335b705ba4a8af20b7f', name: "cover" })));
     }
     static get is() { return "z-myz-card-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-cover/index.js

@@ -10,7 +10,7 @@ export class ZMyzCardCover {
         this.img = this.defaultimg;
     }
     render() {
-        return (h("img", { key: '9474ee5c6352f5f253b4d976ff88a4a9079ad176', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: 'ca8f2207563979810f396544be243792903af17c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
     }
     static get is() { return "z-myz-card-cover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-dictionary/index.js

@@ -21,7 +21,7 @@ export class ZMyzCardDictionary {
         this.cardFlipped.emit(showBack);
     }
     render() {
-        return (h("div", { key: 'e6ec0b5054975547584bbee8759d987b72134d29' }, h("z-myz-card", { key: 'b074508d5e487ab311aab750a9595c65d0bb182f' }, h("z-myz-card-header", { key: 'eace632cf520eac6a109790acb47d08f03f7f88c', titolo: this.name }), h("div", { key: '9fc66378a96351d6251e0d700c3f93046343cb64', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: '9a90a3b496bdb8dbbe53820536f41f91aca5fe8f', class: "front" }, h("z-myz-card-body", { key: 'b1a8aee7f1b172fb8070e06b5d929c9c726c870e' }, h("z-myz-card-cover", { key: '8e51755d66e3d0b1081f34cfbbcff860b325ac52', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: '9ebd9fcb0bf970b3ae9250048809a5427d7f7586', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '03cc1ad4636d1cf4d36ef062f9f66d07a2960d38', class: "back" }, h("slot", { key: '2b766a05250d41a648cb07e072707a16fa45c484', name: "info" }))), h("slot", { key: '288e7018302b221aa6244b01fc5f4b8140297078' }))));
+        return (h("div", { key: '6b1346d29ca8d1c94dc5c3dd604315aedfa89e53' }, h("z-myz-card", { key: 'b55d663bd25dcf5907b2b568a8a7143b11dc34a6' }, h("z-myz-card-header", { key: '092cebee4734c33f36e6106d0df767f66ee53b72', titolo: this.name }), h("div", { key: 'd6e76b7417c31c4d4f130c70a97abc7dcbc5e35e', class: `content ${this.flipped ? "flipped" : ""}` }, h("div", { key: 'efa43a9507b952db1e1be06aa92ebc0663944031', class: "front" }, h("z-myz-card-body", { key: '3285eb249c09247fee8a05605c15bbd41a08c40a' }, h("z-myz-card-cover", { key: '6cf9e64d190cb385af2e53ddd86a0468e962c7f7', slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })), h("z-button", { key: 'b8a4b8181709eb7e794c0a5c66ddee3423db4571', class: { "hide-info": this.hideinfobtn }, variant: ButtonVariant.SECONDARY, icon: "informationsource", size: ButtonSize.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { key: '3e728ca532b6eca130e888a6fceb6d8da630dd0a', class: "back" }, h("slot", { key: '173a377df9c1df6891ea4a724760b964ac00e410', name: "info" }))), h("slot", { key: '608d82ab5d4d322124f30b767be53280912f23f3' }))));
     }
     static get is() { return "z-myz-card-dictionary"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/index.js

@@ -59,7 +59,7 @@ export class ZMyzCardFooter {
         return this.host.querySelector("[slot=list] > li a");
     }
     render() {
-        return (h("div", { key: '6e5881056e1db48d540e8ef21116bee2c196b8c4', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '243b4a819cba9325d9425d63a23fcee9f9876b3d', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: 'cfc887864e6bf0c7fc8d08be05f0005a38aa869d', class: "toggle" }, h("slot", { key: 'a9e65157596b4a26eb19d5eee5a7b1a57d1feea4', name: "toggle" })), this.titolo && h("p", { key: '15b6bd8c19394d7bef24eb4e09720c0bb0a1685c', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: 'ebc158163ecd3b334daec7edb050b7e7b9f7df47', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '60590d4b3f2bcb949c21cde6a6d6a8a837a089a3' }, h("p", { key: '9b2f3b97f5de7f0760d623fc3761920aa3b1c845', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: '807a82ffe180cec55e8d32124be8ca46eb572270', title: this.getTitleAuthors() }, h("span", { key: 'c9c790fcd14571bd4d15d991496b49392097990f', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'ca97678f9bc18bea8777c1a2ae994a954cab4cf3', class: "year-isbn" }, h("span", { key: '232aab4aaf39be78ace0ece41ea4060a4e355f9a', class: "isbn" }, h("span", { key: '301da712b177444f57a889ed25112a3837a65d2a' }, h("span", { key: 'e825aa9877d17cc64db355a0ddefc0d36195eab9', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: '91db300900421801d17073597173773e6df7f56d', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: '88c704a8e47124becd3659dc9b2e23be2165cee3', name: "list" })))), this.customContent && h("slot", { key: '2f73c782577a5b7394a24af188229c6c6a750612', name: "content" })));
+        return (h("div", { key: 'b2c367deffbb414b14b26d4f9c6bc9da8164a350', class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { key: '4a5e9261262c078bbc6e36f6fe6188f914f3f892', class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { key: 'd89f1c82507f524997001e23a667e2d7613d3db4', class: "toggle" }, h("slot", { key: '746bc0ef6b6e3b67d53027033a3125b1a88b6dbc', name: "toggle" })), this.titolo && h("p", { key: '9ab5fe483ca565306d185b1ad3757389880303c7', class: { "custom-content": this.customContent } }, this.titolo), h("div", { key: '3f13c2950c5c6b7a0a6eb5dcef9f66c2b5333755', class: { "content": true, "custom-content": this.customContent } }, h("div", { key: '33bc4ee1df0442430b252e89f5a5683dd090676f' }, h("p", { key: 'f8a74c735f1bfcccc7e53aac0339ea9bc23d70d5', class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { key: 'e768282b621bd4918d02f79d7b6fb435328e2ff7', title: this.getTitleAuthors() }, h("span", { key: '51e3506af92802176f696db218326cbf1c4b276d', "aria-description": "Autori", class: "bold" }, this.autori))), h("p", { key: 'ffee18d90a03c7828e2683c1c18cc7b07098208f', class: "year-isbn" }, h("span", { key: 'e95af54bc544e76269fcc9f120c184a1c7fcc768', class: "isbn" }, h("span", { key: '0a2e1414b5c770a43d1971d5df38a5533a9f7589' }, h("span", { key: '735f3054ea25c564632ddfb5b09849bb05f9ea6d', "aria-description": "ISBN edizione cartacea", class: "bold" }, this.isbn), " ", "(ed. cartacea)")))), h("div", { key: '5f0cccd6077cadd792659c426d5eee35cb0528c1', class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { key: 'b147e0d5bd7a20bd562214e2a4274f1d2a7bd52b', name: "list" })))), this.customContent && h("slot", { key: '5ebdd6a9e733998f158f56718649d495cacb3c87', name: "content" })));
     }
     static get is() { return "z-myz-card-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/index.js

@@ -5,7 +5,7 @@ import { h } from "@stencil/core";
  */
 export class ZMyzCardFooterSections {
     render() {
-        return (h("div", { key: '77fe7b02b4f0d995fffd93907c4e1f6fcab7cf42' }, h("footer", { key: 'cdd0a1cb8a5484ae646233d0122604b29f1a6ca4' }, h("div", { key: '91c4312af89e212ab4c74bdc1580b21ae2ef946c', class: "top" }, h("slot", { key: '6a8ac121b135b904892e87c1b2cfa2021e1d0b96', name: "top" })), h("div", { key: '09544cbf8904f0ebfdfeeaf805d203d8a4025d76', class: "bottom" }, h("slot", { key: '7357332d8b3992a67c466aa9f65b5f9a18d5e69a', name: "bottom" })))));
+        return (h("div", { key: 'a46083ba1265bd19e0b0d04e6314e43691222cde' }, h("footer", { key: 'd57858f24d1ecb5a0d9b4e2856a00641b5766f78' }, h("div", { key: 'd1cda03a27089e0c66ec4568bd4a044250d5aabf', class: "top" }, h("slot", { key: '96db1d35ba09c57dff19c381a4c86b7fbc3759a3', name: "top" })), h("div", { key: 'debf288a71d568c50f4e76d2abf8b1b4cdc25b1e', class: "bottom" }, h("slot", { key: '3464db01d4ec966cf1c13edb53e2a4e63eea59d2', name: "bottom" })))));
     }
     static get is() { return "z-myz-card-footer-sections"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-header/index.js

@@ -30,7 +30,7 @@ export class ZMyzCardHeader {
         };
     }
     render() {
-        return (h("header", { key: 'f57af285c3ded847594f226cd57e29f47e96db29', class: this.retrieveClass() }, h("slot", { key: 'd4404802765f567dd4be757becef12bde5a0762c', name: "aria-heading" }), h("span", { key: '5906cbdb67aea281d0ccabe43711c7d2e34c0667', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '7f4dd40eb421872623556751133a9138a4381a98', name: "icon" })));
+        return (h("header", { key: '3a55d0bf3dfd589c1880526191ddbdd311ba6b86', class: this.retrieveClass() }, h("slot", { key: 'faedfbb21b4fd7f56bd08093e5347a4655797008', name: "aria-heading" }), h("span", { key: '53805e713dec6b891a878388d98f9f0749951f31', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { key: '68479fd579921c6fd623fa92b27dafd24bc41d18', name: "icon" })));
     }
     static get is() { return "z-myz-card-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-icon/index.js

@@ -6,7 +6,7 @@ export class ZMyzCardIcon {
         this.ariaLabel = "";
     }
     render() {
-        return (h("button", { key: '6eeee51373c90e15a165b2511675c1df63974289', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '197d99ffec190c40dd72ab22176ac502cf410951' }, h("z-icon", { key: '9b5f1fae74c6cd7ee9a8d7f66e90bee09e5fa7e9', name: this.icon, width: 16, height: 16 }))));
+        return (h("button", { key: '6c7bbcbde5d35a54fafe344f2c1e4be78f8b2d29', disabled: this.isdisabled, "aria-label": this.ariaLabel }, h("span", { key: '81c38638c37f57c5e68e8d2db9f16db83752bc15' }, h("z-icon", { key: '8d1b8d34c61411f7079c4a492294fde70cd923e2', name: this.icon, width: 16, height: 16 }))));
     }
     static get is() { return "z-myz-card-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-info/index.js

@@ -114,7 +114,7 @@ export class ZMyzCardInfo {
         return (h("section", { ref: (el) => (this.offlineLicenseWrapper = el) }, h("span", { class: "license-heading" }, h("span", null, "Licenza offline"), this.setExpirationLicenseMessage("offline")), "Scadenza il ", h("b", null, this.cardData.offlineLicense.expiration), h("br", null), "Installazioni disponibili: ", h("b", null, this.cardData.offlineLicense.installations)));
     }
     render() {
-        return (h("div", { key: 'e6ef5ad3c71c2b049d77bf7b58b4eed49aff7f07' }, this.renderCloseIcon(), h("div", { key: '3709fc8d09e49fa1e56c89a9fd3453c677b0837b', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: '06f65296b31493f7e948f7af4de260443bf45c4a', class: "cta-wrapper" }, h("slot", { key: '1cd54dc4feef61416039fbf9d43c6f9a6ed0be25' }))));
+        return (h("div", { key: '81d2f2e223da107bea1c15bb4df6640567a37990' }, this.renderCloseIcon(), h("div", { key: 'fed0c665a34ab4c264313d726b642a587e04bd61', class: "content-wrapper", ref: (el) => (this.contentWrapper = el) }, this.renderGeneralSection(), this.renderTooltip(), this.renderOnlineLicenseSection(), this.renderOfflineLicenseSection()), h("div", { key: '8978d9206d452b14843fadad6c8c6bacd976f77c', class: "cta-wrapper" }, h("slot", { key: '2d2431d4c8a8ed03c7428e77fc19a6556cd1cc35' }))));
     }
     static get is() { return "z-myz-card-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/card/z-myz-card-list/index.js

@@ -23,7 +23,7 @@ export class ZMyzCardList {
         });
     }
     render() {
-        return h("ul", { key: '608a46eb635be05ab1bb225bb28354f0a5e4ca44' }, this.renderList(JSON.parse(this.listdata)));
+        return h("ul", { key: 'aa9fc5633a56ebb91f157bc65cb8cfb20cf1bacb' }, this.renderList(JSON.parse(this.listdata)));
     }
     static get is() { return "z-myz-card-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/list/z-myz-list/index.js

@@ -17,7 +17,7 @@ export class ZMyzList {
     }
     render() {
         const lastElem = this.list ? this.list.length - 1 : -1;
-        return (h("ul", { key: '97237c224248c304a8c70ddb938beb0e416d246d' }, this.list &&
+        return (h("ul", { key: '94453803cc1c6b3d3b81e19f107c09abc395bbff' }, this.list &&
             this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
     }
     static get is() { return "z-myz-list"; }

package/dist/collection/snowflakes/myz/list/z-myz-list-item/index.js

@@ -20,7 +20,7 @@ export class ZMyzListItem {
     }
     render() {
         const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (h("li", { key: 'b26b8dbeaf1a8f5beb9ce7c799bafc5dacc6d471', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: 'bd0de19c4f484bd249358e39df3ca4296e9eb360', class: this.underlined && "border" }, this.icon && h("z-icon", { key: '47edd1a371c2c4cbb34d07fb7120d6f96e51669e', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '93a47ea9cf8cf341d9cacedbd13b34d8877d60fe' }))));
+        return (h("li", { key: 'e8054df30e0540b758ecac0133a03ba8c64762ea', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { key: 'e9fd1c5d30e270a4f1f5b6d309a2bcb40b023819', class: this.underlined && "border" }, this.icon && h("z-icon", { key: 'd714ad82aac6db611955e4c9669d272c44c5fbaf', name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", { key: '77595259e1f32f42f1d36beb2dfaf216a115d887' }))));
     }
     static get is() { return "z-myz-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-alert/index.js

@@ -7,7 +7,7 @@ export class ZAlert {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '9cdbd685674a5ee5f5d2dec9b9272402f76b9de8', class: this.type }, h("slot", { key: '36d8361bdc4a04c47695afe8e824f976ee8c47df' })));
+        return (h("div", { key: '089bda749c586a5910c417781923cbefe0372dd8', class: this.type }, h("slot", { key: '7d222e10b779779ba7ef9be1c1162aa436225610' })));
     }
     static get is() { return "z-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/snowflakes/myz/z-otp/index.js

@@ -14,7 +14,7 @@ export class ZOtp {
         this.otpRef = [...Array(this.inputNum)];
     }
     render() {
-        return (h("div", { key: '9814a8c35149033a7ce7091ff7d9807cd400f50a', class: "otp-container" }, h("div", { key: 'f85cbf0862d6b50da4a015e8ca6651b56ba96b30', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
+        return (h("div", { key: '78c6a2c425f8b8d222be16db33bb9d12307015d1', class: "otp-container" }, h("div", { key: '18e0d6a908aabdfe49ce4613c094fb12166b0914', class: "digits-container" }, this.otp.map((_val, i) => (h("input", { class: this.status == InputStatus.ERROR ? "error" : null, onKeyDown: (e) => {
                 if (e.keyCode > 47) {
                     this.otpRef[i].value = "";
                 }
@@ -25,7 +25,7 @@ export class ZOtp {
             }, onInput: (e) => {
                 this.otp[i] = e.target.value;
                 this.emitInputChange(this.otp.join(""));
-            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '666ac57e8c41d6f6c205839f05337c5ec29bf9ba', message: this.message, status: this.status })));
+            }, type: "text", minlength: "1", maxlength: "1", autoComplete: "off", ref: (el) => (this.otpRef[i] = el) })))), h("z-input-message", { key: '1d3207b1411926edb77efbc8a57e179972b77a2e', message: this.message, status: this.status })));
     }
     static get is() { return "z-otp"; }
     static get encapsulation() { return "shadow"; }