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

package/dist/collection/components/list/z-list-element/index.js

@@ -157,7 +157,7 @@ export class ZListElement {
         }
     }
     render() {
-        return (h(Host, { key: '565d88705b517e78e6b9c05f5923903704472751', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: '6a1ccb7af0b9455e52e4b0b7699722a2f2e98f01', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: '64a7d40c04afdb7cd9fc1f090926d7de10341ef4', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'e781e6f655bd4a7d0987fef33d8b426caa7ed0aa', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
+        return (h(Host, { key: '9a06293fba7e3b74fe169d1d3e927a4abd7b17f1', "aria-expanded": this.expandable ? this.showInnerContent : null, onClick: this.handleClick, onFocus: () => this.ariaDescendantFocus.emit(this.listElementId), onKeyDown: this.handleKeyDown, clickable: this.clickable && !this.disabled, tabIndex: this.hasTreeItems ? undefined : this.htmlTabindex, role: this.hasTreeItems ? "none" : this.role }, h("div", { key: 'c962c30a71313bd84b1075ad03a96e4b5de77a42', class: this.hasTreeItems ? "tree-element-container" : "container", style: !this.disabled && { color: `var(--${this.color})` }, tabindex: "-1", id: `z-list-element-id-${this.listElementId}`, part: "list-item-container" }, h("div", { key: 'ccca86019dec23767ae7bcf5af988c7f2366d850', class: "z-list-element-container" }, this.renderExpandableButton(), this.renderContent()), this.renderExpandedContent()), this.dividerType === ListDividerType.ELEMENT && (h("z-divider", { key: 'f8f1b6053d0fe0415b520c4f1deaba92e24019b8', class: { "z-tree-list-divider": this.hasTreeItems }, color: this.dividerColor, size: this.dividerSize }))));
     }
     static get is() { return "z-list-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/z-list-group/index.js

@@ -44,11 +44,11 @@ export class ZListGroup {
         this.hasHeader = !!this.host.querySelector('[slot="header-title"]');
     }
     render() {
-        return (h(Host, { key: 'a2b30a3071d35ba28d8e485ff92a88e537a85290' }, h("div", { key: '528f17bfa6de4ccb252e86ec424b388f3d6d4ff0', class: {
+        return (h(Host, { key: 'cd9bd738252e44011edad7b468ad711a2ef83f12' }, h("div", { key: 'd2c2e41d50b4884b438ae7b25e9e2b06260df6ac', class: {
                 "z-list-group-header-container": true,
                 "has-header": this.hasHeader && !this.hasTreeItems,
                 "grouped-tree-list-header": this.hasTreeItems,
-            } }, h("slot", { key: '318ed932865eef9943a0f7ff7ae87e02a2ce968e', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: '3d6d1ea46c42420c86b4f5f22bf5d5bcb1c5268f', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: 'f02a9b862b895d421be12ba4eb9625269f086e03' })));
+            } }, h("slot", { key: 'c47a8ea2508c87bbd0688248dcae0350d159350a', name: "header-title" }), this.dividerType === ListDividerType.HEADER && (h("z-divider", { key: 'c0586eee517b42aaf76507286bd086abaecb8013', color: this.dividerColor, size: this.dividerSize }))), h("slot", { key: '5f558529f5de2f4b62403d239e8424eea6259fd3' })));
     }
     static get is() { return "z-list-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/list/z-tree-list/index.js

@@ -93,7 +93,7 @@ export class ZTreeList {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'ca5b846e86140efd7a98028001e646349cc5683a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: 'eac955c253173abb6e5f0992d356311dc52f9ee6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
+        return (h(Host, { key: '68d06fd53ad0f4bce01853b95aef0f7482f3304a', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '6b8010ae9caf73ec0a43b09f5d9610247110d1a6', tabIndex: -1, role: hasClickableItems ? "tree" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-label": this.htmlSectionTitle }, this.parsedItems.map((item, key) => this.renderTreeList(item, `${key}`)))));
     }
     static get is() { return "z-tree-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/cells/{z-td/styles.css → z-table-cells.css}

@@ -3,7 +3,6 @@
   display: flex;
   max-width: 100%;
   align-items: center;
-  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));
   background-color: var(--color-surface01);
   gap: calc(var(--space-unit) * 2) var(--space-unit);
 }
@@ -68,4 +67,3 @@
     pointer-events: all;
   }
 }
-

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

@@ -42,18 +42,18 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '65102becbf97d8f480c9e9c140965963e1b829a3', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: 'a91b370f73c8684038a75db6483ec88dd8b3f4d6', class: "cell--content" }, h("slot", { key: '2a9451f11c23f2dae4047b360d8af92606ce3e76' }), this.showMenu && (h("div", { key: '0a4f91d75fce51604253ada3775f06ec9c230ce0', class: "cell--menu-container prevent-expand" }, h("z-button", { key: 'fe6623726d645f2796ff88246bd887b2e5ec9396', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '1ce2729d0209e5218515c52f4425c3f02b05c1bd', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'b060d20d5e15380360f8bab9d502f85eb70a7995', name: "contextual-menu" })))))));
+        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" })))))));
     }
     static get is() { return "z-td"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css", "../../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css", "../../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

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

@@ -70,18 +70,18 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '326c1c5968ebd22021f5bc88d3c98cd558c31783', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: '935a692b283f76362fe5e3cc7cc2f8e38424f407', class: "cell--content" }, h("slot", { key: 'cce03a04640d1ee72e2e202f7526203136f4bb50' }), this.showSorting && (h("button", { key: 'c161a473f0b4e6d6b1a478ad0530c6d0938fc1a1', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: '4b9b3aab3b0ce9f14c2a181860c834098077dee3', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: 'cd3b0e8a851c8a414229f4976b8a227d99981ce0', class: "cell--menu-container" }, h("z-button", { key: '3d37441174ff3ea540c0aec582bc91c7c644c818', 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: '59de83e276e82705588041660e7612080b6636e8', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'c92e8e0a5c617251dc6741ff4d9cbe943f224111', name: "contextual-menu" })))))));
+        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" })))))));
     }
     static get is() { return "z-th"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css", "styles.css", "../../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../z-table-cells.css", "styles.css", "../../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/cells/z-th/styles.css

@@ -1,75 +1,3 @@
-:host {
-  position: relative;
-  display: flex;
-  max-width: 100%;
-  align-items: center;
-  padding: calc(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,
-* {
-  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;
-  }
-}
-
-
 :host {
   z-index: 1;
   padding: 0;
@@ -77,9 +5,9 @@
   font-weight: var(--font-sb);
 }
 
-.cell--content {
+/* .cell--content {
   padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));
-}
+} */
 
 :host([show-sorting]) .cell--content {
   column-gap: var(--space-unit);

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

@@ -6,7 +6,6 @@ import "../z-tr/index";
 /**
  * ZTable component.
  * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).
- * @cssprop --z-table--cells-padding - Padding of the cells.
  */
 export class ZTable {
     constructor() {
@@ -42,18 +41,18 @@ export class ZTable {
         (_a = this.expandableMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '19ac617eed1f9fc7c962e5f34e30c1c0feb0fa87', expandable: this.expandable }, h("div", { key: '648951c6bb94c6cc149f593ca42a50eafa287337', class: "table", role: "table" }, h("slot", { key: '08fb16a4c3ee50be9634833b2227593ba8651c01' }))));
+        return (h(Host, { key: 'e6312c6e3bc53f74407f70eca34f9d0ede44b40d', expandable: this.expandable }, h("div", { key: 'e1009eab29f0b6a02533ee7b542095f6cd83e1a0', class: "table", role: "table" }, h("slot", { key: '6f3dbd3fdf96dec314a441c046333c1ab9f67cc1' }))));
     }
     static get is() { return "z-table"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/z-table/styles.css

@@ -1,5 +1,7 @@
 :host {
-  --z-table--cells-padding: calc(var(--space-unit) * 2);
+  /**
+   * @prop --z-table--cells-padding: Padding of the cells.
+   */
 
   position: relative;
   display: block;
@@ -8,13 +10,8 @@
   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);
-}

package/dist/collection/components/table/z-tbody/index.js

@@ -5,18 +5,18 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: '62b5b227fbdaac2918101db68c60cb68ae9e1ed8', role: "rowgroup" }, h("slot", { key: 'ecfc5c26435fb7f03b5e9ea89111499b3b75f3ca' })));
+        return (h(Host, { key: 'ff5da26d4d754ab4da901422be45d9cd546807b9', role: "rowgroup" }, h("slot", { key: 'fe0a17ad217ca1eb372f9f176df75534a3971aa9' })));
     }
     static get is() { return "z-tbody"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
 }

