@zanichelli/albe-web-components 10.0.1 → 10.0.2

package/dist/cjs/{index-ddde2452.js → index-382f3d09.js}

@@ -33,11 +33,15 @@ const ZTd = class {
     }
     this.colspanChange.emit(this.colspan || 1);
   }
+  onMenuButtonClick(ev) {
+    ev.stopPropagation();
+    this.popoverEl.open = !this.popoverEl.open;
+  }
   componentWillLoad() {
     this.updateColspan();
   }
   render() {
-    return (index.h(index.Host, { role: "cell", "menu-open": this.isMenuOpen }, index.h("slot", null), this.showMenu && (index.h("div", { class: "cell--menu-container prevent-expand" }, index.h("z-button", { variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), index.h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, index.h("slot", { name: "contextual-menu" }))))));
+    return (index.h(index.Host, { role: "cell", "menu-open": this.isMenuOpen }, index.h("slot", null), this.showMenu && (index.h("div", { class: "cell--menu-container prevent-expand" }, index.h("z-button", { variant: index$1.ButtonVariant.TERTIARY, icon: "contextual-menu", size: index$1.ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), index.h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, index.h("slot", { name: "contextual-menu" }))))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/{index-1f3f3a0c.js → index-d6f00e52.js}

@@ -2,7 +2,7 @@
 
 const index = require('./index-e3299e0a.js');
 const utils = require('./utils-4ac02425.js');
-require('./index-ddde2452.js');
+require('./index-382f3d09.js');
 require('./index-4edb3854.js');
 
 const stylesCss = ":host{--columns:1;display:grid;min-width:max-content;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";

package/dist/cjs/z-carousel.cjs.entry.js

@@ -128,12 +128,16 @@ const ZCarousel = class {
     }
     this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
     this.checkNavigationValidity();
+    this.items.forEach((item) => {
+      item.setAttribute("role", "group");
+      item.setAttribute("aria-roledescription", "slide");
+    });
   }
   render() {
     if (this.isLoading) {
       return (index.h(index.Host, null, this.label && index.h("div", { class: "heading-4 z-carousel-title" }, this.label), index.h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, index.h("z-ghost-loading", null), index.h("div", { class: "loading-items-container" }, index.h("slot", null)))));
     }
-    return (index.h(index.Host, null, index.h("div", { class: "z-carousel-container" }, this.label && index.h("div", { class: "heading-4 z-carousel-title" }, this.label), index.h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === index$1.CarouselArrowsPosition.OVER && (index.h("z-button", { size: index$1.ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), index.h("ul", { class: "z-carousel-items-container" }, index.h("slot", null)), this.arrowsPosition === index$1.CarouselArrowsPosition.OVER && (index.h("z-button", { size: index$1.ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (index.h("div", { class: "z-carousel-footer" }, this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ButtonSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), this.progressMode === index$1.CarouselProgressMode.DOTS && this.single && this.items && (index.h("div", { class: "dots-progress" }, this.items.map((_item, key) => (index.h("button", { type: "button", class: { current: this.highlightedIndicator === key }, onClick: () => this.goTo(key) }, index.h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === index$1.CarouselProgressMode.NUMBERS && this.single && this.items && (index.h("div", { class: "numbers-progress interactive-3" }, index.h("span", { class: "current" }, this.current + 1), index.h("span", null, "di"), index.h("span", null, this.items.length))), this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ButtonSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
+    return (index.h(index.Host, null, index.h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && index.h("div", { class: "heading-4 z-carousel-title" }, this.label), index.h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === index$1.CarouselArrowsPosition.OVER && (index.h("z-button", { size: index$1.ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), index.h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, index.h("slot", null)), this.arrowsPosition === index$1.CarouselArrowsPosition.OVER && (index.h("z-button", { size: index$1.ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (index.h("div", { class: "z-carousel-footer" }, this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ControlSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === index$1.CarouselProgressMode.DOTS && this.single && this.items && (index.h("div", { class: "dots-progress" }, this.items.map((_item, key) => (index.h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, index.h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === index$1.CarouselProgressMode.NUMBERS && this.single && this.items && (index.h("div", { class: "numbers-progress interactive-3" }, index.h("span", { class: "current" }, this.current + 1), index.h("span", null, "di"), index.h("span", null, this.items.length))), this.arrowsPosition === index$1.CarouselArrowsPosition.BOTTOM && (index.h("z-button", { size: index$1.ControlSize.SMALL, variant: index$1.ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
   }
   get hostElement() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e3299e0a.js');
 const index$1 = require('./index-e8ce94a1.js');
 
-const stylesCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--color-white);border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px (--shadow-color-base);cursor:pointer;fill:var(--color-primary01);outline:none}.navigation-button:focus:focus-visible{box-shadow:inset 0 0 4px 3px var(--color-highlight);fill:var(--color-primary01)}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation=\"horizontal\"]) nav{width:100%}:host([orientation=\"horizontal\"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation=\"horizontal\"]) .navigation-button:first-child{left:0}:host([orientation=\"horizontal\"]) .navigation-button:last-child{right:0}:host([orientation=\"vertical\"]){width:fit-content;flex-direction:column}:host([orientation=\"vertical\"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation=\"vertical\"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation=\"vertical\"]) .navigation-button:first-child{top:0}:host([orientation=\"vertical\"]) .navigation-button:last-child{bottom:0}:host([size=\"small\"][orientation=\"vertical\"]) .navigation-button{height:calc(var(--space-unit) * 4)}";
+const stylesCss = ":host{--z-navigation-tabs-nav-buttons-bg:var(--color-white);--z-navigation-tabs-nav-buttons-fg:var(--color-primary01);position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--z-navigation-tabs-nav-buttons-bg);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);outline:none}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation=\"horizontal\"]) nav{width:100%}:host([orientation=\"horizontal\"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation=\"horizontal\"]) .navigation-button:first-child{left:0}:host([orientation=\"horizontal\"]) .navigation-button:last-child{right:0}:host([orientation=\"vertical\"]){width:fit-content;flex-direction:column}:host([orientation=\"vertical\"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation=\"vertical\"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation=\"vertical\"]) .navigation-button:first-child{top:0}:host([orientation=\"vertical\"]) .navigation-button:last-child{bottom:0}:host([size=\"small\"][orientation=\"vertical\"]) .navigation-button{height:calc(var(--space-unit) * 4)}";
 
 const ZNavigationTabs = class {
   constructor(hostRef) {
@@ -174,9 +174,9 @@ const ZNavigationTabs = class {
     return (index.h(index.Host, { class: {
         "interactive-2": this.size === index$1.NavigationTabsSize.SMALL,
         "interactive-1": this.size !== index$1.NavigationTabsSize.SMALL,
-      }, scrollable: this.canNavigate }, this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, index.h("z-icon", { name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), index.h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, index.h("slot", null)), this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
+      }, scrollable: this.canNavigate }, this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti" }, index.h("z-icon", { name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), index.h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, index.h("slot", null)), this.canNavigate && (index.h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
         this.navigateThroughTabs(e);
-      }, tabindex: "-1", disabled: !this.canNavigateNext }, index.h("z-icon", { name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+      }, tabindex: "-1", disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi" }, index.h("z-icon", { name: this.orientation === index$1.NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/z-panel-elem.cjs.entry.js

@@ -26,7 +26,7 @@ const ZPanelElem = class {
         "z-link": true,
         "z-link-disabled": this.isdisabled,
         "z-link-icon": true,
-      }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { class: "z-link-icon-left", height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { class: "panel-elem-desc" }, index.h("slot", { name: this.descrSlotName })))));
+      }, id: elemId + "link_id", href: this.url, target: this.target }, index.h("z-icon", { height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (index.h("div", { class: "panel-elem-desc" }, index.h("slot", { name: this.descrSlotName })))));
   }
 };
 ZPanelElem.style = stylesCss;

package/dist/cjs/z-table.cjs.entry.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e3299e0a.js');
 require('./index-23d8692f.js');
 require('./index-a9764c98.js');
-require('./index-1f3f3a0c.js');
+require('./index-d6f00e52.js');
 require('./index-92a9f89e.js');
 require('./utils-4ac02425.js');
 require('./index-e8ce94a1.js');
 require('./breakpoints-ebe1a437.js');
-require('./index-ddde2452.js');
+require('./index-382f3d09.js');
 require('./index-4edb3854.js');
 
 const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:max-content}";

package/dist/cjs/z-td.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ddde2452.js');
+const index = require('./index-382f3d09.js');
 require('./index-e3299e0a.js');
 require('./index-e8ce94a1.js');
 

package/dist/cjs/z-tr.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1f3f3a0c.js');
+const index = require('./index-d6f00e52.js');
 require('./index-e3299e0a.js');
 require('./utils-4ac02425.js');
 require('./index-e8ce94a1.js');
 require('./breakpoints-ebe1a437.js');
-require('./index-ddde2452.js');
+require('./index-382f3d09.js');
 require('./index-4edb3854.js');
 
 

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

@@ -3,6 +3,8 @@ import { NavigationTabsSize, NavigationTabsOrientation, NavigationTabsKeyboardEv
 /**
  * Navigation tabs component.
  * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
+ * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
+ * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
  */
 export class ZNavigationTabs {
   constructor() {
@@ -170,9 +172,9 @@ export class ZNavigationTabs {
     return (h(Host, { class: {
         "interactive-2": this.size === NavigationTabsSize.SMALL,
         "interactive-1": this.size !== NavigationTabsSize.SMALL,
-      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, 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.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
         this.navigateThroughTabs(e);
-      }, tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+      }, tabindex: "-1", disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   static get is() { return "z-navigation-tabs"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,7 @@
 :host {
+  --z-navigation-tabs-nav-buttons-bg: var(--color-white);
+  --z-navigation-tabs-nav-buttons-fg: var(--color-primary01);
+
   position: relative;
   z-index: 0;
   display: flex;
@@ -27,19 +30,14 @@
   padding: 0;
   border: none;
   margin: 0;
-  background: var(--color-white);
+  background: var(--z-navigation-tabs-nav-buttons-bg);
   border-radius: var(--border-no-radius);
-  box-shadow: 0 0 4px 1px (--shadow-color-base);
+  box-shadow: 0 0 4px 1px var(--shadow-color-base);
   cursor: pointer;
-  fill: var(--color-primary01);
+  fill: var(--z-navigation-tabs-nav-buttons-fg);
   outline: none;
 }
 
-.navigation-button:focus:focus-visible {
-  box-shadow: inset 0 0 4px 3px var(--color-highlight);
-  fill: var(--color-primary01);
-}
-
 .navigation-button:disabled {
   display: none;
 }

package/dist/collection/components/panel/z-panel-elem/index.js

@@ -21,7 +21,7 @@ export class ZPanelElem {
         "z-link": true,
         "z-link-disabled": this.isdisabled,
         "z-link-icon": true,
-      }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { class: "z-link-icon-left", height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
+      }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
   }
   static get is() { return "z-panel-elem"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/cells/z-td/index.js

@@ -30,11 +30,15 @@ export class ZTd {
     }
     this.colspanChange.emit(this.colspan || 1);
   }
+  onMenuButtonClick(ev) {
+    ev.stopPropagation();
+    this.popoverEl.open = !this.popoverEl.open;
+  }
   componentWillLoad() {
     this.updateColspan();
   }
   render() {
-    return (h(Host, { role: "cell", "menu-open": this.isMenuOpen }, h("slot", null), this.showMenu && (h("div", { class: "cell--menu-container prevent-expand" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, h("slot", { name: "contextual-menu" }))))));
+    return (h(Host, { role: "cell", "menu-open": this.isMenuOpen }, h("slot", null), this.showMenu && (h("div", { class: "cell--menu-container prevent-expand" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, h("slot", { name: "contextual-menu" }))))));
   }
   static get is() { return "z-td"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ButtonSize } from "../../beans";
+import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ControlSize } from "../../beans";
 /**
  * ZCarousel component.
  * @cssprop --z-carousel-gutter - The gutter between items.
@@ -124,12 +124,16 @@ export class ZCarousel {
     }
     this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
     this.checkNavigationValidity();
+    this.items.forEach((item) => {
+      item.setAttribute("role", "group");
+      item.setAttribute("aria-roledescription", "slide");
+    });
   }
   render() {
     if (this.isLoading) {
       return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
     }
-    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
+    return (h(Host, null, h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
   }
   static get is() { return "z-carousel"; }
   static get originalStyleUrls() {

package/dist/esm/{index-49dfba34.js → index-7081487e.js}

@@ -31,11 +31,15 @@ const ZTd = class {
     }
     this.colspanChange.emit(this.colspan || 1);
   }
+  onMenuButtonClick(ev) {
+    ev.stopPropagation();
+    this.popoverEl.open = !this.popoverEl.open;
+  }
   componentWillLoad() {
     this.updateColspan();
   }
   render() {
-    return (h(Host, { role: "cell", "menu-open": this.isMenuOpen }, h("slot", null), this.showMenu && (h("div", { class: "cell--menu-container prevent-expand" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, h("slot", { name: "contextual-menu" }))))));
+    return (h(Host, { role: "cell", "menu-open": this.isMenuOpen }, h("slot", null), this.showMenu && (h("div", { class: "cell--menu-container prevent-expand" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, h("slot", { name: "contextual-menu" }))))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/{index-1b2e3e53.js → index-8009e286.js}

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
 import { r as randomId } from './utils-4d2d99d9.js';
-import './index-49dfba34.js';
+import './index-7081487e.js';
 import './index-cfd94e05.js';
 
 const stylesCss = ":host{--columns:1;display:grid;min-width:max-content;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";

package/dist/esm/z-carousel.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
-import { R as CarouselArrowsPosition, U as CarouselProgressMode, d as ButtonSize, B as ButtonVariant } from './index-03c8b0f0.js';
+import { R as CarouselArrowsPosition, U as CarouselProgressMode, e as ControlSize, B as ButtonVariant } from './index-03c8b0f0.js';
 
 const stylesCss = "z-carousel{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}z-carousel[single],z-carousel[single=\"true\"]{display:flex;flex-direction:column;align-items:center;justify-content:center}z-carousel[single=\"true\"] .z-carousel-container,z-carousel[single] .z-carousel-container{width:fit-content;max-width:100%}z-carousel .loading-items-container{display:none}z-carousel .z-carousel-container{display:flex;flex-direction:column}z-carousel .z-carousel-wrapper{position:relative}z-carousel .z-carousel-title{margin-bottom:var(--space-unit);color:var(--gray800)}z-carousel .z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-snap-type:x mandatory;scrollbar-width:none;}z-carousel .z-carousel-items-container::-webkit-scrollbar{display:none}z-carousel .z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}z-carousel[single=\"true\"] .z-carousel-items-container>*:not(:last-child),z-carousel[single] .z-carousel-items-container>*:not(:last-child){margin-right:0}z-carousel .z-carousel-items-container>li{scroll-snap-align:center}z-button[data-direction]{--z-icon-width:32px;--z-icon-height:32px;position:absolute;bottom:50%;transform:translateY(50%)}z-button[data-direction=\"next\"]{right:0}z-carousel .z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}z-carousel .z-carousel-footer .numbers-progress,z-carousel .z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}z-carousel .z-carousel-footer .dots-progress button{display:flex;align-items:center;padding:0;border:none;margin:0;background-color:transparent}z-carousel .z-carousel-footer .dots-progress button:not(.current){cursor:pointer}z-carousel .z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2);column-gap:calc(var(--space-unit) / 2)}z-carousel .z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}z-carousel .z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}z-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}";
 
@@ -124,12 +124,16 @@ const ZCarousel = class {
     }
     this.itemsContainer.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
     this.checkNavigationValidity();
+    this.items.forEach((item) => {
+      item.setAttribute("role", "group");
+      item.setAttribute("aria-roledescription", "slide");
+    });
   }
   render() {
     if (this.isLoading) {
       return (h(Host, null, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { style: { height: `${this.ghostLoadingHeight}px` } }, h("z-ghost-loading", null), h("div", { class: "loading-items-container" }, h("slot", null)))));
     }
-    return (h(Host, null, h("div", { class: "z-carousel-container" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), h("ul", { class: "z-carousel-items-container" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ButtonSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ButtonSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext }))))));
+    return (h(Host, null, h("div", { class: "z-carousel-container", role: "group", "aria-roledescription": "carousel", "aria-label": this.label || "Carousel" }, this.label && h("div", { class: "heading-4 z-carousel-title" }, this.label), h("div", { class: "z-carousel-wrapper" }, this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "prev", icon: "chevron-left", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), h("ul", { class: "z-carousel-items-container", "aria-atomic": "false", "aria-live": "polite" }, h("slot", null)), this.arrowsPosition === CarouselArrowsPosition.OVER && (h("z-button", { size: ControlSize.SMALL, "data-direction": "next", icon: "chevron-right", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" })))), this.canShowFooter() && (h("div", { class: "z-carousel-footer" }, this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-left-filled", onClick: this.onPrev.bind(this), disabled: !this.canNavigatePrev, ariaLabel: this.single ? "Mostra l'elemento precedente" : "Mostra gli elementi precedenti" })), this.progressMode === CarouselProgressMode.DOTS && this.single && this.items && (h("div", { class: "dots-progress" }, this.items.map((_item, key) => (h("button", { type: "button", class: { current: this.highlightedIndicator === key }, "aria-label": this.highlightedIndicator === key ? "Elemento corrente" : `Spostati all'elemento ${key + 1}`, onClick: () => this.goTo(key) }, h("z-icon", { name: this.highlightedIndicator === key ? "white-circle-filled" : "black-circle-filled" })))))), this.progressMode === CarouselProgressMode.NUMBERS && this.single && this.items && (h("div", { class: "numbers-progress interactive-3" }, h("span", { class: "current" }, this.current + 1), h("span", null, "di"), h("span", null, this.items.length))), this.arrowsPosition === CarouselArrowsPosition.BOTTOM && (h("z-button", { size: ControlSize.SMALL, variant: ButtonVariant.TERTIARY, icon: "arrow-simple-right-filled", onClick: this.onNext.bind(this), disabled: !this.canNavigateNext, ariaLabel: this.single ? "Mostra l'elemento successivo" : "Mostra gli elementi successivi" }))))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
 import { N as NavigationTabsOrientation, a as NavigationTabsSize, g as KeyboardCode, b as NavigationTabsKeyboardEvents } from './index-03c8b0f0.js';
 
-const stylesCss = ":host{position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--color-white);border-radius:var(--border-no-radius);box-shadow:0 0 4px 1px (--shadow-color-base);cursor:pointer;fill:var(--color-primary01);outline:none}.navigation-button:focus:focus-visible{box-shadow:inset 0 0 4px 3px var(--color-highlight);fill:var(--color-primary01)}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation=\"horizontal\"]) nav{width:100%}:host([orientation=\"horizontal\"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation=\"horizontal\"]) .navigation-button:first-child{left:0}:host([orientation=\"horizontal\"]) .navigation-button:last-child{right:0}:host([orientation=\"vertical\"]){width:fit-content;flex-direction:column}:host([orientation=\"vertical\"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation=\"vertical\"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation=\"vertical\"]) .navigation-button:first-child{top:0}:host([orientation=\"vertical\"]) .navigation-button:last-child{bottom:0}:host([size=\"small\"][orientation=\"vertical\"]) .navigation-button{height:calc(var(--space-unit) * 4)}";
+const stylesCss = ":host{--z-navigation-tabs-nav-buttons-bg:var(--color-white);--z-navigation-tabs-nav-buttons-fg:var(--color-primary01);position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--z-navigation-tabs-nav-buttons-bg);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);outline:none}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation=\"horizontal\"]) nav{width:100%}:host([orientation=\"horizontal\"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation=\"horizontal\"]) .navigation-button:first-child{left:0}:host([orientation=\"horizontal\"]) .navigation-button:last-child{right:0}:host([orientation=\"vertical\"]){width:fit-content;flex-direction:column}:host([orientation=\"vertical\"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation=\"vertical\"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation=\"vertical\"]) .navigation-button:first-child{top:0}:host([orientation=\"vertical\"]) .navigation-button:last-child{bottom:0}:host([size=\"small\"][orientation=\"vertical\"]) .navigation-button{height:calc(var(--space-unit) * 4)}";
 
 const ZNavigationTabs = class {
   constructor(hostRef) {
@@ -170,9 +170,9 @@ const ZNavigationTabs = class {
     return (h(Host, { class: {
         "interactive-2": this.size === NavigationTabsSize.SMALL,
         "interactive-1": this.size !== NavigationTabsSize.SMALL,
-      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev }, 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.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
+      }, scrollable: this.canNavigate }, this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabindex: "-1", disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 }))), h("nav", { role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.tabsNav = el !== null && el !== void 0 ? el : this.tabsNav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", null)), this.canNavigate && (h("button", { class: "navigation-button", onClick: this.navigateForward.bind(this), onKeyDown: (e) => {
         this.navigateThroughTabs(e);
-      }, tabindex: "-1", disabled: !this.canNavigateNext }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
+      }, tabindex: "-1", disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi" }, h("z-icon", { name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 })))));
   }
   get host() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/z-panel-elem.entry.js

@@ -22,7 +22,7 @@ const ZPanelElem = class {
         "z-link": true,
         "z-link-disabled": this.isdisabled,
         "z-link-icon": true,
-      }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { class: "z-link-icon-left", height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
+      }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
   }
 };
 ZPanelElem.style = stylesCss;

package/dist/esm/z-table.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
 import './index-6d83248c.js';
 import './index-f171ca51.js';
-import './index-1b2e3e53.js';
+import './index-8009e286.js';
 import './index-8c7b48bc.js';
 import './utils-4d2d99d9.js';
 import './index-03c8b0f0.js';
 import './breakpoints-9b81eb1b.js';
-import './index-49dfba34.js';
+import './index-7081487e.js';
 import './index-cfd94e05.js';
 
 const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:max-content}";

package/dist/esm/z-td.entry.js

@@ -1,3 +1,3 @@
-export { Z as z_td } from './index-49dfba34.js';
+export { Z as z_td } from './index-7081487e.js';
 import './index-a2ca4b97.js';
 import './index-03c8b0f0.js';

package/dist/esm/z-tr.entry.js

@@ -1,7 +1,7 @@
-export { Z as z_tr } from './index-1b2e3e53.js';
+export { Z as z_tr } from './index-8009e286.js';
 import './index-a2ca4b97.js';
 import './utils-4d2d99d9.js';
 import './index-03c8b0f0.js';
 import './breakpoints-9b81eb1b.js';
-import './index-49dfba34.js';
+import './index-7081487e.js';
 import './index-cfd94e05.js';

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

@@ -2,6 +2,8 @@ import { NavigationTabsSize, NavigationTabsOrientation } from "../../../../beans
 /**
  * Navigation tabs component.
  * @slot - Main slot. Use `z-navigation-tab` or `z-navigation-tab-link` components as children.
+ * @cssprop --z-navigation-tabs-nav-buttons-bg - Navigation buttons background color.
+ * @cssprop --z-navigation-tabs-nav-buttons-fg - Navigation buttons foreground color.
  */
 export declare class ZNavigationTabs {
   /**

package/dist/types/components/table/cells/z-td/index.d.ts

@@ -31,6 +31,7 @@ export declare class ZTd {
    */
   colspanChange: EventEmitter<number>;
   protected updateColspan(): void;
+  private onMenuButtonClick;
   componentWillLoad(): void;
   render(): HTMLZTdElement;
 }

package/dist/web-components-library/p-0513242d.entry.js

@@ -0,0 +1 @@
+import{r as e,h as i}from"./p-d17ebc2f.js";const a=class{constructor(i){e(this,i),this.target="_blank",this.isdisabled=!1}renderIcon(){return this.isdisabled?i("img",{src:this.imgurl,alt:this.imgalt}):i("a",{class:"elem-icon",href:this.url,target:this.target},i("img",{src:this.imgurl,alt:this.imgalt}))}render(){const e=this.elemid?this.elemid:"";return i("div",{class:"panel-elem-container"},(this.imgurl||this.imgalt)&&i("div",{"aria-hidden":"true",class:"panel-elem-icon"},this.renderIcon()),i("div",{class:"panel-elem-link"},i("a",{class:{"z-link":!0,"z-link-disabled":this.isdisabled,"z-link-icon":!0},id:e+"link_id",href:this.url,target:this.target},i("z-icon",{height:14,width:14,name:this.linkicon}),this.linklabel)),this.descrSlotName&&i("div",{class:"panel-elem-desc"},i("slot",{name:this.descrSlotName})))}};a.style=".sc-z-panel-elem-h{width:inherit;font-family:var(--dashboard-font);font-weight:var(--font-rg)}.panel-elem-container.sc-z-panel-elem{width:100%}.panel-elem-icon.sc-z-panel-elem{margin:auto calc(var(--space-unit) * 3)}.panel-elem-icon.sc-z-panel-elem img.sc-z-panel-elem{display:block;max-width:96px;height:32px;margin:auto;object-fit:contain}.panel-elem-link.sc-z-panel-elem{display:flex;align-items:center;justify-content:center;margin:var(--space-unit) auto 0;border-radius:var(--border-no-radius);font-size:12px}.panel-elem-link.sc-z-panel-elem>a.z-link.sc-z-panel-elem{padding:calc(var(--space-unit) * 0.5) 0;font-weight:var(--font-sb)}.panel-elem-desc.sc-z-panel-elem{padding-top:var(--space-unit);margin:0;letter-spacing:0.16px;text-align:center}a.sc-z-panel-elem>z-icon.sc-z-panel-elem{margin-right:var(--space-unit)}";export{a as z_panel_elem}

package/dist/web-components-library/{p-dd3e0b4e.js → p-32410a6d.js}

@@ -1 +1 @@
-import{r as t,c as o,h as e,H as n,g as a}from"./p-d17ebc2f.js";import{r}from"./p-d7668580.js";import"./p-c250c443.js";import"./p-02e9b4fa.js";const s=class{constructor(e){t(this,e),this.expand=o(this,"expand",7),this.expandable=!1,this.expanded=!1}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));this.expandable&&t.pop();const o=t.map((t=>t.colspan||1)).reduce(((t,o)=>t+o),0);if(this.host.style.setProperty("--columns",`${o}`),this.expandable){const o=t.pop();o.id=o.id||`z-tr-expandable-content-${r()}`,this.expandableContentId=o.id}}onRowClick(t){const o=t.target.closest(".prevent-expand");this.expandable&&!o&&(this.expanded=!this.expanded,this.expand.emit({expanded:this.expanded}))}componentWillLoad(){this.updateColumns()}render(){return e(n,{role:"row",onClick:this.onRowClick.bind(this),expanded:this.expanded},e("div",{class:"z-tr--expand-button-container"},this.expandable&&e("button",{"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},e("z-icon",{name:this.expanded?"minus-circled":"plus-circled"}))),e("slot",{onSlotchange:this.updateColumns.bind(this)}))}get host(){return a(this)}static get watchers(){return{expandable:["updateColumns"]}}};s.style=":host{--columns:1;display:grid;min-width:max-content;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";export{s as Z}
+import{r as t,c as o,h as e,H as n,g as a}from"./p-d17ebc2f.js";import{r}from"./p-d7668580.js";import"./p-b3ad3811.js";import"./p-02e9b4fa.js";const s=class{constructor(e){t(this,e),this.expand=o(this,"expand",7),this.expandable=!1,this.expanded=!1}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));this.expandable&&t.pop();const o=t.map((t=>t.colspan||1)).reduce(((t,o)=>t+o),0);if(this.host.style.setProperty("--columns",`${o}`),this.expandable){const o=t.pop();o.id=o.id||`z-tr-expandable-content-${r()}`,this.expandableContentId=o.id}}onRowClick(t){const o=t.target.closest(".prevent-expand");this.expandable&&!o&&(this.expanded=!this.expanded,this.expand.emit({expanded:this.expanded}))}componentWillLoad(){this.updateColumns()}render(){return e(n,{role:"row",onClick:this.onRowClick.bind(this),expanded:this.expanded},e("div",{class:"z-tr--expand-button-container"},this.expandable&&e("button",{"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},e("z-icon",{name:this.expanded?"minus-circled":"plus-circled"}))),e("slot",{onSlotchange:this.updateColumns.bind(this)}))}get host(){return a(this)}static get watchers(){return{expandable:["updateColumns"]}}};s.style=":host{--columns:1;display:grid;min-width:max-content;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr))}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-surface02)}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button:focus{box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}";export{s as Z}

package/dist/web-components-library/p-3b1b8e14.entry.js

@@ -0,0 +1 @@
+export{Z as z_tr}from"./p-32410a6d.js";import"./p-d17ebc2f.js";import"./p-d7668580.js";import"./p-c9d57d05.js";import"./p-b497e33e.js";import"./p-b3ad3811.js";import"./p-02e9b4fa.js";

package/dist/web-components-library/p-5445a3fe.entry.js

@@ -0,0 +1 @@
+export{Z as z_td}from"./p-b3ad3811.js";import"./p-d17ebc2f.js";import"./p-c9d57d05.js";

package/dist/web-components-library/{p-2d0ac109.entry.js → p-63119a07.entry.js}

@@ -1 +1 @@
-import{r as t,h as e,H as s,g as a}from"./p-d17ebc2f.js";import"./p-64759e9f.js";import"./p-62b89a37.js";import"./p-dd3e0b4e.js";import"./p-30771d25.js";import"./p-d7668580.js";import"./p-c9d57d05.js";import"./p-b497e33e.js";import"./p-c250c443.js";import"./p-02e9b4fa.js";const o=class{constructor(e){t(this,e),this.bordered=!1,this.expandable=!1}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()})),this.expandableMutationObserver.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["expandable"],attributeOldValue:!1})}disconnectedCallback(){this.expandableMutationObserver.disconnect()}render(){return e(s,{expandable:this.expandable},e("div",{class:"table",role:"table"},e("slot",null)))}get host(){return a(this)}};o.style=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:max-content}";export{o as z_table}
+import{r as t,h as e,H as a,g as s}from"./p-d17ebc2f.js";import"./p-64759e9f.js";import"./p-62b89a37.js";import"./p-32410a6d.js";import"./p-30771d25.js";import"./p-d7668580.js";import"./p-c9d57d05.js";import"./p-b497e33e.js";import"./p-b3ad3811.js";import"./p-02e9b4fa.js";const o=class{constructor(e){t(this,e),this.bordered=!1,this.expandable=!1}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()})),this.expandableMutationObserver.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["expandable"],attributeOldValue:!1})}disconnectedCallback(){this.expandableMutationObserver.disconnect()}render(){return e(a,{expandable:this.expandable},e("div",{class:"table",role:"table"},e("slot",null)))}get host(){return s(this)}};o.style=":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;max-width:100%;box-sizing:border-box;background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}.table{min-width:max-content}";export{o as z_table}

package/dist/web-components-library/p-a8e23721.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as e,H as i,g as o}from"./p-d17ebc2f.js";import{R as r,U as a,e as l,B as n}from"./p-c9d57d05.js";const c=class{constructor(e){t(this,e),this.indexChange=s(this,"indexChange",7),this.single=!1,this.ghostLoadingHeight=100,this.current=0,this.scrollingTo=null}onIndexChange(){this.indexChange.emit({currentItem:this.current})}onSingleModeChange(){this.single&&!this.intersectionObserver&&this.setIntersectionObserver()}setIntersectionObserver(){this.intersectionObserver=new window.IntersectionObserver((t=>{const s=t.find((t=>t.isIntersecting));if(!s)return;const e=this.items.findIndex((t=>t===s.target));this.highlightedIndicator=e,null!==this.scrollingTo&&e!==this.scrollingTo||(this.scrollingTo=null,this.current=e)}),{root:this.itemsContainer,threshold:.5}),this.items.forEach((t=>this.intersectionObserver.observe(t)))}onPrev(){if(this.single)return void this.goTo(Math.max(0,this.current-1));const t=this.itemsContainer;t&&t.scrollBy({left:-t.clientWidth/2,behavior:"smooth"})}onNext(){if(this.single)return void this.goTo(Math.min(this.current+1,this.items.length-1));const t=this.itemsContainer;t&&t.scrollBy({left:t.clientWidth/2,behavior:"smooth"})}checkNavigationValidity(){this.single&&(this.canNavigatePrev=this.current>1,this.canNavigateNext=this.current<this.items.length-1),this.canNavigatePrev=this.itemsContainer.scrollLeft>0,this.canNavigateNext=this.itemsContainer.scrollLeft<this.itemsContainer.scrollWidth-this.itemsContainer.clientWidth}canShowFooter(){return this.arrowsPosition===r.BOTTOM||this.progressMode===a.DOTS||this.progressMode===a.NUMBERS}goTo(t){this.current!==t&&(this.scrollingTo=t,this.itemsContainer.scroll({left:this.items[t].offsetLeft,behavior:"smooth"}))}componentDidLoad(){this.itemsContainer=this.hostElement.querySelector(".z-carousel-items-container"),this.itemsContainer&&(this.items=Array.from(this.itemsContainer.querySelectorAll(":scope > li")),this.single&&this.setIntersectionObserver(),this.itemsContainer.addEventListener("scroll",this.checkNavigationValidity.bind(this),{passive:!0}),this.checkNavigationValidity(),this.items.forEach((t=>{t.setAttribute("role","group"),t.setAttribute("aria-roledescription","slide")})))}render(){return this.isLoading?e(i,null,this.label&&e("div",{class:"heading-4 z-carousel-title"},this.label),e("div",{style:{height:`${this.ghostLoadingHeight}px`}},e("z-ghost-loading",null),e("div",{class:"loading-items-container"},e("slot",null)))):e(i,null,e("div",{class:"z-carousel-container",role:"group","aria-roledescription":"carousel","aria-label":this.label||"Carousel"},this.label&&e("div",{class:"heading-4 z-carousel-title"},this.label),e("div",{class:"z-carousel-wrapper"},this.arrowsPosition===r.OVER&&e("z-button",{size:l.SMALL,"data-direction":"prev",icon:"chevron-left",onClick:this.onPrev.bind(this),disabled:!this.canNavigatePrev,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),e("ul",{class:"z-carousel-items-container","aria-atomic":"false","aria-live":"polite"},e("slot",null)),this.arrowsPosition===r.OVER&&e("z-button",{size:l.SMALL,"data-direction":"next",icon:"chevron-right",onClick:this.onNext.bind(this),disabled:!this.canNavigateNext,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"}))),this.canShowFooter()&&e("div",{class:"z-carousel-footer"},this.arrowsPosition===r.BOTTOM&&e("z-button",{size:l.SMALL,variant:n.TERTIARY,icon:"arrow-simple-left-filled",onClick:this.onPrev.bind(this),disabled:!this.canNavigatePrev,ariaLabel:this.single?"Mostra l'elemento precedente":"Mostra gli elementi precedenti"}),this.progressMode===a.DOTS&&this.single&&this.items&&e("div",{class:"dots-progress"},this.items.map(((t,s)=>e("button",{type:"button",class:{current:this.highlightedIndicator===s},"aria-label":this.highlightedIndicator===s?"Elemento corrente":`Spostati all'elemento ${s+1}`,onClick:()=>this.goTo(s)},e("z-icon",{name:this.highlightedIndicator===s?"white-circle-filled":"black-circle-filled"}))))),this.progressMode===a.NUMBERS&&this.single&&this.items&&e("div",{class:"numbers-progress interactive-3"},e("span",{class:"current"},this.current+1),e("span",null,"di"),e("span",null,this.items.length)),this.arrowsPosition===r.BOTTOM&&e("z-button",{size:l.SMALL,variant:n.TERTIARY,icon:"arrow-simple-right-filled",onClick:this.onNext.bind(this),disabled:!this.canNavigateNext,ariaLabel:this.single?"Mostra l'elemento successivo":"Mostra gli elementi successivi"})))}get hostElement(){return o(this)}static get watchers(){return{current:["onIndexChange"],single:["onSingleModeChange"]}}};c.style='z-carousel{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}z-carousel[single],z-carousel[single="true"]{display:flex;flex-direction:column;align-items:center;justify-content:center}z-carousel[single="true"] .z-carousel-container,z-carousel[single] .z-carousel-container{width:fit-content;max-width:100%}z-carousel .loading-items-container{display:none}z-carousel .z-carousel-container{display:flex;flex-direction:column}z-carousel .z-carousel-wrapper{position:relative}z-carousel .z-carousel-title{margin-bottom:var(--space-unit);color:var(--gray800)}z-carousel .z-carousel-items-container{display:flex;max-width:100%;flex-direction:row;margin:0;list-style:none;-ms-overflow-style:none;overflow-x:scroll;padding-inline-start:0;scroll-snap-type:x mandatory;scrollbar-width:none;}z-carousel .z-carousel-items-container::-webkit-scrollbar{display:none}z-carousel .z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}z-carousel[single="true"] .z-carousel-items-container>*:not(:last-child),z-carousel[single] .z-carousel-items-container>*:not(:last-child){margin-right:0}z-carousel .z-carousel-items-container>li{scroll-snap-align:center}z-button[data-direction]{--z-icon-width:32px;--z-icon-height:32px;position:absolute;bottom:50%;transform:translateY(50%)}z-button[data-direction="next"]{right:0}z-carousel .z-carousel-footer{display:flex;flex-direction:row;align-items:center;justify-content:center;margin-top:var(--space-unit)}z-carousel .z-carousel-footer .numbers-progress,z-carousel .z-carousel-footer .dots-progress{display:flex;align-items:center;justify-content:center}z-carousel .z-carousel-footer .dots-progress button{display:flex;align-items:center;padding:0;border:none;margin:0;background-color:transparent}z-carousel .z-carousel-footer .dots-progress button:not(.current){cursor:pointer}z-carousel .z-carousel-footer .numbers-progress{margin:0 calc(var(--space-unit) / 2);column-gap:calc(var(--space-unit) / 2)}z-carousel .z-carousel-footer .numbers-progress .current{font-weight:var(--font-sb)}z-carousel .z-carousel-footer .dots-progress button.current z-icon{fill:var(--gray800)}z-carousel .z-carousel-footer .dots-progress button:not(.current) z-icon{fill:var(--gray200)}';export{c as z_carousel}

package/dist/web-components-library/p-b3ad3811.js

@@ -0,0 +1 @@
+import{r as e,c as t,h as n,H as o,g as s}from"./p-d17ebc2f.js";import{B as i,e as a}from"./p-c9d57d05.js";const r=class{constructor(n){e(this,n),this.colspanChange=t(this,"colspanChange",6),this.sticky=!1,this.showMenu=null,this.isMenuOpen=!1}updateColspan(){this.colspan?this.host.style.gridColumn=`span ${this.colspan}`:this.host.style.removeProperty("grid-column"),this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation(),this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return n(o,{role:"cell","menu-open":this.isMenuOpen},n("slot",null),this.showMenu&&n("div",{class:"cell--menu-container prevent-expand"},n("z-button",{variant:i.TERTIARY,icon:"contextual-menu",size:a.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),n("z-popover",{ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open},n("slot",{name:"contextual-menu"}))))}get host(){return s(this)}static get watchers(){return{colspan:["updateColspan"]}}};r.style=':host{position:relative;display:flex;min-width:128px;box-sizing:border-box;align-items:center;padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([show-menu])::after{display:inline-block;height:100%;margin-right:calc(var(--space-unit) * 4);background:transparent;content:"";user-select:none}.cell--menu-container{position:absolute;z-index:1;top:var(--space-unit);right:var(--space-unit)}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{opacity:1;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{opacity:1;pointer-events:all}}';export{r as Z}

package/dist/web-components-library/p-e3117771.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,H as s,g as o}from"./p-d17ebc2f.js";import{N as n,a,g as e,b as h}from"./p-c9d57d05.js";const r=class{constructor(i){t(this,i),this.orientation=n.HORIZONTAL,this.size=a.BIG}get direction(){return this.orientation==n.HORIZONTAL?"Left":"Top"}get dimension(){return this.orientation==n.HORIZONTAL?"Width":"Height"}get tabs(){return Array.from(this.host.children)}setChildrenSize(){this.tabs.forEach((t=>{t.size=this.size}))}setChildrenOrientation(){this.tabs.forEach((t=>{t.orientation=this.orientation}))}checkScrollVisible(){this.tabsNav&&(this.canNavigate=this.tabsNav[`scroll${this.dimension}`]>this.tabsNav[`client${this.dimension}`])}checkScrollEnabled(){this.tabsNav&&(this.canNavigateNext=this.tabsNav[`scroll${this.direction}`]+this.tabsNav[`client${this.dimension}`]<this.tabsNav[`scroll${this.dimension}`],this.canNavigatePrev=this.tabsNav[`scroll${this.direction}`]>0)}onTabSelected(t){const i=t.target;this.tabs.forEach(((t,s)=>{t!==i?t.selected=void 0:this.tabFocus=s}))}navigateBackwards(){this.tabsNav.scrollBy({[this.direction.toLowerCase()]:0-this.tabsNav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateForward(){this.tabsNav.scrollBy({[this.direction.toLowerCase()]:this.tabsNav[`scroll${this.direction}`]+this.tabsNav[`client${this.dimension}`]/2,behavior:"smooth"})}navigateThroughTabs(t){const i=this.tabs;return t.key===e.TAB?(i.forEach(((s,o)=>{s.selected&&i.some((i=>i===t.target))&&(this.tabFocus=o)})),i[this.tabFocus].children[0].tabIndex=0,void i[this.tabFocus].children[0].focus()):!this.isArrowNavigation(t)||(t.preventDefault(),i[this.tabFocus].children[0].tabIndex=-1,t.key===h.RIGHT&&this.orientation==n.HORIZONTAL||t.key===h.DOWN&&this.orientation==n.VERTICAL?(this.tabFocus++,this.tabFocus>=i.length&&(this.tabFocus=0)):(t.key===h.LEFT&&this.orientation==n.HORIZONTAL||t.key===h.UP&&this.orientation==n.VERTICAL)&&(this.tabFocus--,this.tabFocus<0&&(this.tabFocus=i.length-1)),void(i[this.tabFocus].disabled?this.navigateThroughTabs(t):(i[this.tabFocus].children[0].tabIndex=0,i[this.tabFocus].children[0].focus())))}isArrowNavigation(t){return Object.values(h).includes(t.key)}componentDidRender(){if(this.setChildrenSize(),this.setChildrenOrientation(),this.checkScrollVisible(),!this.tabFocus){this.tabFocus=0;const t=this.tabs[this.tabFocus].children[0];t&&(t.tabIndex=0)}}render(){return i(s,{class:{"interactive-2":this.size===a.SMALL,"interactive-1":this.size!==a.SMALL},scrollable:this.canNavigate},this.canNavigate&&i("button",{class:"navigation-button",onClick:this.navigateBackwards.bind(this),tabindex:"-1",disabled:!this.canNavigatePrev,"aria-label":"Mostra elementi precedenti"},i("z-icon",{name:this.orientation===n.HORIZONTAL?"chevron-left":"chevron-up",width:16,height:16})),i("nav",{role:"tablist","aria-label":this.ariaLabel,ref:t=>this.tabsNav=null!=t?t:this.tabsNav,onScroll:this.checkScrollEnabled.bind(this),"aria-orientation":this.orientation},i("slot",null)),this.canNavigate&&i("button",{class:"navigation-button",onClick:this.navigateForward.bind(this),onKeyDown:t=>{this.navigateThroughTabs(t)},tabindex:"-1",disabled:!this.canNavigateNext,"aria-label":"Mostra elementi successivi"},i("z-icon",{name:this.orientation===n.HORIZONTAL?"chevron-right":"chevron-down",width:16,height:16})))}get host(){return o(this)}static get watchers(){return{size:["setChildrenSize"],orientation:["setChildrenOrientation"],canNavigate:["checkScrollEnabled"]}}};r.style=':host{--z-navigation-tabs-nav-buttons-bg:var(--color-white);--z-navigation-tabs-nav-buttons-fg:var(--color-primary01);position:relative;z-index:0;display:flex;overflow:hidden;flex-direction:row;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,:host *,::slotted(*){box-sizing:border-box}::-webkit-scrollbar{display:none}.navigation-button{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:0;background:var(--z-navigation-tabs-nav-buttons-bg);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);outline:none}.navigation-button:disabled{display:none}nav{display:flex;overflow:auto;align-items:center;justify-content:flex-start;scroll-behavior:smooth;scrollbar-width:none}:host([orientation="horizontal"]) nav{width:100%}:host([orientation="horizontal"]) .navigation-button{top:0;width:calc(var(--space-unit) * 4);height:100%}:host([orientation="horizontal"]) .navigation-button:first-child{left:0}:host([orientation="horizontal"]) .navigation-button:last-child{right:0}:host([orientation="vertical"]){width:fit-content;flex-direction:column}:host([orientation="vertical"]) nav{height:100%;flex-direction:column;align-items:stretch}:host([orientation="vertical"]) .navigation-button{left:0;width:100%;height:calc(var(--space-unit) * 4)}:host([orientation="vertical"]) .navigation-button:first-child{top:0}:host([orientation="vertical"]) .navigation-button:last-child{bottom:0}:host([size="small"][orientation="vertical"]) .navigation-button{height:calc(var(--space-unit) * 4)}';export{r as z_navigation_tabs}