@zanichelli/albe-web-components 12.4.1-RC1 → 12.4.1

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

@@ -1,69 +1,65 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-4968ce56.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-47f23745.js';
-import { I as ICONS } from './icons-e3232103.js';
+import { r as registerInstance, c as createEvent, h, a as Host } from './index-f16bc2ca.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize } from './index-2255c6c8.js';
+import { I as ICONS } from './icons-f212e30c.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) {
-    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;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        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;
+    }
     /**
-     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     * Scroll into view to center the tab.
      */
-    this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    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();
+        }
+    }
     /**
-     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     * Render the icon component using the icon's name passed from prop.
+     * Use the `filled` version when the tab is `selected`.
+     * @returns {HTMLElement}
      */
-    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;
+    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 });
     }
-  }
-  onSelected() {
-    if (this.selected) {
-      this.selectedEvent.emit();
+    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)));
     }
-  }
-  /**
-   * 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, { role: "tab", id: this.tabId, "aria-selected": this.selected ? "true" : "false", "aria-controls": this.ariaControls }, h("button", { 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 watchers() { return {
+        "selected": ["onSelected"]
+    }; }
 };
-ZNavigationTab.style = navigationTabCss;
+ZNavigationTab.style = ZNavigationTabStyle0;
 
 export { ZNavigationTab as z_navigation_tab };
+
+//# sourceMappingURL=z-navigation-tab.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"z-navigation-tab.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,0hHAA0hH,CAAC;AACpjH,6BAAe,gBAAgB;;MCYlB,cAAc;;;;;;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":[],"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/esm/z-navigation-tabs.entry.js

@@ -1,225 +1,221 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-4968ce56.js';
-import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents } from './index-47f23745.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-f16bc2ca.js';
+import { N as NavigationTabsOrientation, a as NavigationTabsSize, b as NavigationTabsKeyboardEvents } from './index-2255c6c8.js';
 
 const stylesCss = "z-navigation-tabs{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}z-navigation-tabs,z-navigation-tabs *{box-sizing:border-box}z-navigation-tabs>nav::-webkit-scrollbar{display:none}z-navigation-tabs .navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background-color:var(--z-navigation-tabs-nav-buttons-bg, var(--color-surface01));border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px var(--shadow-color-base);cursor:pointer;fill:var(--z-navigation-tabs-nav-buttons-fg, var(--color-primary01));outline:none}z-navigation-tabs .navigation-button:disabled{display:none}z-navigation-tabs>nav{z-index:0;display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}z-navigation-tabs[orientation=\"horizontal\"]>nav{width:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:first-child{left:0}z-navigation-tabs[orientation=\"horizontal\"] .navigation-button:last-child{right:0}z-navigation-tabs[orientation=\"vertical\"]{width:fit-content;flex-direction:column}z-navigation-tabs[orientation=\"vertical\"]>nav{height:100%;flex-direction:column;align-items:stretch}z-navigation-tabs[orientation=\"vertical\"] .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:first-child{top:0}z-navigation-tabs[orientation=\"vertical\"] .navigation-button:last-child{bottom:0}z-navigation-tabs[size=\"small\"][orientation=\"vertical\"] .navigation-button{height:calc(var(--space-unit) * 4)}z-navigation-tabs>nav>*{position:relative;z-index:0;display:inline-flex;width:auto;align-items:center;justify-content:center;padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);border:none;margin:0;background-color:unset;border-radius:var(--border-no-radius);color:var(--color-primary01);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:inherit;gap:var(--space-unit);letter-spacing:inherit;line-height:inherit;outline:none;text-align:center;white-space:nowrap}z-navigation-tabs>nav>a{text-decoration:none}z-navigation-tabs>nav>*:focus:focus-visible{z-index:1;box-shadow:inset 0 0 4px 3px var(--color-highlight)}z-navigation-tabs>nav>:not([disabled]):hover{background-color:var(--color-surface02)}z-navigation-tabs>nav>button[disabled]{color:var(--color-disabled03);cursor:not-allowed;fill:currentcolor;pointer-events:all}z-navigation-tabs>nav>:not([disabled]):hover,nav>[aria-selected=\"true\"]{color:var(--color-hover-secondary);fill:currentcolor}z-navigation-tabs>nav>:not([disabled]):hover::after,nav>[aria-selected=\"true\"]::after{position:absolute;background-color:var(--color-hover-secondary);content:\"\"}z-navigation-tabs[orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{bottom:0;left:0;width:100%;height:var(--border-size-large)}z-navigation-tabs>nav>* z-icon{--z-icon-width:calc(var(--space-unit) * 2);--z-icon-height:calc(var(--space-unit) * 2);display:flex;margin:0}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>*{padding:var(--space-unit) calc(var(--space-unit) * 2)}z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[size=\"small\"][orientation=\"horizontal\"]>nav>[aria-selected=\"true\"]::after{height:var(--border-size-medium)}z-navigation-tabs[size=\"small\"]:not([orientation=\"vertical\"])>nav>* z-icon{--z-icon-width:14px;--z-icon-height:14px}z-navigation-tabs[orientation=\"vertical\"]>nav>*{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}z-navigation-tabs[orientation=\"vertical\"]>nav>*>:not(z-icon){display:none}z-navigation-tabs[orientation=\"vertical\"]>nav>:not([disabled]):hover::after,z-navigation-tabs[orientation=\"vertical\"]>nav>[aria-selected=\"true\"]::after{top:0;right:0;width:var(--border-size-large);height:100%}";
+const ZNavigationTabsStyle0 = stylesCss;
 
 const ZNavigationTabs = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.selected = createEvent(this, "selected", 7);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selected = createEvent(this, "selected", 7);
+        /**
+         * Index of the last tab that held focus.
+         */
+        this.focusedTab = undefined;
+        this.ariaLabel = undefined;
+        this.orientation = NavigationTabsOrientation.HORIZONTAL;
+        this.size = NavigationTabsSize.BIG;
+        this.selectedTab = undefined;
+        this.canNavigate = undefined;
+        this.canNavigatePrev = undefined;
+        this.canNavigateNext = undefined;
+    }
+    /**
+     * Getter for the direction to check based on current orientation.
+     */
+    get direction() {
+        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
+    }
+    /**
+     * Getter for the dimension to check based on current orientation.
+     */
+    get dimension() {
+        return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
+    }
+    get tabs() {
+        return Array.from(this.nav.children);
+    }
+    /**
+     * Scroll into view to center the tab.
+     */
+    scrollToTab(tabElement) {
+        const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
+            ? { block: "nearest", inline: "center" }
+            : { block: "center", inline: "nearest" });
+        tabElement.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
+    }
+    /**
+     * Scroll the navigation bar half of its size backward.
+     */
+    navigateBackwards() {
+        this.nav.scrollBy({
+            [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,
+            behavior: "smooth",
+        });
+    }
+    /**
+     * Scroll the navigation bar half of its size forward.
+     */
+    navigateForward() {
+        this.nav.scrollBy({
+            [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,
+            behavior: "smooth",
+        });
+    }
+    /**
+     * Check if a keyboard event was triggered by an arrow key.
+     */
+    isArrowNavigation(e) {
+        return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
+    }
+    /**
+     * Check if the navigation buttons are needed.
+     */
+    checkScrollVisible() {
+        if (!this.nav) {
+            return;
+        }
+        this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];
+    }
+    /**
+     * Check if navigation buttons can be enabled for each direction.
+     */
+    checkScrollEnabled() {
+        if (!this.nav) {
+            return;
+        }
+        this.canNavigateNext =
+            this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];
+        this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;
+    }
     /**
-     * Navigation tabs orientation.
+     * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
      */
