@zanichelli/albe-web-components 7.3.2 → 7.3.4

package/dist/esm/z-myz-card-list.entry.js

@@ -2,33 +2,33 @@ import { r as registerInstance, h } from './index-a2ca4b97.js';
 
 const stylesCss = "ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary02);font-family:var(--font-family-sans);list-style:none}ul>li{padding-left:10px;text-indent:-10px}ul>li>a{display:block;padding-top:calc(var(--space-unit) * 0.5);color:var(--color-primary01);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}ul>li>a::before{padding-right:5px;content:\"•\"}ul>li>span{padding:0 calc(var(--space-unit) * 2);color:var(--color-surface04);font-size:14px;font-weight:var(--font-rg);letter-spacing:0.16px;line-height:calc(var(--space-unit) * 2.5);text-decoration:none}";
 
-const ZMyzCardList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.renderList = this.renderList.bind(this);
-  }
-  handleSpaceKeyPress(e, url) {
-    if (e.keyCode == 32 || e.keyCode == 13) {
-      e.preventDefault();
-      window.open(url, "_blank");
-    }
-  }
-  formatListContent(data) {
-    const { value, isLink, url } = data;
-    if (!isLink) {
-      return h("span", null, value);
-    }
-    return (h("a", { role: "button", onKeyPress: (e) => this.handleSpaceKeyPress(e, url), href: url, target: "_blank" }, value));
-  }
-  renderList(dataArray) {
-    return dataArray.map((data) => {
-      return h("li", null, this.formatListContent(data));
-    });
-  }
-  render() {
-    return h("ul", null, this.renderList(JSON.parse(this.listdata)));
-  }
-};
+const ZMyzCardList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.renderList = this.renderList.bind(this);
+  }
+  handleSpaceKeyPress(e, url) {
+    if (e.keyCode == 32 || e.keyCode == 13) {
+      e.preventDefault();
+      window.open(url, "_blank");
+    }
+  }
+  formatListContent(data) {
+    const { value, isLink, url } = data;
+    if (!isLink) {
+      return h("span", null, value);
+    }
+    return (h("a", { role: "button", onKeyPress: (e) => this.handleSpaceKeyPress(e, url), href: url, target: "_blank" }, value));
+  }
+  renderList(dataArray) {
+    return dataArray.map((data) => {
+      return h("li", null, this.formatListContent(data));
+    });
+  }
+  render() {
+    return h("ul", null, this.renderList(JSON.parse(this.listdata)));
+  }
+};
 ZMyzCardList.style = stylesCss;
 
 export { ZMyzCardList as z_myz_card_list };

package/dist/esm/z-myz-card_4.entry.js

@@ -1,101 +1,101 @@
 import { r as registerInstance, h } from './index-a2ca4b97.js';
-import { L as LicenseType } from './index-e36ec4a4.js';
+import { L as LicenseType } from './index-03c01696.js';
 
 const stylesCss$3 = ":host{--card-overflow:hidden}div{display:flex;overflow:var(--card-overflow);width:auto;width:256px;height:522px;box-sizing:border-box;flex-direction:column;border:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius)}div.real,div.trial,div.temp{border-color:var(--accent)}div.faded{border:var(--border-size-medium) solid var(--color-surface02)}div.highlighted{box-shadow:var(--shadow-4);outline:none}div.pressed{box-shadow:var(--shadow-8);outline:none}div:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
 
