@zanichelli/albe-web-components 2.48.1 → 3.0.0

package/dist/collection/components/buttons/z-button/styles.css

@@ -1,26 +1,22 @@
 :host {
   display: inline-block;
-
   --z-icon-width: 16px;
   --z-icon-height: 16px;
-  --z-icon-right-margin: var(--space-unit);
-  --rgb-white: 240, 240, 240
+  --z-icon-right-margin: 0;
+  --rgb-white: 240, 240, 240;
 }
 
 button:disabled,
-::slotted(button:disabled) {
+a:disabled {
   pointer-events: none;
 }
 
 button,
-::slotted(button),
-::slotted(a) {
+a {
   box-sizing: border-box;
   display: inline-flex;
-  flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 100%;
   font-family: var(--dashboard-font);
   font-weight: var(--font-sb);
   font-size: 14px;
@@ -29,67 +25,48 @@ button,
   border-width: var(--border-size-medium);
   border-style: solid;
   border-radius: var(--border-radius);
-  vertical-align: middle;
   text-transform: uppercase;
   text-decoration: none;
   cursor: pointer;
+  width: 100%;
   white-space: nowrap;
   outline: none;
   fill: currentColor;
 }
 
-button.big,
-:host([size="big"]) ::slotted(button),
-:host([size="big"]) ::slotted(a) {
-  height: 44px;
-  min-width: 44px;
+:host.with-text z-icon {
+  --z-icon-right-margin: var(--space-unit);
 }
 
-button.small,
-:host([size="small"]) ::slotted(button),
-:host([size="small"]) ::slotted(a) {
-  height: 36px;
-  min-width: 36px;
+:host.with-text button,
+:host.with-text a {
+  min-width: calc(var(--space-unit) * 8);
+  padding: 0 calc(var(--space-unit) * 2);
 }
 
-button.issmall,
-:host([issmall]) ::slotted(button),
-:host([issmall]) ::slotted(a) {
+.big {
+  height: 44px;
+  min-width: 44px;
+}
+
+.small {
   height: 36px;
   min-width: 36px;
 }
 
-button.x-small,
-:host([size="x-small"]) ::slotted(button),
-:host([size="x-small"]) ::slotted(a) {
+.x-small {
   height: 32px;
   min-width: 32px;
 }
 
-button:not(.square),
-:host(:not([square])) ::slotted(button),
-:host(:not([square])) ::slotted(a) {
-  min-width: calc(var(--space-unit) * 8);
-  padding: 0 calc(var(--space-unit) * 2);
-}
-
-button.square,
-:host([square]) {
-  --z-icon-right-margin: 0;
-}
-
-button.primary,
-:host([variant="primary"]) ::slotted(button),
-:host([variant="primary"]) ::slotted(a) {
+.primary {
   background-color: var(--color-primary01);
   border-color: var(--color-primary01);
   color: var(--color-text-inverse);
 }
 
 @media (hover: hover) {
-  button.primary:hover,
-  :host([variant="primary"]) ::slotted(button:hover),
-  :host([variant="primary"]) ::slotted(a:hover) {
+  .primary:hover {
     background-color: var(--color-hover-primary);
     border-color: var(--color-hover-primary);
     color: var(--color-text-inverse);
@@ -97,135 +74,79 @@ button.primary,
 }
 
 button:focus:focus-visible,
-::slotted(button:focus:focus-visible),
-::slotted(a:focus:focus-visible) {
+a:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
 }
 
-button.primary:active,
-:host([variant="primary"]) ::slotted(button:active),
-:host([variant="primary"]) ::slotted(a:active) {
+.primary:active {
   background-color: var(--color-pressed-primary);
   border-color: var(--color-pressed-primary);
   color: var(--color-text-inverse);
   box-shadow: var(--shadow-2);
 }
 
-button.primary:disabled,
-:host([variant="primary"]) ::slotted(button:disabled) {
+.primary:disabled {
   background-color: var(--color-disabled01);
   border-color: var(--color-disabled01);
   color: var(--color-disabled02);
 }
 
-button.secondary,
-:host([variant="secondary"]) ::slotted(button),
-:host([variant="secondary"]) ::slotted(a) {
+.secondary {
   background-color: var(--color-surface01);
   border-color: var(--color-primary01);
   color: var(--color-primary01);
 }
 
 @media (hover: hover) {
-  button.secondary:hover,
-  :host([variant="secondary"]) ::slotted(button:hover),
-  :host([variant="secondary"]) ::slotted(a:hover) {
+  .secondary:hover {
     background-color: var(--color-surface01);
     border-color: var(--color-hover-primary);
     color: var(--color-hover-primary);
   }
 }
 
-button.secondary:active,
-:host([variant="secondary"]) ::slotted(button:active),
-:host([variant="secondary"]) ::slotted(a:active) {
+.secondary:active {
   background-color: var(--color-surface01);
   border-color: var(--color-pressed-primary);
   color: var(--color-pressed-primary);
   box-shadow: var(--shadow-2);
 }
 
-button.secondary:disabled,
-:host([variant="secondary"]) ::slotted(button:disabled) {
+.secondary:disabled {
   background-color: var(--color-surface01);
   border-color: var(--color-disabled01);
   color: var(--color-disabled02);
 }
 
-button.tertiary,
-:host([variant="tertiary"]) ::slotted(button),
-:host([variant="tertiary"]) ::slotted(a) {
+.tertiary {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-primary01);
 }
 
-button.tertiary.hasContent {
-  padding: 0 var(--space-unit);
-}
-
 @media (hover: hover) {
-  button.tertiary:hover,
-  :host([variant="tertiary"]) ::slotted(button:hover),
-  :host([variant="tertiary"]) ::slotted(a:hover) {
+  .tertiary:hover {
     background-color: var(--color-primary03);
     border-color: var(--color-primary03);
     color: var(--color-hover-primary);
   }
 }
 
-button.tertiary:focus:focus-visible,
-:host([variant="tertiary"]) ::slotted(button:focus:focus-visible),
-:host([variant="tertiary"]) ::slotted(a:focus:focus-visible) {
+.tertiary:focus:focus-visible {
   background-color: var(--color-surface01);
   border-color: var(--color-surface01);
   color: var(--color-primary01);
 }
 
-button.tertiary:active,
-:host([variant="tertiary"]) ::slotted(button:active),
-:host([variant="tertiary"]) ::slotted(a:active) {
+.tertiary:active {
   background-color: var(--color-surface01);
   border-color: var(--color-surface01);
   color: var(--color-primary01);
   box-shadow: var(--shadow-2);
 }
 
-button.tertiary:disabled,
-:host([variant="tertiary"]) ::slotted(button:disabled) {
+.tertiary:disabled {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-disabled02);
 }
-
-button.dark-bg,
-:host([variant="dark-bg"]) ::slotted(button),
-:host([variant="dark-bg"]) ::slotted(a) {
-  background-color: rgba(var(--rgb-white), 0.2);
-  border-color: transparent;
-  color: var(--color-text04);
-}
-
-button.dark-bg.hasContent {
-  padding: 0 var(--space-unit);
-}
-
-@media (hover: hover) {
-  button.dark-bg:hover,
-  :host([variant="dark-bg"]) ::slotted(button:hover),
-  :host([variant="dark-bg"]) ::slotted(a:hover) {
-    background-color: rgba(var(--rgb-white), 0.1);
-  }
-}
-
-button.dark-bg:active,
-:host([variant="dark-bg"]) ::slotted(button:active),
-:host([variant="dark-bg"]) ::slotted(a:active) {
-  background-color: rgba(var(--rgb-white), 0.3);
-}
-
-button.dark-bg:disabled,
-:host([variant="dark-bg"]) ::slotted(button:disabled) {
-  color: var(--color-disabled03);
-  background-color: rgba(var(--rgb-white), 0.05);
-}

package/dist/collection/components/file-upload/z-file-upload/index.js

@@ -39,10 +39,12 @@ export class ZFileUpload {
   }
   handleAccessibility() {
     if (this.filesNumber > 0) {
-      this.el.querySelector('z-file:last-child z-chip button').focus();
+      this.el.querySelector("z-file:last-child z-chip button").focus();
     }
     else {
-      this.type === ZFileUploadTypeEnum.default ? this.button.shadowRoot.querySelector('button').focus() : this.uploadLink.focus();
+      this.type === ZFileUploadTypeEnum.default
+        ? this.button.shadowRoot.querySelector("button").focus()
+        : this.uploadLink.focus();
     }
   }
   checkFiles(files) {
@@ -81,9 +83,10 @@ export class ZFileUpload {
     let fileFormatString = "";
     let fileWeightString = "";
     if (this.acceptedFormat) {
-      const fileFormat = this.acceptedFormat.split(', ')
+      const fileFormat = this.acceptedFormat
+        .split(", ")
         .map((string) => string.substring(1).toUpperCase())
-        .join(', ');
+        .join(", ");
       fileFormatString = ` nei formati ${fileFormat}`;
     }
     if (this.fileMaxSize) {
@@ -105,12 +108,12 @@ export class ZFileUpload {
   renderUploadButton() {
     return [
       this.renderInput(),
-      h("z-button", { onClick: () => this.input.click(), onKeyPress: (e) => {
-          if (e.code == 'Space' || e.code == 'Enter') {
+      h("z-button-deprecated", { onClick: () => this.input.click(), onKeyPress: (e) => {
+          if (e.code == "Space" || e.code == "Enter") {
             e.preventDefault();
             this.input.click();
           }
-        }, id: "fileSelect", variant: this.buttonVariant, icon: "upload", ref: (val) => this.button = val }, "Allega"),
+        }, id: "fileSelect", variant: this.buttonVariant, icon: "upload", ref: (val) => (this.button = val) }, "Allega"),
     ];
   }
   renderUploadLink() {
@@ -120,11 +123,11 @@ export class ZFileUpload {
         "Trascinalo qui o",
         " ",
         h("z-body", { tabIndex: 0, class: "upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
-            if (e.code == 'Space' || e.code == 'Enter') {
+            if (e.code == "Space" || e.code == "Enter") {
               e.preventDefault();
               this.input.click();
             }
-          }, variant: "semibold", level: 1, ref: (val) => this.uploadLink = val }, "caricalo"),
+          }, variant: "semibold", level: 1, ref: (val) => (this.uploadLink = val) }, "caricalo"),
         " ",
         "dal tuo computer"),
     ];
@@ -166,7 +169,7 @@ export class ZFileUpload {
         this.type == ZFileUploadTypeEnum.default
           ? this.renderDefaultMode()
           : this.renderDragDropMode()),
-      !!this.invalidFiles.size && (h("z-modal", { tabIndex: 0, ref: (val) => this.errorModal = val, modaltitle: "Attenzione", onModalClose: () => this.invalidFiles = new Map(), onModalBackgroundClick: () => this.invalidFiles = new Map() }, this.handleErrorModalContent()))
+      !!this.invalidFiles.size && (h("z-modal", { tabIndex: 0, ref: (val) => (this.errorModal = val), modaltitle: "Attenzione", onModalClose: () => (this.invalidFiles = new Map()), onModalBackgroundClick: () => (this.invalidFiles = new Map()) }, this.handleErrorModalContent())),
     ];
   }
   static get is() { return "z-file-upload"; }

package/dist/collection/components/file-upload/z-file-upload/styles.css

@@ -50,7 +50,7 @@ input#fileElem {
   margin-bottom: var(--space-unit);
 }
 
-:host > .container > z-button {
+:host > .container > z-button-deprecated {
   display: inline-block;
   margin-top: calc(var(--space-unit) * 3);
 }
@@ -73,7 +73,7 @@ input#fileElem {
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
-  :host > .container > z-button {
+  :host > .container > z-button-deprecated {
     align-self: flex-start;
   }
 }

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

@@ -8,7 +8,8 @@ import { ButtonSizeEnum, ButtonVariantEnum } from "../../../beans";
 export class ZFooter {
   constructor() {
     this.creditsLinkId = "creditsLinkId";
-    this.emitReportAProblemButtonClick = this.emitReportAProblemButtonClick.bind(this);
+    this.emitReportAProblemButtonClick =
+      this.emitReportAProblemButtonClick.bind(this);
   }
   componentWillLoad() {
     if (this.data) {
@@ -81,21 +82,25 @@ export class ZFooter {
   }
   renderFooterProductInfo() {
     var _a;
-    if (this.productName || this.productVersion || this.productCreditsLink != null || this.showReportAProblemButton) {
-      const versionString = `${this.productName ? ' versione' : 'Versione'} ${this.productVersion}`;
-      const creditsObject = h("z-body", { level: 5 },
-        (this.productName || this.productVersion) && ' - ',
-        h("z-link", { htmlid: this.creditsLinkId, href: (_a = this.productCreditsLink) === null || _a === void 0 ? void 0 : _a.trim(), target: "_blank", textcolor: "white" }, "Credits"));
+    if (this.productName ||
+      this.productVersion ||
+      this.productCreditsLink != null ||
+      this.showReportAProblemButton) {
+      const versionString = `${this.productName ? " versione" : "Versione"} ${this.productVersion}`;
+      const creditsObject = (h("z-body", { level: 5 },
+        (this.productName || this.productVersion) && " - ",
+        h("z-link", { htmlid: this.creditsLinkId, href: (_a = this.productCreditsLink) === null || _a === void 0 ? void 0 : _a.trim(), target: "_blank", textcolor: "white" }, "Credits")));
       return (h("div", { id: "extension" },
-        h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} },
+        h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth
+            ? { "--mw": `${this.contentMaxWidth}px` }
+            : {} },
           h("span", null,
-            this.productName && h("z-body", { level: 5, variant: "semibold" }, this.productName),
-            this.productVersion && h("z-body", { level: 5 }, versionString),
+            this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)),
+            this.productVersion && (h("z-body", { level: 5 }, versionString)),
             this.productCreditsLink != null && creditsObject),
-          this.showReportAProblemButton &&
-            h("div", null,
-              h("z-body", { level: 5 }, "Hai bisogno di aiuto?"),
-              h("z-button", { variant: ButtonVariantEnum["dark-bg"], size: ButtonSizeEnum.small, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA")),
+          this.showReportAProblemButton && (h("div", null,
+            h("z-body", { level: 5 }, "Hai bisogno di aiuto?"),
+            h("z-button-deprecated", { variant: ButtonVariantEnum["dark-bg"], size: ButtonSizeEnum.small, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))),
           h("z-divider", { color: "gray500" }))));
     }
   }
@@ -205,7 +210,7 @@ export class ZFooter {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "'undefined' or 'null' means 'don't show Credits',\nempty string means 'emit creditsLinkClick event', \nnot empty string means 'open the url and emit creditsLinkClick event'"
+        "text": "'undefined' or 'null' means 'don't show Credits',\nempty string means 'emit creditsLinkClick event',\nnot empty string means 'open the url and emit creditsLinkClick event'"
       },
       "attribute": "product-credits-link",
       "reflect": false

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

@@ -103,7 +103,7 @@ footer > section > div {
   margin-top: var(--space-unit);
 }
 
-#extension z-button {
+#extension z-button-deprecated {
   margin-left: var(--space-unit);
 }
 
@@ -239,4 +239,4 @@ div.limited-width {
   #extension {
     padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4) 0;
   }
-}
+}

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

@@ -15,7 +15,8 @@ export class zModalLogin {
     this.externalProviderCheck = false;
   }
   componentDidLoad() {
-    this.externalProviderCheck = !!this.hostElement.querySelectorAll('[slot="provider"]').length;
+    this.externalProviderCheck =
+      !!this.hostElement.querySelectorAll('[slot="provider"]').length;
   }
   emitLoginSubmit() {
     const usernameInput = this.hostElement.querySelector("z-input#username");
@@ -65,7 +66,7 @@ export class zModalLogin {
     return username;
   }
   renderZainoDigitaleButton() {
-    return (h("z-button", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitZainoDigitaleClick(), class: "zainoDigitale" },
+    return (h("z-button-deprecated", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitZainoDigitaleClick(), class: "zainoDigitale" },
       h("div", { class: "zd" },
         h("svg", { width: "18px", height: "24px", viewBox: "0 0 18 24" },
           h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" },
@@ -91,12 +92,12 @@ export class zModalLogin {
           h("z-link", { class: "forget", href: this.forgotPasswordUrl }, "Password dimenticata?"),
           h("div", { class: "login" },
             h("slot", { name: "login" },
-              h("z-button", { variant: ButtonVariantEnum.primary, onClick: () => this.emitLoginSubmit() }, "Accedi")))),
+              h("z-button-deprecated", { variant: ButtonVariantEnum.primary, onClick: () => this.emitLoginSubmit() }, "Accedi")))),
         h("hr", null),
         h("z-body", { class: "signup", level: 4, variant: "semibold" }, "Non hai ancora un account?"),
         h("div", { class: "signup" },
           h("slot", { name: "signup" },
-            h("z-button", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitSignupClick() }, "Registrati"))),
+            h("z-button-deprecated", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitSignupClick() }, "Registrati"))),
         !this.externalProviderCheck && (h("div", { class: "providers" },
           h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"),
           h("slot", { name: "provider" },

package/dist/collection/components/modal/z-modal-login/styles.css

@@ -15,9 +15,9 @@
   align-items: stretch;
 }
 
-z-button,
+z-button-deprecated,
 z-input,
-::slotted(z-button),
+::slotted(z-button-deprecated),
 ::slotted(z-input) {
   display: inline-block;
   width: 100%;
@@ -48,8 +48,8 @@ div.wrapper > form > div.password::slotted(z-input),
   align-self: flex-end;
 }
 
-div.wrapper > form > div.login::slotted(z-button),
-:host div.wrapper > form > div.login z-button {
+div.wrapper > form > div.login::slotted(z-button-deprecated),
+:host div.wrapper > form > div.login z-button-deprecated {
   margin: calc(var(--space-unit) * 3) 0;
   align-self: flex-start;
 }
@@ -62,8 +62,8 @@ div.wrapper > form > div.login::slotted(z-button),
   margin-block-start: unset;
 }
 
-div.wrapper > div.signup::slotted(z-button),
-:host div.wrapper > div.signup z-button {
+div.wrapper > div.signup::slotted(z-button-deprecated),
+:host div.wrapper > div.signup z-button-deprecated {
   display: inline-block;
   margin: calc(var(--space-unit) * 2) 0;
 }
@@ -101,8 +101,8 @@ slot-fb[name="provider"] {
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
-  z-button,
-  ::slotted(z-button) {
+  z-button-deprecated,
+  ::slotted(z-button-deprecated) {
     width: initial;
   }
 

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

@@ -28,10 +28,10 @@ export class ZCookiebar {
             "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0",
             h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"),
             "."))),
-      h("z-button", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+      h("z-button-deprecated", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
-    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+    return (h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot()));
   }
   static get is() { return "z-cookiebar"; }
   static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ z-candybar.hidden {
   align-items: stretch;
   align-content: space-between;
   color: var(--text-grey-800);
-  border-radius: calc(var(--space-unit) * .5);
+  border-radius: calc(var(--space-unit) * 0.5);
   font-size: 16px;
   letter-spacing: 0px;
   line-height: 24px;
@@ -58,7 +58,7 @@ z-candybar.hidden {
   z-index: 1000;
 }
 
-.content > z-button {
+.content > z-button-deprecated {
   margin: 0;
   width: 100%;
 }
@@ -87,7 +87,7 @@ z-candybar.hidden {
     padding: 0;
   }
 
-  .content > z-button {
+  .content > z-button-deprecated {
     margin: 0;
     width: initial;
   }

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

@@ -172,7 +172,10 @@
   font-weight: 600;
 }
 
-:host > #external-container.mobile-wrapped #button ::slotted(z-button) {
+:host
+  > #external-container.mobile-wrapped
+  #button
+  ::slotted(z-button-deprecated) {
   margin-top: calc(var(--space-unit) * 2);
 }
 
@@ -219,7 +222,6 @@
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
-
   :host {
     width: unset;
     max-width: 50vw;

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

@@ -66,15 +66,15 @@ export class ZTable {
           h("div", { class: tableContentClass },
             h("slot", { name: "table-body" }),
             h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-              !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-              !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
+              !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+              !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
     }
     return (h(Host, null,
       h("div", { class: tableClass },
         h("slot", { name: "table-header" })),
       h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle },
-        !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
-        !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
+        !!this.callToActionLabel && (h("z-button-deprecated", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)),
+        !!this.callToActionTwoLabel && (h("z-button-deprecated", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
   }
   render() {
     const tableClass = `table ${this.empty ? "table-empty" : ""} ${this.bordered ? "table-bordered" : ""}

package/dist/collection/components/z-table/z-table-cell/index.js

@@ -19,7 +19,7 @@ export class ZTableCell {
           visible: this.isMenuOpened,
         }) },
         h("div", { class: "button-content" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu(), square: true }),
           h("div", { class: classNames("contextual-menu-container", {
               visible: this.isMenuOpened,
             }) },

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

@@ -74,7 +74,7 @@ export class ZTableHeader {
           visible: this.isMenuOpened,
         }) },
         h("z-popover", { position: PopoverPosition["below-center"], "background-color": "gray200" },
-          h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
+          h("z-button-deprecated", { icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], square: true, slot: "trigger", onClick: () => this.handleMenuClick() }),
           h("div", { slot: "popover" },
             h("slot", { name: "contextual-menu" })))))));
   }