@zanichelli/albe-web-components 10.0.8 → 11.0.1

package/dist/collection/components/navigation/z-navigation-tabs/index.js

@@ -0,0 +1,335 @@
+import { h, Host } from "@stencil/core";
+import { NavigationTabsSize, NavigationTabsOrientation, NavigationTabsKeyboardEvents, KeyboardCode, } from "../../../beans";
+/**
+ * Navigation tabs component.
+ * To select a specific tab programmatically, set the `aria-selected` attribute to `true` on the desired tab.
+ * @slot - Main slot. Use `<button>` or `<a>` tags as children.
+ * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
+ * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
+ */
+export class ZNavigationTabs {
+  constructor() {
+    /**
+     * Navigation tabs orientation.
+     */
+    this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Navigation tabs size.
+     */
+    this.size = NavigationTabsSize.BIG;
+    /**
+     * Index of the selected tab.
+     */
+    this.selectedTab = undefined;
+    /**
+     * Index of the last tab that held focus.
+     */
+    this.focusedTab = 0;
+  }
+  /**
+   * Getter for the direction to check based on current orientation.
+   */
+  get direction() {
+    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
+  }
+  /**
+   * Getter for the dimension to check based on current orientation.
+   */
+  get dimension() {
+    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
+  }
+  get tabs() {
+    return Array.from(this.nav.children);
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab(tabElement) {
+    const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" });
+    tabElement.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  /**
+   * Scroll the navigation bar half of its size backward.
+   */
+  navigateBackwards() {
+    this.nav.scrollBy({
+      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
+    });
+  }
+  /**
+   * Scroll the navigation bar half of its size forward.
+   */
+  navigateForward() {
+    this.nav.scrollBy({
+      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,
+      behavior: "smooth",
+    });
+  }
+  /**
+   * Check if a keyboard event was triggered by an arrow key.
+   */
+  isArrowNavigation(e) {
+    return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
+  }
+  /**
+   * Check if navigation buttons can be enabled for each direction.
+   */
+  checkScrollEnabled() {
+    if (!this.nav) {
+      return;
+    }
+    this.canNavigateNext =
+      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];
+    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;
+  }
+  /**
+   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
+   */
+  onTabSelected() {
+    this.tabs.forEach((tab, i) => {
+      const zicon = tab.querySelector("z-icon");
+      const strokeIcon = zicon === null || zicon === void 0 ? void 0 : zicon.getAttribute("name").replace("-filled", "");
+      if (i !== this.selectedTab) {
+        tab.setAttribute("aria-selected", "false");
+        tab.tabIndex = -1;
+        zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", strokeIcon);
+        return;
+      }
+      zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", `${strokeIcon}-filled`);
+      tab.tabIndex = 0;
+      tab.setAttribute("aria-selected", "true");
+    });
+    this.scrollToTab(this.tabs[this.selectedTab]);
+    this.selected.emit(this.selectedTab);
+  }
+  /**
+   * Check if the navigation buttons are needed on window resize.
+   */
+  checkScrollVisible() {
+    if (!this.nav) {
+      return;
+    }
+    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];
+  }
+  /**
+   * Handle click on the tabs.
+   * @param event `click` event triggered by a child tab
+   */
+  handleTabClick(event) {
+    const clickedTab = event.target.closest("[role='tab']");
+    if (!this.tabs.some((child) => child.contains(clickedTab))) {
+      return;
+    }
+    this.selectedTab = this.tabs.indexOf(clickedTab);
+  }
+  /**
+   * Move focus through tabs when an arrow key is pressed.
+   * When `TAB` is pressed, focus the currently selected tab if any.
+   */
+  navigateThroughTabs(event) {
+    if (!this.tabs.some((tab) => tab.contains(event.target))) {
+      return true;
+    }
+    if (event.key === KeyboardCode.TAB) {
+      this.focusedTab = this.selectedTab || 0;
+      this.tabs[this.focusedTab].focus({ preventScroll: true });
+      return;
+    }
+    if (!this.isArrowNavigation(event)) {
+      return true;
+    }
+    event.preventDefault();
+    this.tabs[this.focusedTab].tabIndex = -1;
+    if ((event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+      // Move forward
+      this.focusedTab++;
+      if (this.focusedTab >= this.tabs.length) {
+        this.focusedTab = 0;
+      }
+    }
+    else if ((event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+      // Move backward
+      this.focusedTab--;
+      if (this.focusedTab < 0) {
+        this.focusedTab = this.tabs.length - 1;
+      }
+    }
+    // Ignore disabled tabs
+    if (this.tabs[this.focusedTab].hasAttribute("disabled") &&
+      this.tabs[this.focusedTab].getAttribute("disabled") !== "false") {
+      return this.navigateThroughTabs(event);
+    }
+    this.tabs[this.focusedTab].tabIndex = 0;
+    this.tabs[this.focusedTab].focus();
+    this.scrollToTab(this.tabs[this.focusedTab]);
+  }
+  componentDidRender() {
+    this.checkScrollVisible();
+  }
+  componentDidLoad() {
+    // Set role and tabindex to each slotted tab
+    this.tabs.forEach((tab) => {
+      tab.setAttribute("role", "tab");
+      tab.tabIndex = -1;
+    });
+    this.tabs[0].tabIndex = 0;
+    if (this.selectedTab !== undefined) {
+      this.onTabSelected();
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        "interactive-2": this.size === NavigationTabsSize.SMALL,
+        "interactive-1": this.size !== NavigationTabsSize.SMALL,
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
+        this.navigateThroughTabs(e);
+      }, tabindex: "-1", disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+  }
+  static get is() { return "z-navigation-tabs"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "ariaLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Set `aria-label` attribute to the internal `<nav>` element with `tablist` role."
+        },
+        "attribute": "aria-label",
+        "reflect": false
+      },
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsOrientation",
+          "resolved": "NavigationTabsOrientation.HORIZONTAL | NavigationTabsOrientation.VERTICAL",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Navigation tabs orientation."
+        },
+        "attribute": "orientation",
+        "reflect": true,
+        "defaultValue": "NavigationTabsOrientation.HORIZONTAL"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NavigationTabsSize",
+          "resolved": "NavigationTabsSize.BIG | NavigationTabsSize.SMALL",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Navigation tabs size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "NavigationTabsSize.BIG"
+      },
+      "selectedTab": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Index of the selected tab."
+        },
+        "attribute": "selected-tab",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "canNavigate": {},
+      "canNavigatePrev": {},
+      "canNavigateNext": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "selected",
+        "name": "selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the selected tab changes."
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "canNavigate",
+        "methodName": "checkScrollEnabled"
+      }, {
+        "propName": "selectedTab",
+        "methodName": "onTabSelected"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "checkScrollVisible",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "click",
+        "method": "handleTabClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "navigateThroughTabs",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/navigation/z-navigation-tabs/index.stories.js

@@ -0,0 +1,12 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const tabs = document.querySelector("z-navigation-tabs");
+  tabs?.addEventListener("selected", ({detail: selectedTab}) => {
+    const controlledPanel = tabs.querySelectorAll('[role="tab"]')?.[selectedTab]?.getAttribute("aria-controls");
+    const panels = Array.from(document.querySelectorAll('[role="tabpanel"]'));
+    panels.forEach((panel) => (panel.hidden = true));
+    const panelToActivate = panels.find((panel) => panel.id === controlledPanel);
+    if (panelToActivate) {
+      panelToActivate.hidden = false;
+    }
+  });
+});

