@zanichelli/albe-web-components 5.5.6-cs1 → 5.6.0

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

@@ -1,10 +1,10 @@
 z-table {
+  overflow-x: auto;
   display: block;
   width: 100%;
-  background-color: var(--color-white);
   font-family: var(--dashboard-font);
   font-weight: var(--font-rg);
-  overflow-x: auto;
+  background-color: var(--color-white);
 }
 
 z-table > div.table {
@@ -13,45 +13,99 @@ z-table > div.table {
   border-collapse: separate;
 }
 
-z-table > div.table-bordered > z-table-body > z-table-row > z-table-cell:not(:last-child),
-z-table > div.table-bordered > z-table-head > z-table-header-row > z-table-header:not(:last-child) {
+z-table
+  > div.table-bordered
+  > z-table-body
+  > z-table-row
+  > z-table-cell:not(:last-child),
+z-table
+  > div.table-bordered
+  > z-table-head
+  > z-table-header-row
+  > z-table-header:not(:last-child) {
   border-right: var(--border-size-small) solid var(--bg-grey-200);
 }
 
 /** Remove border right to first cell if row is expandable */
-z-table > div > z-table-body > z-table-row[expandable] > z-table-cell:first-child,
-z-table > div > z-table-head > z-table-header-row[expandable] > z-table-header:first-child {
+z-table
+  > div
+  > z-table-body
+  > z-table-row[expandable]
+  > z-table-cell:first-child,
+z-table
+  > div
+  > z-table-head
+  > z-table-header-row[expandable]
+  > z-table-header:first-child {
   border-right: none;
 }
 
-z-table > div > z-table-body > z-table-row[expanded] > z-table-cell {
+z-table
+  > div
+  > z-table-body
+  > z-table-row[expanded]
+  > z-table-cell {
   background-color: var(--gray50);
 }
 
-z-table > div > z-table-body > z-table-row[expanded] + z-table-expanded-row {
+z-table
+  > div
+  > z-table-body
+  > z-table-row[expanded]
+  + z-table-expanded-row {
   border-bottom: 1px solid var(--gray200);
 }
 
-z-table > div.table-column-sticky > z-table-body > z-table-row > z-table-cell:first-child,
-z-table > div.table-column-sticky > z-table-head > z-table-header-row > z-table-header:first-child {
+z-table
+  > div.table-column-sticky
+  > z-table-body
+  > z-table-row
+  > z-table-cell:first-child,
+z-table
+  > div.table-column-sticky
+  > z-table-head
+  > z-table-header-row
+  > z-table-header:first-child {
   position: sticky;
-  z-index: 1;
   left: 0;
-  box-shadow: 1px 0 4px -1px rgb(66 69 72 / 40%);
+  box-shadow: 1px 0 4px -1px rgba(66, 69, 72, 0.4);
+  z-index: 1;
 }
 
-z-table > div.table-header-sticky > z-table-head > z-table-header-row > z-table-header {
+z-table
+  > div.table-header-sticky
+  > z-table-head
+  > z-table-header-row
+  > z-table-header {
   position: sticky;
-  z-index: 2; /* L'ombra delle celle sticky non va sopra all'header fisso. */
   top: 0;
-  box-shadow: 0 2px 3px -3px rgb(66 69 72 / 40%);
+  box-shadow: 0 2px 3px -3px rgba(66, 69, 72, 0.4);
+}
+
+/**
+ * L'ombra delle celle sticky non va sopra all'header fisso.
+ */
+z-table
+  > div.table-header-sticky
+  > z-table-head
+  > z-table-header-row
+  > z-table-header {
+  z-index: 2;
 }
 
 /**
  * La cella in alto a sinistra rimane sempre sopra alle cell durante lo scroll.
  */
-z-table > div.table-header-sticky > z-table-head > z-table-header-row > z-table-header:first-child,
-z-table > div.table-column-sticky > z-table-head > z-table-header-row > z-table-header:first-child {
+z-table
+  > div.table-header-sticky
+  > z-table-head
+  > z-table-header-row
+  > z-table-header:first-child,
+z-table
+  > div.table-column-sticky
+  > z-table-head
+  > z-table-header-row
+  > z-table-header:first-child {
   z-index: 5;
 }
 
@@ -77,14 +131,14 @@ z-table-empty-box.bordered {
 
 .table-content {
   display: flex;
-  width: 100%;
   flex-direction: row;
+  width: 100%;
 }
 
 .error-content {
-  display: flex;
-  padding: calc(var(--space-unit) * 3);
   font-family: var(--dashboard-font);
+  padding: calc(var(--space-unit) * 3);
+  display: flex;
 }
 
 .error-content > img {
@@ -98,17 +152,14 @@ z-table-empty-box.bordered {
   z-table > div.table-empty {
     display: none;
   }
-
   .error-content {
     display: flex;
     flex-direction: column;
   }
-
   .error-content > img {
     width: auto;
     height: auto;
   }
-
   .text {
     padding: calc(var(--space-unit) * 3) 0;
   }

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

@@ -1,9 +1,10 @@
 import { h, Host } from "@stencil/core";
 import { ButtonVariantEnum, ButtonSizeEnum, Size } from "../../../beans";
+import classNames from "classnames";
 export class ZTableCell {
   constructor() {
     /** Set padding size of cell, if special 0px padding will be set */
-    this.padding = Size.MEDIUM;
+    this.padding = Size.medium;
     this.isMenuOpened = false;
   }
   handleMenu() {
@@ -13,13 +14,11 @@ export class ZTableCell {
     this.host.setAttribute("role", "cell");
   }
   render() {
-    return (h(Host, null, this.showButton && (h("div", { class: {
-        "button-container": true,
-        "visible": this.isMenuOpened,
-      } }, h("div", { class: "button-content" }, h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum.TERTIARY, size: ButtonSizeEnum.X_SMALL, onClick: () => this.handleMenu() }), h("div", { class: {
-        "contextual-menu-container": true,
-        "visible": this.isMenuOpened,
-      } }, h("slot", { name: "contextual-menu" }))))), h("slot", null)));
+    return (h(Host, null, this.showButton && (h("div", { class: classNames("button-container", {
+        visible: this.isMenuOpened,
+      }) }, h("div", { class: "button-content" }, h("z-button", { icon: "contextual-menu", variant: ButtonVariantEnum.tertiary, size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenu() }), h("div", { class: classNames("contextual-menu-container", {
+        visible: this.isMenuOpened,
+      }) }, h("slot", { name: "contextual-menu" }))))), h("slot", null)));
   }
   static get is() { return "z-table-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -57,7 +56,7 @@ export class ZTableCell {
         "mutable": false,
         "complexType": {
           "original": "Size",
-          "resolved": "Size.LARGE | Size.MEDIUM | Size.SMALL | Size.SPECIAL | Size.X_SMALL",
+          "resolved": "(typeof Size)[\"x-small\"] | Size.large | Size.medium | Size.small | Size.special",
           "references": {
             "Size": {
               "location": "import",
@@ -73,7 +72,7 @@ export class ZTableCell {
         },
         "attribute": "padding",
         "reflect": true,
-        "defaultValue": "Size.MEDIUM"
+        "defaultValue": "Size.medium"
       }
     };
   }

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

@@ -1,7 +1,7 @@
 :host {
   display: table-cell;
-  border-bottom: var(--border-size-small) solid var(--bg-grey-200);
   background-color: var(--color-white);
+  border-bottom: var(--border-size-small) solid var(--bg-grey-200);
   font-family: var(--dashboard-font);
   font-weight: var(--font-rg);
 }
@@ -16,9 +16,9 @@
 
 .button-container {
   position: absolute;
-  z-index: 5;
-  top: 8px;
   right: 8px;
+  top: 8px;
+  z-index: 5;
 }
 
 .button-content {
@@ -26,10 +26,10 @@
 }
 
 .contextual-menu-container {
+  display: none;
   position: absolute;
   top: calc(100% - var(--space-unit));
   right: 0;
-  display: none;
 }
 
 .button-container.visible,
@@ -40,7 +40,6 @@
 :host([padding="x-small"]) {
   padding: calc(var(--space-unit) * 0.5);
 }
-
 :host([padding="small"]) {
   padding: calc(var(--space-unit));
 }

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

@@ -1,4 +1,5 @@
 import { h, Host } from "@stencil/core";
+import classNames from "classnames";
 export class ZTableEmptyBox {
   constructor() {
     /** Sets main title message*/
@@ -11,10 +12,9 @@ export class ZTableEmptyBox {
     this.hasCta2Slot = !!this.hostElement.querySelector('[slot="cta2"]');
   }
   render() {
-    return (h(Host, null, h("z-body", { level: 3, variant: "semibold" }, this.message), h("br", null), !!this.subtitle && (h("z-body", { level: 4, variant: "regular" }, this.subtitle)), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: {
-        "cta": true,
-        "has-2-cta": !!this.hasCta1Slot && !!this.hasCta2Slot,
-      } }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" })))));
+    return (h(Host, null, h("z-body", { level: 3, variant: "semibold" }, this.message), h("br", null), !!this.subtitle && (h("z-body", { level: 4, variant: "regular" }, this.subtitle)), (!!this.hasCta1Slot || !!this.hasCta2Slot) && (h("div", { class: classNames("cta", {
+        has2Cta: !!this.hasCta1Slot && !!this.hasCta2Slot
+      }) }, h("slot", { name: "cta1" }), h("slot", { name: "cta2" })))));
   }
   static get is() { return "z-table-empty-box"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1,6 +1,7 @@
 :host {
   display: block;
-  padding: calc(var(--space-unit)) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);
+  padding: calc(var(--space-unit)) calc(var(--space-unit) * 3)
+    calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);
   background-color: var(--bg-white);
 }
 
@@ -14,14 +15,14 @@
   margin-top: calc(var(--space-unit) / 2);
 }
 
-.cta.has-2-cta {
+.cta.has2Cta {
   flex-direction: column;
 }
 
 @media only screen and (min-width: 768px) {
   :host {
-    padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 7) calc(var(--space-unit) * 3)
-      calc(var(--space-unit) * 7);
+    padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 7)
+      calc(var(--space-unit) * 3) calc(var(--space-unit) * 7);
   }
 
   ::slotted(*) {
@@ -32,7 +33,7 @@
     margin-top: var(--space-unit);
   }
 
-  .cta.has-2-cta {
+  .cta.has2Cta {
     flex-direction: row;
   }
 }

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

@@ -1,9 +1,9 @@
 :host {
-  display: none;
   background-color: var(--gray50);
+  display: none;
 }
 
 :host > td > div.content-container {
-  margin-bottom: calc(var(--space-unit) / 2);
   box-shadow: var(--shadow-2);
+  margin-bottom: calc(var(--space-unit) / 2);
 }

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

@@ -1,5 +1,5 @@
 :host {
-  display: table-footer-group;
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
+    display: table-footer-group;
+    font-family: var(--dashboard-font);
+    font-weight: var(--font-rg);
 }

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

@@ -1,14 +1,14 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
+import classNames from "classnames";
 import { ButtonSizeEnum, ButtonVariantEnum, PopoverPositions, Size, SortDirectionEnum, } from "../../../beans";
 import { getElementTree } from "../../../utils/utils";
 export class ZTableHeader {
   constructor() {
     /** Set padding size of cell, if special 0px padding will be set */
-    this.padding = Size.MEDIUM;
+    this.padding = Size.medium;
     /** [Optional] Default sort order */
-    this.defaultSortDirection = SortDirectionEnum.ASC;
-    /** Sort direction */
-    this.sortDirection = SortDirectionEnum.NONE;
+    this.defaultSortDirection = SortDirectionEnum.asc;
+    this.sortDirection = SortDirectionEnum.none;
     this.emitOnSort = this.emitOnSort.bind(this);
   }
   emitOnSort() {
@@ -23,14 +23,14 @@ export class ZTableHeader {
     }
     this.sortDirection = (() => {
       switch (this.sortDirection) {
-        case SortDirectionEnum.ASC:
-          return SortDirectionEnum.DESC;
-        case SortDirectionEnum.DESC:
-          return SortDirectionEnum.ASC;
-        case SortDirectionEnum.NONE:
+        case SortDirectionEnum.asc:
+          return SortDirectionEnum.desc;
+        case SortDirectionEnum.desc:
+          return SortDirectionEnum.asc;
+        case SortDirectionEnum.none:
           return this.defaultSortDirection;
         default:
-          return SortDirectionEnum.NONE;
+          return SortDirectionEnum.none;
       }
     })();
     this.emitOnSort();
@@ -46,7 +46,7 @@ export class ZTableHeader {
     }
   }
   handleClickHeaders(e) {
-    const target = e.target;
+    const { target } = e;
     const parent = getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-table-header");
     if (!this.sortable || !parent) {
       return;
@@ -54,16 +54,18 @@ export class ZTableHeader {
     const parentColumnId = parent.attributes.getNamedItem("column-id").value;
     const isSortable = target.parentNode.sortable || target.sortable;
     if (parentColumnId !== this.columnId && isSortable) {
-      this.sortDirection = SortDirectionEnum.NONE;
+      this.sortDirection = SortDirectionEnum.none;
     }
   }
   componentWillRender() {
     this.host.setAttribute("role", "columnheader");
   }
   render() {
-    return (h(Host, { class: {
+    return (h(Host, { class: classNames({
         sortable: this.sortable,
-      }, onClick: () => this.handleSort() }, h("div", { class: "container" }, h("slot", null), this.sortable && this.sortDirection !== SortDirectionEnum.NONE && (h("z-icon", { name: this.sortDirection === SortDirectionEnum.ASC ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariantEnum.TERTIARY, size: ButtonSizeEnum.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPositions.BOTTOM, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
+      }), onClick: () => this.handleSort() }, h("div", { class: 'container' }, h("slot", null), this.sortable && this.sortDirection !== SortDirectionEnum.none && (h("z-icon", { name: this.sortDirection === SortDirectionEnum.asc
+        ? "arrow-up"
+        : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: 'popover-container' }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariantEnum["tertiary"], size: ButtonSizeEnum["x-small"], onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: PopoverPositions.bottom, center: true, bindTo: this.triggerButton }, h("div", null, h("slot", { name: "contextual-menu" })))))));
   }
   static get is() { return "z-table-header"; }
   static get encapsulation() { return "shadow"; }
@@ -101,7 +103,7 @@ export class ZTableHeader {
         "mutable": false,
         "complexType": {
           "original": "Size",
-          "resolved": "Size.LARGE | Size.MEDIUM | Size.SMALL | Size.SPECIAL | Size.X_SMALL",
+          "resolved": "(typeof Size)[\"x-small\"] | Size.large | Size.medium | Size.small | Size.special",
           "references": {
             "Size": {
               "location": "import",
@@ -117,7 +119,7 @@ export class ZTableHeader {
         },
         "attribute": "padding",
         "reflect": true,
-        "defaultValue": "Size.MEDIUM"
+        "defaultValue": "Size.medium"
       },
       "sortable": {
         "type": "boolean",
@@ -158,7 +160,7 @@ export class ZTableHeader {
         "mutable": false,
         "complexType": {
           "original": "SortDirection",
-          "resolved": "SortDirectionEnum.ASC | SortDirectionEnum.DESC | SortDirectionEnum.NONE",
+          "resolved": "SortDirectionEnum.asc | SortDirectionEnum.desc | SortDirectionEnum.none",
           "references": {
             "SortDirection": {
               "location": "import",
@@ -174,14 +176,14 @@ export class ZTableHeader {
         },
         "attribute": "default-sort-direction",
         "reflect": false,
-        "defaultValue": "SortDirectionEnum.ASC"
+        "defaultValue": "SortDirectionEnum.asc"
       },
       "sortDirection": {
         "type": "string",
         "mutable": true,
         "complexType": {
           "original": "SortDirection",
-          "resolved": "SortDirectionEnum.ASC | SortDirectionEnum.DESC | SortDirectionEnum.NONE",
+          "resolved": "SortDirectionEnum.asc | SortDirectionEnum.desc | SortDirectionEnum.none",
           "references": {
             "SortDirection": {
               "location": "import",
@@ -193,11 +195,11 @@ export class ZTableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sort direction"
+          "text": ""
         },
         "attribute": "sort-direction",
         "reflect": false,
-        "defaultValue": "SortDirectionEnum.NONE"
+        "defaultValue": "SortDirectionEnum.none"
       }
     };
   }

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

@@ -1,8 +1,8 @@
 :host {
   position: relative;
   display: table-cell;
-  border-bottom: var(--border-size-medium) solid var(--gray200);
   background-color: var(--gray50);
+  border-bottom: var(--border-size-medium) solid var(--gray200);
   font-family: var(--dashboard-font);
   font-weight: var(--font-sb);
   text-align: start;
@@ -20,7 +20,6 @@
 :host([padding="x-small"]) {
   padding: calc(var(--space-unit) * 0.5);
 }
-
 :host([padding="small"]) {
   padding: calc(var(--space-unit));
 }
@@ -41,8 +40,8 @@
 Sorting arrow
 */
 .arrow {
-  padding-left: var(--space-unit);
   opacity: 1;
+  padding-left: var(--space-unit);
 }
 
 /*
@@ -57,7 +56,6 @@ Contextual menu
 
 .popover-container z-popover {
   --z-popover-theme--surface: var(--gray200);
-
   position: relative;
   z-index: 1;
 }

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

@@ -1,10 +1,10 @@
 import { Host, h } from "@stencil/core";
 export class ZTableHeaderRow {
-  renderExpandHeader() {
+  _renderExpandHeader() {
     return h("z-table-header", null);
   }
   render() {
-    return (h(Host, { role: "row" }, this.expandable && this.renderExpandHeader(), h("slot", null)));
+    return (h(Host, { role: "row" }, this.expandable && this._renderExpandHeader(), h("slot", null)));
   }
   static get is() { return "z-table-header-row"; }
   static get originalStyleUrls() {
@@ -31,7 +31,7 @@ export class ZTableHeaderRow {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Row expandable flag"
+          "text": ""
         },
         "attribute": "expandable",
         "reflect": true

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

@@ -4,8 +4,8 @@ z-table-header-row {
 
 z-table-header-row[expandable] > z-table-header:first-child {
   width: 40px;
-  box-sizing: border-box;
   user-select: none;
+  box-sizing: border-box;
 }
 
 z-table-header-row[expandable] > z-table-header:nth-child(2) {

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

@@ -1,9 +1,8 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { ZTableRowExpandedType } from "../../../beans";
 export class ZTableRow {
   constructor() {
-    /** Table row expanded type */
-    this.expandedType = ZTableRowExpandedType.NONE;
+    this.expandedType = ZTableRowExpandedType.none;
     this.expanded = false;
   }
   emitOnExpand() {
@@ -14,19 +13,20 @@ export class ZTableRow {
     this.emitOnExpand();
   }
   renderExpandButton() {
-    if (this.expandedType == ZTableRowExpandedType.EXPANDABLE) {
+    if (this.expandedType == ZTableRowExpandedType.expandable) {
       return (h("z-table-cell", { style: { borderRight: "none" } }, h("z-icon", { name: this.expanded ? "minus-circled" : "plus-circled" })));
     }
     return (h("z-table-cell", { style: { borderRight: "none" } }, h("div", { class: "z-icon-placeholder" })));
   }
   render() {
     return (h(Host, { role: "row", expanded: this.expanded, onClick: (event) => {
-        const contextualMenuClick = event.target.nodeName === "Z-CONTEXTUAL-MENU";
-        const isExpandable = this.expandedType === ZTableRowExpandedType.EXPANDABLE;
+        const contextualMenuClick = event.target.nodeName === 'Z-CONTEXTUAL-MENU';
+        const isExpandable = this.expandedType === ZTableRowExpandedType.expandable;
         if (isExpandable && !contextualMenuClick) {
           this.handleExpand();
         }
-      } }, this.expandedType !== ZTableRowExpandedType.NONE && this.renderExpandButton(), h("slot", null)));
+      } }, this.expandedType !== ZTableRowExpandedType.none &&
+      this.renderExpandButton(), h("slot", null)));
   }
   static get is() { return "z-table-row"; }
   static get originalStyleUrls() {
@@ -46,7 +46,7 @@ export class ZTableRow {
         "mutable": false,
         "complexType": {
           "original": "ZTableRowExpandedType",
-          "resolved": "ZTableRowExpandedType.EXPANDABLE | ZTableRowExpandedType.NONE | ZTableRowExpandedType.PADDING",
+          "resolved": "ZTableRowExpandedType.expandable | ZTableRowExpandedType.none | ZTableRowExpandedType.padding",
           "references": {
             "ZTableRowExpandedType": {
               "location": "import",
@@ -58,11 +58,11 @@ export class ZTableRow {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Table row expanded type"
+          "text": ""
         },
         "attribute": "expanded-type",
         "reflect": true,
-        "defaultValue": "ZTableRowExpandedType.NONE"
+        "defaultValue": "ZTableRowExpandedType.none"
       }
     };
   }
@@ -80,7 +80,7 @@ export class ZTableRow {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Row has been expanded"
+          "text": ""
         },
         "complexType": {
           "original": "any",

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

@@ -7,27 +7,33 @@ z-table-row[expanded-type="expandable"]:hover {
   cursor: pointer;
 }
 
-z-table-row[expanded-type="expandable"] > z-table-cell:first-child,
-z-table-row[expanded-type="padding"] > z-table-cell:first-child {
+z-table-row[expanded-type="expandable"]
+  > z-table-cell:first-child,
+z-table-row[expanded-type="padding"]
+  > z-table-cell:first-child {
   --z-icon-width: 16px;
   --z-icon-height: 16px;
 
   width: 24px;
-  box-sizing: border-box;
-  padding-right: 0;
   padding-left: 16px;
-  fill: var(--gray800);
+  padding-right: 0px;
+  box-sizing: border-box;
   text-align: center;
+
+  fill: var(--gray800);
+
   user-select: none;
 }
 
 .z-icon-placeholder {
   width: 24px;
-  padding-right: 0;
+  padding-right: 0px;
 }
 
-z-table-row[expanded-type="expandable"] > z-table-cell:nth-child(2),
-z-table-row[expanded-type="padding"] > z-table-cell:nth-child(2) {
+z-table-row[expanded-type="expandable"]
+  > z-table-cell:nth-child(2),
+z-table-row[expanded-type="padding"]
+  > z-table-cell:nth-child(2) {
   padding-left: 8px;
 }
 
@@ -36,10 +42,13 @@ z-table-row[expanded-type]:hover > z-table-cell:first-child {
 }
 
 z-table-row[expanded] > z-table-cell {
-  border-bottom: none;
   background-color: var(--gray50);
 }
 
 z-table-row[expanded] + z-table-expanded-row {
   display: table-row;
 }
+
+z-table-row[expanded] > z-table-cell {
+  border-bottom: none;
+}

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

@@ -1,10 +1,10 @@
-import { h } from "@stencil/core";
+import { h } from '@stencil/core';
 /**
  * @slot - table sticky footer content
  */
 export class ZTableStickyFooter {
   render() {
-    return h("slot", null);
+    return (h("slot", null));
   }
   static get is() { return "z-table-sticky-footer"; }
   static get encapsulation() { return "scoped"; }