@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/collection/components/z-skip-to-content/styles.css

@@ -1,12 +1,12 @@
 :host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
   position: absolute;
   left: -100%;
-  background-color: #24f4ff;
-  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);
   height: 60px;
   box-sizing: border-box;
+  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);
+  background-color: #24f4ff;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
 }
 
 :host.skip-to-content-visible,
@@ -21,14 +21,14 @@
 }
 
 :host > z-link.link-invisible {
-  height: 0;
-  width: 0;
   overflow: hidden;
+  width: 0;
+  height: 0;
 }
 
 :host > z-link.link-visible {
-  height: initial;
   width: initial;
+  height: initial;
 }
 
 :host.dark {
@@ -37,9 +37,9 @@
 }
 
 :host.light {
+  border: 2px solid var(--text-grey-800);
   background-color: var(--bg-white);
   color: var(--text-grey-800);
-  border: 2px solid var(--text-grey-800);
 }
 
 /* Tablet breakpoint */
@@ -58,9 +58,9 @@
   }
 
   :host > z-link.link-invisible {
-    height: initial;
-    width: initial;
     overflow: initial;
+    width: initial;
+    height: initial;
   }
 
   :host > z-link:first-child {
@@ -70,15 +70,11 @@
   :host > z-link:last-child,
   :host.dark > z-link:last-child,
   :host.light > z-link:last-child {
-    border-right: none;
     padding-right: 0;
+    border-right: none;
   }
 
   :host.dark > z-link {
     border-right: 1px solid var(--bg-white);
   }
 }
-
-/* Wide breakpoint */
-@media (min-width: 1366px) {
-}

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

@@ -1,5 +1,5 @@
-import { Host, h, } from "@stencil/core";
-import { ButtonSizeEnum, ButtonVariantEnum } from "../../../beans";
+import { Host, h } from "@stencil/core";
+import { ButtonSize, ButtonVariant } from "../../../beans";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 /**
  * @slot - table elements
@@ -47,14 +47,12 @@ export class ZTable {
     return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-error", null, h("div", { class: "error-content", style: { minHeight } }, h("slot", { name: "error-image" }), h("div", { class: "text" }, h("z-body", { class: "error-message", level: 3, variant: "semibold" }, this.errorMessage), h("slot", { name: "error-action" }))))));
   }
   renderEmpty(tableClass) {
-    const buttonSize = this.isMobile
-      ? ButtonSizeEnum.small
-      : ButtonSizeEnum.big;
-    const tableContentClass = `${!!this.hasTableBody ? "table-content" : ""}`;
+    const buttonSize = this.isMobile ? ButtonSize.SMALL : ButtonSize.BIG;
+    const tableContentClass = `${this.hasTableBody ? "table-content" : ""}`;
     if (this.hasTableBody) {
-      return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" }), h("div", { class: tableContentClass }, h("slot", { name: "table-body" }), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
+      return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" }), h("div", { class: tableContentClass }, h("slot", { name: "table-body" }), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariant.TERTIARY, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariant.TERTIARY, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))))));
     }
-    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariantEnum.tertiary, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
+    return (h(Host, null, h("div", { class: tableClass }, h("slot", { name: "table-header" })), h("z-table-empty-box", { class: this.bordered && "bordered", message: this.message, subtitle: this.subtitle }, !!this.callToActionLabel && (h("z-button", { slot: "cta1", variant: ButtonVariant.TERTIARY, onClick: () => this.callToAction.emit(), size: buttonSize }, this.callToActionLabel)), !!this.callToActionTwoLabel && (h("z-button", { slot: "cta2", variant: ButtonVariant.TERTIARY, onClick: () => this.callToActionTwo.emit(), size: buttonSize }, this.callToActionTwoLabel)))));
   }
   render() {
     const tableClass = `table ${this.empty ? "table-empty" : ""} ${this.bordered ? "table-bordered" : ""}

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);
-  background-color: var(--color-white);
+  overflow-x: auto;
 }
 
 z-table > div.table {
@@ -13,99 +13,45 @@ 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;
-  left: 0;
-  box-shadow: 1px 0 4px -1px rgba(66, 69, 72, 0.4);
   z-index: 1;
+  left: 0;
+  box-shadow: 1px 0 4px -1px rgb(66 69 72 / 40%);
 }
 
-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 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;
+  box-shadow: 0 2px 3px -3px rgb(66 69 72 / 40%);
 }
 
 /**
  * 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;
 }
 
@@ -131,14 +77,14 @@ z-table-empty-box.bordered {
 
 .table-content {
   display: flex;
-  flex-direction: row;
   width: 100%;
+  flex-direction: row;
 }
 
 .error-content {
-  font-family: var(--dashboard-font);
-  padding: calc(var(--space-unit) * 3);
   display: flex;
+  padding: calc(var(--space-unit) * 3);
+  font-family: var(--dashboard-font);
 }
 
 .error-content > img {
@@ -152,14 +98,17 @@ 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,10 +1,9 @@
 import { h, Host } from "@stencil/core";
-import { ButtonVariantEnum, ButtonSizeEnum, Size } from "../../../beans";
-import classNames from "classnames";
+import { ButtonVariant, ButtonSize, Size } from "../../../beans";
 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() {
@@ -14,11 +13,13 @@ export class ZTableCell {
     this.host.setAttribute("role", "cell");
   }
   render() {
-    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)));
+    return (h(Host, null, this.showButton && (h("div", { class: {
+        "button-container": true,
+        "visible": this.isMenuOpened,
+      } }, h("div", { class: "button-content" }, h("z-button", { icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenu() }), h("div", { class: {
+        "contextual-menu-container": true,
+        "visible": this.isMenuOpened,
+      } }, h("slot", { name: "contextual-menu" }))))), h("slot", null)));
   }
   static get is() { return "z-table-cell"; }
   static get encapsulation() { return "shadow"; }
@@ -56,7 +57,7 @@ export class ZTableCell {
         "mutable": false,
         "complexType": {
           "original": "Size",
-          "resolved": "(typeof Size)[\"x-small\"] | Size.large | Size.medium | Size.small | Size.special",
+          "resolved": "Size.LARGE | Size.MEDIUM | Size.SMALL | Size.SPECIAL | Size.X_SMALL",
           "references": {
             "Size": {
               "location": "import",
@@ -72,7 +73,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;
-  background-color: var(--color-white);
   border-bottom: var(--border-size-small) solid var(--bg-grey-200);
+  background-color: var(--color-white);
   font-family: var(--dashboard-font);
   font-weight: var(--font-rg);
 }
@@ -16,9 +16,9 @@
 
 .button-container {
   position: absolute;
-  right: 8px;
-  top: 8px;
   z-index: 5;
+  top: 8px;
+  right: 8px;
 }
 
 .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,6 +40,7 @@
 :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,5 +1,4 @@
 import { h, Host } from "@stencil/core";
-import classNames from "classnames";
 export class ZTableEmptyBox {
   constructor() {
     /** Sets main title message*/
