@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC6

package/dist/esm/z-stepper-item.entry.js

@@ -1,16 +1,10 @@
-import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
+import { r as registerInstance, h, H as Host } from './index-fIt9Ytc6.js';
 
-const stylesCss = ":host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:\"\"}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-default-success);color:var(--color-default-success)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-default-success)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}";
-const ZStepperItemStyle0 = stylesCss;
+const stylesCss = () => `:host{position:relative;width:calc(var(--space-unit) * 5);font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-icon-width:20px;--z-icon-height:20px}:host(:not(:last-child)){flex:1}:host(:not(:last-child))::after{position:absolute;z-index:1;top:calc(var(--space-unit) * 4 - var(--border-size-medium) / 2);right:calc(var(--space-unit) * 2);left:calc(var(--space-unit) * 3);display:block;width:auto;border-bottom:var(--border-size-medium) solid var(--color-disabled03);margin:0 calc(var(--space-unit) * -2) 0 calc(var(--space-unit) * 2);content:""}.stepper-item{display:flex;width:calc(var(--space-unit) * 5);flex-direction:column;align-items:center;padding:0;border:0;appearance:none;background:transparent;color:inherit;font-family:inherit;font-size:12px;line-height:16px;outline:0;text-decoration:none}.stepper-item span{display:none;width:calc(100% + calc(var(--space-unit) * 4));color:var(--color-default-text);text-align:center}:host([href]:not([disabled],[pressed])) .stepper-item{cursor:pointer}:host([disabled]) .stepper-item{pointer-events:none}:host([pressed]),:host([pressed]) .stepper-item{pointer-events:none}.indicator{display:flex;width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;justify-content:center;border:var(--border-size-medium) solid var(--color-primary01);margin:calc(var(--space-unit) * 2);background:var(--color-surface01);border-radius:50%;color:var(--color-primary01);content:counter(stepper);font-size:14px;font-weight:var(--font-sb);line-height:1}:host([pressed]:not([disabled])) .indicator{border-color:var(--color-hover-primary);background:var(--color-hover-primary);color:var(--color-text-inverse)}:host([href]:not([disabled]):focus-within) .indicator{box-shadow:var(--shadow-focus-primary)}:host([href]:not([disabled],[pressed],[checked])) .indicator:hover{border-color:var(--color-hover-primary);color:var(--color-hover-primary)}:host([disabled]) .indicator{border-color:var(--color-disabled02);background:var(--color-disabled01);color:var(--color-disabled03)}:host([checked]:not([disabled])) .indicator{border-color:var(--color-default-success);color:var(--color-default-success)}:host([checked]:not([disabled])) .indicator z-icon{fill:var(--color-default-success)}:host([checked]) .indicator z-icon>svg{width:24px;height:24px}@media (min-width: 768px){.stepper-item span{display:block}}@media (min-width: 1152px){:host{width:calc(var(--space-unit) * 10);--z-icon-width:24px;--z-icon-height:24px}:host(:not(:last-child))::after{top:calc(var(--space-unit) * 5 - var(--border-size-medium) / 2);left:calc(var(--space-unit) * 8)}.stepper-item{width:calc(var(--space-unit) * 10);font-size:18px;line-height:28px}.indicator{width:calc(var(--space-unit) * 6);height:calc(var(--space-unit) * 6);font-size:16px}}`;
 
 const ZStepperItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.index = undefined;