-const ZMyzCardComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** pressed status */
-    this.ispressed = false;
-    /** highlighted status */
-    this.ishighlighted = false;
-  }
-  retrieveClass() {
-    let elemClasses = "";
-    if (this.cardtype === LicenseType.REAL) {
-      elemClasses += "real";
-    }
-    else if (this.cardtype === LicenseType.TRIAL) {
-      elemClasses += "trial";
-    }
-    else if (this.cardtype === LicenseType.TEMP) {
-      elemClasses += "temp";
-    }
-    if (this.faded) {
-      elemClasses += " faded";
-    }
-    else if (this.ispressed) {
-      elemClasses += " pressed";
-    }
-    else if (this.ishighlighted) {
-      elemClasses += " highlighted";
-    }
-    return elemClasses;
-  }
-  render() {
-    return (h("div", { class: this.retrieveClass(), tabindex: "0" }, h("slot", null)));
-  }
-};
+const ZMyzCardComponent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** pressed status */
+    this.ispressed = false;
+    /** highlighted status */
+    this.ishighlighted = false;
+  }
+  retrieveClass() {
+    let elemClasses = "";
+    if (this.cardtype === LicenseType.REAL) {
+      elemClasses += "real";
+    }
+    else if (this.cardtype === LicenseType.TRIAL) {
+      elemClasses += "trial";
+    }
+    else if (this.cardtype === LicenseType.TEMP) {
+      elemClasses += "temp";
+    }
+    if (this.faded) {
+      elemClasses += " faded";
+    }
+    else if (this.ispressed) {
+      elemClasses += " pressed";
+    }
+    else if (this.ishighlighted) {
+      elemClasses += " highlighted";
+    }
+    return elemClasses;
+  }
+  render() {
+    return (h("div", { class: this.retrieveClass(), tabindex: "0" }, h("slot", null)));
+  }
+};
 ZMyzCardComponent.style = stylesCss$3;
 
 const stylesCss$2 = ":host{width:auto;height:340px}:host>div{position:relative;display:flex;width:auto;height:340px;align-items:center;justify-content:center}";
 
-const ZMyzCardBody = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h("div", null, h("slot", { name: "alert" }), h("slot", { name: "cover" })));
-  }
-};
+const ZMyzCardBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", null, h("slot", { name: "alert" }), h("slot", { name: "cover" })));
+  }
+};
 ZMyzCardBody.style = stylesCss$2;
 
 const stylesCss$1 = "img{display:block;max-width:100%;height:340px;margin:auto;object-fit:cover}img.faded{opacity:0.3}";
 
-const ZMyzCardCover = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  hadleOnImageError() {
-    this.img = this.defaultimg;
-  }
-  render() {
-    return (h("img", { class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
-  }
-};
+const ZMyzCardCover = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  hadleOnImageError() {
+    this.img = this.defaultimg;
+  }
+  render() {
+    return (h("img", { class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+  }
+};
 ZMyzCardCover.style = stylesCss$1;
 
 const stylesCss = "header{position:relative;display:flex;width:auto;height:calc(var(--space-unit) * 6);flex-direction:row;align-items:flex-start;justify-content:space-between;border-bottom:var(--border-size-medium) solid var(--color-surface03);background-color:var(--color-surface01);border-radius:var(--border-radius) var(--border-radius) var(--border-no-radius) var(--border-no-radius)}slot[name=\"aria-heading\"]::slotted(*){position:absolute;overflow:hidden !important;width:1px !important;height:1px !important;padding:0 !important;border:0 none !important;margin:-1px !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important}header.real,header.trial,header.temp{border-bottom:var(--border-size-medium) solid var(--accent);background-color:var(--accent-lighter)}.card-title{overflow:hidden;height:calc(var(--space-unit) * 2);padding:calc(var(--space-unit) * 2);margin:0;color:var(--color-surface05);font-family:var(--font-family-sans);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.22px;line-height:calc(var(--space-unit) * 2);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.faded{border-bottom:var(--border-size-medium) solid var(--color-surface02)}.faded.real,.faded.trial,.faded.temp{border-top:var(--border-size-medium) solid var(--accent);border-right:var(--border-size-medium) solid var(--accent);border-left:var(--border-size-medium) solid var(--accent)}";
 
-const ZMyzCardHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.allowTooltip = false;
-  }
-  getTitle() {
-    return this.allowTooltip ? this.titolo : "";
-  }
-  componentDidLoad() {
-    if (this.elementHasEllipsis()) {
-      this.allowTooltip = true;
-    }
-  }
-  elementHasEllipsis() {
-    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
-  }
-  retrieveClass() {
-    return {
-      real: this.cardtype === LicenseType.REAL,
-      trial: this.cardtype === LicenseType.TRIAL,
-      temp: this.cardtype === LicenseType.TEMP,
-      faded: this.faded,
-    };
-  }
-  render() {
-    return (h("header", { class: this.retrieveClass() }, h("slot", { name: "aria-heading" }), h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { name: "icon" })));
-  }
-};
+const ZMyzCardHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.allowTooltip = false;
+  }
+  getTitle() {
+    return this.allowTooltip ? this.titolo : "";
+  }
+  componentDidLoad() {
+    if (this.elementHasEllipsis()) {
+      this.allowTooltip = true;
+    }
+  }
+  elementHasEllipsis() {
+    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+  }
+  retrieveClass() {
+    return {
+      real: this.cardtype === LicenseType.REAL,
+      trial: this.cardtype === LicenseType.TRIAL,
+      temp: this.cardtype === LicenseType.TEMP,
+      faded: this.faded,
+    };
+  }
+  render() {
+    return (h("header", { class: this.retrieveClass() }, h("slot", { name: "aria-heading" }), h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), h("slot", { name: "icon" })));
+  }
+};
 ZMyzCardHeader.style = stylesCss;
 
 export { ZMyzCardComponent as z_myz_card, ZMyzCardBody as z_myz_card_body, ZMyzCardCover as z_myz_card_cover, ZMyzCardHeader as z_myz_card_header };

