@zanichelli/albe-web-components 8.0.1 → 9.0.0

package/dist/esm/index-272fc060.js

@@ -0,0 +1,32 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { B as ButtonVariant, d as ButtonSize } from './index-9c5d63ea.js';
+
+const stylesCss = ":host{display:table-cell;border-bottom:var(--border-size-small) solid var(--bg-grey-200);background-color:var(--color-white);font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>.button-container{display:none}:host:hover>.button-container{display:initial}.button-container{position:absolute;z-index:5;top:8px;right:8px}.button-content{position:relative}.contextual-menu-container{position:absolute;top:calc(100% - var(--space-unit));right:0;display:none}.button-container.visible,.contextual-menu-container.visible{display:initial}:host([padding=\"x-small\"]){padding:calc(var(--space-unit) * 0.5)}:host([padding=\"small\"]){padding:calc(var(--space-unit))}:host([padding=\"medium\"]){padding:calc(var(--space-unit) * 2)}:host([padding=\"large\"]){padding:calc(var(--space-unit) * 2.5)}:host([padding=\"special\"]){padding:0}";
+
+const ZTableCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = "medium";
+    this.isMenuOpened = false;
+  }
+  handleMenu() {
+    this.isMenuOpened = !this.isMenuOpened;
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "cell");
+  }
+  render() {
+    return (h(Host, null, this.showButton && (h("div", { class: {
+        "button-container": true,
+        "visible": this.isMenuOpened,
+      } }, h("div", { class: "button-content" }, h("z-button", { icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenu() }), h("div", { class: {
+        "contextual-menu-container": true,
+        "visible": this.isMenuOpened,
+      } }, h("slot", { name: "contextual-menu" }))))), h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+ZTableCell.style = stylesCss;
+
+export { ZTableCell as Z };

package/dist/esm/index-2c800f19.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
+
+const stylesCss = ".sc-z-table-body-h{display:table-row-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-table-body-h>z-table-row[expanded].sc-z-table-body+z-table-expanded-row.sc-z-table-body{display:table-row}";
+
+const ZTableBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+    Array.from(this.host.children).forEach((child, index) => child.setAttribute("aria-rowindex", `${index}`));
+  }
+  render() {
+    return h("slot", null);
+  }
+  get host() { return getElement(this); }
+};
+ZTableBody.style = stylesCss;
+
+export { ZTableBody as Z };

package/dist/esm/index-2cdac489.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+
+const stylesCss = ".sc-z-table-empty-box-h{display:block;padding:calc(var(--space-unit)) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);background-color:var(--bg-white)}.sc-z-table-empty-box-s>*{margin-top:var(--space-unit)}.cta.sc-z-table-empty-box{display:flex;flex-direction:row;margin-top:calc(var(--space-unit) / 2)}.cta.has-2-cta.sc-z-table-empty-box{flex-direction:column}@media only screen and (min-width: 768px){.sc-z-table-empty-box-h{padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 7) calc(var(--space-unit) * 3)\n      calc(var(--space-unit) * 7)}.sc-z-table-empty-box-s>*{margin-right:calc(var(--space-unit) * 2)}.cta.sc-z-table-empty-box{margin-top:var(--space-unit)}.cta.has-2-cta.sc-z-table-empty-box{flex-direction:row}}";
+
+const ZTableEmptyBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Sets main title message*/
+    this.message = "Siamo spiacenti, al momento non sono presenti dati da visualizzare.";
+    /** Sets message */
+    this.subtitle = "";
+  }
+  componentWillLoad() {
+    this.hasCta1Slot = !!this.hostElement.querySelector('[slot="cta1"]');
+    this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
+  }
+  render() {
+    return (h(Host, null, h("span", { class: "body-3-sb" }, this.message), h("br", null), !!this.subtitle && h("span", { class: "body-4" }, this.subtitle), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: {
+        "cta": true,
+        "has-2-cta": !!this.hasCta1Slot && !!this.hasCta2Slot,
+      } }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" })))));
+  }
+  get hostElement() { return getElement(this); }
+};
+ZTableEmptyBox.style = stylesCss;
+
+export { ZTableEmptyBox as Z };