-        this.href = undefined;
-        this.pressed = undefined;
-        this.checked = undefined;
-        this.disabled = undefined;
     }
     getAttributes() {
         const href = this.href && !this.pressed && !this.disabled ? { onClick: () => (location.href = this.href) } : undefined;
@@ -20,11 +14,9 @@ const ZStepperItem = class {
         return Object.assign(Object.assign(Object.assign(Object.assign({}, href), role), current), tabindex);
     }
     render() {
-        return (h(Host, { key: '19c73e3cc4e553720f5fb782f73931737007f7a4', role: "listitem" }, h("button", Object.assign({ key: 'b2bcbd197fe0ba3b90442544f354589394ac0007', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'bc7e3054c6ece39171d65a03360ff16502a46b3c', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: 'e18deeb657c6ff859ba1e6cff18103550bf0a4db' }, h("slot", { key: '7646d57e96b50b8268e5353003a118737687c2b5' })))));
+        return (h(Host, { key: 'bb0ceb975a1380777583fd907c244bb4980fb606', role: "listitem" }, h("button", Object.assign({ key: 'd059cfce75ffd60f0f3d2215aaa639dcdfdbb500', class: "stepper-item", disabled: this.disabled }, this.getAttributes()), h("div", { key: 'ce84b4f682bc3f5a1753f6903493eba8d407bdf0', class: "indicator" }, this.checked ? h("z-icon", { name: "checkmark" }) : this.index), h("span", { key: '2252ddbf8636b2138f2620a9c1e3ba1eb08aa2b0' }, h("slot", { key: 'a04ee80011c0b71bcce5488f0d5f3594ecd65da1' })))));
     }
 };
-ZStepperItem.style = ZStepperItemStyle0;
+ZStepperItem.style = stylesCss();
 
 export { ZStepperItem as z_stepper_item };
-
-//# sourceMappingURL=z-stepper-item.entry.js.map

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

@@ -1,18 +1,15 @@
-import { r as registerInstance, h, a as Host } from './index-c8ceadeb.js';
+import { r as registerInstance, h, H as Host } from './index-fIt9Ytc6.js';
 
-const stylesCss = ":host{position:relative;display:flex;width:100%;max-width:100%;box-sizing:border-box;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}";
-const ZStepperStyle0 = stylesCss;
+const stylesCss = () => `:host{position:relative;display:flex;width:100%;max-width:100%;box-sizing:border-box;flex-direction:row;padding:0;margin:0;font-family:var(--font-family-sans);font-weight:var(--font-rg);list-style:none}@media (min-width: 768px){:host{padding:0 calc(var(--space-unit) * 2)}}`;
 
 const ZStepper = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '1d1f9c22822efd4ff78ada101c84a0989da9f71b', role: "navigation" }, h("slot", { key: 'f6068efbdab8ba800c82f5c89ed1e88e983ef369' })));
+        return (h(Host, { key: '10e061c4cb346cdd60da9a69036627bf96772337', role: "navigation" }, h("slot", { key: '670c077860b774216577c2d3d8b7be29f6c09ecb' })));
     }
 };
-ZStepper.style = ZStepperStyle0;
+ZStepper.style = stylesCss();
 
 export { ZStepper as z_stepper };
-
-//# sourceMappingURL=z-stepper.entry.js.map

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

@@ -1,21 +1,28 @@
-import { r as registerInstance, h, a as Host, g as getElement } from './index-c8ceadeb.js';
-import './index-599cd05a.js';
-import './index-41934729.js';
-import './index-21176e80.js';
-import './index-167f46ad.js';
-import './utils-8d6ca808.js';
-import './index-106473a8.js';
-import './breakpoints-d148bfde.js';
-import './index-4845b32f.js';
-import './index-39a920c4.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
+import './z-tbody.entry.js';
+import './z-tfoot.entry.js';
+import './z-thead.entry.js';
+import './z-tr.entry.js';
+import './utils-BEzZQwOB.js';
+import './index-BKCj6NR2.js';
+import './breakpoints-Q-tWjk7P.js';
+import './z-td.entry.js';
+import './z-th.entry.js';
 
