@zanichelli/albe-web-components 2.48.0 → 3.1.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/navigation/tabs/navigation-tab.css

@@ -1,5 +1,5 @@
-:host > button,
-:host > a {
+z-navigation-tab > button,
+z-navigation-tab-link > a {
   position: relative;
   z-index: 0;
   display: inline-flex;
@@ -23,38 +23,53 @@
   cursor: pointer;
 }
 
-:host > a {
+z-navigation-tab-link > a {
   text-decoration: none;
 }
 
-:host *::before,
-:host *::after {
+z-navigation-tab *,
+z-navigation-tab-link *,
+z-navigation-tab *::before,
+z-navigation-tab *::after,
+z-navigation-tab-link *::before,
+z-navigation-tab-link *::after {
   box-sizing: border-box;
 }
 
-:host(:not([disabled]):hover) > *,
-:host([selected]) > * {
+z-navigation-tab > *:focus:focus-visible,
+z-navigation-tab-link > *:focus:focus-visible {
+  box-shadow: inset var(--shadow-focus-primary);
+}
+
+z-navigation-tab:not([disabled]):hover > *,
+z-navigation-tab[selected] > *,
+z-navigation-tab-link:not([disabled]):hover > *,
+z-navigation-tab-link[selected] > * {
   color: var(--color-hover-secondary);
   fill: currentColor;
 }
 
-:host(:not([disabled]):hover) > *::after,
-:host([selected]) > *::after {
-  content: '';
+z-navigation-tab:not([disabled]):hover > *::after,
+z-navigation-tab[selected] > *::after,
+z-navigation-tab-link:not([disabled]):hover > *::after,
+z-navigation-tab-link[selected] > *::after {
+  content: "";
   position: absolute;
   background-color: var(--color-hover-secondary);
 }
 
-:host([orientation='horizontal']:not([disabled]):hover) > *::after,
-:host([orientation='horizontal'][selected]) > *::after {
+z-navigation-tab[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab-link[orientation="horizontal"][selected] > *::after {
   bottom: 0;
   left: 0;
   width: 100%;
   height: var(--border-size-large);
 }
 
-slot[name="icon"] z-icon,
-::slotted([slot="icon"]) {
+z-navigation-tab z-icon,
+z-navigation-tab-link z-icon {
   --z-icon-width: calc(var(--space-unit) * 2);
   --z-icon-height: calc(var(--space-unit) * 2);
 
@@ -62,20 +77,16 @@ slot[name="icon"] z-icon,
   margin: 0;
 }
 
-:host([orientation='horizontal']) slot[name="icon"] z-icon,
-:host([orientation='horizontal']) ::slotted([slot="icon"]) {
+z-navigation-tab[orientation="horizontal"] z-icon,
+z-navigation-tab-link[orientation="horizontal"] z-icon {
   margin-right: var(--space-unit);
 }
 
-:host(:not([disabled]):hover) > * {
+z-navigation-tab:not([disabled]):hover > * {
   background-color: var(--color-background);
 }
 
-:host > *:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([disabled]) > * {
+z-navigation-tab[disabled] > * {
   pointer-events: all;
   cursor: not-allowed;
   color: var(--gray500);
@@ -83,34 +94,41 @@ slot[name="icon"] z-icon,
 }
 
 /* Size small (only available for horizontal) */
-:host([size='small']) > * {
+z-navigation-tab[size="small"] > *,
+z-navigation-tab-link[size="small"] > * {
   font-size: var(--font-size-2);
   line-height: 1.4;
   letter-spacing: 0.16px;
 }
 
-:host([size='small'][orientation='horizontal']) > * {
+z-navigation-tab[size="small"][orientation="horizontal"] > *,
+z-navigation-tab-link[size="small"][orientation="horizontal"] > * {
   padding: var(--space-unit) calc(var(--space-unit) * 2);
 }
 
-:host([size='small'][orientation='horizontal']:not([disabled]):hover) > *::after,
-:host([size='small'][orientation='horizontal'][selected]) > *::after {
+z-navigation-tab[size="small"][orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[size="small"][orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"]:hover > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"][selected] > *::after {
   height: var(--border-size-medium);
 }
 
-:host([size='small']:not([orientation='vertical'])) slot[name="icon"] z-icon,
-:host([size='small']:not([orientation='vertical'])) ::slotted([slot="icon"]) {
+z-navigation-tab[size="small"]:not([orientation="vertical"]) z-icon,
+z-navigation-tab-link[size="small"]:not([orientation="vertical"]) z-icon {
   --z-icon-width: 14px;
   --z-icon-height: 14px;
 }
 
 /* Orientation Vertical */
-:host([orientation='vertical']) > * {
+z-navigation-tab[orientation="vertical"] > *,
+z-navigation-tab-link[orientation="vertical"] > * {
   padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
 }
 
-:host([orientation='vertical']:hover:not([disabled])) > *::after,
-:host([orientation='vertical'][selected]) > *::after {
+z-navigation-tab[orientation="vertical"]:hover:not([disabled]) > *::after,
+z-navigation-tab[orientation="vertical"][selected] > *::after,
+z-navigation-tab-link[orientation="vertical"]:hover > *::after,
+z-navigation-tab-link[orientation="vertical"][selected] > *::after {
   width: var(--border-size-large);
   height: 100%;
   top: 0;