@@ -12,9 +11,10 @@ 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: classNames("cta", {
-        has2Cta: !!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: {
+        "cta": true,
+        "has-2-cta": !!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,7 +1,6 @@
 :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);
 }
 
@@ -15,14 +14,14 @@
   margin-top: calc(var(--space-unit) / 2);
 }
 
-.cta.has2Cta {
+.cta.has-2-cta {
   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(*) {
@@ -33,7 +32,7 @@
     margin-top: var(--space-unit);
   }
 
-  .cta.has2Cta {
+  .cta.has-2-cta {
     flex-direction: row;
   }
 }

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

@@ -1,9 +1,9 @@
 :host {
-  background-color: var(--gray50);
   display: none;
+  background-color: var(--gray50);
 }
 
 :host > td > div.content-container {
-  box-shadow: var(--shadow-2);
   margin-bottom: calc(var(--space-unit) / 2);
+  box-shadow: var(--shadow-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 classNames from "classnames";
-import { ButtonSizeEnum, ButtonVariantEnum, PopoverPositions, Size, SortDirectionEnum, } from "../../../beans";
+import { h, Host } from "@stencil/core";
+import { ButtonSize, ButtonVariant, PopoverPositions, Size, SortDirection } 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;
-    this.sortDirection = SortDirectionEnum.none;
+    this.defaultSortDirection = SortDirection.ASC;
+    /** Sort direction */
+    this.sortDirection = SortDirection.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 SortDirection.ASC:
+          return SortDirection.DESC;
+        case SortDirection.DESC:
+          return SortDirection.ASC;
+        case SortDirection.NONE:
           return this.defaultSortDirection;
         default:
-          return SortDirectionEnum.none;
+          return SortDirection.NONE;
       }
     })();
     this.emitOnSort();
@@ -46,7 +46,7 @@ export class ZTableHeader {
     }
   }
   handleClickHeaders(e) {
-    const { target } = e;
+    const target = e.target;
     const parent = getElementTree(target).find((elem) => elem.nodeName.toLowerCase() === "z-table-header");
     if (!this.sortable || !parent) {
       return;
@@ -54,18 +54,16 @@ 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 = SortDirection.NONE;
     }
   }
   componentWillRender() {
     this.host.setAttribute("role", "columnheader");
   }
   render() {
-    return (h(Host, { class: classNames({
+    return (h(Host, { class: {
         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 !== SortDirection.NONE && (h("z-icon", { name: this.sortDirection === SortDirection.ASC ? "arrow-up" : "arrow-down", class: "arrow" }))), this.showButton && (h("div", { class: "popover-container" }, h("z-button", { ref: (el) => (this.triggerButton = el), class: "contextual-popover-button", icon: "contextual-menu", variant: ButtonVariant.TERTIARY, size: ButtonSize.X_SMALL, onClick: () => this.handleMenuClick() }), h("z-popover", { ref: (el) => (this.popover = el), position: 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"; }
@@ -103,7 +101,7 @@ export class ZTableHeader {
         "mutable": false,
         "complexType": {
           "original": "Size",
-          "resolved": "(typeof Size)[\"x-small\"] | Size.large | Size.medium | Size.small | Size.special",
+          "resolved": "Size.LARGE | Size.MEDIUM | Size.SMALL | Size.SPECIAL | Size.X_SMALL",
           "references": {
             "Size": {
               "location": "import",
@@ -119,7 +117,7 @@ export class ZTableHeader {
         },
         "attribute": "padding",
         "reflect": true,
-        "defaultValue": "Size.medium"
+        "defaultValue": "Size.MEDIUM"
       },
       "sortable": {
         "type": "boolean",
@@ -160,7 +158,7 @@ export class ZTableHeader {
         "mutable": false,
         "complexType": {
           "original": "SortDirection",
-          "resolved": "SortDirectionEnum.asc | SortDirectionEnum.desc | SortDirectionEnum.none",
+          "resolved": "SortDirection.ASC | SortDirection.DESC | SortDirection.NONE",
           "references": {
             "SortDirection": {
               "location": "import",
@@ -176,14 +174,14 @@ export class ZTableHeader {
         },
         "attribute": "default-sort-direction",
         "reflect": false,
-        "defaultValue": "SortDirectionEnum.asc"
+        "defaultValue": "SortDirection.ASC"
       },
       "sortDirection": {
         "type": "string",
         "mutable": true,
         "complexType": {
           "original": "SortDirection",
-          "resolved": "SortDirectionEnum.asc | SortDirectionEnum.desc | SortDirectionEnum.none",
+          "resolved": "SortDirection.ASC | SortDirection.DESC | SortDirection.NONE",
           "references": {
             "SortDirection": {
               "location": "import",
@@ -195,11 +193,11 @@ export class ZTableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Sort direction"
         },
         "attribute": "sort-direction",
         "reflect": false,
-        "defaultValue": "SortDirectionEnum.none"
+        "defaultValue": "SortDirection.NONE"
       }
     };
   }

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

@@ -1,8 +1,8 @@
 :host {
   position: relative;
   display: table-cell;
-  background-color: var(--gray50);
   border-bottom: var(--border-size-medium) solid var(--gray200);
+  background-color: var(--gray50);
   font-family: var(--dashboard-font);
   font-weight: var(--font-sb);
   text-align: start;
@@ -20,6 +20,7 @@
 :host([padding="x-small"]) {
   padding: calc(var(--space-unit) * 0.5);
 }
+
 :host([padding="small"]) {
   padding: calc(var(--space-unit));
 }
@@ -40,8 +41,8 @@
 Sorting arrow
 */
 .arrow {
-  opacity: 1;
   padding-left: var(--space-unit);
+  opacity: 1;
 }
 
 /*
@@ -56,6 +57,7 @@ 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": ""
+          "text": "Row expandable flag"
         },
         "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;
-  user-select: none;
   box-sizing: border-box;
+  user-select: none;
 }
 
 z-table-header-row[expandable] > z-table-header:nth-child(2) {