package/dist/esm/index-6d83248c.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
+
+const stylesCss = ":host{--z-table--cells-bottom-border-size:var(\n    --border-size-medium\n  );--z-table--cells-background:var(\n    --color-surface02\n  );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}";
+
+const ZThead = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If true, the header will be stuck to the top of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+};
+ZThead.style = stylesCss;
+
+export { ZThead as Z };

package/dist/esm/index-77b7d7ae.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { B as ButtonVariant, e as ControlSize } from './index-9c5d63ea.js';
+
+const stylesCss = ":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}}";
+
+const ZTd = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.colspanChange = createEvent(this, "colspanChange", 6);
+    /**
+     * Whether the cell should stick.
+     */
+    this.sticky = false;
+    /**
+     * Enables the contextual menu.
+     * Can be set to "hover" or "always" to show the button only on cell hover or always.
+     * Set a nullish value to hide the menu button.
+     */
+    this.showMenu = null;
+    /**
+     * Store the open state of the menu.
+     */
+    this.isMenuOpen = false;
+  }
+  updateColspan() {
+    if (this.colspan) {
+      this.host.style.gridColumn = `span ${this.colspan}`;
+    }
+    else {
+      this.host.style.removeProperty("grid-column");
+    }
+    this.colspanChange.emit(this.colspan || 1);
+  }
+  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" }))))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "colspan": ["updateColspan"]
+  }; }
+};
+ZTd.style = stylesCss;
+
+export { ZTd as Z };

package/dist/esm/index-83736b34.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-a2ca4b97.js';
+
+const stylesCss = ":host{display:none;background-color:var(--gray50)}:host>td>div.content-container{margin-bottom:calc(var(--space-unit) / 2);box-shadow:var(--shadow-2)}";
+
+const ZTableExpandedRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("td", { colSpan: this.colSpan }, h("div", { class: "content-container" }, h("slot", null))));
+  }
+};
+ZTableExpandedRow.style = stylesCss;
+
+export { ZTableExpandedRow as Z };

package/dist/esm/index-8c7b48bc.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
+
+const stylesCss = ":host{display:block;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}";
+
+const ZTfoot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * If true, the footer will be stuck to the bottom of the table.
+     */
+    this.sticky = false;
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+};
+ZTfoot.style = stylesCss;
+
+export { ZTfoot as Z };

package/dist/esm/{index-7e4df1be.js → index-9c5d63ea.js}

@@ -134,7 +134,6 @@ var SortDirection;
 (function (SortDirection) {
   SortDirection["ASC"] = "asc";
   SortDirection["DESC"] = "desc";
-  SortDirection["NONE"] = "none";
 })(SortDirection || (SortDirection = {}));
 var AvatarSize;
 (function (AvatarSize) {
@@ -149,14 +148,6 @@ var ListSize;
   ListSize["LARGE"] = "large";
   ListSize["X_LARGE"] = "x-large";
 })(ListSize || (ListSize = {}));
-var Size;
-(function (Size) {
-  Size["X_SMALL"] = "x-small";
-  Size["SMALL"] = "small";
-  Size["MEDIUM"] = "medium";
-  Size["LARGE"] = "large";
-  Size["SPECIAL"] = "special";
-})(Size || (Size = {}));
 var ExpandableListStyle;
 (function (ExpandableListStyle) {
   ExpandableListStyle["ACCORDION"] = "accordion";
@@ -334,5 +325,10 @@ var BreadcrumbHomepageVariant;
   BreadcrumbHomepageVariant["TEXT"] = "text";
   BreadcrumbHomepageVariant["ICON"] = "icon";
 })(BreadcrumbHomepageVariant || (BreadcrumbHomepageVariant = {}));
+var VisibilityCondition;
+(function (VisibilityCondition) {
+  VisibilityCondition["HOVER"] = "hover";
+  VisibilityCondition["ALWAYS"] = "always";
+})(VisibilityCondition || (VisibilityCondition = {}));
 
