@zanichelli/albe-web-components 12.1.3-rc.0 → 12.1.3

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

@@ -2,120 +2,107 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
-const index$1 = require('./index-39ce4edf.js');
+const index = require('./index-195ca522.js');
+const index$1 = require('./index-cf9497bc.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(--blue100)}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 ZMyzCardStyle0 = stylesCss$3;
 
 const ZMyzCardComponent = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.faded = undefined;
-        this.cardtype = undefined;
-        this.ispressed = false;
-        this.ishighlighted = false;
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** pressed status */
+    this.ispressed = false;
+    /** highlighted status */
+    this.ishighlighted = false;
+  }
+  retrieveClass() {
+    let elemClasses = "";
+    if (this.cardtype === index$1.LicenseType.REAL) {
+      elemClasses += "real";
     }
-    retrieveClass() {
-        let elemClasses = "";
-        if (this.cardtype === index$1.LicenseType.REAL) {
-            elemClasses += "real";
-        }
-        else if (this.cardtype === index$1.LicenseType.TRIAL) {
-            elemClasses += "trial";
-        }
-        else if (this.cardtype === index$1.LicenseType.TEMP) {
-            elemClasses += "temp";
-        }
-        if (this.faded) {
-            elemClasses += " faded";
-        }
-        else if (this.ispressed) {
-            elemClasses += " pressed";
-        }
-        else if (this.ishighlighted) {
-            elemClasses += " highlighted";
-        }
-        return elemClasses;
+    else if (this.cardtype === index$1.LicenseType.TRIAL) {
+      elemClasses += "trial";
     }
-    render() {
-        return (index.h("div", { key: '2ea30f2293b9dd4cc187d2cc97449caf4851b424', class: this.retrieveClass(), tabindex: "0" }, index.h("slot", { key: 'ee17e5ceb45cba4f565e6efe41cf524f2cf91ed7' })));
+    else if (this.cardtype === index$1.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 (index.h("div", { class: this.retrieveClass(), tabindex: "0" }, index.h("slot", null)));
+  }
 };
-ZMyzCardComponent.style = ZMyzCardStyle0;
+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 ZMyzCardBodyStyle0 = stylesCss$2;
 
 const ZMyzCardBody = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    render() {
-        return (index.h("div", { key: '445a0d9463e21e7e51df000bbd32b892d16db6f7' }, index.h("slot", { key: 'aff7823ed27e2055d2803a1a55a0be35cfbcebf5', name: "alert" }), index.h("slot", { key: '0f435dc867e63caadc313043006a97156ebe2dc3', name: "cover" })));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h("div", null, index.h("slot", { name: "alert" }), index.h("slot", { name: "cover" })));
+  }
 };
-ZMyzCardBody.style = ZMyzCardBodyStyle0;
+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 ZMyzCardCoverStyle0 = stylesCss$1;
 
 const ZMyzCardCover = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.img = undefined;