-    this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    onTabSelected() {
+        this.tabs.forEach((tab, i) => {
+            const zicon = tab.querySelector("z-icon");
+            const strokeIcon = zicon === null || zicon === void 0 ? void 0 : zicon.getAttribute("name").replace("-filled", "");
+            if (i !== this.selectedTab) {
+                tab.setAttribute("aria-selected", "false");
+                tab.tabIndex = -1;
+                zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", strokeIcon);
+                return;
+            }
+            zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", `${strokeIcon}-filled`);
+            tab.setAttribute("aria-selected", "true");
+        });
+        this.selected.emit(this.selectedTab);
+        if (this.selectedTab !== undefined) {
+            this.scrollToTab(this.tabs[this.selectedTab]);
+        }
+    }
     /**
-     * Navigation tabs size.
+     * Handle click on the tabs.
+     * @param event `click` event triggered by a child tab
      */
-    this.size = NavigationTabsSize.BIG;
+    handleTabClick(event) {
+        const clickedTab = event.target.closest("[role='tab']");
+        if (!this.tabs.some((child) => child.contains(clickedTab))) {
+            return;
+        }
+        this.selectedTab = this.tabs.indexOf(clickedTab);
+    }
     /**
-     * Index of the selected tab.
-     * Useful to programmatically select a tab.
-     * The tab can also be selected by setting the `aria-selected` attribute to `true` on the desired tab.
+     * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.
      */
