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

package/dist/components/z-myz-card-list.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZMyzCardList extends Components.ZMyzCardList, HTMLElement {}
-export const ZMyzCardList: {
-    prototype: ZMyzCardList;
-    new (): ZMyzCardList;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-myz-card-list.js

@@ -1,58 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-
-const stylesCss = "ul{overflow:hidden;width:auto;height:auto;padding:0;margin:0 calc(var(--space-unit) * 2);color:var(--color-primary01);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 ZMyzCardListStyle0 = stylesCss;
-
-const ZMyzCardList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzCardList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.listdata = undefined;
-        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", { key: 'd233563583f4c1de64348fee709013c5a48781ca' }, this.renderList(JSON.parse(this.listdata)));
-    }
-    static get style() { return ZMyzCardListStyle0; }
-}, [1, "z-myz-card-list", {
-        "listdata": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-myz-card-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-myz-card-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMyzCardList$1);
-            }
-            break;
-    } });
-}
-
-const ZMyzCardList = ZMyzCardList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzCardList, defineCustomElement };
-
-//# sourceMappingURL=z-myz-card-list.js.map

package/dist/components/z-myz-card-list.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card-list.js","mappings":";;AAAA,MAAM,SAAS,GAAG,+qBAA+qB,CAAC;AAClsB,2BAAe,SAAS;;MCOXA,cAAY;IAKvB;;;;;QACE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9C;IAEO,mBAAmB,CAAC,CAAgB,EAAE,GAAW;QACvD,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;SAC5B;KACF;IAEO,iBAAiB,CAAC,IAAY;QACpC,MAAM,EAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAC,GAAG,IAAI,CAAC;QAClC,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,gBAAO,KAAK,CAAQ,CAAC;SAC7B;QAED,QACE,SACE,IAAI,EAAC,QAAQ,EACb,UAAU,EAAE,CAAC,CAAgB,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,EAAE,GAAG,CAAC,EAClE,IAAI,EAAE,GAAG,EACT,MAAM,EAAC,QAAQ,IAEd,KAAK,CACJ,EACJ;KACH;IAEO,UAAU,CAAC,SAAmB;QACpC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,IAAY;YAChC,OAAO,cAAK,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAM,CAAC;SAChD,CAAC,CAAC;KACJ;IAED,MAAM;QACJ,OAAO,6DAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAM,CAAC;KAC9D;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzCardList"],"sources":["src/snowflakes/myz/card/z-myz-card-list/styles.css?tag=z-myz-card-list&encapsulation=shadow","src/snowflakes/myz/card/z-myz-card-list/index.tsx"],"sourcesContent":["ul {\n  overflow: hidden;\n  width: auto;\n  height: auto;\n  padding: 0;\n  margin: 0 calc(var(--space-unit) * 2);\n  color: var(--color-primary01);\n  font-family: var(--font-family-sans);\n  list-style: none;\n}\n\nul > li {\n  padding-left: 10px;\n  text-indent: -10px;\n}\n\nul > li > a {\n  display: block;\n  padding-top: calc(var(--space-unit) * 0.5);\n  color: var(--color-primary01);\n  font-size: 14px;\n  font-weight: var(--font-sb);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n\nul > li > a::before {\n  padding-right: 5px;\n  content: \"•\";\n}\n\nul > li > span {\n  padding: 0 calc(var(--space-unit) * 2);\n  color: var(--color-surface04);\n  font-size: 14px;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: calc(var(--space-unit) * 2.5);\n  text-decoration: none;\n}\n","import {Component, Prop, h} from \"@stencil/core\";\nimport {Action} from \"../../../../beans\";\n\n@Component({\n  tag: \"z-myz-card-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzCardList {\n  /** list data stringified array */\n  @Prop()\n  listdata: string;\n\n  constructor() {\n    this.renderList = this.renderList.bind(this);\n  }\n\n  private handleSpaceKeyPress(e: KeyboardEvent, url: string): void {\n    if (e.keyCode == 32 || e.keyCode == 13) {\n      e.preventDefault();\n      window.open(url, \"_blank\");\n    }\n  }\n\n  private formatListContent(data: Action): HTMLAnchorElement {\n    const {value, isLink, url} = data;\n    if (!isLink) {\n      return <span>{value}</span>;\n    }\n\n    return (\n      <a\n        role=\"button\"\n        onKeyPress={(e: KeyboardEvent) => this.handleSpaceKeyPress(e, url)}\n        href={url}\n        target=\"_blank\"\n      >\n        {value}\n      </a>\n    );\n  }\n\n  private renderList(dataArray: Action[]): HTMLLIElement[] {\n    return dataArray.map((data: Action) => {\n      return <li>{this.formatListContent(data)}</li>;\n    });\n  }\n\n  render(): HTMLUListElement {\n    return <ul>{this.renderList(JSON.parse(this.listdata))}</ul>;\n  }\n}\n"],"version":3}