-        this.titolo = undefined;
-        this.faded = undefined;
-        this.defaultimg = undefined;
-    }
-    hadleOnImageError() {
-        this.img = this.defaultimg;
-    }
-    render() {
-        return (index.h("img", { key: '3b84be44f2691dea2e073c4f941672de4febfb8c', class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  hadleOnImageError() {
+    this.img = this.defaultimg;
+  }
+  render() {
+    return (index.h("img", { class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+  }
 };
-ZMyzCardCover.style = ZMyzCardCoverStyle0;
+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(--blue100);background-color:var(--color-primary03)}.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(--blue100);border-right:var(--border-size-medium) solid var(--blue100);border-left:var(--border-size-medium) solid var(--blue100)}";
-const ZMyzCardHeaderStyle0 = stylesCss;
 
 const ZMyzCardHeader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.titolo = undefined;
-        this.faded = undefined;
-        this.cardtype = undefined;
-        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 === index$1.LicenseType.REAL,
-            trial: this.cardtype === index$1.LicenseType.TRIAL,
-            temp: this.cardtype === index$1.LicenseType.TEMP,
-            faded: this.faded,
-        };
-    }
-    render() {
-        return (index.h("header", { key: '42e4bbade9cd208a99dcee56b87ee0fcff8202b2', class: this.retrieveClass() }, index.h("slot", { key: '939ec6cec0e6b04daba246efa4cbd841c8f72199', name: "aria-heading" }), index.h("span", { key: 'd71fe4dcb951f026dccdb791f67c56aa74508487', class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { key: 'dd4ad05319e7c87f1ad55a6fb1ff02e2e529757d', name: "icon" })));
+  constructor(hostRef) {
+    index.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 === index$1.LicenseType.REAL,
+      trial: this.cardtype === index$1.LicenseType.TRIAL,
+      temp: this.cardtype === index$1.LicenseType.TEMP,
+      faded: this.faded,
+    };
+  }
+  render() {
+    return (index.h("header", { class: this.retrieveClass() }, index.h("slot", { name: "aria-heading" }), index.h("span", { class: "card-title", ref: (el) => (this.ellipsis = el), title: this.getTitle() }, this.titolo), index.h("slot", { name: "icon" })));
+  }
 };
-ZMyzCardHeader.style = ZMyzCardHeaderStyle0;
+ZMyzCardHeader.style = stylesCss;
 
 exports.z_myz_card = ZMyzCardComponent;
 exports.z_myz_card_body = ZMyzCardBody;
 exports.z_myz_card_cover = ZMyzCardCover;
 exports.z_myz_card_header = ZMyzCardHeader;
-
-//# sourceMappingURL=z-myz-card_4.cjs.entry.js.map

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

@@ -2,42 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
-const utils = require('./utils-d0b10736.js');
-require('./index-39ce4edf.js');
-require('./breakpoints-5c22092a.js');
+const index = require('./index-195ca522.js');
+const utils = require('./utils-ee86db4f.js');
+require('./index-cf9497bc.js');
+require('./breakpoints-ebe1a437.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(--color-text01);fill:var(--color-icon02);font-family:var(--font-family-sans);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(--color-surface03)}:host li span:hover,a:hover{color:var(--color-primary01);fill:var(--color-primary01)}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(--color-primary01);fill:var(--color-primary01)}";
-const ZMyzListItemStyle0 = stylesCss;
 
 const ZMyzListItem = class {
-    emitZListItemLinkClick(e, linkId) {
-        this.zListItemLinkClick.emit({ e, linkId });
-    }
-    emitZListItemClick(e, listitemid) {
-        this.zListItemClick.emit({ e, listitemid });
-    }
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.zListItemLinkClick = index.createEvent(this, "zListItemLinkClick", 7);
-        this.zListItemClick = index.createEvent(this, "zListItemClick", 7);
-        this.text = undefined;
-        this.link = undefined;
-        this.linktarget = "_self";
-        this.icon = undefined;
-        this.listitemid = undefined;
-        this.action = undefined;
-        this.underlined = true;
-        this.emitZListItemLinkClick = this.emitZListItemLinkClick.bind(this);
-        this.emitZListItemClick = this.emitZListItemClick.bind(this);
-    }
-    render() {
-        const linkId = this.listitemid ? `link_${this.listitemid}` : "";
-        return (index.h("li", { key: 'f5a9c40546be666fc079a381db8714175c129dec', role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { key: '06b4ec6cbaa6e5c27f84d0c7df28c246d3d35152', class: this.underlined && "border" }, this.icon && index.h("z-icon", { name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", { key: '3290eb16cc5f0d79f01f9e7f7c277e227ee6b4e0' }))));
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.zListItemLinkClick = index.createEvent(this, "zListItemLinkClick", 7);
+    this.zListItemClick = index.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 (index.h("li", { role: "button", id: this.listitemid, "data-action": this.action, onClick: (e) => this.emitZListItemClick(e, this.listitemid), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemClick, this.listitemid) }, index.h("span", { class: this.underlined && "border" }, this.icon && index.h("z-icon", { name: this.icon }), this.link ? (index.h("a", { href: this.link ? this.link : null, target: this.linktarget, id: linkId, onClick: (e) => this.emitZListItemLinkClick(e, linkId), onKeyPress: (ev) => utils.handleKeyboardSubmit(ev, this.emitZListItemLinkClick, linkId), role: this.link ? "link" : "button", tabindex: "0" }, this.text)) : (index.h("span", { innerHTML: this.text })), index.h("slot", null))));
+  }
 };
-ZMyzListItem.style = ZMyzListItemStyle0;
+ZMyzListItem.style = stylesCss;
 
 exports.z_myz_list_item = ZMyzListItem;
-
-//# sourceMappingURL=z-myz-list-item.cjs.entry.js.map

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

@@ -2,39 +2,34 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
+const index = require('./index-195ca522.js');
 
 const stylesCss = "ul{padding:0;margin:0}";
-const ZMyzListStyle0 = stylesCss;
 
 const ZMyzList = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.inputrawdata = undefined;
-        this.list = undefined;
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  componentWillLoad() {
+    if (this.inputrawdata) {
+      this.parseinputrawdata(this.inputrawdata);
     }
-    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 (index.h("ul", { key: '9cf88d3a10f5a2239690c9b548ba18e2a21f4285' }, this.list &&
-            this.list.map((bean, i) => (index.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"]
-    }; }
+  }
+  parseinputrawdata(inputrawdata) {
+    this.list = [...JSON.parse(inputrawdata)];
+  }
+  oninputrawdataChange(newValue) {
+    this.parseinputrawdata(newValue);
+  }
+  render() {
+    const lastElem = this.list ? this.list.length - 1 : -1;
+    return (index.h("ul", null, this.list &&
+      this.list.map((bean, i) => (index.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 = ZMyzListStyle0;
+ZMyzList.style = stylesCss;
 
 exports.z_myz_list = ZMyzList;
-
-//# sourceMappingURL=z-myz-list.cjs.entry.js.map

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

@@ -2,71 +2,73 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
-const index$1 = require('./index-39ce4edf.js');
-const icons = require('./icons-be077181.js');
+const index = require('./index-195ca522.js');
+const index$1 = require('./index-cf9497bc.js');
+const icons = require('./icons-d385b990.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{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}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}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%}";
-const ZNavigationTabLinkStyle0 = navigationTabCss;
 
 const ZNavigationTabLink = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.selectedEvent = index.createEvent(this, "selected", 7);
-        this.ariaControls = undefined;
-        this.tabId = undefined;
-        this.selected = false;
-        this.disabled = false;
-        this.orientation = index$1.NavigationTabsOrientation.HORIZONTAL;
-        this.size = index$1.NavigationTabsSize.BIG;
-        this.htmlTitle = undefined;
-        this.target = undefined;
-        this.href = undefined;
-        this.icon = undefined;
-        this.label = undefined;
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedEvent = index.createEvent(this, "selected", 7);
     /**
-     * Scroll into view to center the tab.
+     * Whether the tab is selected.
      */
-    scrollToTab({ target: button }) {
-        const scrollOptions = (this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL
-            ? { block: "nearest", inline: "center" }
-            : { block: "center", inline: "nearest" });
-        button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
-    }
-    onClick() {
-        if (this.disabled) {
-            return;
-        }
-        this.selected = true;
-    }
-    onSelected() {
-        if (this.selected) {
-            this.selectedEvent.emit();
-        }
-    }
+    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 = index$1.NavigationTabsOrientation.HORIZONTAL;
     /**
-     * Render the icon component using the icon's name passed from prop.
-     * Use the `filled` version when the tab is `selected`.
-     * @returns {HTMLElement}
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
      */
-    renderIcon() {
-        let icon = this.icon;
-        const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
-        if (this.selected && Object.keys(icons.ICONS).includes(iconFilled)) {
-            icon = iconFilled;
-        }
-        return index.h("z-icon", { name: icon });
+    this.size = index$1.NavigationTabsSize.BIG;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = (this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" });
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    if (this.disabled) {
+      return;
     }
-    render() {
-        return (index.h(index.Host, { key: '77c729dd9c1bfd412d958eb477f2e227ba7fc7a7', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, index.h("a", { key: '3b70074a8637c2df922e6c5dcfc38f45c14ae770', 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)));
+    this.selected = true;
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.emit();
     }
-    static get watchers() { return {
-        "selected": ["onSelected"]
-    }; }
+  }
+  /**
+   * 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.ICONS).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return index.h("z-icon", { name: icon });
+  }
+  render() {
+    return (index.h(index.Host, { role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, index.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 watchers() { return {
+    "selected": ["onSelected"]
+  }; }
 };
-ZNavigationTabLink.style = ZNavigationTabLinkStyle0;
+ZNavigationTabLink.style = navigationTabCss;
 
 exports.z_navigation_tab_link = ZNavigationTabLink;
-
-//# sourceMappingURL=z-navigation-tab-link.cjs.entry.js.map

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

@@ -2,68 +2,72 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-dc60bee7.js');
-const index$1 = require('./index-39ce4edf.js');
-const icons = require('./icons-be077181.js');
+const index = require('./index-195ca522.js');
+const index$1 = require('./index-cf9497bc.js');
+const icons = require('./icons-d385b990.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{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}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}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%}";
-const ZNavigationTabStyle0 = navigationTabCss;
 
 const ZNavigationTab = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.selectedEvent = index.createEvent(this, "selected", 7);
-        this.ariaControls = undefined;
-        this.tabId = undefined;
-        this.selected = false;
-        this.disabled = false;
-        this.orientation = index$1.NavigationTabsOrientation.HORIZONTAL;
-        this.size = index$1.NavigationTabsSize.BIG;
-        this.icon = undefined;
-        this.label = undefined;
-        this.htmlTitle = undefined;
-    }
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.selectedEvent = index.createEvent(this, "selected", 7);
     /**
-     * Scroll into view to center the tab.
+     * Whether the tab is selected.
      */
-    scrollToTab({ target: button }) {
-        const scrollOptions = (this.orientation === index$1.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();
-        }
-    }
+    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 = index$1.NavigationTabsOrientation.HORIZONTAL;
     /**
-     * Render the icon component using the icon's name passed from prop.
-     * Use the `filled` version when the tab is `selected`.
-     * @returns {HTMLElement}
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
      */
-    renderIcon() {
-        let icon = this.icon;
-        const iconFilled = `${icon.replace(/-filled$/, "")}-filled`;
-        if (this.selected && Object.keys(icons.ICONS).includes(iconFilled)) {
-            icon = iconFilled;
-        }
-        return index.h("z-icon", { name: icon });
+    this.size = index$1.NavigationTabsSize.BIG;
+  }
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = (this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL
+      ? { block: "nearest", inline: "center" }
+      : { block: "center", inline: "nearest" });
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+  }
+  onClick() {
+    if (!this.disabled) {
+      this.selected = true;
     }
-    render() {
-        return (index.h(index.Host, { key: '9f7613292bba051a6fbf38a9da4979d9ad46bce3', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, index.h("button", { key: '724d57e9b6d12f6f4cf30755ff17e5ae51bdc4a5', tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), disabled: this.disabled, title: this.htmlTitle }, this.icon && this.renderIcon(), this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL && this.label)));
+  }
+  onSelected() {
+    if (this.selected) {
+      this.selectedEvent.emit();
     }
-    static get watchers() { return {
-        "selected": ["onSelected"]
-    }; }
+  }
+  /**
+   * 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.ICONS).includes(iconFilled)) {
+      icon = iconFilled;
+    }
+    return index.h("z-icon", { name: icon });
+  }
+  render() {
+    return (index.h(index.Host, { role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, index.h("button", { tabIndex: this.selected ? 0 : -1, onFocus: this.scrollToTab.bind(this), disabled: this.disabled, title: this.htmlTitle }, this.icon && this.renderIcon(), this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL && this.label)));
+  }
+  static get watchers() { return {
+    "selected": ["onSelected"]
+  }; }
 };
-ZNavigationTab.style = ZNavigationTabStyle0;
+ZNavigationTab.style = navigationTabCss;
 
 exports.z_navigation_tab = ZNavigationTab;
-
-//# sourceMappingURL=z-navigation-tab.cjs.entry.js.map