package/dist/esm/z-myz-list-item.entry.js

@@ -1,33 +1,33 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { h as handleKeyboardSubmit } from './utils-970ac457.js';
-import './index-e36ec4a4.js';
-import './breakpoints-c386984e.js';
+import { a as handleKeyboardSubmit } from './utils-f8eb3944.js';
+import './index-03c01696.js';
+import './breakpoints-14432d05.js';
 
 const stylesCss = ":host li{all:unset;all:reset;width:100%;line-height:14px;list-style-type:none}:host li>span{display:flex;padding:calc(var(--space-unit) * 2) 0;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:16px;font-weight:var(--font-rg);letter-spacing:0.23px;line-height:14px}:host(.small) li>span{padding:calc(var(--space-unit) * 1.5) 0;font-size:var(--font-size-2)}:host(.x-small) li>span{padding:var(--space-unit) 0;font-size:var(--font-size-2)}:host(.small) li>span>z-icon,:host(.x-small) li>span>z-icon{--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:calc(var(--space-unit) * 0.5);padding:0}:host li>span.border{border-bottom:2px solid var(--bg-grey-200)}:host li span:hover,a:hover{color:var(--myz-blue);fill:var(--myz-blue)}a,a:visited,a:active{color:inherit;fill:inherit;text-decoration:none}:host li span z-icon{width:calc(var(--space-unit) * 2);height:calc(var(--space-unit) * 2);padding:0 calc(var(--space-unit) * 1.5) 0 0;background-repeat:no-repeat;background-size:contain;color:var(--myz-blue);fill:var(--myz-blue)}";
 
