@zanichelli/albe-web-components 17.3.0-RC1 → 18.0.0

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

@@ -25,7 +25,7 @@ export class ZNotification {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a9024960c6f2dc0ece7aa520041ca72c8b57a480' }, this.contenticonname && (h("z-icon", { key: '8e03da23ac3ea16294466b45cf571003299e12ff', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: '65872d76a4f4be94181a60eede48ba8729be6fe4', class: "content-container" }, h("div", { key: '6f1abfbd2e8f86f4cfdf63f3ffaa87fb7d0abcd7', class: "content-text" }, h("slot", { key: '8537004a8679d3e1fb5eed9ca4fc36611b7355a3' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '8fff1a74d49404718d7b9e160a26fb659ded1855', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '1969d8f6609b65444366b5b757729a7930d91630', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: 'ebfb4631d790f2406c7475b8adc123872db7e145', name: "multiply-circle", width: 16, height: 16 })))));
+        return (h(Host, { key: 'c05802b9aecf9da3512b73266d5b800893fa9d40' }, this.contenticonname && (h("z-icon", { key: 'bf76405cb6dec6c4f5d57f8cffc62149944bfe61', class: "status-icon", name: this.contenticonname, width: 16, height: 16 })), h("div", { key: 'cf617ec86cb54ac8bb4be0ec26b1cff1cac96c26', class: "content-container" }, h("div", { key: '69dbb80be6f602c3bc24815585dd975861e5599d', class: "content-text" }, h("slot", { key: '2e680db659355749a4967cd740cf5a4f3a08d095' })), !!((_a = this.actiontext) === null || _a === void 0 ? void 0 : _a.trim()) && (h("button", { key: '9813707fe2ebf93736eb61b47390c30fd6cdb8a7', class: "action-button", type: "button", onClick: this.handleActionButtonClick }, this.actiontext))), this.showclose && (h("button", { key: '412de2b2d48013410cadbc01d69426d8619e953c', class: "close-button", type: "button", onClick: this.handleCloseButtonClick }, h("z-icon", { key: '2623ad3ee3fd6713fb9569369ae27e71c795e0d2', name: "multiply-circle", width: 16, height: 16 })))));
     }
     static get is() { return "z-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,15 +22,15 @@
 }
 
 :host([type="success"]) {
-  background: var(--color-success-inverse);
+  background: var(--color-inverse-success);
 }
 
 :host([type="warning"]) {
-  background: var(--color-warning-inverse);
+  background: var(--color-inverse-warning);
 }
 
 :host([type="error"]) {
-  background: var(--color-error-inverse);
+  background: var(--color-inverse-error);
 }
 
 .status-icon,
@@ -43,15 +43,15 @@
 }
 
 :host([type="success"]) .status-icon {
-  fill: var(--color-success01);
+  fill: var(--color-default-success);
 }
 
 :host([type="warning"]) .status-icon {
-  fill: var(--color-warning02);
+  fill: var(--color-default-warning);
 }
 
 :host([type="error"]) .status-icon {
-  fill: var(--color-error01);
+  fill: var(--color-default-error);
 }
 
 :host > button,

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

@@ -66,7 +66,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '6a28a6c1a23b7fae91b1ee322d673d80665c2a6c', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4d37b2f7a28fe88c7888a705222282cf014cd1d2', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '036b98c0d90631b37cf5c426fe553197da275726', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: '9adbd986895c18f769ebc896633bbe1d42427f77', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '0d164029f870838c077c0381ba208aacee23141d', class: "canvas-background", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: 'f889426238828e62470d8b53c6b3b22674d73f10', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'ed70f931bc4dfea3b4bc2ecb10b93e77dea4f472', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '18c85e7580d55bffe7c305e4ba7cad479292a1ba', class: "canvas-content z-scrollbar", role: "presentation" }, h("slot", { key: '56fae4e49e00f58e9b9e49057402892bd829091c', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) && (h("div", { key: '535fafa5a9de38e1eda00fa63c7c293d12e944e2', class: "canvas-background", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

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