-export { AvatarSize as A, ButtonVariant as B, CardVariant as C, DividerSize as D, ExpandableListStyle as E, ZDatePickerMode as F, ZDatePickerModeValue as G, ZDatePickerPosition as H, InputType as I, ZRangePickerMode as J, KeyboardKeyCode as K, LicenseType as L, InfoRevealPosition as M, NavigationTabsOrientation as N, OffCanvasVariant as O, PopoverPosition as P, CoverHeroVariant as Q, CoverHeroContentPosition as R, SortDirection as S, ThemeVariant as T, CarouselArrowsPosition as U, CarouselProgressMode as V, BreadcrumbPathStyle as W, BreadcrumbHomepageVariant as X, ZTableRowExpandedType as Z, NavigationTabsSize as a, NavigationTabsKeyboardEvents as b, ButtonType as c, ButtonSize as d, ControlSize as e, InputStatus as f, KeyboardCode as g, DividerOrientation as h, ListSize as i, Size as j, ExpandableListButtonAlign as k, LabelPosition as l, ListDividerType as m, ListType as n, NotificationType as o, AlertType as p, Device as q, PocketStatus as r, ToastNotification as s, ToastNotificationTransition as t, ToastNotificationPosition as u, ZAriaAlertMode as v, TransitionDirection as w, ZFileUploadType as x, ZChipType as y, ZSectionTitleDividerPosition as z };
+export { AvatarSize as A, ButtonVariant as B, CardVariant as C, DividerSize as D, ExpandableListStyle as E, ZDatePickerModeValue as F, ZDatePickerPosition as G, ZRangePickerMode as H, InputType as I, InfoRevealPosition as J, KeyboardKeyCode as K, LicenseType as L, CoverHeroVariant as M, NavigationTabsOrientation as N, OffCanvasVariant as O, PopoverPosition as P, CoverHeroContentPosition as Q, CarouselArrowsPosition as R, SortDirection as S, ThemeVariant as T, CarouselProgressMode as U, BreadcrumbPathStyle as V, BreadcrumbHomepageVariant as W, VisibilityCondition as X, ZTableRowExpandedType as Z, NavigationTabsSize as a, NavigationTabsKeyboardEvents as b, ButtonType as c, ButtonSize as d, ControlSize as e, InputStatus as f, KeyboardCode as g, DividerOrientation as h, ListSize as i, ExpandableListButtonAlign as j, LabelPosition as k, ListDividerType as l, ListType as m, NotificationType as n, AlertType as o, Device as p, PocketStatus as q, ToastNotification as r, ToastNotificationTransition as s, ToastNotificationPosition as t, ZAriaAlertMode as u, TransitionDirection as v, ZFileUploadType as w, ZChipType as x, ZSectionTitleDividerPosition as y, ZDatePickerMode as z };

package/dist/esm/index-a2ca4b97.js