package/dist/components/z-myz-card.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZMyzCard extends Components.ZMyzCard, HTMLElement {}
-export const ZMyzCard: {
-    prototype: ZMyzCard;
-    new (): ZMyzCard;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-myz-card.js

@@ -1,8 +0,0 @@
-import { Z as ZMyzCardComponent, d as defineCustomElement$1 } from './index16.js';
-
-const ZMyzCard = ZMyzCardComponent;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzCard, defineCustomElement };
-
-//# sourceMappingURL=z-myz-card.js.map

package/dist/components/z-myz-card.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-myz-list-item.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZMyzListItem extends Components.ZMyzListItem, HTMLElement {}
-export const ZMyzListItem: {
-    prototype: ZMyzListItem;
-    new (): ZMyzListItem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-myz-list-item.js

@@ -1,8 +0,0 @@
-import { Z as ZMyzListItem$1, d as defineCustomElement$1 } from './index20.js';
-
-const ZMyzListItem = ZMyzListItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzListItem, defineCustomElement };
-
-//# sourceMappingURL=z-myz-list-item.js.map

package/dist/components/z-myz-list-item.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-list-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/z-myz-list.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZMyzList extends Components.ZMyzList, HTMLElement {}
-export const ZMyzList: {
-    prototype: ZMyzList;
-    new (): ZMyzList;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-myz-list.js

@@ -1,71 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './index9.js';
-import { d as defineCustomElement$2 } from './index20.js';
-
-const stylesCss = "ul{padding:0;margin:0}";
-const ZMyzListStyle0 = stylesCss;
-
-const ZMyzList$1 = /*@__PURE__*/ proxyCustomElement(class ZMyzList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.inputrawdata = undefined;
-        this.list = undefined;
-    }
-    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", { key: '9cf88d3a10f5a2239690c9b548ba18e2a21f4285' }, 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"]
-    }; }
-    static get style() { return ZMyzListStyle0; }
-}, [1, "z-myz-list", {
-        "inputrawdata": [1],
-        "list": [1040]
-    }, undefined, {
-        "inputrawdata": ["oninputrawdataChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-myz-list", "z-icon", "z-myz-list-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-myz-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZMyzList$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "z-myz-list-item":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZMyzList = ZMyzList$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZMyzList, defineCustomElement };
-
-//# sourceMappingURL=z-myz-list.js.map

package/dist/components/z-myz-list.js.map

@@ -1 +0,0 @@
-{"file":"z-myz-list.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,wBAAwB,CAAC;AAC3C,uBAAe,SAAS;;MCOXA,UAAQ;;;;;;;;IASnB,iBAAiB;QACf,IAAI,IAAI,CAAC,YAAY,EAAE;YACrB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC3C;KACF;IAEO,iBAAiB,CAAC,YAAoB;QAC5C,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;KAC3C;IAGD,oBAAoB,CAAC,QAAgB;QACnC,IAAI,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;KAClC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAEvD,QACE,6DACG,IAAI,CAAC,IAAI;YACR,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACpB,uBACE,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,UAAU,EAAE,QAAQ,IAAI,CAAC,GACzB,CACH,CAAC,CACD,EACL;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZMyzList"],"sources":["src/snowflakes/myz/list/z-myz-list/styles.css?tag=z-myz-list&encapsulation=shadow","src/snowflakes/myz/list/z-myz-list/index.tsx"],"sourcesContent":["ul {\n  padding: 0;\n  margin: 0;\n}\n","import {Component, Prop, h, Watch} from \"@stencil/core\";\nimport {ListItem} from \"../../../../beans/index.js\";\n\n@Component({\n  tag: \"z-myz-list\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZMyzList {\n  /** json stringified list data (mutable, optional) */\n  @Prop()\n  inputrawdata?: string;\n\n  /** list item data (mutable, optional)*/\n  @Prop({mutable: true})\n  list?: ListItem[];\n\n  componentWillLoad(): void {\n    if (this.inputrawdata) {\n      this.parseinputrawdata(this.inputrawdata);\n    }\n  }\n\n  private parseinputrawdata(inputrawdata: string): void {\n    this.list = [...JSON.parse(inputrawdata)];\n  }\n\n  @Watch(\"inputrawdata\")\n  oninputrawdataChange(newValue: string): void {\n    this.parseinputrawdata(newValue);\n  }\n\n  render(): HTMLUListElement {\n    const lastElem = this.list ? this.list.length - 1 : -1;\n\n    return (\n      <ul>\n        {this.list &&\n          this.list.map((bean, i) => (\n            <z-myz-list-item\n              listitemid={bean.listitemid}\n              text={bean.text}\n              link={bean.link}\n              linktarget={bean.linktarget}\n              icon={bean.icon}\n              underlined={lastElem != i}\n            />\n          ))}\n      </ul>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-navigation-tab-link.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZNavigationTabLink extends Components.ZNavigationTabLink, HTMLElement {}
-export const ZNavigationTabLink: {
-    prototype: ZNavigationTabLink;
-    new (): ZNavigationTabLink;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-navigation-tab-link.js

@@ -1,105 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index2.js';
-import { I as ICONS } from './icons.js';
-import { d as defineCustomElement$2 } from './index9.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$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTabLink extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.selectedEvent = createEvent(this, "selected", 7);
-        this.ariaControls = undefined;
-        this.tabId = undefined;
-        this.selected = false;
-        this.disabled = false;
-        this.orientation = NavigationTabsOrientation.HORIZONTAL;
-        this.size = NavigationTabsSize.BIG;
-        this.htmlTitle = undefined;
-        this.target = undefined;
-        this.href = undefined;
-        this.icon = undefined;
-        this.label = undefined;
-    }
-    /**
-     * 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) {
-            return;
-        }
-        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(Host, { key: '77c729dd9c1bfd412d958eb477f2e227ba7fc7a7', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, 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)));
-    }
-    static get watchers() { return {
-        "selected": ["onSelected"]
-    }; }
-    static get style() { return ZNavigationTabLinkStyle0; }
-}, [0, "z-navigation-tab-link", {
-        "ariaControls": [1, "aria-controls"],
-        "tabId": [1, "tab-id"],
-        "selected": [1540],
-        "disabled": [516],
-        "orientation": [513],
-        "size": [513],
-        "htmlTitle": [1, "html-title"],
-        "target": [1],
-        "href": [1],
-        "icon": [1],
-        "label": [1]
-    }, [[0, "click", "onClick"]], {
-        "selected": ["onSelected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-navigation-tab-link", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-navigation-tab-link":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZNavigationTabLink$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZNavigationTabLink = ZNavigationTabLink$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZNavigationTabLink, defineCustomElement };
-
-//# sourceMappingURL=z-navigation-tab-link.js.map

package/dist/components/z-navigation-tab-link.js.map

@@ -1 +0,0 @@
-{"file":"z-navigation-tab-link.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,iCAAe,gBAAgB;;MCalBA,oBAAkB;;;;;;;wBAuBR,KAAK;wBAML,KAAK;2BAMZ,yBAAyB,CAAC,UAAU;oBAM3C,kBAAkB,CAAC,GAAG;;;;;;;;;;IA0CrB,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;IAGD,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;KACtB;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;KACF;;;;;;IAOO,UAAU;QAChB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YAC5D,IAAI,GAAG,UAAU,CAAC;SACnB;QAED,OAAO,cAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;KACtC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,YAAY,IAEhC,0DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAElB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,IAAI,CAAC,WAAW,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,CAC9C,CACC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNavigationTabLink"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab-link","src/deprecated/z-navigation-tab-link/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n * @deprecated Use a native `<a>` instead.\n */\n@Component({\n  tag: \"z-navigation-tab-link\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTabLink {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size = NavigationTabsSize.BIG;\n\n  /**\n   * Html title attribute for the anchor element.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * Html `target` attribute for the anchor element.\n   */\n  @Prop()\n  target: string;\n\n  /**\n   * Url to set to the anchor element.\n   */\n  @Prop()\n  href: string;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    this.selected = true;\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabLinkElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <a\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          href={this.disabled ? null : this.href}\n          title={this.htmlTitle}\n          target={this.target}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === \"horizontal\" && this.label}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-navigation-tab.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZNavigationTab extends Components.ZNavigationTab, HTMLElement {}
-export const ZNavigationTab: {
-    prototype: ZNavigationTab;
-    new (): ZNavigationTab;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/z-navigation-tab.js

@@ -1,100 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index2.js';
-import { I as ICONS } from './icons.js';
-import { d as defineCustomElement$2 } from './index9.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$1 = /*@__PURE__*/ proxyCustomElement(class ZNavigationTab extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.selectedEvent = createEvent(this, "selected", 7);
-        this.ariaControls = undefined;
-        this.tabId = undefined;
-        this.selected = false;
-        this.disabled = false;
-        this.orientation = NavigationTabsOrientation.HORIZONTAL;
-        this.size = NavigationTabsSize.BIG;
-        this.icon = undefined;
-        this.label = undefined;
-        this.htmlTitle = undefined;
-    }
-    /**
-     * 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(Host, { key: '9f7613292bba051a6fbf38a9da4979d9ad46bce3', role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, 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 === NavigationTabsOrientation.HORIZONTAL && this.label)));
-    }
-    static get watchers() { return {
-        "selected": ["onSelected"]
-    }; }
-    static get style() { return ZNavigationTabStyle0; }
-}, [0, "z-navigation-tab", {
-        "ariaControls": [1, "aria-controls"],
-        "tabId": [1, "tab-id"],
-        "selected": [1540],
-        "disabled": [516],
-        "orientation": [513],
-        "size": [513],
-        "icon": [1],
-        "label": [1],
-        "htmlTitle": [1, "html-title"]
-    }, [[0, "click", "onClick"]], {
-        "selected": ["onSelected"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["z-navigation-tab", "z-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "z-navigation-tab":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZNavigationTab$1);
-            }
-            break;
-        case "z-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const ZNavigationTab = ZNavigationTab$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { ZNavigationTab, defineCustomElement };
-
-//# sourceMappingURL=z-navigation-tab.js.map

package/dist/components/z-navigation-tab.js.map

@@ -1 +0,0 @@
-{"file":"z-navigation-tab.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,6BAAe,gBAAgB;;MCYlBA,gBAAc;;;;;;;wBAuBJ,KAAK;wBAML,KAAK;2BAMe,yBAAyB,CAAC,UAAU;oBAMlD,kBAAkB,CAAC,GAAG;;;;;;;;IA+BzC,WAAW,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC;QAClC,MAAM,aAAa,IACjB,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU;cACrD,EAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC;cACpC,EAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,CAChB,CAAC;QAE3B,MAAM,CAAC,cAAc,iBACnB,QAAQ,EAAE,QAAQ,IACf,aAAa,EAChB,CAAC;KACJ;IAGD,OAAO;QACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;KACF;IAGD,UAAU;QACR,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC3B;KACF;;;;;;IAOO,UAAU;QAChB,IAAI,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACrB,MAAM,UAAU,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,SAAS,CAAC;QAE5D,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YAC5D,IAAI,GAAG,UAAU,CAAC;SACnB;QAED,OAAO,cAAQ,IAAI,EAAE,IAAI,GAAW,CAAC;KACtC;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,KAAK,EACV,EAAE,EAAE,IAAI,CAAC,KAAK,mBACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,YAAY,IAEhC,+DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,SAAS,IAEpB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE,EAC9B,IAAI,CAAC,WAAW,KAAK,yBAAyB,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CACjE,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["ZNavigationTab"],"sources":["src/deprecated/navigation-tab.css?tag=z-navigation-tab","src/deprecated/z-navigation-tab/index.tsx"],"sourcesContent":["z-navigation-tab > button,\nz-navigation-tab-link > a {\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  width: auto;\n  align-items: center;\n  justify-content: center;\n  padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);\n  border: none;\n  margin: 0;\n  background-color: unset;\n  border-radius: var(--border-no-radius);\n  color: var(--color-primary01);\n  cursor: pointer;\n  fill: currentcolor;\n  font-family: var(--font-family-sans);\n  font-size: inherit;\n  letter-spacing: inherit;\n  line-height: inherit;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n}\n\nz-navigation-tab-link > a {\n  text-decoration: none;\n}\n\nz-navigation-tab *,\nz-navigation-tab-link *,\nz-navigation-tab *::before,\nz-navigation-tab *::after,\nz-navigation-tab-link *::before,\nz-navigation-tab-link *::after {\n  box-sizing: border-box;\n}\n\nz-navigation-tab > *:focus:focus-visible,\nz-navigation-tab-link > *:focus:focus-visible {\n  z-index: 1;\n  box-shadow: inset 0 0 4px 3px var(--color-highlight);\n}\n\nz-navigation-tab:not([disabled]):hover > *,\nz-navigation-tab[selected] > *,\nz-navigation-tab-link:not([disabled]):hover > *,\nz-navigation-tab-link[selected] > * {\n  color: var(--color-hover-secondary);\n  fill: currentcolor;\n}\n\nz-navigation-tab:not([disabled]):hover > *::after,\nz-navigation-tab[selected] > *::after,\nz-navigation-tab-link:not([disabled]):hover > *::after,\nz-navigation-tab-link[selected] > *::after {\n  position: absolute;\n  background-color: var(--color-hover-secondary);\n  content: \"\";\n}\n\nz-navigation-tab[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"horizontal\"][selected] > *::after {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--border-size-large);\n}\n\nz-navigation-tab z-icon,\nz-navigation-tab-link z-icon {\n  --z-icon-width: calc(var(--space-unit) * 2);\n  --z-icon-height: calc(var(--space-unit) * 2);\n\n  display: flex;\n  margin: 0;\n}\n\nz-navigation-tab[orientation=\"horizontal\"] z-icon,\nz-navigation-tab-link[orientation=\"horizontal\"] z-icon {\n  margin-right: var(--space-unit);\n}\n\nz-navigation-tab:not([disabled]):hover > * {\n  background-color: var(--color-background);\n}\n\nz-navigation-tab[disabled] > *,\nz-navigation-tab-link[disabled] > * {\n  color: var(--gray500);\n  cursor: not-allowed;\n  fill: currentcolor;\n  pointer-events: all;\n}\n\n/* Size small (only available for horizontal) */\nz-navigation-tab[size=\"small\"] > *,\nz-navigation-tab-link[size=\"small\"] > * {\n  font-size: var(--font-size-2);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"] > *,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"] > * {\n  padding: var(--space-unit) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab[size=\"small\"][orientation=\"horizontal\"][selected] > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[size=\"small\"][orientation=\"horizontal\"][selected] > *::after {\n  height: var(--border-size-medium);\n}\n\nz-navigation-tab[size=\"small\"]:not([orientation=\"vertical\"]) z-icon,\nz-navigation-tab-link[size=\"small\"]:not([orientation=\"vertical\"]) z-icon {\n  --z-icon-width: 14px;\n  --z-icon-height: 14px;\n}\n\n/* Orientation Vertical */\nz-navigation-tab[orientation=\"vertical\"] > *,\nz-navigation-tab-link[orientation=\"vertical\"] > * {\n  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);\n}\n\nz-navigation-tab[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab[orientation=\"vertical\"][selected] > *::after,\nz-navigation-tab-link[orientation=\"vertical\"]:not([disabled]):hover > *::after,\nz-navigation-tab-link[orientation=\"vertical\"][selected] > *::after {\n  top: 0;\n  right: 0;\n  width: var(--border-size-large);\n  height: 100%;\n}\n","import {Component, Prop, h, Listen, Event, EventEmitter, Watch, Host} from \"@stencil/core\";\nimport {NavigationTabsOrientation, NavigationTabsSize} from \"../../beans\";\nimport {ICONS} from \"../../components/icons/icons\";\n\n/**\n * Single tab component to use inside `z-navigation-tabs`. It renders a button.\n * This component uses the `tab` role:\n * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role\n */\n@Component({\n  tag: \"z-navigation-tab\",\n  styleUrl: \"../navigation-tab.css\",\n})\nexport class ZNavigationTab {\n  /**\n   * `aria-controls` attribute of the tab.\n   * Identifies the element (with `role=tabpanel`) whose contents or presence are controlled by this tab.\n   * The value must be the `id` of the element it controls.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n   */\n  @Prop()\n  ariaControls?: string;\n\n  /**\n   * `id` attribute of the tab.\n   * Set this id to the `aria-labelledby` attribute of the controlled `tabpanel` element.\n   * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\n   * @deprecated Use native `id` attribute instead\n   */\n  @Prop()\n  tabId?: string;\n\n  /**\n   * Whether the tab is selected.\n   */\n  @Prop({mutable: true, reflect: true})\n  selected?: boolean = false;\n\n  /**\n   * Whether the tab is disabled.\n   */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /**\n   * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  orientation: NavigationTabsOrientation = NavigationTabsOrientation.HORIZONTAL;\n\n  /**\n   * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.\n   */\n  @Prop({reflect: true})\n  size: NavigationTabsSize = NavigationTabsSize.BIG;\n\n  /**\n   * Name of the icon to use.\n   * The `filled` version will be automatically used (if found) when the tab is `selected`.\n   * @deprecated Use a native `<button>` instead.\n   */\n  @Prop()\n  icon: string;\n\n  /**\n   * Label to show in the tab.\n   */\n  @Prop()\n  label: string;\n\n  /**\n   * Html `title` attribute for the button.\n   */\n  @Prop()\n  htmlTitle: string;\n\n  /**\n   * The tab has been selected.\n   */\n  @Event({eventName: \"selected\"})\n  private selectedEvent: EventEmitter;\n\n  /**\n   * Scroll into view to center the tab.\n   */\n  private scrollToTab({target: button}): void {\n    const scrollOptions = (\n      this.orientation === NavigationTabsOrientation.HORIZONTAL\n        ? {block: \"nearest\", inline: \"center\"}\n        : {block: \"center\", inline: \"nearest\"}\n    ) as ScrollIntoViewOptions;\n\n    button.scrollIntoView({\n      behavior: \"smooth\",\n      ...scrollOptions,\n    });\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    if (!this.disabled) {\n      this.selected = true;\n    }\n  }\n\n  @Watch(\"selected\")\n  onSelected(): void {\n    if (this.selected) {\n      this.selectedEvent.emit();\n    }\n  }\n\n  /**\n   * Render the icon component using the icon's name passed from prop.\n   * Use the `filled` version when the tab is `selected`.\n   * @returns {HTMLElement}\n   */\n  private renderIcon(): HTMLZIconElement {\n    let icon = this.icon;\n    const iconFilled = `${icon.replace(/-filled$/, \"\")}-filled`;\n\n    if (this.selected && Object.keys(ICONS).includes(iconFilled)) {\n      icon = iconFilled;\n    }\n\n    return <z-icon name={icon}></z-icon>;\n  }\n\n  render(): HTMLZNavigationTabElement {\n    return (\n      <Host\n        role=\"tab\"\n        id={this.tabId}\n        aria-selected={this.selected ? \"true\" : \"false\"}\n        aria-controls={this.ariaControls}\n      >\n        <button\n          tabIndex={this.selected ? 0 : -1}\n          onFocus={this.scrollToTab.bind(this)}\n          disabled={this.disabled}\n          title={this.htmlTitle}\n        >\n          {this.icon && this.renderIcon()}\n          {this.orientation === NavigationTabsOrientation.HORIZONTAL && this.label}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/z-navigation-tabs.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface ZNavigationTabs extends Components.ZNavigationTabs, HTMLElement {}
-export const ZNavigationTabs: {
-    prototype: ZNavigationTabs;
-    new (): ZNavigationTabs;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;