-    this.selectedTab = undefined;
+    onTabFocusIn(event) {
+        const focused = this.tabs.findIndex((tab) => tab.contains(event.target));
+        if (focused === -1) {
+            return;
+        }
+        if (this.selectedTab !== undefined) {
+            this.tabs[this.selectedTab].tabIndex = -1;
+        }
+        this.focusedTab = focused;
+        this.tabs[this.focusedTab].tabIndex = -1;
+        this.scrollToTab(this.tabs[this.focusedTab]);
+    }
     /**
-     * Index of the last tab that held focus.
+     * Handle keyboard navigation through tabs with arrow keys.
      */
-    this.focusedTab = undefined;
-  }
-  /**
-   * Getter for the direction to check based on current orientation.
-   */
-  get direction() {
-    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Left" : "Top";
-  }
-  /**
-   * Getter for the dimension to check based on current orientation.
-   */
-  get dimension() {
-    return this.orientation == NavigationTabsOrientation.HORIZONTAL ? "Width" : "Height";
-  }
-  get tabs() {
-    return Array.from(this.nav.children);
-  }
-  /**
-   * Scroll into view to center the tab.
-   */
-  scrollToTab(tabElement) {
-    const scrollOptions = (this.orientation === NavigationTabsOrientation.HORIZONTAL
-      ? { block: "nearest", inline: "center" }
-      : { block: "center", inline: "nearest" });
-    tabElement.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
-  }
-  /**
-   * Scroll the navigation bar half of its size backward.
-   */
-  navigateBackwards() {
-    this.nav.scrollBy({
-      [this.direction.toLowerCase()]: 0 - this.nav[`client${this.dimension}`] / 2,
-      behavior: "smooth",
-    });
-  }
-  /**
-   * Scroll the navigation bar half of its size forward.
-   */
-  navigateForward() {
-    this.nav.scrollBy({
-      [this.direction.toLowerCase()]: this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] / 2,
-      behavior: "smooth",
-    });
-  }
-  /**
-   * Check if a keyboard event was triggered by an arrow key.
-   */
-  isArrowNavigation(e) {
-    return Object.values(NavigationTabsKeyboardEvents).includes(e.key);
-  }
-  /**
-   * Check if the navigation buttons are needed.
-   */
-  checkScrollVisible() {
-    if (!this.nav) {
-      return;
-    }
-    this.canNavigate = this.nav[`scroll${this.dimension}`] > this.nav[`client${this.dimension}`];
-  }
-  /**
-   * Check if navigation buttons can be enabled for each direction.
-   */
-  checkScrollEnabled() {
-    if (!this.nav) {
-      return;
-    }
-    this.canNavigateNext =
-      this.nav[`scroll${this.direction}`] + this.nav[`client${this.dimension}`] < this.nav[`scroll${this.dimension}`];
-    this.canNavigatePrev = this.nav[`scroll${this.direction}`] > 0;
-  }
-  /**
-   * When the selected tab changes, update the `aria-selected` attribute on each tab and scroll to the selected tab.
-   */
-  onTabSelected() {
-    this.tabs.forEach((tab, i) => {
-      const zicon = tab.querySelector("z-icon");
-      const strokeIcon = zicon === null || zicon === void 0 ? void 0 : zicon.getAttribute("name").replace("-filled", "");
-      if (i !== this.selectedTab) {
-        tab.setAttribute("aria-selected", "false");
-        tab.tabIndex = -1;
-        zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", strokeIcon);
-        return;
-      }
-      zicon === null || zicon === void 0 ? void 0 : zicon.setAttribute("name", `${strokeIcon}-filled`);
-      tab.setAttribute("aria-selected", "true");
-    });
-    this.selected.emit(this.selectedTab);
-    if (this.selectedTab !== undefined) {
-      this.scrollToTab(this.tabs[this.selectedTab]);
-    }
-  }
-  /**
-   * Handle click on the tabs.
-   * @param event `click` event triggered by a child tab
-   */
-  handleTabClick(event) {
-    const clickedTab = event.target.closest("[role='tab']");
-    if (!this.tabs.some((child) => child.contains(clickedTab))) {
-      return;
-    }
-    this.selectedTab = this.tabs.indexOf(clickedTab);
-  }
-  /**
-   * When a tab is focused, temporarily set to -1 the `tabindex` of the selected tab (if any) and set the `focusedTab` to the index of the focused tab.
-   */
-  onTabFocusIn(event) {
-    const focused = this.tabs.findIndex((tab) => tab.contains(event.target));
-    if (focused === -1) {
-      return;
-    }
-    if (this.selectedTab !== undefined) {
-      this.tabs[this.selectedTab].tabIndex = -1;
-    }
-    this.focusedTab = focused;
-    this.tabs[this.focusedTab].tabIndex = -1;
-    this.scrollToTab(this.tabs[this.focusedTab]);
-  }
-  /**
-   * Handle keyboard navigation through tabs with arrow keys.
-   */
-  navigateThroughTabs(event) {
-    if (!this.tabs.some((tab) => tab.contains(event.target)) || !this.isArrowNavigation(event)) {
-      return true;
-    }
-    event.preventDefault();
-    if ((event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
-      (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
-      // Move forward
-      this.focusedTab++;
-      if (this.focusedTab >= this.tabs.length) {
-        this.focusedTab = 0;
-      }
-    }
-    else if ((event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
-      (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
-      // Move backward
-      this.focusedTab--;
-      if (this.focusedTab < 0) {
-        this.focusedTab = this.tabs.length - 1;
-      }
-    }
-    // Ignore disabled tabs
-    if (this.tabs[this.focusedTab].hasAttribute("disabled") &&
-      this.tabs[this.focusedTab].getAttribute("disabled") !== "false") {
-      return this.navigateThroughTabs(event);
-    }
-    this.tabs[this.focusedTab].focus();
-    this.scrollToTab(this.tabs[this.focusedTab]);
-  }
-  /**
-   * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.
-   */
-  onTabFocusOut(event) {
-    var _a;
-    if (!this.tabs.some((tab) => tab.contains(event.relatedTarget))) {
-      this.tabs[(_a = this.selectedTab) !== null && _a !== void 0 ? _a : 0].tabIndex = 0;
-      this.focusedTab = undefined;
-    }
-  }
-  connectedCallback() {
-    this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());
-  }
-  componentDidLoad() {
-    var _a;
-    // Set role and tabindex to each slotted tab
-    this.tabs.forEach((tab) => {
-      tab.setAttribute("role", "tab");
-      tab.tabIndex = -1;
-    });
-    const preselectedTab = (_a = this.selectedTab) !== null && _a !== void 0 ? _a : this.tabs.findIndex((tab) => tab.ariaSelected === "true");
-    if (preselectedTab !== -1) {
-      this.selectedTab = preselectedTab;
-      this.tabs[preselectedTab].tabIndex = 0;
-      this.onTabSelected();
-    }
-    else {
-      this.tabs[0].tabIndex = 0;
-    }
-    this.resizeObserver.observe(this.nav);
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  render() {
-    return (h(Host, { class: {
-        "interactive-2": this.size === NavigationTabsSize.SMALL,
-        "interactive-1": this.size !== NavigationTabsSize.SMALL,
-      }, scrollable: this.canNavigate }, h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "canNavigate": ["checkScrollEnabled"],
-    "selectedTab": ["onTabSelected"]
-  }; }
+    navigateThroughTabs(event) {
+        if (!this.tabs.some((tab) => tab.contains(event.target)) || !this.isArrowNavigation(event)) {
+            return true;
+        }
+        event.preventDefault();
+        if ((event.key === NavigationTabsKeyboardEvents.RIGHT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+            (event.key === NavigationTabsKeyboardEvents.DOWN && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+            // Move forward
+            this.focusedTab++;
+            if (this.focusedTab >= this.tabs.length) {
+                this.focusedTab = 0;
+            }
+        }
+        else if ((event.key === NavigationTabsKeyboardEvents.LEFT && this.orientation == NavigationTabsOrientation.HORIZONTAL) ||
+            (event.key === NavigationTabsKeyboardEvents.UP && this.orientation == NavigationTabsOrientation.VERTICAL)) {
+            // Move backward
+            this.focusedTab--;
+            if (this.focusedTab < 0) {
+                this.focusedTab = this.tabs.length - 1;
+            }
+        }
+        // Ignore disabled tabs
+        if (this.tabs[this.focusedTab].hasAttribute("disabled") &&
+            this.tabs[this.focusedTab].getAttribute("disabled") !== "false") {
+            return this.navigateThroughTabs(event);
+        }
+        this.tabs[this.focusedTab].focus();
+        this.scrollToTab(this.tabs[this.focusedTab]);
+    }
+    /**
+     * If the focus is not going on a tab (`relatedTarget` is the new focused element), set to 0 the `tabindex` of the selected tab or the one of the first tab, then unset the `focusedTab`.
+     */
+    onTabFocusOut(event) {
+        var _a;
+        if (!this.tabs.some((tab) => tab.contains(event.relatedTarget))) {
+            this.tabs[(_a = this.selectedTab) !== null && _a !== void 0 ? _a : 0].tabIndex = 0;
+            this.focusedTab = undefined;
+        }
+    }
+    connectedCallback() {
+        this.resizeObserver = new ResizeObserver(() => this.checkScrollVisible());
+    }
+    componentDidLoad() {
+        var _a;
+        // Set role and tabindex to each slotted tab
+        this.tabs.forEach((tab) => {
+            tab.setAttribute("role", "tab");
+            tab.tabIndex = -1;
+        });
+        const preselectedTab = (_a = this.selectedTab) !== null && _a !== void 0 ? _a : this.tabs.findIndex((tab) => tab.ariaSelected === "true");
+        if (preselectedTab !== -1) {
+            this.selectedTab = preselectedTab;
+            this.tabs[preselectedTab].tabIndex = 0;
+            this.onTabSelected();
+        }
+        else {
+            this.tabs[0].tabIndex = 0;
+        }
+        this.resizeObserver.observe(this.nav);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        return (h(Host, { key: '612788b96886b932a6cf18b16422612ce8a87a28', class: {
+                "interactive-2": this.size === NavigationTabsSize.SMALL,
+                "interactive-1": this.size !== NavigationTabsSize.SMALL,
+            }, scrollable: this.canNavigate }, h("button", { key: '93968651f7f5199ada5345641b5d3abf796cdb81', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: 'dbc1661829b7bd5e52e00437e232d24be57d4f77', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '804a3005ca3967d6403ad977ec16a9766612cbc0', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'f970838c5f1b4669f3ff409abaa2ee5a26ec0542' })), h("button", { key: '280ca6b35e79aa8f3bef4115071b53d7bf6c99c3', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '6cd794d570d1d4b04910de7d94cf91e3f56cd09a', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "canNavigate": ["checkScrollEnabled"],
+        "selectedTab": ["onTabSelected"]
+    }; }
 };
-ZNavigationTabs.style = stylesCss;
+ZNavigationTabs.style = ZNavigationTabsStyle0;
 
 export { ZNavigationTabs as z_navigation_tabs };
+
+//# sourceMappingURL=z-navigation-tabs.entry.js.map