@zanichelli/albe-web-components 13.0.0 → 13.1.0-rc1

package/dist/collection/components/z-contextual-menu/index.spec.js

@@ -0,0 +1,74 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ZContextualMenu } from "./index";
+describe("Suite test ZContextualMenu", () => {
+    it("Test render ZContextualMenu vuoto", async () => {
+        const page = await newSpecPage({
+            components: [ZContextualMenu],
+            html: `<z-contextual-menu popover-position="bottom_right"></z-contextual-menu>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-contextual-menu popover-position="bottom_right">
+        <mock:shadow-root>
+          <button aria-label="apri menu contestuale">
+            <z-icon fill="color-primary01" name="contextual-menu"></z-icon>
+          </button>
+          <z-popover position="bottom_right">
+            <div class="popover-content-container">
+              <z-list>
+                <z-list-group divider-type="element"></z-list-group>
+              </z-list>
+            </div>
+          </z-popover>
+        </mock:shadow-root>
+      </z-contextual-menu>
+    `);
+    });
+    it("Test render ZContextualMenu elements prop", async () => {
+        const page = await newSpecPage({
+            components: [ZContextualMenu],
+            html: `<z-contextual-menu popover-position="bottom_right" elements='[{"icon":"share","text":"Element 1","key": "0"},{"icon":"delete","text":"Elemento 2","key": "1"}]''></z-contextual-menu>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <z-contextual-menu '="" elements='[{"icon":"share","text":"Element 1","key": "0"},{"icon":"delete","text":"Elemento 2","key": "1"}]' popover-position="bottom_right">
+        <mock:shadow-root>
+            <button aria-label="apri menu contestuale">
+              <z-icon fill="color-primary01" name="contextual-menu"></z-icon>
+            </button>
+            <z-popover position="bottom_right">
+                 <div class="popover-content-container">
+                   <z-list>
+                     <z-list-group divider-type="element">
+                       <z-list-element align-button="left" class="my-z-list-element" clickable="" color="color-primary01" expandable-style="accordion" iscontextualmenu="" listelementid="0">
+                         <div class="element-container">
+                         <div class="element-icon">
+                           <z-icon height="16" name="share" width="16"></z-icon>
+                           </div>
+                           <div class="element-text">
+                             <span>
+                               Element 1
+                             </span>
+                           </div>
+                         </div>
+                       </z-list-element>
+                       <z-list-element align-button="left" class="my-z-list-element" clickable="" color="color-primary01" expandable-style="accordion" iscontextualmenu="" listelementid="1">
+                         <div class="element-container">
+                         <div class="element-icon">
+                           <z-icon  height="16" name="delete" width="16"></z-icon>
+                           </div>
+                           <div class="element-text">
+                             <span>
+                               Elemento 2
+                             </span>
+                           </div>
+                         </div>
+                       </z-list-element>
+                     </z-list-group>
+                   </z-list>
+                 </div>
+               </z-popover>
+        </mock:shadow-root>
+      </z-contextual-menu>
+    `);
+    });
+});
+//# sourceMappingURL=index.spec.js.map

package/dist/collection/components/z-contextual-menu/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/z-contextual-menu/index.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AAExC,QAAQ,CAAC,4BAA4B,EAAE,GAAG,EAAE;IAC1C,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yEAAyE;SAChF,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uLAAuL;SAC9L,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwC7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newSpecPage} from \"@stencil/core/testing\";\n\nimport {ZContextualMenu} from \"./index\";\n\ndescribe(\"Suite test ZContextualMenu\", () => {\n  it(\"Test render ZContextualMenu vuoto\", async () => {\n    const page = await newSpecPage({\n      components: [ZContextualMenu],\n      html: `<z-contextual-menu popover-position=\"bottom_right\"></z-contextual-menu>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <z-contextual-menu popover-position=\"bottom_right\">\n        <mock:shadow-root>\n          <button aria-label=\"apri menu contestuale\">\n            <z-icon fill=\"color-primary01\" name=\"contextual-menu\"></z-icon>\n          </button>\n          <z-popover position=\"bottom_right\">\n            <div class=\"popover-content-container\">\n              <z-list>\n                <z-list-group divider-type=\"element\"></z-list-group>\n              </z-list>\n            </div>\n          </z-popover>\n        </mock:shadow-root>\n      </z-contextual-menu>\n    `);\n  });\n\n  it(\"Test render ZContextualMenu elements prop\", async () => {\n    const page = await newSpecPage({\n      components: [ZContextualMenu],\n      html: `<z-contextual-menu popover-position=\"bottom_right\" elements='[{\"icon\":\"share\",\"text\":\"Element 1\",\"key\": \"0\"},{\"icon\":\"delete\",\"text\":\"Elemento 2\",\"key\": \"1\"}]''></z-contextual-menu>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <z-contextual-menu '=\"\" elements='[{\"icon\":\"share\",\"text\":\"Element 1\",\"key\": \"0\"},{\"icon\":\"delete\",\"text\":\"Elemento 2\",\"key\": \"1\"}]' popover-position=\"bottom_right\">\n        <mock:shadow-root>\n            <button aria-label=\"apri menu contestuale\">\n              <z-icon fill=\"color-primary01\" name=\"contextual-menu\"></z-icon>\n            </button>\n            <z-popover position=\"bottom_right\">\n                 <div class=\"popover-content-container\">\n                   <z-list>\n                     <z-list-group divider-type=\"element\">\n                       <z-list-element align-button=\"left\" class=\"my-z-list-element\" clickable=\"\" color=\"color-primary01\" expandable-style=\"accordion\" iscontextualmenu=\"\" listelementid=\"0\">\n                         <div class=\"element-container\">\n                         <div class=\"element-icon\">\n                           <z-icon height=\"16\" name=\"share\" width=\"16\"></z-icon>\n                           </div>\n                           <div class=\"element-text\">\n                             <span>\n                               Element 1\n                             </span>\n                           </div>\n                         </div>\n                       </z-list-element>\n                       <z-list-element align-button=\"left\" class=\"my-z-list-element\" clickable=\"\" color=\"color-primary01\" expandable-style=\"accordion\" iscontextualmenu=\"\" listelementid=\"1\">\n                         <div class=\"element-container\">\n                         <div class=\"element-icon\">\n                           <z-icon  height=\"16\" name=\"delete\" width=\"16\"></z-icon>\n                           </div>\n                           <div class=\"element-text\">\n                             <span>\n                               Elemento 2\n                             </span>\n                           </div>\n                         </div>\n                       </z-list-element>\n                     </z-list-group>\n                   </z-list>\n                 </div>\n               </z-popover>\n        </mock:shadow-root>\n      </z-contextual-menu>\n    `);\n  });\n});\n"]}