-const stylesCss = ":host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);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)}";
-const ZTableStyle0 = stylesCss;
+const stylesCss$1 = () => `:host{position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit)}:host([expandable]){--z-table--expand-button-size:40px}`;
+
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}`;
 
 const ZTable = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Whether the table cells should show a border between them.
+         */
         this.bordered = false;
+        /**
+         * Whether the table contains some expandable rows.
+         */
         this.expandable = false;
     }
     updateExpandable() {
@@ -41,12 +48,10 @@ const ZTable = class {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '1dc0b6a5869c0b8fe376b4459f3e42645b02f572', expandable: this.expandable }, h("div", { key: '2f74e8b9fb38796d46b548d1b556be3bdb709494', class: "table", role: "table" }, h("slot", { key: '7eda6a332ac172f427851eabc16aca07667f871e' }))));
+        return (h(Host, { key: 'e6312c6e3bc53f74407f70eca34f9d0ede44b40d', expandable: this.expandable }, h("div", { key: 'e1009eab29f0b6a02533ee7b542095f6cd83e1a0', class: "table", role: "table" }, h("slot", { key: '6f3dbd3fdf96dec314a441c046333c1ab9f67cc1' }))));
     }
     get host() { return getElement(this); }
 };
-ZTable.style = ZTableStyle0;
+ZTable.style = stylesCss$1() + stylesCss();
 
 export { ZTable as z_table };
-
-//# sourceMappingURL=z-table.entry.js.map

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

@@ -1,4 +1,17 @@
-export { Z as z_tbody } from './index-599cd05a.js';
-import './index-c8ceadeb.js';
+import { r as registerInstance, h, H as Host } from './index-fIt9Ytc6.js';
 
-//# sourceMappingURL=z-tbody.entry.js.map
+const stylesCss$1 = () => `:host{display:block;box-sizing:border-box}`;
+
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}`;
+
+const ZTbody = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'ff5da26d4d754ab4da901422be45d9cd546807b9', role: "rowgroup" }, h("slot", { key: 'fe0a17ad217ca1eb372f9f176df75534a3971aa9' })));
+    }
+};
+ZTbody.style = stylesCss$1() + stylesCss();
+
+export { ZTbody as z_tbody };

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

@@ -1,5 +1,59 @@
-export { Z as z_td } from './index-4845b32f.js';
-import './index-c8ceadeb.js';
-import './index-106473a8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
+import { P as PopoverPosition, e as ControlSize, B as ButtonVariant } from './index-BKCj6NR2.js';
 
-//# sourceMappingURL=z-td.entry.js.map
+const zTableCellsCss = () => `:host{position:relative;display:flex;max-width:100%;align-items:center;background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}: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{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@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{z-index:1;opacity:1;pointer-events:all}}`;
+
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}`;
+
+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;
+        /**
+         * Set the popover position, the default is "auto".
+         */
+        this.popoverPosition = PopoverPosition.AUTO;
+        /**
+         * 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);
+    }
+    onMenuButtonClick(ev) {
+        ev.stopPropagation();
+        this.popoverEl.open = !this.popoverEl.open;
+    }
+    componentWillLoad() {
+        this.updateColspan();
+    }
+    render() {
+        return (h(Host, { key: '2c3552c5c30611595ac619e6ca3a1e93b3d37366', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'd13012a1f16aaa6ab44b4eea1dafa63cf1ebbd3a', class: "cell--content" }, h("slot", { key: 'b4571116c24bb99dc6ec76486fc948da89a5393b' }), this.showMenu && (h("div", { key: '6ebd3bfc1fcf8dce3afb91931309c4644efc2e49', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '3d01c8956127276eb765c3a9f4aabb4ed710b404', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: 'd04c06677e2e8efb5d80bfbfd7cc91c9cbff7231', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c389c6fdf131aeef86eae687df9c2f7fb6fbc3be', name: "contextual-menu" })))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "colspan": [{
+                "updateColspan": 0
+            }]
+    }; }
+};
+ZTd.style = zTableCellsCss() + stylesCss();
+
+export { ZTd as z_td };

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

@@ -1,4 +1,21 @@
-export { Z as z_tfoot } from './index-41934729.js';
-import './index-c8ceadeb.js';
+import { r as registerInstance, h, H as Host } from './index-fIt9Ytc6.js';
 
-//# sourceMappingURL=z-tfoot.entry.js.map
+const stylesCss$1 = () => `:host{display:block;box-sizing:border-box;margin-top:-1px}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}`;
+
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}`;
+
+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, { key: 'cdd4d2841caada167b8818ff534744445e0d8979', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '5cf911121ea09dcc13744e9d1d730be92f20cbf4' })));
+    }
+};
+ZTfoot.style = stylesCss$1() + stylesCss();
+
+export { ZTfoot as z_tfoot };

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