package/dist/collection/components/table/z-tfoot/index.js

@@ -11,18 +11,18 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: '0ecae481f9b2e870d3f4d8898755d15e561154b7', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '7d028233f9e6ff2bfdbcc5b00841db5eb5020643' })));
+        return (h(Host, { key: 'cdd4d2841caada167b8818ff534744445e0d8979', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '5cf911121ea09dcc13744e9d1d730be92f20cbf4' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/z-tfoot/styles.css

@@ -1,8 +1,7 @@
 :host {
   display: block;
   box-sizing: border-box;
-  border-top: 1px solid var(--color-surface03);
-  border-bottom: 1px solid var(--color-surface03);
+  margin-top: -1px;
 }
 
 :host([sticky]) {

package/dist/collection/components/table/z-thead/index.js

@@ -15,18 +15,18 @@ export class ZThead {
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: 'a41caa6571e3a2e4c0b46df9c28507d347011c52', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'fbe9305e97ac906ce0296b871d65d33c75749bd1' })));
+        return (h(Host, { key: '0e43e10373817b9ee5e4f1574fb0d46b232c510d', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'aefd2ed2698efb7deabd11284f3d6cae95800e50' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/z-thead/styles.css

@@ -1,8 +1,4 @@
 :host {
-  --z-table--cells-bottom-border-size: var(
-    --border-size-medium
-  ); /* Needed to handle the border of the expand button cell */
-
   --z-table--cells-background: var(
     --color-background
   ); /* Needed to handle the background-color of the expand button cell */

package/dist/collection/components/table/z-tr/index.js

@@ -68,18 +68,18 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '22e2a75bc63f96ec1f293ecfd818f16e0aa9eb96', role: "row", tabIndex: 0, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '7d71cd5da22b1e921a53831316fa1cf0a90b4178', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '707e10ebfe2df07fd6f151af992d7289d76ab43c', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: '375fe42258137e52520556487cccb2bcf2378833', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '5e478114e1ba9d7982995acefa52f8ffc1b51831', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: '56f1c4bad517ee41792f500bd56408a42da440bb', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: '6675f95eeb22b498594fba6534c4c827febecc73', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '587ff79c6259984e7cbff6fae284a454152d1cf7', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: 'fa283ba74f8b62c16b37853031f01d278bb6e707', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'e009923873641b3cecf5f6736e56c7136134f226', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '403d4e5d99c796af9887c8d8f2b4ec8a9de7f9bd', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'afc75a162e1782b9aeb746961f0f51686e8c9213', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/z-tr/styles.css

@@ -13,15 +13,6 @@
   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;
 
@@ -37,6 +28,7 @@
 }
 
 :host([expandable]) ::slotted(*:last-child) {
+  border-top: var(--border-size-small) solid var(--color-surface03);
   border-left: 0;
   grid-column: 1 / span calc(var(--columns) + 1);
   grid-row: 2;
@@ -53,11 +45,12 @@
 
 :host([expanded]) .z-tr--expand-button-container,
 :host([expanded]) ::slotted(*) {
+  border-left: 0 !important;
   background-color: var(--color-background);
 }
 
-:host(:hover) ::slotted(z-td),
-:host(:hover) ::slotted(z-th) {
+:host(:hover):has([tabIndex]) ::slotted(z-td),
+:host(:hover):has([tabIndex]) ::slotted(z-th) {
   border-top: var(--border-size-small) solid var(--color-surface04);
   border-bottom: var(--border-size-small) solid var(--color-surface04);
   background-color: var(--color-surface02);
@@ -66,6 +59,7 @@
 :host(:focus) {
   position: relative;
   z-index: 20;
+  border: none !important;
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }

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

@@ -5,16 +5,8 @@ import { AccordionVariant, ControlSize } from "../../beans";
  *
  * @slot - Slot for the main content.
  * @slot tag - Slot for tags.
- * @cssprop --z-accordion-highlight-color - Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
- * @cssprop --z-accordion-bg - Background color of the summary. Default: `--color-surface02`.
- * @cssprop --z-accordion-label-color - Label color. Default: `--color-default-text`.
- * @cssprop --z-accordion-disabled-label-color - Label color when disabled. Default: `--color-text03`.
- * @cssprop --z-accordion-content-bg - Background color of the accordion. Default: `--color-surface02`.
- * @cssprop --z-accordion-content-fg - Content text color. Default: `--color-default-text`.
- * @cssprop --z-accordion-hover-color - Hover color of the summary. Default: `--color-surface03`.
- * @cssprop --z-accordion-left-padding - Left padding of the summary. Default: `--space-unit` * 2.
- * @cssprop --z-accordion-right-padding - Right padding of the summary. Default: `--space-unit`.
- * @cssprop --z-accordion-label-font-weight - Font weight of the summary label. Default: `--font-sb`.
+ * @part summary - The summary element that is always visible and acts as the accordion's toggle.
+ * @part content - The content element that is shown or hidden when the accordion is toggled.
  */
 export class ZAccordion {
     constructor() {
@@ -71,7 +63,7 @@ export class ZAccordion {
         this.checkSlottedTags();
     }
     render() {
-        return (h("details", { key: '172a7daef5025f190bec2ac50755edd73930b002', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: 'afef8986b1c567de4d979f4352b060841e2d9915', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '4d96182e2f30cc0d8a4920854775a5daa2f551c5', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: '339defc76d0ce353bff86e3c53067ceda6fa0350', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '9e25512f093b7770894aff7590d2a829ed48943b', class: "z-accordion-tags" }, h("slot", { key: 'f24b026310c4d00632a131502960dfdade72cf85', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: 'd930ae94ebc17c279626bcb4a94e5bcfbe490c3a', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: '8d33c1ead662fa11c01acaae2a3ee2ee72278bbb', class: "z-accordion-content", part: "content" }, h("slot", { key: 'fba6c3dd4ae6905f7e5d179a7b6af2de7bb4f8ca' })))));
+        return (h("details", { key: '677f29eb9a981a8444c6de2966101caa04063bdc', ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { key: '498a94e2aec123598bcf6b4cd7d755b72726d9e9', tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { key: '09eec9beaa82d2a2f81de5c0ea2d5ebee856b190', class: "z-accordion-label-icon", name: this.icon })), h("span", { key: 'dbf0026bd5a832300e17ec30da2cfaf7946d1c5e', class: "z-accordion-label" }, this.label), this.hasSlottedTags && (h("span", { key: '21b3f6c772537d97100d593d5415f7d73bdaeab6', class: "z-accordion-tags" }, h("slot", { key: '676b85cf03540aad8a2797073e0376d23816635a', name: "tag", onSlotchange: () => this.checkSlottedTags() }))), h("z-icon", { key: '45341fe9e93b6ceafb938b4345d065d684c40246', class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { key: 'dea671e91b2ddd6e2666304452cc2b60b7b8fda4', class: "z-accordion-content", part: "content" }, h("slot", { key: '382274fc573c359786db1a5cc986b1cc400e2960' })))));
     }
     static get is() { return "z-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-accordion/styles.css

@@ -5,6 +5,18 @@
 }
 
 :host {
+  /**
+   * @prop --z-accordion-highlight-color: Color of the highlight band on the summary's left edge. Only applies when `highlight` is true. Default: `transparent`.
+   * @prop --z-accordion-bg: Background color of the summary. Default: `--color-surface02`.
+   * @prop --z-accordion-label-color: Label color. Default: `--color-default-text`.
+   * @prop --z-accordion-disabled-label-color: Label color when disabled. Default: `--color-text03`.
+   * @prop --z-accordion-content-bg: Background color of the accordion. Default: `--color-surface02`.
+   * @prop --z-accordion-content-fg: Content text color. Default: `--color-default-text`.
+   * @prop --z-accordion-hover-color: Hover color of the summary. Default: `--color-surface03`.
+   * @prop --z-accordion-left-padding: Left padding of the summary. Default: `--space-unit` * 2.
+   * @prop --z-accordion-right-padding: Right padding of the summary. Default: `--space-unit`.
+   * @prop --z-accordion-label-font-weight: Font weight of the summary label. Default: `--font-sb`.
+   */
   --z-accordion-highlight-color: transparent;
   --z-accordion-bg: var(--color-surface01);
   --z-accordion-label-color: var(--color-default-text);

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

@@ -35,7 +35,7 @@ export class ZAnchorNavigation {
         this.collapsedLabel = "salta a";
         /**
          * Explicitly collapse anchor navigation.
-         * If false will collapse automatically only on mobile.
+         * If false, it will collapse automatically only on mobile.
          */
         this.isCollapsed = false;
         /**
@@ -71,7 +71,7 @@ export class ZAnchorNavigation {
         window.removeEventListener("hashchange", this.setCurrent);
     }
     render() {
-        return (h(Host, { key: '39d74e83a12d8fa3284190da2becd9fbe2f88211', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: 'b7a98b737dfd5d2499c9626a4e4ee626d92896da', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'b28787b604e8e2ef9ae6a6f6d2e9b6e162ce37f3', ref: (el) => (this.nav = el) }, h("slot", { key: 'aaaa4ab016f1916fd6b4ee6723882862884538b0' }))));
+        return (h(Host, { key: 'c7b47d775e9e264fa5b7b6f4496fcf1dccd5f28c', collapsed: this.collapsed, class: "z-scrollbar" }, h("z-button", { key: '3651fe999b1f8ed710a43e01034e57759001e614', class: "toggle", size: ControlSize.SMALL, variant: ButtonVariant.SECONDARY, icon: this.collapsed ? "chevron-up" : "chevron-down", onClick: this.toggleCollapsed.bind(this) }, this.collapsedLabel), h("nav", { key: 'beb6bb3d1f77451e63213dbc638b209ab6d34c17', ref: (el) => (this.nav = el) }, h("slot", { key: '1b35a2604b89a924ebb029affec3bb33d8193f81' }))));
     }
     static get is() { return "z-anchor-navigation"; }
     static get originalStyleUrls() {
@@ -158,7 +158,7 @@ export class ZAnchorNavigation {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Explicitly collapse anchor navigation.\nIf false will collapse automatically only on mobile."
+                    "text": "Explicitly collapse anchor navigation.\nIf false, it will collapse automatically only on mobile."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/z-app-header/index.js

@@ -9,12 +9,6 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  * @slot top-subtitle - Slot for the top subtitle. It will not appear in stuck header.
  * @slot stucked-title - Title for the stuck header. By default it uses the text from the `title` slot.
  * @slot product-logo - To insert the product logo, it should be used with an img tag.
- * @cssprop --app-header-content-max-width - Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
- * @cssprop --app-header-top-offset - Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
- * @cssprop --app-header-bg - Header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-text-color - Header text color. Defaults to `--color-default-text`.
- * @cssprop --app-header-stucked-bg - Stuck header background color. Defaults to `--color-surface01`.
- * @cssprop --app-header-stucked-text-color - Stuck header text color. Defaults to `--color-default-text`.
  */
 export class ZAppHeader {
     onStuck() {
@@ -198,7 +192,7 @@ export class ZAppHeader {
         if (this.searchPageUrl && (this.isMobile || this.isTablet)) {
             return (h("z-button", { class: "search-page-button", variant: ButtonVariant.SECONDARY, href: this.searchPageUrl, icon: "search", size: ControlSize.X_SMALL }));
         }
-        return (h("z-searchbar", { value: this.searchString, placeholder: this.searchPlaceholder, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
+        return (h("z-searchbar", { class: { "has-label": !!this.searchLabel }, value: this.searchString, placeholder: this.searchPlaceholder, label: this.searchLabel, showSearchButton: true, searchButtonIconOnly: this.isMobile || this.isTablet, searchButtonLabel: this.isMobile || this.isTablet ? undefined : this.searchButtonLabel, size: ControlSize.X_SMALL, variant: ButtonVariant.SECONDARY, preventSubmit: this.searchString.length < 3, onSearchTyping: (e) => (this.searchString = e.detail) }));
     }
     renderProductLogos() {
         return (h(Fragment, null, this.enableZLogo && (h("span", { class: "z-logo" }, h("img", { alt: "Logo Zanichelli" }))), this.hostElement.querySelector("[slot='product-logo']") && (h("span", { class: "product-logo" }, h("slot", { name: "product-logo" })))));
@@ -280,7 +274,7 @@ export class ZAppHeader {
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: 'dc030db81c271ed36850fb287d29ace79851d4a1', "menu-length": this.menuLength }, h("div", { key: '49d34b66c216a92c80eb9216fa52e48add4cee0a', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '29639ab6d0620491c69651139ddf8311e2177122', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'bc685fb828a89777bec6dcc5bc754534f83361cd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: 'cb2b1468f4b34d11dbf444f2cde0c7cce86cbd1e', name: "top-subtitle" }))), h("div", { key: '80036c45fcbd3d490b85f653efb35010b1639b6f', class: "heading-title" }, h("slot", { key: 'bc4a0397893534c0dac99e081ef0ba5d6db2ecd3', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: 'a72c2c657ae430e0cc6b134e843fec1c983e7777', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'b620b02b62b99b13e6b4c0c1be0997d3af448aeb', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '6c1887c703734a0e1ab4b77b821dad2e9bc0c3df', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '2daaf3501852cab84cf2b3a85a770553dc70a101', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a48e907303247432d294871a6810e996cc6f48f4', "menu-length": this.menuLength }, h("div", { key: '094aee9d0964cdcec17acde3ec7eaa1767b8ae31', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '0635f1f529b2f3e25db7bfc55579c3c3bd8995cb', class: { "heading-container": true, "has-top-subtitle": hasTopSubtitle } }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: 'a2104e8dd013fca97b2af2e57e95e108b423ecbd', class: { "top-subtitle": true, "has-product-logo": hasTopSubtitle && this.hasSlot("product-logo") } }, h("slot", { key: 'a6a7899aba37a27e24982567bc1b7242f4b9bf1b', name: "top-subtitle" }))), h("div", { key: 'e47339a0a8d9aaee0bd87c0cdf1434e553051030', class: "heading-title" }, h("slot", { key: '1212a43bb3d52591a53aea6fb587723750204578', name: "menu-button" }, this.renderMenuButton()), !this._stuck && this.renderProductLogos(), h("slot", { key: '9166a624ad670c914d630b3b5bb46877d46883c8', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'a39bc8d9020b6243e4b6ce885f0cfc52d8bd8d95', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: 'b58bbc10d6385c6b9404a47c512e912c22650d85', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: 'c50f81c40e06360ca293172752095155f2f574d4', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     static get is() { return "z-app-header"; }
     static get encapsulation() { return "shadow"; }
@@ -356,6 +350,25 @@ export class ZAppHeader {
                 "attribute": "enable-search",
                 "defaultValue": "false"
             },
+            "searchLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label for the search bar."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-label"
+            },
             "searchPlaceholder": {
                 "type": "string",
                 "mutable": false,
@@ -376,6 +389,25 @@ export class ZAppHeader {
                 "attribute": "search-placeholder",
                 "defaultValue": "\"Cerca\""
             },
+            "searchButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the search button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-button-label"
+            },
             "searchString": {
                 "type": "string",
                 "mutable": true,

package/dist/collection/components/z-app-header/styles.css

@@ -1,20 +1,17 @@
 :host {
+  /**
+   * @prop --app-header-content-max-width: Use it to set header's content max width. Useful when the project use a fixed width layout. Defaults to `100%`.
+   * @prop --app-header-top-offset: Top offset for the stuck header. Useful when there are other fixed elements above the header. Defaults to `48px` (the height of the main topbar).
+   * @prop --app-header-bg: Header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-text-color: Header text color. Defaults to `--color-default-text`.
+   * @prop --app-header-stucked-bg: Stuck header background color. Defaults to `--color-surface01`.
+   * @prop --app-header-stucked-text-color: Stuck header text color. Defaults to `--color-default-text`.
+   */
   --app-header-content-max-width: ;
-
-  /* Variable to set stuck header and drawer's top offset.
-  Useful when something is absolutely positioned above the header. */
   --app-header-top-offset: ;
-
-  /* Variable to customize header background color. */
   --app-header-bg: ;
-
-  /* Variable to customize text and icon color. */
   --app-header-text-color: ;
-
-  /* Variable to customize stuck header background color. */
   --app-header-stucked-bg: ;
-
-  /* Variable to customize stuck header's text and icon color. */
   --app-header-stucked-text-color: ;
 
   position: relative;
@@ -28,7 +25,6 @@
 }
 
 .heading-panel {
-  /* Title's line height. */
   --title-line-height: 1.333;
   --title-font-size: var(--font-size-6);
 
@@ -206,6 +202,10 @@ z-searchbar {
   align-items: center;
 }
 
+z-searchbar.has-label {
+  align-items: flex-end;
+}
+
 .heading-stuck {
   position: fixed;
   z-index: 20;