package/dist/collection/components/z-contextual-menu/styles.css

@@ -0,0 +1,60 @@
+:host {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+button {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+z-popover {
+  overflow: hidden;
+}
+
+.popover-content-container {
+  position: relative;
+  min-width: 112px;
+  max-width: 280px;
+  background-color: var(--color-surface02);
+  box-shadow: var(--shadow-2);
+  white-space: nowrap;
+}
+
+.element-container:hover {
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary);
+}
+
+.element-text {
+  overflow: hidden;
+  font-size: 14px;
+  text-overflow: ellipsis;
+}
+
+.element-container,
+.disabled-element-container {
+  display: flex;
+  min-height: calc(var(--space-unit) * 4);
+  box-sizing: border-box;
+  align-items: center;
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  fill: var(--color-disabled03);
+  gap: var(--space-unit);
+}
+
+.element-container {
+  fill: var(--color-primary01);
+}
+
+.element-icon {
+  display: flex;
+}

package/dist/collection/components/z-contextual-menu/test.e2e.js

@@ -0,0 +1,11 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("z-contextual-menu test end2end", () => {
+    it("Test that component exists", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<z-contextual-menu></z-contextual-menu>`);
+        const el = await page.find("z-contextual-menu");
+        expect(el).not.toBeNull();
+        expect(el.shadowRoot).not.toBeNull;
+    });
+});
+//# sourceMappingURL=test.e2e.js.map

package/dist/collection/components/z-contextual-menu/test.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.e2e.js","sourceRoot":"","sources":["../../../src/components/z-contextual-menu/test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,uBAAuB,CAAC;AAEjD,QAAQ,CAAC,gCAAgC,EAAE,GAAG,EAAE;IAC9C,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;QACjE,MAAM,EAAE,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAChD,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;QAC1B,MAAM,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {newE2EPage} from \"@stencil/core/testing\";\n\ndescribe(\"z-contextual-menu test end2end\", () => {\n  it(\"Test that component exists\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<z-contextual-menu></z-contextual-menu>`);\n    const el = await page.find(\"z-contextual-menu\");\n    expect(el).not.toBeNull();\n    expect(el.shadowRoot).not.toBeNull;\n  });\n});\n"]}

package/dist/collection/components/z-cover-hero/index.js

@@ -35,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: 'c63b0f9c84abfc58decac9a19d62b30b9ed3b4df' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: 'fc8b3e5e75eb8fbc7d553710b5146f73087b4eaf' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'ac589b5b997c26d78a0a9d6e5bc3b1e20490d940', class: "main-container" }, h("div", { key: '195b39698c303d0cef4f57bbaaf60064604eb084', class: "cover-container" }, h("slot", { key: 'e17be72350e529deb6f17092d54360bcc97dbca4', name: "cover" })), h("slot", { key: 'ddc3008776b9eb94b3f10ca133c35090298a1de1', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: 'efc3d392c4787468d390874443a693ddf3a05a5b', class: "main-container" }, h("div", { key: '7e316099ba2078d3f56554f0216e048dddd6d6b3', class: "cover-container" }, h("slot", { key: 'd2aa516b5342f02c51445872a183623d251a5947', name: "cover" })), h("slot", { key: '06c215f93567e670bd358ece2ccc68e7daa09c8d', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

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

@@ -7,7 +7,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '2dd73f0950f7c3f83fb650b12d92631fa353c67f', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: 'ae08a473772cfda024b84cdf94e83e634a66c73f', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '463019d2e47586ce45bfac3ab258320c5c7c3785' });
+        return h(Host, { key: '38a3ba066f0322e41cff8962b230ad752312c8b1' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-reveal/index.js

@@ -52,7 +52,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '51bcd6c5884e26ac25f2cf5b46d579e70c4a0562', open: this.open }, h("button", { key: '7d8754375d54f85145cb193845dd823f931c321e', class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { key: '3bd934391dc01c04380db1a77107558e95661e6c', name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
+        return (h(Host, { key: '0edaf256477519c003699874f8f2de0837eeae3a', open: this.open }, h("button", { key: '0b60861bf9e23c0238e5f9bffc97aa5d2398f6d6', class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { key: '649cfbfda1ef3a7d0947fc680817aa461f48a71c', name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '60946289b968d1faf19d7f2620a848a4c5fe049b', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: 'b29107d6cfc579c79bef11aa8ae35b6cb7b2d319', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: '6fdb6a4048b7f25b81fed9adb148e1afc1f2838c', role: "presentation", class: "canvas-content" }, h("slot", { key: '51ffe7fbc7bda15cf4ee2dd92d6cf87984a7ee96', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: 'f0f282fa9732f81f98d644210d2b602a53161b7d', class: { "skip-animation": this.skipLoadAnimation } }, h("div", { key: '15bf03615f187509da41d3206b39d705ca34cb50', role: "presentation", class: "canvas-container", onTransitionEnd: () => this.handlePageOverflow() }, h("div", { key: 'ba4444c4f3e6c3d9c9fecc4ff4ab103fc614b6bb', role: "presentation", class: "canvas-content" }, h("slot", { key: '4da6be1451be2a26815c7d6503a1eb9cec7c48f6', name: "canvasContent" }))), this.variant == OffCanvasVariant.OVERLAY && (h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }

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

@@ -99,7 +99,7 @@
 }
 
 /* Mobile */
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 768px) {
   :host([open][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
     animation: enter-right 0.4s ease-out;
   }

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

@@ -301,7 +301,7 @@ export class ZPopover {
         this.onOpen();
     }
     render() {
-        return h("slot", { key: '70c742e7871fbf8a871165a4de625dda200ae024' });
+        return h("slot", { key: '0f5c1c7c46c904cd0a572cafb31befb36b6f177e' });
     }
     static get is() { return "z-popover"; }
     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: 'b629b236477e358e5e1f839dfab33ac08aa3cd68' }, h("slot", { key: 'f0752bbd190a7ad8a1e5f72a81c0cd92c77137f7', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'a4477bb9b91f62cdf839532f54eeb783615cc498', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
+        return (h(Host, { key: '73bb5aa52dd0ebf377b6dc6c341a6fe856689753' }, h("slot", { key: '69342bb343240b870f387b2f8b81433d6c44adcd', name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { key: 'b13fc5c19b76b950806457e9ccd93cc21b850bc0', name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { 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-skip-to-content/index.js

@@ -45,7 +45,7 @@ export class ZSkipToContent {
         this.visible = false;
     }
     render() {
-        return (h(Host, { key: '08004b426a63113ef27d0cac85716b5433a2a292', class: {
+        return (h(Host, { key: '148da854d3c5a83e5c103b3efcc5358f86278936', class: {
                 [this.variant]: true,
                 "skip-to-content-visible": this.visible,
             } }, this.links.map((link, i) => {

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

@@ -11,10 +11,10 @@ export class ZTag {
         this.expandable = undefined;
     }
     render() {
-        return (h(Host, { key: 'fa2bfa00bef52495bef1e2271ffa20c09a60380a', class: {
+        return (h(Host, { key: '9d45170a5cefce5d815ac7b5402123645a8d243b', class: {
                 "body-5-sb": true,
                 "expandable": this.expandable && !!this.icon,
-            } }, this.icon && h("z-icon", { name: this.icon }), h("div", { key: '37bbe9678c9a2022a6fe260753b7955fdb9a76d1' }, h("slot", { key: 'f9f7a5f44c6b89d90b4b252fd990889751e955c8' }))));
+            } }, this.icon && h("z-icon", { name: this.icon }), h("div", { key: '9cf3b9f7b169709cf109cdab4d0cfe346a9eb29c' }, h("slot", { key: 'c26454112b3fa7ce120eaf50844cb82c9e11e751' }))));
     }
     static get is() { return "z-tag"; }
     static get encapsulation() { return "scoped"; }

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: '9fb05af5cc8c977fc5041b5a5b75d5813caefd82' });
+        return h("slot", { key: '9ce7d87881fa96e717bc1556d5242cbfe68d0739' });
     }
     static get is() { return "z-visually-hidden"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/deprecated/navigation-tab.css

@@ -0,0 +1,138 @@
+z-navigation-tab > button,
+z-navigation-tab-link > a {
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+  border: none;
+  margin: 0;
+  background-color: unset;
+  border-radius: var(--border-no-radius);
+  color: var(--color-primary01);
+  cursor: pointer;
+  fill: currentcolor;
+  font-family: var(--font-family-sans);
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  outline: none;
+  text-align: center;
+  white-space: nowrap;
+}
+
+z-navigation-tab-link > a {
+  text-decoration: none;
+}
+
+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;
+}
+
+z-navigation-tab > *:focus:focus-visible,
+z-navigation-tab-link > *:focus:focus-visible {
+  z-index: 1;
+  box-shadow: inset 0 0 4px 3px var(--color-highlight);
+}
+
+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;
+}
+
+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 {
+  position: absolute;
+  background-color: var(--color-hover-secondary);
+  content: "";
+}
+
+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);
+}
+
+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);
+
+  display: flex;
+  margin: 0;
+}
+
+z-navigation-tab[orientation="horizontal"] z-icon,
+z-navigation-tab-link[orientation="horizontal"] z-icon {
+  margin-right: var(--space-unit);
+}
+
+z-navigation-tab:not([disabled]):hover > * {
+  background-color: var(--color-background);
+}
+
+z-navigation-tab[disabled] > *,
+z-navigation-tab-link[disabled] > * {
+  color: var(--gray500);
+  cursor: not-allowed;
+  fill: currentcolor;
+  pointer-events: all;
+}
+
+/* Size small (only available for horizontal) */
+z-navigation-tab[size="small"] > *,
+z-navigation-tab-link[size="small"] > * {
+  font-size: var(--font-size-2);
+  letter-spacing: 0.16px;
+  line-height: 1.4;
+}
+
+z-navigation-tab[size="small"][orientation="horizontal"] > *,
+z-navigation-tab-link[size="small"][orientation="horizontal"] > * {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+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"]:not([disabled]):hover > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"][selected] > *::after {
+  height: var(--border-size-medium);
+}
+
+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 */
+z-navigation-tab[orientation="vertical"] > *,
+z-navigation-tab-link[orientation="vertical"] > * {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tab[orientation="vertical"]:not([disabled]):hover > *::after,
+z-navigation-tab[orientation="vertical"][selected] > *::after,
+z-navigation-tab-link[orientation="vertical"]:not([disabled]):hover > *::after,
+z-navigation-tab-link[orientation="vertical"][selected] > *::after {
+  top: 0;
+  right: 0;
+  width: var(--border-size-large);
+  height: 100%;
+}

package/dist/collection/deprecated/z-link/index.js

@@ -45,7 +45,7 @@ export class ZLink {
         }
     }
     render() {
-        return (h("a", { key: 'e5b80b5dac596f11648e2e8afa373c1da00e6e5d', id: this.htmlid, href: this.href ? this.href : null, class: {
+        return (h("a", { key: 'b5b630a2b5ffe83a239315612faf6b673158c782', id: this.htmlid, href: this.href ? this.href : null, class: {
                 disabled: this.isdisabled,
                 active: this.isactive,
                 white: this.iswhite,