@@ -1,5 +1,88 @@
-export { Z as z_th } from './index-39a920c4.js';
-import './index-c8ceadeb.js';
-import './index-106473a8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
+import { P as PopoverPosition, S as SortDirection, e as ControlSize, B as ButtonVariant } from './index-BKCj6NR2.js';
 
-//# sourceMappingURL=z-th.entry.js.map
+const zTableCellsCss = () => `:host{position:relative;display:flex;max-width:100%;align-items:center;background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}: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{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@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{z-index:1;opacity:1;pointer-events:all}}`;
+
+const stylesCss$1 = () => `:host{z-index:1;padding:0;background-color:var(--color-background);font-weight:var(--font-sb)}:host([show-sorting]) .cell--content{column-gap:var(--space-unit)}.z-th--sort-button{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}.z-th--sort-button:focus,.z-th--sort-button:focus-visible{box-shadow:var(--shadow-focus-primary);opacity:1;outline:none;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-sorting="hover"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting="hover"]:hover) .z-th--sort-button,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting="always"]) .z-th--sort-button,:host([sorted]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting="hover"]:hover) .z-th--sort-button::after,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting="always"]) .z-th--sort-button::after,:host([sorted]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:""}`;
+
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}`;
+
+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;
+        /**
+         * Enables the sorting button.
+         * Can be set to "hover" or "always" to show the button only on cell hover or always.
+         * Set a nullish value to hide the sort button.
+         */
+        this.showSorting = null;
+        /**
+         * Whether the cell should stick.
+         */
+        this.sticky = false;
+        /**
+         * Sorted state of the column.
+         */
+        this.sorted = false;
+        /**
+         * Set popover position.
+         */
+        this.popoverPosition = PopoverPosition.AUTO;
+        /**
+         * 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) {
+            this.sorted = false;
+            return;
+        }
+        this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;
+        this.sorted = true;
+        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, { key: 'aef115e04b8a8c37c749a568bcb24250e062008b', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '5b78767c1d65440363c06d5e4b7137598e74d8b4', class: "cell--content" }, h("slot", { key: '340210db9182785b89ed01a26d6dc60558aa9f4f' }), this.showSorting && (h("button", { key: '2c6f42cbf3a2c1d37af04182731503accfe67362', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'ad73a2838da75772e84e431c36256e77bdf39157', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'd4c23d3a5b05ccea94a03efa6b10efc65e4a0cf4', class: "cell--menu-container" }, h("z-button", { key: 'fb0930c50cd3ac363e764ded3d7be227678a5d2d', 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", { key: 'b720485c31c2070d77e33bceacd5be582516ae38', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '7372fa0d1ca9773ebbf8b6c8ec581133967aafdf', name: "contextual-menu" })))))));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "colspan": [{
+                "updateColspan": 0
+            }]
+    }; }
+};
+ZTh.style = zTableCellsCss() + (stylesCss$1() + stylesCss());
+
+export { ZTh as z_th };

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

@@ -1,4 +1,26 @@
-export { Z as z_thead } from './index-21176e80.js';
-import './index-c8ceadeb.js';
+import { r as registerInstance, h, H as Host, d as getElement } from './index-fIt9Ytc6.js';
 
-//# sourceMappingURL=z-thead.entry.js.map
+const stylesCss$1 = () => `:host{--z-table--cells-background:var(     --color-background   );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)}:host(:focus-visible){box-shadow:none;outline:none}`;
+
+const stylesCss = () => `z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover tr:hover>td,table.z-table-hover tr:hover>th{background-color:var(--color-surface02);box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04)}`;
+
+const ZThead = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * If true, the header will be stuck to the top of the table.
+         */
+        this.sticky = false;
+        /**
+         * The element is focusable
+         */
+        this.isFocusable = false;
+    }
+    render() {
+        return (h(Host, { key: '0e43e10373817b9ee5e4f1574fb0d46b232c510d', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'aefd2ed2698efb7deabd11284f3d6cae95800e50' })));
+    }
+    get host() { return getElement(this); }
+};
+ZThead.style = stylesCss$1() + stylesCss();
+
+export { ZThead as z_thead };

package/dist/esm/z-toast-notification-list.entry.js

@@ -1,15 +1,16 @@
-import { r as registerInstance, h, g as getElement } from './index-c8ceadeb.js';
-import { s as ToastNotificationPosition } from './index-106473a8.js';
+import { r as registerInstance, h, d as getElement } from './index-fIt9Ytc6.js';
+import { s as ToastNotificationPosition } from './index-BKCj6NR2.js';
 
-const stylesCss = ":host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position=\"bottom-centre\"]),:host([position=\"bottom-right\"]),:host([position=\"bottom-left\"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"top-left\"]),:host([position=\"top-right\"]),:host([position=\"top-centre\"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position=\"top-centre\"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position=\"top-left\"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position=\"top-right\"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position=\"bottom-centre\"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position=\"bottom-right\"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position=\"bottom-left\"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}";
-const ZToastNotificationListStyle0 = stylesCss;
+const stylesCss = () => `:host{position:fixed;z-index:10000;display:flex;flex-flow:column nowrap;margin-top:calc(var(--space-unit) * 2);margin-bottom:calc(var(--space-unit) * 2);font-family:var(--font-family-sans);font-weight:var(--font-rg)}::slotted(z-toast-notification){width:100vw}::slotted(:not(:last-child)){margin-bottom:calc(var(--space-unit) * 1)}:host([position="bottom-centre"]),:host([position="bottom-right"]),:host([position="bottom-left"]){bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="top-left"]),:host([position="top-right"]),:host([position="top-centre"]){top:0;align-items:flex-start;justify-content:flex-start}@media only screen and (min-width: 768px){:host{margin:calc(var(--space-unit) * 3)}:host([position="top-centre"]){top:0;left:50%;align-items:center;justify-content:flex-start;transform:translateX(-50%)}:host([position="top-left"]){top:0;left:0;align-items:flex-start;justify-content:flex-start}:host([position="top-right"]){top:0;right:0;align-items:flex-end;justify-content:flex-start}:host([position="bottom-centre"]){bottom:0;left:50%;align-items:center;justify-content:flex-end;transform:translateX(-50%)}:host([position="bottom-right"]){right:0;bottom:0;align-items:flex-end;justify-content:flex-end}:host([position="bottom-left"]){bottom:0;left:0;align-items:flex-start;justify-content:flex-end}::slotted(z-toast-notification){width:50vw}}@media only screen and (min-width: 1366px){:host{margin:calc(var(--space-unit) * 4)}::slotted(z-toast-notification){width:33vw}}`;
 
 const ZToastNotificationList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.notificationArray = [];
+        /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
         this.position = ToastNotificationPosition.TOP_RIGHT;
+        /**Set the entry position of new notification in the list */
         this.newestontop = true;
+        this.notificationArray = [];
     }
     watchPropNewestontop(newValue) {
         this.hostElement.append(...this.notificationArray.reverse());
@@ -42,15 +43,15 @@ const ZToastNotificationList = class {
         }
     }
     render() {
-        return h("slot", { key: 'b05c58feada71e3eb2fcfcbd5a5f465b91c39ac3', name: "toasts" });
+        return h("slot", { key: '0566f651d80145e7781e792714aab742850714f7', name: "toasts" });
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
-        "newestontop": ["watchPropNewestontop"]
+        "newestontop": [{
+                "watchPropNewestontop": 0
+            }]
     }; }
 };
-ZToastNotificationList.style = ZToastNotificationListStyle0;
+ZToastNotificationList.style = stylesCss();
 
 export { ZToastNotificationList as z_toast_notification_list };
-
-//# sourceMappingURL=z-toast-notification-list.entry.js.map