@@ -45,7 +45,7 @@ z-pagination .pagination-bar button {
   justify-content: center;
   border: none;
   margin: 0;
-  background-color: var(--color-surface02);
+  background-color: var(--color-background);
   color: var(--color-primary01);
   cursor: pointer;
   font-family: inherit;

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: 'f7a46055c7c9c6b8c55f7eab312975c2469d92f3', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '7371ab7dcd59e19ddc29e92cdcd7d53791736b2a', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '84b88cb9a9fe9fa95052cbfc200fa82b157fff19', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'f0e28a73c56a4d348c8b2b9c05fc6fa205136bac', class: "panel-elem-link" }, h("a", { key: 'cc34e31fa64a26eaf94941840d19af34623da9dd', class: {
+        return (h("div", { key: 'fb18918fe628718fa59c481f215c3b5ccd573ccb', class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { key: '5e71dedc58519623c6f7b2e8dc5a0aca53043c3a', "aria-hidden": "true", class: "panel-elem-icon" }, h("img", { key: '0949b25d3828e40b8a2398f909ed34de23d3b7d4', src: this.imgurl, alt: this.imgalt }))), h("div", { key: 'e4a33e09816b979e4432a3a11f4ed8b57efb5d5d', class: "panel-elem-link" }, h("a", { key: '9d0a91cd34417432795be51d1399afadabc1dd4c', 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: '438e5e90d9754effc32825029f2198a3ea0d4be3', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '8ba6727d7d11fe869a3e973a1a065b70b42dfe43', class: "panel-elem-desc" }, h("slot", { key: '887ea4cfc7950c97226fe8566e3ef49b0ecbf87b', name: this.descrSlotName })))));
+            }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { key: '77f4dfadd60b71472f303aa9b28019f29fa0126d', height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { key: '58dbf6841ee7cacd87bdd684e34f121777cd2d56', class: "panel-elem-desc" }, h("slot", { key: '436a86e206b44930a87a11caa05b68c27ed878e1', name: this.descrSlotName })))));
     }
     static get is() { return "z-panel-elem"; }
     static get encapsulation() { return "scoped"; }

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