@@ -2080,6 +2080,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-table-body.entry.js').then(processMod, consoleError);
+        case 'z-table-deprecated':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-table-deprecated.entry.js').then(processMod, consoleError);
         case 'z-table-expanded-row':
           return import(
             /* webpackMode: "lazy" */
@@ -2108,6 +2112,26 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-tag.entry.js').then(processMod, consoleError);
+        case 'z-tbody':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-tbody.entry.js').then(processMod, consoleError);
+        case 'z-td':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-td.entry.js').then(processMod, consoleError);
+        case 'z-tfoot':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-tfoot.entry.js').then(processMod, consoleError);
+        case 'z-th':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-th.entry.js').then(processMod, consoleError);
+        case 'z-thead':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-thead.entry.js').then(processMod, consoleError);
         case 'z-toast-notification':
           return import(
             /* webpackMode: "lazy" */
@@ -2128,6 +2152,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './z-tooltip.entry.js').then(processMod, consoleError);
+        case 'z-tr':
+          return import(
+            /* webpackMode: "lazy" */
+            './z-tr.entry.js').then(processMod, consoleError);
         case 'z-visually-hidden':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/index-a66b7e8a.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { r as randomId } from './utils-d7278f26.js';
+import './index-77b7d7ae.js';
+import './index-fff6ed17.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}";
+
+const ZTr = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.expand = createEvent(this, "expand", 7);
+    /**
+     * Whether the row is expandable.
+     * Use a `z-td` as the last cell of the row for the additional content.
+     * It will show a button to expand/collapse the row.
+     * The last cell will be hidden until the button or row is clicked.
+     *
+     * If some element inside the expandable row contains the `prevent-expand` css class,
+     * the row will not expand by clicking that element.
+     */
+    this.expandable = false;
+    /**
+     * Whether the row is currently expanded.
+     */
+    this.expanded = false;
+  }
+  updateColumns() {
+    const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
+    if (this.expandable) {
+      cells.pop();
+    }
+    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+    this.host.style.setProperty("--columns", `${columns}`);
+    if (this.expandable) {
+      const expandableContent = cells.pop();
+      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
+      this.expandableContentId = expandableContent.id;
+    }
+  }
+  /**
+   * Handle click on row.
+   * Skip expansion if the click is on a element with `prevent-expand` css class.
+   */
+  onRowClick(event) {
+    const preventExpand = event.target.closest(".prevent-expand");
+    if (!this.expandable || preventExpand) {
+      return;
+    }
+    this.expanded = !this.expanded;
+    this.expand.emit({ expanded: this.expanded });
+  }
+  componentWillLoad() {
+    this.updateColumns();
+  }
+  render() {
+    return (h(Host, { role: "row", onClick: this.onRowClick.bind(this), expanded: this.expanded }, h("div", { class: "z-tr--expand-button-container" }, this.expandable && (h("button", { "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { onSlotchange: this.updateColumns.bind(this) })));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "expandable": ["updateColumns"]
+  }; }
+};
+ZTr.style = stylesCss;
+
+export { ZTr as Z };

package/dist/esm/index-db083023.js

@@ -0,0 +1,77 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { B as ButtonVariant, d as ButtonSize, P as PopoverPosition } from './index-9c5d63ea.js';
+import { d as getElementTree } from './utils-d7278f26.js';
+
+const stylesCss = ":host{position:relative;display:table-cell;border-bottom:var(--border-size-medium) solid var(--gray200);background-color:var(--gray50);font-family:var(--dashboard-font);font-weight:var(--font-sb);text-align:start}.container{display:flex;align-items:flex-end}:host(.sortable){cursor:pointer}:host([padding=\"x-small\"]){padding:calc(var(--space-unit) * 0.5)}:host([padding=\"small\"]){padding:calc(var(--space-unit))}:host([padding=\"medium\"]){padding:calc(var(--space-unit) * 2)}:host([padding=\"large\"]){padding:calc(var(--space-unit) * 2.5)}:host([padding=\"special\"]){padding:0}.arrow{padding-left:var(--space-unit);opacity:1}.popover-container{position:absolute;top:var(--space-unit);right:var(--space-unit);display:none}.popover-container z-popover{--z-popover-theme--surface:var(--gray200);position:relative;z-index:1}.popover-container.visible{display:block}:host(:hover) .popover-container{display:block}";
+
+const ZTableHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sort = createEvent(this, "sort", 7);
+    /** Set padding size of cell, if special 0px padding will be set */
+    this.padding = "medium";
+    /** [Optional] Default sort order */
+    this.defaultSortDirection = "asc";
+    /** Sort direction */
+    this.sortDirection = "none";
+    this.emitOnSort = this.emitOnSort.bind(this);
+  }
+  emitOnSort() {
+    this.sort.emit({
+      columnId: this.columnId,
+      sortDirection: this.sortDirection,
+    });
+  }
+  handleSort() {
+    if (!this.sortable) {
+      return;
+    }
+    this.sortDirection = (() => {
+      switch (this.sortDirection) {
+        case "asc":
+          return "desc";
+        case "desc":
+          return "asc";
+        case "none":
+          return this.defaultSortDirection;
+        default:
+          return "none";
+      }
+    })();
+    this.emitOnSort();
+  }
+  handleMenuClick() {
+    this.popover.open = !this.popover.open;
+  }
+  handleOutsideClick(e) {
+    const tree = getElementTree(e.target);
+    const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
+    if (!parent && this.popover) {
+      this.popover.open = false;
+    }
+  }
+  handleClickHeaders(e) {
+    const target = e.target;
+    const parent = getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-table-header");
+    if (!this.sortable || !parent) {
+      return;
+    }
+    const parentColumnId = parent.attributes.getNamedItem("column-id").value;
+    const isSortable = target.parentNode.sortable || target.sortable;
+    if (parentColumnId !== this.columnId && isSortable) {
+      this.sortDirection = "none";
+    }
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "columnheader");
+  }
+  render() {
+    return (h(Host, { class: {
+        sortable: this.sortable,
+      }, onClick: () => this.handleSort() }, h("div", { class: "container" }, h("slot", null), this.sortable && this.sortDirection !== "none" && (h("z-icon", { name: this.sortDirection === "asc" ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPosition.BOTTOM, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
+  }
+  get host() { return getElement(this); }
+};
+ZTableHeader.style = stylesCss;
+
+export { ZTableHeader as Z };

package/dist/esm/index-e2c8b8b5.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
+
+const stylesCss = "z-table-header-row{display:table-row}z-table-header-row[expandable]>z-table-header:first-child{width:40px;box-sizing:border-box;user-select:none}z-table-header-row[expandable]>z-table-header:nth-child(2){padding-left:8px}";
+
+const ZTableHeaderRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  renderExpandHeader() {
+    return h("z-table-header", null);
+  }
+  render() {
+    return (h(Host, { role: "row" }, this.expandable && this.renderExpandHeader(), h("slot", null)));
+  }
+};
+ZTableHeaderRow.style = stylesCss;
+
+export { ZTableHeaderRow as Z };

package/dist/esm/index-f171ca51.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-a2ca4b97.js';
+
+const stylesCss = ":host{display:block;box-sizing:border-box}";
+
+const ZTbody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "rowgroup" }, h("slot", null)));
+  }
+};
+ZTbody.style = stylesCss;
+
+export { ZTbody as Z };

package/dist/esm/index-f98f4ad3.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, g as getElement } from './index-a2ca4b97.js';
+
+const stylesCss = ".sc-z-table-footer-h{display:table-footer-group;font-family:var(--dashboard-font);font-weight:var(--font-rg)}";
+
+const ZTableFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  componentWillRender() {
+    this.host.setAttribute("role", "rowgroup");
+  }
+  render() {
+    return h("slot", null);
+  }
+  get host() { return getElement(this); }
+};
+ZTableFooter.style = stylesCss;
+
+export { ZTableFooter as Z };

