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

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

@@ -2,10 +2,9 @@ import { Host, h } from "@stencil/core";
 import { KeyboardCode } from "../../../beans";
 export class ZTreeList {
     constructor() {
-        this.parsedItems = [];
+        /** Items to render, if they have the url property they will be rendered as clickable links */
         this.items = [];
-        this.htmlAriaLabelledby = undefined;
-        this.htmlSectionTitle = undefined;
+        this.parsedItems = [];
     }
     watchItems() {
         this.parsedItems = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -94,7 +93,7 @@ export class ZTreeList {
     }
     render() {
         const hasClickableItems = this.parsedItems.some((item) => !!item.url);
-        return (h(Host, { key: 'f6165d141d1ae1f40876c63f72ea0d196960f519', class: "tree-list", role: hasClickableItems ? "navigation" : "none", "aria-hidden": hasClickableItems ? undefined : "true", "aria-labelledby": this.htmlAriaLabelledby }, h("div", { key: '77ebd44ff71d71dc52b6a32fbc13232d0b6f93be', 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"; }
@@ -120,7 +119,8 @@ export class ZTreeList {
                         "TreeListItem": {
                             "location": "import",
                             "path": "../../../beans",
-                            "id": "src/beans/index.tsx::TreeListItem"
+                            "id": "src/beans/index.tsx::TreeListItem",
+                            "referenceLocation": "TreeListItem"
                         }
                     }
                 },
@@ -130,8 +130,10 @@ export class ZTreeList {
                     "tags": [],
                     "text": "Items to render, if they have the url property they will be rendered as clickable links"
                 },
-                "attribute": "items",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "items",
                 "defaultValue": "[]"
             },
             "htmlAriaLabelledby": {
@@ -148,8 +150,10 @@ export class ZTreeList {
                     "tags": [],
                     "text": "Used for aria-labelledby attribute, sets name in \"navigation\""
                 },
-                "attribute": "html-aria-labelledby",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "html-aria-labelledby"
             },
             "htmlSectionTitle": {
                 "type": "string",
@@ -165,8 +169,10 @@ export class ZTreeList {
                     "tags": [],
                     "text": "Used for aria-label attribute, sets name in \"tree\""
                 },
-                "attribute": "html-section-title",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "html-section-title"
             }
         };
     }
@@ -196,4 +202,3 @@ export class ZTreeList {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,69 @@
+: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;
+  }
+}

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

@@ -6,10 +6,23 @@ import { ButtonVariant, ControlSize, PopoverPosition } from "../../../../beans";
  */
 export class ZTd {
     constructor() {
-        this.colspan = undefined;
+        /**
+         * 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() {
@@ -29,18 +42,18 @@ export class ZTd {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: 'eaa97de639cf8d1f64bb3e4a8b826a3dd2debfb4', role: "cell", "menu-open": this.isMenuOpen }, h("div", { key: '11e1bf9ba47637968fd0373d489e5d8844bb4304', class: "cell--content" }, h("slot", { key: 'f09ea15ae261639c73fc13abbf1382cf21c7ab44' }), this.showMenu && (h("div", { key: 'b59ec3e965b62f42a7c07a56fed17a1ffc4251a4', class: "cell--menu-container prevent-expand" }, h("z-button", { key: '836df0132f086767313c774f15a5118b52031da5', variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: this.onMenuButtonClick.bind(this) }), h("z-popover", { key: '5f67dc7eb6f5273d536a399b46e5c3e7b3ab1573', class: "cell-popover", ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: 'ee20304c588e9e8ebdd4a31ac410f247c5fa560c', 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() {
@@ -59,8 +72,10 @@ export class ZTd {
                     "tags": [],
                     "text": "Number of columns that the cell should span."
                 },
-                "attribute": "colspan",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colspan"
             },
             "sticky": {
                 "type": "boolean",
@@ -76,8 +91,10 @@ export class ZTd {
                     "tags": [],
                     "text": "Whether the cell should stick."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
             },
             "showMenu": {
@@ -90,7 +107,8 @@ export class ZTd {
                         "VisibilityCondition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::VisibilityCondition"
+                            "id": "src/beans/index.tsx::VisibilityCondition",
+                            "referenceLocation": "VisibilityCondition"
                         }
                     }
                 },
@@ -100,8 +118,10 @@ export class ZTd {
                     "tags": [],
                     "text": "Enables the contextual menu.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the menu button."
                 },
-                "attribute": "show-menu",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-menu",
                 "defaultValue": "null"
             },
             "popoverPosition": {
@@ -114,7 +134,8 @@ export class ZTd {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition",
+                            "referenceLocation": "PopoverPosition"
                         }
                     }
                 },
@@ -124,8 +145,10 @@ export class ZTd {
                     "tags": [],
                     "text": "Set the popover position, the default is \"auto\"."
                 },
-                "attribute": "popover-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "popover-position",
                 "defaultValue": "PopoverPosition.AUTO"
             }
         };
@@ -161,4 +184,3 @@ export class ZTd {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -7,13 +7,33 @@ import { ButtonVariant, ControlSize, PopoverPosition, SortDirection } from "../.
  */
 export class ZTh {
     constructor() {
-        this.colspan = undefined;
+        /**
+         * 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;
-        this.sortDirection = undefined;
+        /**
+         * 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;
     }
     /**
@@ -50,18 +70,18 @@ export class ZTh {
         this.updateColspan();
     }
     render() {
-        return (h(Host, { key: '411a78aacd4b76ea9180828a7567aaaa92f9a3fa', role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection, sortable: this.showSorting }, h("div", { key: 'a4d93cc27f9e8e69cffac93180ac54c9a6f79a21', class: "cell--content" }, h("slot", { key: 'b205cd6628dbfd09638a23ea6ad4bbe577303a87' }), this.showSorting && (h("button", { key: 'e28f86801a946cd89a30c9b8e289a653916299da', class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { key: 'fbbb4bb4ff4cfba7958afbf05edad06b5e8c725c', name: this.sortDirection === SortDirection.DESC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { key: '0d288653fbaef390090c540d4c3ac707d30a05c2', class: "cell--menu-container" }, h("z-button", { key: 'ff413fe7178f5d072fdee95f42ca37f06b6b7a92', 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: '675231832d5e2adf277f470b476ca7e4d5579272', ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { key: '6f3dba38c66701f7bf169a35b6793a09388c6bb2', 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() {
@@ -80,8 +100,10 @@ export class ZTh {
                     "tags": [],
                     "text": "Number of columns that the cell should span."
                 },
-                "attribute": "colspan",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "colspan"
             },
             "showMenu": {
                 "type": "string",
@@ -93,7 +115,8 @@ export class ZTh {
                         "VisibilityCondition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::VisibilityCondition"
+                            "id": "src/beans/index.tsx::VisibilityCondition",
+                            "referenceLocation": "VisibilityCondition"
                         }
                     }
                 },
@@ -103,8 +126,10 @@ export class ZTh {
                     "tags": [],
                     "text": "Enables the contextual menu.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the menu button."
                 },
-                "attribute": "show-menu",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-menu",
                 "defaultValue": "null"
             },
             "showSorting": {
@@ -117,7 +142,8 @@ export class ZTh {
                         "VisibilityCondition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::VisibilityCondition"
+                            "id": "src/beans/index.tsx::VisibilityCondition",
+                            "referenceLocation": "VisibilityCondition"
                         }
                     }
                 },
@@ -127,8 +153,10 @@ export class ZTh {
                     "tags": [],
                     "text": "Enables the sorting button.\nCan be set to \"hover\" or \"always\" to show the button only on cell hover or always.\nSet a nullish value to hide the sort button."
                 },
-                "attribute": "show-sorting",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-sorting",
                 "defaultValue": "null"
             },
             "sticky": {
@@ -145,8 +173,10 @@ export class ZTh {
                     "tags": [],
                     "text": "Whether the cell should stick."
                 },
-                "attribute": "sticky",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sticky",
                 "defaultValue": "false"
             },
             "sortDirection": {
@@ -159,7 +189,8 @@ export class ZTh {
                         "SortDirection": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::SortDirection"
+                            "id": "src/beans/index.tsx::SortDirection",
+                            "referenceLocation": "SortDirection"
                         }
                     }
                 },
@@ -169,8 +200,10 @@ export class ZTh {
                     "tags": [],
                     "text": "Current sorting direction."
                 },
-                "attribute": "sort-direction",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "sort-direction"
             },
             "sorted": {
                 "type": "boolean",
@@ -186,8 +219,10 @@ export class ZTh {
                     "tags": [],
                     "text": "Sorted state of the column."
                 },
-                "attribute": "sorted",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "sorted",
                 "defaultValue": "false"
             },
             "popoverPosition": {
@@ -200,7 +235,8 @@ export class ZTh {
                         "PopoverPosition": {
                             "location": "import",
                             "path": "../../../../beans",
-                            "id": "src/beans/index.tsx::PopoverPosition"
+                            "id": "src/beans/index.tsx::PopoverPosition",
+                            "referenceLocation": "PopoverPosition"
                         }
                     }
                 },
@@ -210,8 +246,10 @@ export class ZTh {
                     "tags": [],
                     "text": "Set popover position."
                 },
-                "attribute": "popover-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "popover-position",
                 "defaultValue": "PopoverPosition.AUTO"
             }
         };
@@ -247,4 +285,3 @@ export class ZTh {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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,11 +6,16 @@ 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() {
+        /**
+         * Whether the table cells should show a border between them.
+         */
         this.bordered = false;
+        /**
+         * Whether the table contains some expandable rows.
+         */
         this.expandable = false;
     }
     updateExpandable() {
@@ -36,18 +41,18 @@ export class ZTable {
         (_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' }))));
     }
     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() {
@@ -66,8 +71,10 @@ export class ZTable {
                     "tags": [],
                     "text": "Whether the table cells should show a border between them."
                 },
-                "attribute": "bordered",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "bordered",
                 "defaultValue": "false"
             }
         };
@@ -79,4 +86,3 @@ export class ZTable {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

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,19 +5,18 @@ import { Host, h } from "@stencil/core";
  */
 export class ZTbody {
     render() {
-        return (h(Host, { key: '3ad959681c2649e9742c43b6b338802c75601707', role: "rowgroup" }, h("slot", { key: 'fa42cbad29615f222b8fe60843b35e4871007bd3' })));
+        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"]
         };
     }
 }
-//# sourceMappingURL=index.js.map