@@ -301,7 +301,7 @@ export class ZPopover {
         this.onOpen();
     }
     render() {
-        return h("slot", { key: 'ea2b46de2cec89ebd692407e0ddb51e47d552e73' });
+        return h("slot", { key: '62910aea1c0986c47106fdb7cfc9ac4368c14b9d' });
     }
     static get is() { return "z-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,8 @@ const StoryMeta = {
 export default StoryMeta;
 export const ContextualMenuLike = {
     args: {
-        position: PopoverPosition.RIGHT_BOTTOM,
+        "--z-popover-theme--surface": "transparent",
+        "position": PopoverPosition.RIGHT_BOTTOM,
     },
     render: (args) => html `
     <div class="popover-container">

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-popover/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B;;GAEG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,4BAA4B,EAAE,sBAAsB,EAAE;QACtD,yBAAyB,EAAE,sBAAsB,EAAE;KACpD;IACD,IAAI,EAAE;QACJ,4BAA4B,EAAE,wBAAwB;QACtD,yBAAyB,EAAE,2BAA2B;KACvD;CACoG,CAAC;AAExG,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE;QACJ,QAAQ,EAAE,eAAe,CAAC,YAAY;KACvC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;gBAGR,QAAQ,CAAC;QACf,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,CAAC;QAChE,yBAAyB,EAAE,IAAI,CAAC,yBAAyB,CAAC;KAC3D,CAAC;oBACU,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;GAuB9B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,QAAQ,EAAE,eAAe,CAAC,KAAK;KAChC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;gBAGR,QAAQ,CAAC;QACf,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,CAAC;QAChE,yBAAyB,EAAE,IAAI,CAAC,yBAAyB,CAAC;KAC3D,CAAC;oBACU,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;GAuB9B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZPopover} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\n/**\n * To be sure the AUTO algorithm finds the right container when calculating the position, set its container's position to `position: relative;`\n */\nconst StoryMeta = {\n  title: \"ZPopover\",\n  component: \"z-popover\",\n  argTypes: {\n    \"position\": {\n      options: Object.values(PopoverPosition),\n      control: {\n        type: \"select\",\n      },\n    },\n    \"--z-popover-theme--surface\": getColorTokenArgConfig(),\n    \"--z-popover-theme--text\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"--z-popover-theme--surface\": \"var(--color-surface01)\",\n    \"--z-popover-theme--text\": \"var(--color-default-text)\",\n  },\n} satisfies Meta<ZPopover & CSSVarsArguments<\"--z-popover-theme--surface\" | \"--z-popover-theme--text\">>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZPopover>;\n\nexport const ContextualMenuLike = {\n  args: {\n    position: PopoverPosition.RIGHT_BOTTOM,\n  },\n  render: (args) => html`\n    <div class=\"popover-container\">\n      <z-popover\n        style=${styleMap({\n          \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n          \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n        })}\n        .position=${args.position}\n        bind-to=\"#trigger\"\n      >\n        <div class=\"container\">\n          <z-button icon=\"gear\">Impostazioni</z-button>\n        </div>\n      </z-popover>\n      <z-icon\n        id=\"trigger\"\n        name=\"plus-square-filled\"\n      ></z-icon>\n    </div>\n    <script>\n      var iconTrigger = document.querySelector(\"#trigger\");\n      var popover = document.querySelector(\"z-popover\");\n      iconTrigger.addEventListener(\"click\", () => {\n        if (popover.open) {\n          popover.open = false;\n        } else {\n          popover.open = true;\n        }\n      });\n    </script>\n  `,\n} satisfies Story;\n\nexport const TooltipLike = {\n  args: {\n    position: PopoverPosition.RIGHT,\n  },\n  render: (args) => html`\n    <div class=\"popover-container popover-container-tooltip\">\n      <z-popover\n        style=${styleMap({\n          \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n          \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n        })}\n        .position=${args.position}\n        center=\"true\"\n        show-arrow=\"true\"\n        bind-to=\"#trigger\"\n      >\n        <div class=\"container\">\n          <z-button icon=\"gear\">Impostazioni</z-button>\n        </div>\n      </z-popover>\n      <z-icon\n        id=\"trigger\"\n        name=\"plus-square-filled\"\n      ></z-icon>\n    </div>\n    <script>\n      document.querySelector(\"#trigger\").addEventListener(\"click\", () => {\n        if (document.querySelector(\"z-popover\").open) {\n          document.querySelector(\"z-popover\").open = false;\n        } else {\n          document.querySelector(\"z-popover\").open = true;\n        }\n      });\n    </script>\n  `,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-popover/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAmB,sBAAsB,EAAC,MAAM,6BAA6B,CAAC;AACrF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B;;GAEG;AACH,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC;YACvC,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;aACf;SACF;QACD,4BAA4B,EAAE,sBAAsB,EAAE;QACtD,yBAAyB,EAAE,sBAAsB,EAAE;KACpD;IACD,IAAI,EAAE;QACJ,4BAA4B,EAAE,wBAAwB;QACtD,yBAAyB,EAAE,2BAA2B;KACvD;CACkC,CAAC;AAEtC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE;QACJ,4BAA4B,EAAE,aAAa;QAC3C,UAAU,EAAE,eAAe,CAAC,YAAY;KACzC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;gBAGR,QAAQ,CAAC;QACf,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,CAAC;QAChE,yBAAyB,EAAE,IAAI,CAAC,yBAAyB,CAAC;KAC3D,CAAC;oBACU,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;GAuB9B;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE;QACJ,QAAQ,EAAE,eAAe,CAAC,KAAK;KAChC;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;;gBAGR,QAAQ,CAAC;QACf,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,CAAC;QAChE,yBAAyB,EAAE,IAAI,CAAC,yBAAyB,CAAC;KAC3D,CAAC;oBACU,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;GAuB9B;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {styleMap} from \"lit/directives/style-map.js\";\nimport {type ZPopover} from \".\";\nimport {PopoverPosition} from \"../../beans\";\nimport {CSSVarsArguments, getColorTokenArgConfig} from \"../../utils/storybook-utils\";\nimport \"../z-button/index\";\nimport \"../z-icon/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZPopoverStoriesArgs = ZPopover & CSSVarsArguments<\"--z-popover-theme--surface\" | \"--z-popover-theme--text\">;\n\n/**\n * To be sure the AUTO algorithm finds the right container when calculating the position, set its container's position to `position: relative;`\n */\nconst StoryMeta = {\n  title: \"ZPopover\",\n  component: \"z-popover\",\n  argTypes: {\n    \"position\": {\n      options: Object.values(PopoverPosition),\n      control: {\n        type: \"select\",\n      },\n    },\n    \"--z-popover-theme--surface\": getColorTokenArgConfig(),\n    \"--z-popover-theme--text\": getColorTokenArgConfig(),\n  },\n  args: {\n    \"--z-popover-theme--surface\": \"var(--color-surface01)\",\n    \"--z-popover-theme--text\": \"var(--color-default-text)\",\n  },\n} satisfies Meta<ZPopoverStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZPopoverStoriesArgs>;\n\nexport const ContextualMenuLike = {\n  args: {\n    \"--z-popover-theme--surface\": \"transparent\",\n    \"position\": PopoverPosition.RIGHT_BOTTOM,\n  },\n  render: (args) => html`\n    <div class=\"popover-container\">\n      <z-popover\n        style=${styleMap({\n          \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n          \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n        })}\n        .position=${args.position}\n        bind-to=\"#trigger\"\n      >\n        <div class=\"container\">\n          <z-button icon=\"gear\">Impostazioni</z-button>\n        </div>\n      </z-popover>\n      <z-icon\n        id=\"trigger\"\n        name=\"plus-square-filled\"\n      ></z-icon>\n    </div>\n    <script>\n      var iconTrigger = document.querySelector(\"#trigger\");\n      var popover = document.querySelector(\"z-popover\");\n      iconTrigger.addEventListener(\"click\", () => {\n        if (popover.open) {\n          popover.open = false;\n        } else {\n          popover.open = true;\n        }\n      });\n    </script>\n  `,\n} satisfies Story;\n\nexport const TooltipLike = {\n  args: {\n    position: PopoverPosition.RIGHT,\n  },\n  render: (args) => html`\n    <div class=\"popover-container popover-container-tooltip\">\n      <z-popover\n        style=${styleMap({\n          \"--z-popover-theme--surface\": args[\"--z-popover-theme--surface\"],\n          \"--z-popover-theme--text\": args[\"--z-popover-theme--text\"],\n        })}\n        .position=${args.position}\n        center=\"true\"\n        show-arrow=\"true\"\n        bind-to=\"#trigger\"\n      >\n        <div class=\"container\">\n          <z-button icon=\"gear\">Impostazioni</z-button>\n        </div>\n      </z-popover>\n      <z-icon\n        id=\"trigger\"\n        name=\"plus-square-filled\"\n      ></z-icon>\n    </div>\n    <script>\n      document.querySelector(\"#trigger\").addEventListener(\"click\", () => {\n        if (document.querySelector(\"z-popover\").open) {\n          document.querySelector(\"z-popover\").open = false;\n        } else {\n          document.querySelector(\"z-popover\").open = true;\n        }\n      });\n    </script>\n  `,\n} satisfies Story;\n"]}

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