package/dist/collection/components/navigation/z-navigation-tabs/styles.css

@@ -0,0 +1,212 @@
+z-navigation-tabs {
+  --z-navigation-tabs-nav-buttons-bg: ;
+  --z-navigation-tabs-nav-buttons-fg: ;
+
+  position: relative;
+  z-index: 0;
+  display: flex;
+  overflow: hidden;
+  flex-direction: row;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+z-navigation-tabs,
+z-navigation-tabs * {
+  box-sizing: border-box;
+}
+
+z-navigation-tabs > nav::-webkit-scrollbar {
+  display: none;
+}
+
+.navigation-button {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  margin: 0;
+  background-color: var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));
+  border-radius: var(--border-no-radius);
+  box-shadow: 0 0 4px 1px var(--shadow-color-base);
+  cursor: pointer;
+  fill: var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));
+  outline: none;
+}
+
+z-navigation-tabs .navigation-button:disabled {
+  display: none;
+}
+
+z-navigation-tabs > nav {
+  z-index: 0;
+  display: flex;
+  overflow: auto;
+  align-items: center;
+  justify-content: flex-start;
+  scroll-behavior: smooth;
+
+  /* hide scrollbar in Firefox */
+  scrollbar-width: none;
+}
+
+z-navigation-tabs[orientation="horizontal"] > nav {
+  width: 100%;
+}
+
+z-navigation-tabs[orientation="horizontal"] .navigation-button {
+  top: 0;
+  width: calc(var(--space-unit) * 4);
+  height: 100%;
+}
+
+z-navigation-tabs[orientation="horizontal"] .navigation-button:first-child {
+  left: 0;
+}
+
+z-navigation-tabs[orientation="horizontal"] .navigation-button:last-child {
+  right: 0;
+}
+
+/* Orientation vertical */
+z-navigation-tabs[orientation="vertical"] {
+  width: fit-content;
+  flex-direction: column;
+}
+
+z-navigation-tabs[orientation="vertical"] > nav {
+  height: 100%;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+z-navigation-tabs[orientation="vertical"] .navigation-button {
+  left: 0;
+  width: 100%;
+  height: calc(var(--space-unit) * 4);
+}
+
+z-navigation-tabs[orientation="vertical"] .navigation-button:first-child {
+  top: 0;
+}
+
+z-navigation-tabs[orientation="vertical"] .navigation-button:last-child {
+  bottom: 0;
+}
+
+z-navigation-tabs[size="small"][orientation="vertical"] .navigation-button {
+  height: calc(var(--space-unit) * 4);
+}
+
+/* Style for the tabs */
+
+z-navigation-tabs > nav > * {
+  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;
+  gap: var(--space-unit);
+  letter-spacing: inherit;
+  line-height: inherit;
+  outline: none;
+  text-align: center;
+  white-space: nowrap;
+}
+
+z-navigation-tabs > nav > a {
+  text-decoration: none;
+}
+
+z-navigation-tabs > nav > *:focus:focus-visible {
+  z-index: 1;
+  box-shadow: inset 0 0 4px 3px var(--color-highlight);
+}
+
+z-navigation-tabs > nav > :not([disabled]):hover {
+  background-color: var(--color-surface02);
+}
+
+z-navigation-tabs > nav > button[disabled] {
+  color: var(--color-disabled03);
+  cursor: not-allowed;
+  fill: currentcolor;
+  pointer-events: all;
+}
+
+z-navigation-tabs > nav > :not([disabled]):hover,
+nav > [aria-selected="true"] {
+  color: var(--color-hover-secondary);
+  fill: currentcolor;
+}
+
+z-navigation-tabs > nav > :not([disabled]):hover::after,
+nav > [aria-selected="true"]::after {
+  position: absolute;
+  background-color: var(--color-hover-secondary);
+  content: "";
+}
+
+z-navigation-tabs[orientation="horizontal"] > nav > :not([disabled]):hover::after,
+z-navigation-tabs[orientation="horizontal"] > nav > [aria-selected="true"]::after {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--border-size-large);
+}
+
+z-navigation-tabs > nav > * z-icon {
+  --z-icon-width: calc(var(--space-unit) * 2);
+  --z-icon-height: calc(var(--space-unit) * 2);
+
+  display: flex;
+  margin: 0;
+}
+
+/* `small` size (only available for horizontal orientation) */
+
+z-navigation-tabs[size="small"][orientation="horizontal"] > nav > * {
+  padding: var(--space-unit) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tabs[size="small"][orientation="horizontal"] > nav > :not([disabled]):hover::after,
+z-navigation-tabs[size="small"][orientation="horizontal"] > nav > [aria-selected="true"]::after {
+  height: var(--border-size-medium);
+}
+
+z-navigation-tabs[size="small"]:not([orientation="vertical"]) > nav > * z-icon {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+}
+
+/* Orientation Vertical */
+
+z-navigation-tabs[orientation="vertical"] > nav > * {
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+z-navigation-tabs[orientation="vertical"] > nav > * > :not(z-icon) {
+  display: none;
+}
+
+z-navigation-tabs[orientation="vertical"] > nav > :not([disabled]):hover::after,
+z-navigation-tabs[orientation="vertical"] > nav > [aria-selected="true"]::after {
+  top: 0;
+  right: 0;
+  width: var(--border-size-large);
+  height: 100%;
+}

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

@@ -128,7 +128,7 @@ export class ZPopover {
     }
     if (!e.composedPath().includes(this.host)) {
       const target = e.target;
-      const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(this.bindTo);
+      const triggerElemClicked = this.bindTo instanceof HTMLElement ? this.bindTo.contains(target) : target.closest(CSS.escape(this.bindTo));
       if (triggerElemClicked) {
         e.stopPropagation();
       }
@@ -172,7 +172,7 @@ export class ZPopover {
   setPosition() {
     let element;
     if (typeof this.bindTo === "string") {
-      element = this.host.ownerDocument.querySelector(this.bindTo);
+      element = this.host.ownerDocument.querySelector(CSS.escape(this.bindTo));
     }
     else if (this.bindTo) {
       element = this.bindTo;

package/dist/collection/{components/navigation/tabs → deprecated}/navigation-tab.css

@@ -87,7 +87,8 @@ z-navigation-tab:not([disabled]):hover > * {
   background-color: var(--color-background);
 }
 
-z-navigation-tab[disabled] > * {
+z-navigation-tab[disabled] > *,
+z-navigation-tab-link[disabled] > * {
   color: var(--gray500);
   cursor: not-allowed;
   fill: currentcolor;
@@ -109,7 +110,7 @@ z-navigation-tab-link[size="small"][orientation="horizontal"] > * {
 
 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"]:not([disabled]):hover > *::after,
 z-navigation-tab-link[size="small"][orientation="horizontal"][selected] > *::after {
   height: var(--border-size-medium);
 }
@@ -126,9 +127,9 @@ z-navigation-tab-link[orientation="vertical"] > * {
   padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
 }
 
-z-navigation-tab[orientation="vertical"]:hover:not([disabled]) > *::after,
+z-navigation-tab[orientation="vertical"]:not([disabled]):hover > *::after,
 z-navigation-tab[orientation="vertical"][selected] > *::after,
-z-navigation-tab-link[orientation="vertical"]:hover > *::after,
+z-navigation-tab-link[orientation="vertical"]:not([disabled]):hover > *::after,
 z-navigation-tab-link[orientation="vertical"][selected] > *::after {
   top: 0;
   right: 0;

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

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 /**
+ * @deprecated - use a native `<a>` with the `z-link` CSS class instead
  * @slot - link content
  */
 export class ZLink {

package/dist/collection/{components/navigation/tabs → deprecated}/z-navigation-tab/index.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
-import { ICONS } from "../../../icons/icons";
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
+import { ICONS } from "../../components/icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders a button.
  * This component uses the `tab` role:
@@ -161,7 +161,7 @@ export class ZNavigationTab {
           "references": {
             "NavigationTabsOrientation": {
               "location": "import",
-              "path": "../../../../beans"
+              "path": "../../beans"
             }
           }
         },
@@ -184,7 +184,7 @@ export class ZNavigationTab {
           "references": {
             "NavigationTabsSize": {
               "location": "import",
-              "path": "../../../../beans"
+              "path": "../../beans"
             }
           }
         },
@@ -209,7 +209,10 @@ export class ZNavigationTab {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use a native `<button>` instead."
+            }],
           "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
         },
         "attribute": "icon",

package/dist/collection/{components/navigation/tabs → deprecated}/z-navigation-tab-link/index.js

@@ -1,10 +1,11 @@
 import { h, Host } from "@stencil/core";
-import { NavigationTabsOrientation, NavigationTabsSize } from "../../../../beans";
-import { ICONS } from "../../../icons/icons";
+import { NavigationTabsOrientation, NavigationTabsSize } from "../../beans";
+import { ICONS } from "../../components/icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
  * This component uses the `tab` role:
  * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role
+ * @deprecated Use a native `<a>` instead.
  */
 export class ZNavigationTabLink {
   constructor() {
@@ -35,6 +36,9 @@ export class ZNavigationTabLink {
     button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
+    if (this.disabled) {
+      return;
+    }
     this.selected = true;
   }
   onSelected() {
@@ -56,7 +60,7 @@ export class ZNavigationTabLink {
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h(Host, { role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("a", { tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), href: !this.disabled && this.href, title: this.htmlTitle, target: this.target }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label)));
+    return (h(Host, { role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("a", { tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), href: this.disabled ? null : this.href, title: this.htmlTitle, target: this.target }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label)));
   }
   static get is() { return "z-navigation-tab-link"; }
   static get originalStyleUrls() {