-const ZMyzListItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.zListItemLinkClick = createEvent(this, "zListItemLinkClick", 7);
-    this.zListItemClick = createEvent(this, "zListItemClick", 7);
-    /** link target (optional) */
-    this.linktarget = "_self";
-    /** underlined style flag */
-    this.underlined = true;
-    this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);
-    this.emitZListItemClick = this.emitZListItemClick.bind(this);
-  }
-  emitZListItemLinkClick(e, linkId) {
-    this.zListItemLinkClick.emit({ e, linkId });
-  }
-  emitZListItemClick(e, listitemid) {
-    this.zListItemClick.emit({ e, listitemid });
-  }
-  render() {
-    const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-    return (h("li", { role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { class: this.underlined && "border" }, this.icon && h("z-icon", { name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", null))));
-  }
-};
+const ZMyzListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.zListItemLinkClick = createEvent(this, "zListItemLinkClick", 7);
+    this.zListItemClick = createEvent(this, "zListItemClick", 7);
+    /** link target (optional) */
+    this.linktarget = "_self";
+    /** underlined style flag */
+    this.underlined = true;
+    this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);
+    this.emitZListItemClick = this.emitZListItemClick.bind(this);
+  }
+  emitZListItemLinkClick(e, linkId) {
+    this.zListItemLinkClick.emit({ e, linkId });
+  }
+  emitZListItemClick(e, listitemid) {
+    this.zListItemClick.emit({ e, listitemid });
+  }
+  render() {
+    const linkId = this.listitemid ? `link_${this.listitemid}` : "";
+    return (h("li", { role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, h("span", { class: this.underlined && "border" }, this.icon && h("z-icon", { name: this.icon }), this.link ? (h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (h("span", { innerHTML: this.text })), h("slot", null))));
+  }
+};
 ZMyzListItem.style = stylesCss;
 
 export { ZMyzListItem as z_myz_list_item };

package/dist/esm/z-myz-list.entry.js

@@ -2,30 +2,30 @@ import { r as registerInstance, h } from './index-a2ca4b97.js';
 
 const stylesCss = "ul{padding:0;margin:0}";
 
-const ZMyzList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-  }
-  componentWillLoad() {
-    if (this.inputrawdata) {
-      this.parseinputrawdata(this.inputrawdata);
-    }
-  }
-  parseinputrawdata(inputrawdata) {
-    this.list = [...JSON.parse(inputrawdata)];
-  }
-  oninputrawdataChange(newValue) {
-    this.parseinputrawdata(newValue);
-  }
-  render() {
-    const lastElem = this.list ? this.list.length - 1 : -1;
-    return (h("ul", null, this.list &&
-      this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
-  }
-  static get watchers() { return {
-    "inputrawdata": ["oninputrawdataChange"]
-  }; }
-};
+const ZMyzList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    if (this.inputrawdata) {
+      this.parseinputrawdata(this.inputrawdata);
+    }
+  }
+  parseinputrawdata(inputrawdata) {
+    this.list = [...JSON.parse(inputrawdata)];
+  }
+  oninputrawdataChange(newValue) {
+    this.parseinputrawdata(newValue);
+  }
+  render() {
+    const lastElem = this.list ? this.list.length - 1 : -1;
+    return (h("ul", null, this.list &&
+      this.list.map((bean, i) => (h("z-myz-list-item", { listitemid: bean.listitemid, text: bean.text, link: bean.link, linktarget: bean.linktarget, icon: bean.icon, underlined: lastElem != i })))));
+  }
+  static get watchers() { return {
+    "inputrawdata": ["oninputrawdataChange"]
+  }; }
+};
 ZMyzList.style = stylesCss;
 
 export { ZMyzList as z_myz_list };

package/dist/esm/z-navigation-tab-link.entry.js

@@ -1,67 +1,67 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-e36ec4a4.js';
-import { I as ICONS } from './icons-6cd265c6.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-03c01696.js';
+import { I as ICONS } from './icons-55b0b113.js';
 
 const navigationTabCss = "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{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}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]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}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\"]: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}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\"]: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{top:0;right:0;width:var(--border-size-large);height:100%}";
 
-const ZNavigationTabLink = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selectedEvent = createEvent(this, "selected", 7);
-    /**
-     * Whether the tab is selected.
-     */
-    this.selected = false;
-    /**
-     * Whether the tab is disabled.
-     */
-    this.disabled = false;
-    /**
-     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
-    this.orientation = NavigationTabsOrientation.HORIZONTAL;
-    /**
-     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
-    this.size = NavigationTabsSize.BIG;
-  }
-  /**
-   * Scroll into view to center the tab.
-   */
-  scrollToTab({ target: button }) {
-    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
-      ? { block: "nearest", inline: "center" }
-      : { block: "center", inline: "nearest" };
-    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
-  }
-  onClick() {
-    this.selected = true;
-  }
-  onSelected() {
-    if (this.selected) {
-      this.selectedEvent.emit();
-    }
-  }
-  /**
-   * Render the icon component using the icon's name passed from prop.
-   * Use the `filled` version when the tab is `selected`.
-   * @returns {HTMLElement}
-   */
-  renderIcon() {
-    let icon = this.icon;
-    const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
-    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
-      icon = iconFilled;
-    }
-    return h("z-icon", { name: icon });
-  }
-  render() {
-    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
-  }
-  static get watchers() { return {
-    "selected": ["onSelected"]
-  }; }
-};
+const ZNavigationTabLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedEvent = createEvent(this, "selected", 7);
+    /**
+     * Whether the tab is selected.
+     */
+    this.selected = false;
+    /**
+     * Whether the tab is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSize.BIG;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    this.selected = true;
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.emit();
+    }
+  }
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  renderIcon() {
+    let icon = this.icon;
+    const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
+    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return h("z-icon", { name: icon });
+  }
+  render() {
+    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === "horizontal" && this.label));
+  }
+  static get watchers() { return {
+    "selected": ["onSelected"]
+  }; }
+};
 ZNavigationTabLink.style = navigationTabCss;
 
 export { ZNavigationTabLink as z_navigation_tab_link };

package/dist/esm/z-navigation-tab.entry.js

@@ -1,69 +1,69 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-e36ec4a4.js';
-import { I as ICONS } from './icons-6cd265c6.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-03c01696.js';
+import { I as ICONS } from './icons-55b0b113.js';
 
 const navigationTabCss = "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{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}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]>*{color:var(--gray500);cursor:not-allowed;fill:currentcolor;pointer-events:all}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\"]: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}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\"]: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{top:0;right:0;width:var(--border-size-large);height:100%}";
 
-const ZNavigationTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selectedEvent = createEvent(this, "selected", 7);
-    /**
-     * Whether the tab is selected.
-     */
-    this.selected = false;
-    /**
-     * Whether the tab is disabled.
-     */
-    this.disabled = false;
-    /**
-     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
-    this.orientation = NavigationTabsOrientation.HORIZONTAL;
-    /**
-     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
-     */
-    this.size = NavigationTabsSize.BIG;
-  }
-  /**
-   * Scroll into view to center the tab.
-   */
-  scrollToTab({ target: button }) {
-    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
-      ? { block: "nearest", inline: "center" }
-      : { block: "center", inline: "nearest" };
-    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
-  }
-  onClick() {
-    if (!this.disabled) {
-      this.selected = true;
-    }
-  }
-  onSelected() {
-    if (this.selected) {
-      this.selectedEvent.emit();
-    }
-  }
-  /**
-   * Render the icon component using the icon's name passed from prop.
-   * Use the `filled` version when the tab is `selected`.
-   * @returns {HTMLElement}
-   */
-  renderIcon() {
-    let icon = this.icon;
-    const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
-    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
-      icon = iconFilled;
-    }
-    return h("z-icon", { name: icon });
-  }
-  render() {
-    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label));
-  }
-  static get watchers() { return {
-    "selected": ["onSelected"]
-  }; }
-};
+const ZNavigationTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selectedEvent = createEvent(this, "selected", 7);
+    /**
+     * Whether the tab is selected.
+     */
+    this.selected = false;
+    /**
+     * Whether the tab is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
+    this.size = NavigationTabsSize.BIG;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    if (!this.disabled) {
+      this.selected = true;
+    }
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.emit();
+    }
+  }
+  /**
+   * Render the icon component using the icon's name passed from prop.
+   * Use the `filled` version when the tab is `selected`.
+   * @returns {HTMLElement}
+   */
+  renderIcon() {
+    let icon = this.icon;
+    const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
+    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return h("z-icon", { name: icon });
+  }
+  render() {
+    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) }, this.icon && this.renderIcon(), this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label));
+  }
+  static get watchers() { return {
+    "selected": ["onSelected"]
+  }; }
+};
 ZNavigationTab.style = navigationTabCss;
 
 export { ZNavigationTab as z_navigation_tab };