package/dist/esm/index-fff6ed17.js

@@ -0,0 +1,68 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2ca4b97.js';
+import { S as SortDirection, B as ButtonVariant, e as ControlSize } from './index-9c5d63ea.js';
+
+const stylesCss = ":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}}:host{background-color:var(--color-surface02);font-weight:var(--font-sb)}:host([sortable]){cursor:pointer}.z-th--sort-button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin-top:auto;background-color:transparent;cursor:pointer}.z-th--sort-button:focus{box-shadow:var(--shadow-focus-primary);outline:none}";
+
+const ZTh = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sort = createEvent(this, "sort", 7);
+    /**
+     * Enables the contextual menu.
+     * Can be set to "hover" or "always" to show the button only on cell hover or always.
+     * Set a nullish value to hide the menu button.
+     */
+    this.showMenu = null;
+    /**
+     * Whether the cell should stick.
+     */
+    this.sticky = false;
+    /**
+     * Store the open state of the menu.
+     */
+    this.isMenuOpen = false;
+  }
+  /**
+   * Get the value to set to the `aria-sort` attribute based on the current sort direction.
+   */
+  get ariaSortDirection() {
+    if (!this.sortDirection) {
+      return null;
+    }
+    return this.sortDirection === SortDirection.ASC ? "ascending" : "descending";
+  }
+  /**
+   * Handle the click on the sort button.
+   * @fires sort
+   */
+  handleSort() {
+    if (!this.sortDirection) {
+      return;
+    }
+    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
+    this.sort.emit({
+      sortDirection: this.sortDirection,
+    });
+  }
+  updateColspan() {
+    if (this.colspan) {
+      this.host.style.gridColumn = `span ${this.colspan}`;
+    }
+    else {
+      this.host.style.removeProperty("grid-column");
+    }
+  }
+  componentWillLoad() {
+    this.updateColspan();
+  }
+  render() {
+    return (h(Host, { role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, h("slot", null), this.sortDirection && (h("button", { class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { name: this.sortDirection === SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { class: "cell--menu-container" }, 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" }))))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "colspan": ["updateColspan"]
+  }; }
+};
+ZTh.style = stylesCss;
+
+export { ZTh as Z };

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { c as colorFromId } from './utils-825aed23.js';
-export { p as AlertType, A as AvatarSize, X as BreadcrumbHomepageVariant, W as BreadcrumbPathStyle, d as ButtonSize, c as ButtonType, B as ButtonVariant, C as CardVariant, U as CarouselArrowsPosition, V as CarouselProgressMode, e as ControlSize, R as CoverHeroContentPosition, Q as CoverHeroVariant, q as Device, h as DividerOrientation, D as DividerSize, k as ExpandableListButtonAlign, E as ExpandableListStyle, M as InfoRevealPosition, f as InputStatus, I as InputType, g as KeyboardCode, K as KeyboardKeyCode, l as LabelPosition, L as LicenseType, m as ListDividerType, i as ListSize, n as ListType, b as NavigationTabsKeyboardEvents, N as NavigationTabsOrientation, a as NavigationTabsSize, o as NotificationType, O as OffCanvasVariant, r as PocketStatus, P as PopoverPosition, j as Size, S as SortDirection, T as ThemeVariant, s as ToastNotification, u as ToastNotificationPosition, t as ToastNotificationTransition, w as TransitionDirection, v as ZAriaAlertMode, y as ZChipType, F as ZDatePickerMode, G as ZDatePickerModeValue, H as ZDatePickerPosition, x as ZFileUploadType, J as ZRangePickerMode, z as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-7e4df1be.js';
+import { c as colorFromId } from './utils-d7278f26.js';
+export { o as AlertType, A as AvatarSize, W as BreadcrumbHomepageVariant, V as BreadcrumbPathStyle, d as ButtonSize, c as ButtonType, B as ButtonVariant, C as CardVariant, R as CarouselArrowsPosition, U as CarouselProgressMode, e as ControlSize, Q as CoverHeroContentPosition, M as CoverHeroVariant, p as Device, h as DividerOrientation, D as DividerSize, j as ExpandableListButtonAlign, E as ExpandableListStyle, J as InfoRevealPosition, f as InputStatus, I as InputType, g as KeyboardCode, K as KeyboardKeyCode, k as LabelPosition, L as LicenseType, l as ListDividerType, i as ListSize, m as ListType, b as NavigationTabsKeyboardEvents, N as NavigationTabsOrientation, a as NavigationTabsSize, n as NotificationType, O as OffCanvasVariant, q as PocketStatus, P as PopoverPosition, S as SortDirection, T as ThemeVariant, r as ToastNotification, t as ToastNotificationPosition, s as ToastNotificationTransition, v as TransitionDirection, X as VisibilityCondition, u as ZAriaAlertMode, x as ZChipType, z as ZDatePickerMode, F as ZDatePickerModeValue, G as ZDatePickerPosition, w as ZFileUploadType, H as ZRangePickerMode, y as ZSectionTitleDividerPosition, Z as ZTableRowExpandedType } from './index-9c5d63ea.js';
 import './breakpoints-9b81eb1b.js';
 
 const UTILS = {