@@ -286,7 +286,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: 'a11654e9aef41aaad341948caf9f91557dbd41b4', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '02519620881c7c709560c6817920f76460fab575', class: "input-container" }, this.renderInput(), this.renderResults()), this.renderButton()));
+        return (h(Host, { key: '1995f6d5694bd6cd0f485636e531113bfdc69aad', onFocus: () => (this.showResults = true), onClick: (e) => this.handleOutsideClick(e), class: { "has-submit": this.showSearchButton, "has-results": this.autocomplete } }, h("div", { key: '48929d88c0dfe3f84d9f24d4df7f0270f57099b1', 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-section-title/index.js

@@ -18,7 +18,7 @@ export class ZSectionTitle {
         this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
     }
     render() {
-        return (h(Host, { key: 'cc1204e8c23b71671a14fbaedd761f748f277cfa' }, h("slot", { key: '8272a7661bda0190963225a5ffaa192e22601363', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '7eae53ac6122253f61d985c79549ff65b85e10ff', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '9b86031ca0776ac5faae2393e62ad8104d5e804e', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '6d3de14737fc2187f8a32d5e27aeae12ab9e83c5', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: '43bfcc06c3dd11d5f18a88be623c7fa77320fbb0' }, h("slot", { key: '7f5704c9d41d6cc3c48318f29b5ea08e27b5b392', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { key: '9dd55d30418040dc68dc1f045c8b2494cf8d9f28', size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: '233fac041a9fbc0b636c30ecb3c15240b8b59f15', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { key: '4a3af32c430fcf607a97b71e1a9e2e927862b639', size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
     }
     static get is() { return "z-section-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -459,7 +459,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: '4ba65cb3eefca55842a6608c6c5c1530a2a3c0a6', class: "select-wrapper" }, this.renderInput(), this.renderSelectUl(), this.renderMessage()));
+        return (h("div", { key: '636b4fd24deed9b90c70884f046ea501c4d7c977', 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-select/styles.css

@@ -1,7 +1,7 @@
 :host {
   display: inline-block;
   width: inherit;
-  color: var(--color-default-text);
+  color: var(--color-form-default-text);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
@@ -51,6 +51,12 @@
   position: static;
 }
 
+.select-wrapper z-list {
+  --background-color-list-element: var(--color-form-background);
+  --background-hover-color-list-element: var(--color-form-surface03);
+  --background-active-color-list-element: var(--color-form-surface03);
+}
+
 .select-wrapper .ul-scroll-wrapper > z-list {
   position: relative;
   overflow: auto;
@@ -118,12 +124,12 @@
 }
 
 .z-list-group-title {
-  color: var(--color-default-text);
+  color: var(--color-form-default-text);
 }
 
 .reset-item {
-  color: var(--color-primary01);
-  fill: var(--color-primary01-icon);
+  color: var(--color-form-active-primary);
+  fill: var(--color-form-active-primary);
 }
 
 .reset-item-content {
@@ -159,8 +165,8 @@ z-list z-list-element::before {
   left: -15px;
   width: 8px;
   height: 1em;
-  border-bottom: 1px solid var(--color-disabled01-icon);
-  border-left: 1px solid var(--color-disabled01-icon);
+  border-bottom: 1px solid var(--color-form-disabled01-icon);
+  border-left: 1px solid var(--color-form-disabled01-icon);
   content: "";
   cursor: pointer;
 }
@@ -172,7 +178,7 @@ z-list z-list-element::after {
   left: -15px;
   width: 8px;
   height: 100%;
-  border-left: 1px solid var(--color-disabled01-icon);
+  border-left: 1px solid var(--color-form-disabled01-icon);
   content: "";
   cursor: pointer;
 }
@@ -253,7 +259,7 @@ z-list-element.grouped-tree-parent-node .list-element::after {
 z-list-element:not([disabled]) > .list-element:hover,
 z-list-element:not([disabled]) > .list-element:hover::after {
   z-index: -1;
-  background-color: var(--color-background);
+  background-color: var(--color-form-surface03);
   cursor: pointer;
 }
 

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: '3887a0d40964e8bb4dd860e49dccca7863f2a902', class: {
+        return (h(Host, { key: '1e46d109b1dbb4518f20891945fe2df2f71ebd83', 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: '1dd60e057dc5910e320df088512d2bd3dd5b1e4a', role: "list" }, h("slot", { key: '721b83774cdf84979db9c204986c84174d56fc0a' })));
+        return (h(Host, { key: '56c671093f71c8615bbd0b83cd419e0dc7a8947f', role: "list" }, h("slot", { key: '710091d133fd03d70337579281553ff75217c6c2' })));
     }
     static get is() { return "z-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,35 +4,65 @@ import "./index";
 export default {
     title: "ZStepper/ZStepper",
     component: "z-stepper",
+    decorators: [(Story) => html `<div class="z-carousel-story-container">${Story()}</div>`],
     subcomponents: {
         ZStepperItem: "z-stepper-item",
     },
 };
 export const Default = {
+    render: () => html `<script>
+        const onClick = (elem) => {
+          if (!elem.disabled) {
+            elem.setAttribute("pressed", "");
+            Array.from(document.querySelectorAll("z-stepper-item")).forEach((s) => {
+              if (s === elem) {
+                return;
+              }
+              s.pressed = false;
+              s.removeAttribute("pressed");
+            });
+          }
+        };
+      </script>
+      <z-stepper>
+        <z-stepper-item
+          index="1"
+          pressed
+          href="#"
+          onclick="onClick(this)"
+          >I tuoi dati</z-stepper-item
+        >
+        <z-stepper-item
+          index="2"
+          href="#"
+          onclick="onClick(this)"
+          >Le tue credenziali</z-stepper-item
+        >
+        <z-stepper-item
+          index="3"
+          href="#"
+          onclick="onClick(this)"
+          >Conferma</z-stepper-item
+        >
+      </z-stepper>`,
+};
+export const Completed = {
     render: () => html `<z-stepper>
       <z-stepper-item
         index="1"
-        pressed
+        href="#"
+        disabled
         >I tuoi dati</z-stepper-item
       >
       <z-stepper-item
         index="2"
+        href="#"
         disabled
         >Le tue credenziali</z-stepper-item
       >
       <z-stepper-item
         index="3"
-        disabled
-        >Conferma</z-stepper-item
-      >
-    </z-stepper>`,
-};
-export const Completed = {
-    render: () => html `<z-stepper>
-      <z-stepper-item index="1">I tuoi dati</z-stepper-item>
-      <z-stepper-item index="2">Le tue credenziali</z-stepper-item>
-      <z-stepper-item
-        index="3"
+        href="#"
         pressed
         >Conferma</z-stepper-item
       >

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

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,aAAa,EAAE;QACb,YAAY,EAAE,gBAAgB;KAC/B;CACuB,CAAC;AAI3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;iBAQS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepper} from \".\";\nimport \"../z-stepper-item/index\";\nimport \"./index\";\n\nexport default {\n  title: \"ZStepper/ZStepper\",\n  component: \"z-stepper\",\n  subcomponents: {\n    ZStepperItem: \"z-stepper-item\",\n  },\n} satisfies Meta<ZStepper>;\n\ntype Story = StoryObj<ZStepper>;\n\nexport const Default = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        pressed\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        disabled\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        disabled\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const Completed = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item index=\"1\">I tuoi dati</z-stepper-item>\n      <z-stepper-item index=\"2\">Le tue credenziali</z-stepper-item>\n      <z-stepper-item\n        index=\"3\"\n        pressed\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const CompletedDisabled = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        disabled\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        disabled\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        pressed\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const Checked = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        checked\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        checked\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        checked\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-stepper/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,SAAS,CAAC;AAEjB,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA,2CAA2C,KAAK,EAAE,QAAQ,CAAC;IACvF,aAAa,EAAE;QACb,YAAY,EAAE,gBAAgB;KAC/B;CACuB,CAAC;AAI3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAkCW;CACF,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;;;;iBAmBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC;AAElB,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,GAAG,EAAE,CACX,IAAI,CAAA;;;;;;;;;;;;;;;;iBAgBS;CACA,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZStepper} from \".\";\nimport \"../z-stepper-item/index\";\nimport \"./index\";\n\nexport default {\n  title: \"ZStepper/ZStepper\",\n  component: \"z-stepper\",\n  decorators: [(Story) => html`<div class=\"z-carousel-story-container\">${Story()}</div>`],\n  subcomponents: {\n    ZStepperItem: \"z-stepper-item\",\n  },\n} satisfies Meta<ZStepper>;\n\ntype Story = StoryObj<ZStepper>;\n\nexport const Default = {\n  render: () =>\n    html`<script>\n        const onClick = (elem) => {\n          if (!elem.disabled) {\n            elem.setAttribute(\"pressed\", \"\");\n            Array.from(document.querySelectorAll(\"z-stepper-item\")).forEach((s) => {\n              if (s === elem) {\n                return;\n              }\n              s.pressed = false;\n              s.removeAttribute(\"pressed\");\n            });\n          }\n        };\n      </script>\n      <z-stepper>\n        <z-stepper-item\n          index=\"1\"\n          pressed\n          href=\"#\"\n          onclick=\"onClick(this)\"\n          >I tuoi dati</z-stepper-item\n        >\n        <z-stepper-item\n          index=\"2\"\n          href=\"#\"\n          onclick=\"onClick(this)\"\n          >Le tue credenziali</z-stepper-item\n        >\n        <z-stepper-item\n          index=\"3\"\n          href=\"#\"\n          onclick=\"onClick(this)\"\n          >Conferma</z-stepper-item\n        >\n      </z-stepper>`,\n} satisfies Story;\n\nexport const Completed = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        href=\"#\"\n        disabled\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        href=\"#\"\n        disabled\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        href=\"#\"\n        pressed\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const CompletedDisabled = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        disabled\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        disabled\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        pressed\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n\nexport const Checked = {\n  render: () =>\n    html`<z-stepper>\n      <z-stepper-item\n        index=\"1\"\n        checked\n        >I tuoi dati</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"2\"\n        checked\n        >Le tue credenziali</z-stepper-item\n      >\n      <z-stepper-item\n        index=\"3\"\n        checked\n        >Conferma</z-stepper-item\n      >\n    </z-stepper>`,\n} satisfies Story;\n"]}

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

@@ -12,7 +12,7 @@
   list-style: none;
 }
 
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   :host {
     padding: 0 calc(var(--space-unit) * 2);
   }

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: '2e45354c628f043ce2a9246a0ffb8e94235ae669', role: "listitem" }, h("button", Object.assign({ key: '854de9a3ea272425e75c81e0d116bd04fcda2c2d', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '06754f85e70407535e1ae0e80dcf8015d33a8112', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '9bfeda701f57ba6c263be0a986abe03c76009acd' }, h("slot", { key: 'c3abd1dae057323d41ee7a14bf5398e2e2a71ccf' })))));
+        return (h(Host, { key: 'de8015ed9e5b249afbac43db09358ca2f78059c0', role: "listitem" }, h("button", Object.assign({ key: '13efe38c78ffcf7edb6db36bf49dedb182c86e43', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: '6bfecde08d2198eacb37ce8479dc118768604c2b', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '1eab35a3586365499167d70dd5738007b920d5e1' }, h("slot", { key: '2d85bc5cce789b53945868337331d730d341be45' })))));
     }
     static get is() { return "z-stepper-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,12 +81,12 @@
 }
 
 :host([pressed]:not([disabled])) .indicator {
-  border-color: var(--color-active-primary);
-  background: var(--color-active-primary);
+  border-color: var(--color-hover-primary);
+  background: var(--color-hover-primary);
   color: var(--color-text-inverse);
 }
 
-:host(:not([disabled]):focus-within) .indicator {
+:host([href]:not([disabled]):focus-within) .indicator {
   box-shadow: var(--shadow-focus-primary);
 }
 
@@ -102,12 +102,12 @@
 }
 
 :host([checked]:not([disabled])) .indicator {
-  border-color: var(--color-success-default);
-  color: var(--color-success-default);
+  border-color: var(--color-default-success);
+  color: var(--color-default-success);
 }
 
 :host([checked]:not([disabled])) .indicator z-icon {
-  fill: var(--color-success-default);
+  fill: var(--color-default-success);
 }
 
 :host([checked]) .indicator z-icon > svg {

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

@@ -11,9 +11,9 @@ export class ZTag {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: '531b3069d9339b05377f89c350a5ed6becaf9dbd', class: {
+        return (h(Host, { key: 'b1b99d8aa0ded75daaed090aa8fa490899e3b04e', class: {
                 expandable: this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { key: '5abaf6a26667e26e6a11661c49c18d8677a2a130', name: this.icon }), h("div", { key: 'a52c9c030320f2c0687bd896c33dd75ffc497ad2' }, h("slot", { key: 'ff3046c07a2fb70478adb354079d8d26834746ce' }))));
+            } }, this.icon && h("z-icon", { key: 'b3f8b50efc5f7132515416a428ab3d10cf1329b9', name: this.icon }), h("div", { key: 'edf761fbadd249b2d50ad420a60bdec3ab296840' }, h("slot", { key: '932dd3ed45783430641d41f319482f27b9db2907' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

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

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

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

@@ -228,15 +228,15 @@ z-icon:focus {
 }
 
 :host > #external-container.error {
-  background: var(--color-danger01);
+  background: var(--color-default-error);
 }
 
 :host > #external-container.success {
-  background: var(--color-success01);
+  background: var(--color-default-success);
 }
 
 :host > #external-container.warning {
-  background: var(--color-warning01);
+  background: var(--color-default-warning);
 }
 
 :host > #external-container.warning #icon {
@@ -244,7 +244,7 @@ z-icon:focus {
 }
 
 /* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   :host {
     width: unset;
     max-width: 50vw;
@@ -260,7 +260,7 @@ z-icon:focus {
 }
 
 /* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
+@media (min-width: 1366px) {
   :host {
     width: unset;
     max-width: 33vw;

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

@@ -36,7 +36,7 @@ export class ZToastNotificationList {
         }
     }
     render() {
-        return h("slot", { key: 'fcca8c71a9eca7ada8de9d23d4930ec6796b2925', name: "toasts" });
+        return h("slot", { key: 'c0d5318c2d2ea4b114f3fe843006a2526384d44d', 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: '40e03296813c2e590c4dac11949d96f1dbb124eb', 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: 'fca73c6711943889a68d97d4fb8904907565968f', 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-button/styles.css

@@ -8,7 +8,7 @@ button {
   border-color: transparent;
   background-color: var(--color-surface01);
   border-radius: var(--border-radius);
-  box-shadow: 0 0 4px 0 rgb(0 0 0 / 20%);
+  box-shadow: var(--shadow-2);
   color: var(--color-primary01);
   cursor: pointer;
   fill: var(--color-primary01);

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: '38db5de3b72a6f9758e659de273cd442e3682489' }, h("input", { key: '0cb35639d2d30db6b9c29e8f96a9bd067a1d3d75', id: this.htmlid, type: "checkbox", checked: this.checked, disabled: this.disabled, onChange: this.handleClick.bind(this) }), h("label", { key: 'c92a2feeca5da867b316c5f5c27704f6ac3bfdac', 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: 'baddbf963a2ba64b1768b93e2791a01d3bbacc47' }, h("slot", { key: '7cac9769b322655101a15e746921e103a4569a07' })), h("span", { key: 'e1747bdce3b7ad3ad0b354f9d864e7fcace42d26', 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: '47814a2f975086f4044f6f50d1f7402aece53c15', class: "circle" }, this.checked && (h("z-icon", { key: '56ca84b760f4cc1abbb2a5e8a4eb44a07a5d0f91', width: 12, height: 12, name: "checkmark" })))))));
     }
     static get is() { return "z-toggle-switch"; }
     static get encapsulation() { return "scoped"; }

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: 'fdca98f95640bac81d7cf60e1fc0f8c4536f7021', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'd2143919460695e98cf114c4cb07ae75108c9f1d' })));
+        return (h("z-popover", { key: 'd7f54583b5632dc53433087925034a82c80cefa5', ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", { key: 'e478ae3573617a2f6653b8fc7d71a453f1a498f2' })));
     }
     static get is() { return "z-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-visually-hidden/index.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class ZVisuallyHidden {
     render() {
-        return h("slot", { key: '7c7caddb01b7e2278f956face2065ac1c843ddc5' });
+        return h("slot", { key: '3621cee7a23fe68812b92d58a239dce03caf4724' });
     }
     static get is() { return "z-visually-hidden"; }
     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: 'd999d04c93a5a556d397ec0458a8db7b252e4f4c', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'bebbc05f7f4a7e57a0b0379abc0a5b3d71432309' })));
+        return (h("div", { key: '47b18c53ca28ee9b452e5ed7683af8321b928bf6', class: this.retrieveClass(), tabindex: "0" }, h("slot", { key: 'b37b2c5b359efc95a17f4851f679bde201c23f5d' })));
     }
     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: '26730317345595013e625708599fa1c6c5ea04a0', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: '3318a79be3865ad94eb7a9f7df385bf47c132048', type: this.getAlertType() }, h("div", { key: 'c0b39a452f0529901918b50d983ad1fa2e756778', class: "relative-container" }, h("z-icon", { key: '2dea8db0df9990f375656b78f4e8389b543b5887', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'ba7891b7139df477a8e2e7a912537181b428b713', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: '9ec182dbb44b0f9cd5450f25f5fbcda04b67986d', role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+        return (h("div", { key: 'd694a90094fe2e33878fcca801f46f8228098c8c', class: "alert-external-wrapper " + this.retrieveClass() }, h("z-alert", { key: 'd521793ebd41856022644940c70d8a927621fe59', type: this.getAlertType() }, h("div", { key: '4644d6bfd6341c9e9d1a24ed3d1d62bd5352b20b', class: "relative-container" }, h("z-icon", { key: '3b439caade1c09b37407fdddb7e8d7f7258ae0c3', name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { key: 'd60e0384f2c364a0594c99a6e08f2564c7000677', class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { key: '8416a6865f3c9515b2c35c1a902f27729997c249', 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-alert/styles.css

@@ -33,11 +33,11 @@
 }
 
 :host div.add-alert {
-  background: var(--color-success-inverse);
+  background: var(--color-inverse-success);
 }
 
 :host div.remove-alert {
-  background: var(--color-warning-inverse);
+  background: var(--color-inverse-warning);
 }
 
 :host div > .content-text {

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: '87bccb8aa58d306d1dd01960d83b87f6c72916a6' }, h("slot", { key: 'f30fbd1e1bebda1bab8dffeab7f7f6691eddf487', name: "alert" }), h("slot", { key: '1c12604a64392bea5f30af724bb10ad074336246', name: "cover" })));
+        return (h("div", { key: 'b0fbd55c3f8e344f982034d443b1f8de007e1f71' }, h("slot", { key: '1707d5d71b86892d4daf121f967f56bac0d95707', name: "alert" }), h("slot", { key: '85864ee964668da43f2c8ccd8795dd5c464eedb6', 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: 'e8bb33422b5ec5cd69aa639b75bac7d36efb7eb0', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+        return (h("img", { key: '2cbb9d604fa45f0e63cb20ec4428ed9c8db1d8a2', 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"; }