@zanichelli/albe-web-components 2.47.3 → 3.0.0

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

@@ -10,26 +10,34 @@ export class ZButton {
     this.disabled = false;
     /** HTML button type attribute. */
     this.type = ButtonTypeEnum.button;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
     this.variant = ButtonVariantEnum.primary;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
     this.size = ButtonSizeEnum.big;
-    /** Reduce button size (deprecated).
-     * @deprecated Use `size` prop.
-     */
-    this.issmall = false;
-    /** Spy to render square button. */
-    this.square = false;
+  }
+  getAttributes() {
+    return {
+      id: this.htmlid,
+      class: classNames(this.variant, this.size),
+      "aria-label": this.ariaLabel,
+    };
+  }
+  componentDidLoad() {
+    if (this.hostElement.innerText) {
+      this.hostElement.classList.add("with-text");
+    }
   }
   render() {
-    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-    return (h("slot", { name: "element" },
-      h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: classNames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) },
+    if (this.href)
+      return (h("a", Object.assign({ href: this.href, target: this.target }, this.getAttributes()),
         this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
-        h("slot", null))));
+        h("slot", null)));
+    return (h("button", Object.assign({ name: this.name, type: this.type, disabled: this.disabled }, this.getAttributes()),
+      this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }),
+      h("slot", null)));
   }
   static get is() { return "z-button"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["styles.css"]
   }; }
@@ -37,6 +45,57 @@ export class ZButton {
     "$": ["styles.css"]
   }; }
   static get properties() { return {
+    "ariaLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "defines a string value that labels an interactive element, used for accessibility."
+      },
+      "attribute": "aria-label",
+      "reflect": true
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML a href attribute. If it is set, it renders an HTML a tag."
+      },
+      "attribute": "href",
+      "reflect": true
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "HTML a target attribute."
+      },
+      "attribute": "target",
+      "reflect": true
+    },
     "htmlid": {
       "type": "string",
       "mutable": false,
@@ -128,7 +187,7 @@ export class ZButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`."
+        "text": "Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`."
       },
       "attribute": "variant",
       "reflect": true,
@@ -173,45 +232,6 @@ export class ZButton {
       "attribute": "size",
       "reflect": true,
       "defaultValue": "ButtonSizeEnum.big"
-    },
-    "issmall": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "Use `size` prop."
-          }],
-        "text": "Reduce button size (deprecated)."
-      },
-      "attribute": "issmall",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "square": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Spy to render square button."
-      },
-      "attribute": "square",
-      "reflect": true,
-      "defaultValue": "false"
     }
   }; }
   static get elementRef() { return "hostElement"; }

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;
   }