@zanichelli/albe-web-components 5.6.2 → 6.0.0

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

@@ -1,4 +1,5 @@
-import { h, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
+import { InputType } from "../../beans";
 /**
  * Pagination bar component.
  */
@@ -81,7 +82,7 @@ export class ZPagination {
   getPagesChunks() {
     // array of numbers from 1 to `totalPages`
     const pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
-    let chunks = [];
+    const chunks = [];
     const chunksCount = Math.ceil(pages.length / this._visiblePages);
     for (let index = 0; index < chunksCount; index++) {
       chunks.push(pages.slice(index * this._visiblePages, (index + 1) * this._visiblePages));
@@ -128,14 +129,14 @@ export class ZPagination {
   }
   /**
    * Render chunked page buttons.
-   * @returns {HTMLDivElement}
+   * @returns {HTMLDivElement[]}
    */
   renderPages() {
     const pagesChunks = this.getPagesChunks();
     if (pagesChunks.length <= 0) {
       return;
     }
-    return pagesChunks.map((chunk) => (h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page)))));
+    return pagesChunks.map((chunk) => h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page))));
   }
   /**
    * Render page buttons when split feature is enabled.
@@ -155,8 +156,7 @@ export class ZPagination {
         this.renderPage(this.totalPages),
       ];
     }
-    if (this.currentPage > this.split * 2 + 2 &&
-      this.currentPage < this.totalPages - this.split * 2 - 1) {
+    if (this.currentPage > this.split * 2 + 2 && this.currentPage < this.totalPages - this.split * 2 - 1) {
       // Render first page, ellipsis, current page surrounded by (split) pages both before and after, another ellipsis, then last page.
       return [
         this.renderPage(1),
@@ -184,10 +184,10 @@ export class ZPagination {
     return [
       this.label && h("span", { class: "page-label body-1-sb" }, this.label),
       h("div", { class: "pagination-bar" }, this.renderBackButton(), !this.goToPage && (h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, pagesChunks.length > 0 &&
-        pagesChunks.map((chunk) => (h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page))))))), this.goToPage && (h("form", { class: "mobile-go-to-page", onSubmit: (ev) => {
+        pagesChunks.map((chunk) => h("div", { class: "pages-chunk" }, chunk.map((page) => this.renderPage(page)))))), this.goToPage && (h("form", { class: "mobile-go-to-page", onSubmit: (ev) => {
           ev.preventDefault();
           this.selectPage(this.goToPageValue);
-        } }, h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+        } }, h("z-input", { class: "go-to-page-input", type: InputType.NUMBER, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
           this.goToPageValue = ev.target.value;
         }, placeholder: this.currentPage.toString(), hasclearicon: false }), h("span", null, `/${this.totalPages}`))), this.renderForwardButton()),
     ];
@@ -196,7 +196,7 @@ export class ZPagination {
     this.setVisiblePages();
   }
   componentDidRender() {
-    if (this.split) {
+    if (this.split !== 0) {
       this.edges = false;
     }
     this.setPagesContainerWidth();
@@ -204,14 +204,11 @@ export class ZPagination {
   }
   render() {
     if (this.isMobile) {
-      return this.renderMobile();
+      return h(Host, null, this.renderMobile());
     }
-    return [
-      h("div", { class: "pagination-bar" }, this.label && h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))),
-      this.goToPage && (h("div", { class: "go-to-page" }, h("span", { class: "label body-5-sb" }, "Vai a pagina:"), h("div", { class: "inputs" }, h("z-input", { class: "go-to-page-input", type: "number", min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
-          this.goToPageValue = ev.target.value;
-        }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }), h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai")))),
-    ];
+    return (h(Host, null, h("div", { class: "pagination-bar" }, this.label && h("span", { class: "page-label body-1-sb" }, this.label), this.edges && (h("button", { class: "pagination-button", type: "button", title: "Vai alla pagina 1", disabled: this.currentPage === 1, onClick: () => this.selectPage(1) }, "Pagina 1")), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage - this.skip}`, disabled: this.currentPage <= this.skip, onClick: () => this.selectPage(this.currentPage - this.skip) }, "-", this.skip)), this.navArrows && this.renderBackButton(), h("div", { class: "pages-container", role: "navigation", tabIndex: -1 }, this.split ? this.renderSplitPages() : this.renderPages()), this.navArrows && this.renderForwardButton(), this.skip < this.totalPages && this.skip > 1 && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.currentPage + this.skip}`, disabled: this.currentPage > this.totalPages - this.skip, onClick: () => this.selectPage(this.currentPage + this.skip) }, "+", this.skip)), this.edges && (h("button", { class: "pagination-button", type: "button", title: `Vai alla pagina ${this.totalPages}`, disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.totalPages) }, "Pagina ", this.totalPages))), this.goToPage && (h("div", { class: "go-to-page" }, h("span", { class: "label body-5-sb" }, "Vai a pagina:"), h("div", { class: "inputs" }, h("z-input", { class: "go-to-page-input", type: InputType.NUMBER, min: 1, max: this.totalPages, message: false, placeholder: "2", hasclearicon: false, onInput: (ev) => {
+        this.goToPageValue = ev.target.value;
+      }, onKeyDown: (ev) => ev.key === "Enter" && this.selectPage(this.goToPageValue) }), h("z-button", { disabled: !this.goToPageValue, title: "Vai alla pagina inserita", onClick: () => this.selectPage(this.goToPageValue) }, "vai"))))));
   }
   static get is() { return "z-pagination"; }
   static get originalStyleUrls() {

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

@@ -3,12 +3,11 @@ z-pagination {
   --z-pagination--pages-container-max-width: 100%;
 
   display: flex;
-  flex-direction: column;
-  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
   max-width: 100%;
-  flex-wrap: wrap;
+  flex-flow: column wrap;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
+  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
 }
 
 z-pagination,
@@ -35,40 +34,37 @@ z-pagination .page-label {
 
 z-pagination .pagination-bar {
   display: flex;
-  align-items: center;
-  height: 48px;
   max-width: 100%;
+  height: 48px;
+  align-items: center;
 }
 
 z-pagination .pagination-bar button {
   display: flex;
   align-items: center;
   justify-content: center;
+  border: none;
   margin: 0;
   background-color: var(--color-surface03);
-  transition: background-color .150s ease-out,
-    color .150s ease-out,
-    border-bottom-color .150s ease-out,
-    font-size .150s ease-in-out,
-    font-weight .150s ease-in-out;
   color: var(--color-primary01);
-  border: none;
+  cursor: pointer;
   font-family: inherit;
   font-weight: inherit;
-  cursor: pointer;
+  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-bottom-color 0.15s ease-out,
+    font-size 0.15s ease-in-out, font-weight 0.15s ease-in-out;
 }
 
 z-pagination .pagination-bar button:focus-visible {
-  outline: none;
-  box-shadow: inset var(--shadow-focus-primary);
   background-color: var(--color-hover-surface);
+  box-shadow: inset var(--shadow-focus-primary);
+  outline: none;
 }
 
 z-pagination .pagination-bar .pagination-button {
   padding: calc(var(--space-unit) * 2);
+  font-weight: var(--font-sb);
   text-transform: uppercase;
   white-space: nowrap;
-  font-weight: var(--font-sb);
 }
 
 z-pagination .pagination-bar .navigation-button {
@@ -122,8 +118,8 @@ z-pagination .pagination-bar .page-button:focus-visible {
 }
 
 z-pagination .pagination-bar .page-button[data-current] {
-  font-size: var(--font-size-7);
   border-bottom-color: var(--color-primary01);
+  font-size: var(--font-size-7);
 }
 
 z-pagination .go-to-page {
@@ -149,15 +145,15 @@ z-pagination .go-to-page .inputs z-input {
 z-pagination .go-to-page .inputs z-input input,
 z-pagination .mobile-go-to-page z-input input {
   padding: 0 calc(var(--space-unit) * 1.5) !important;
-  -moz-appearance: none;
+  appearance: none;
 }
 
 z-pagination .mobile-go-to-page {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 auto;
   height: 100%;
+  flex: 1 auto;
+  align-items: center;
+  justify-content: center;
   background-color: var(--color-surface03);
 }
 
@@ -173,7 +169,6 @@ z-pagination .mobile-go-to-page z-input input {
 z-pagination .mobile-go-to-page z-input input::-webkit-outer-spin-button,
 z-pagination .mobile-go-to-page z-input input::-webkit-inner-spin-button {
   appearance: none;
-  -webkit-appearance: none;
 }
 
 z-pagination .mobile-go-to-page > span {

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

@@ -1,6 +1,6 @@
-import { h, } from "@stencil/core";
-import { PopoverPositions, KeyboardKeys } from "../../beans";
-const documentElement = document.documentElement;
+import { h } from "@stencil/core";
+import { PopoverPositions, KeyboardCode } from "../../beans";
+const DOCUMENT_ELEMENT = document.documentElement;
 function getParentElement(element) {
   if (element.parentNode.host) {
     return element.parentNode.host;
@@ -14,24 +14,18 @@ function getParentElement(element) {
  */
 function findScrollableParent(element) {
   let parent = getParentElement(element);
-  while (parent && parent !== documentElement) {
+  while (parent && parent !== DOCUMENT_ELEMENT) {
     const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
-    if (overflow === "hidden" ||
-      overflowY === "hidden" ||
-      overflowX === "hidden") {
+    if (overflow === "hidden" || overflowY === "hidden" || overflowX === "hidden") {
       return parent;
     }
-    if ((parent.scrollHeight > parent.clientHeight &&
-      overflow !== "visible" &&
-      overflowY !== "visible") ||
-      (parent.scrollWidth > parent.clientWidth &&
-        overflow !== "visible" &&
-        overflowX !== "visible")) {
+    if ((parent.scrollHeight > parent.clientHeight && overflow !== "visible" && overflowY !== "visible") ||
+      (parent.scrollWidth > parent.clientWidth && overflow !== "visible" && overflowX !== "visible")) {
       return parent;
     }
     parent = getParentElement(parent);
   }
-  return documentElement;
+  return DOCUMENT_ELEMENT;
 }
 /**
  * Calculate computed offset.
@@ -98,7 +92,7 @@ function computeOffset(element, targetParentOffset) {
 export class ZPopover {
   constructor() {
     /** Popover position. */
-    this.position = PopoverPositions.auto;
+    this.position = PopoverPositions.AUTO;
     /**
      * The open state of the popover.
      */
@@ -117,7 +111,7 @@ export class ZPopover {
     this.closable = true;
   }
   closePopoverWithKeyboard(e) {
-    if (this.closable && e.key === KeyboardKeys.ESC) {
+    if (this.closable && e.key === KeyboardCode.ESC) {
       this.open = false;
     }
   }
@@ -125,6 +119,7 @@ export class ZPopover {
     if (!this.closable) {
       return;
     }
+    // @ts-ignore
     const parent = e.path.find((elem) => elem === this.host);
     if (!parent) {
       this.open = false;
@@ -132,9 +127,8 @@ export class ZPopover {
     }
   }
   validatePosition(newValue) {
-    if (newValue &&
-      !Object.values(PopoverPositions).includes(newValue)) {
-      this.position = PopoverPositions.auto;
+    if (newValue && !Object.values(PopoverPositions).includes(newValue)) {
+      this.position = PopoverPositions.AUTO;
     }
     this.currentPosition = this.position;
     this.positionChange.emit({ position: this.currentPosition });
@@ -153,8 +147,8 @@ export class ZPopover {
       };
       setPosition();
     }
-    else if (this.host.hasAttribute('current-position')) {
-      this.host.removeAttribute('current-position');
+    else if (this.host.hasAttribute("current-position")) {
+      this.host.removeAttribute("current-position");
       this.currentPosition = undefined;
     }
     this.openChange.emit({ open: this.open });
@@ -187,19 +181,11 @@ export class ZPopover {
       : { top: 0, right: 0, bottom: 0, left: 0 };
     const boundingRect = computeOffset(element, scrollContainer);
     const top = boundingRect.top - scrollContainer.scrollTop;
-    const bottom = scrollingBoundingRect.height -
-      (boundingRect.top + boundingRect.height) +
-      scrollContainer.scrollTop;
+    const bottom = scrollingBoundingRect.height - (boundingRect.top + boundingRect.height) + scrollContainer.scrollTop;
     const left = boundingRect.left - scrollContainer.scrollLeft;
-    const right = scrollingBoundingRect.width -
-      (boundingRect.left + boundingRect.width) +
-      scrollContainer.scrollLeft;
-    const overflowBottom = Math.max(0, scrollingBoundingRect.top +
-      scrollingBoundingRect.height -
-      window.innerHeight);
-    const overflowRight = Math.max(0, scrollingBoundingRect.left +
-      scrollingBoundingRect.width -
-      window.innerWidth);
+    const right = scrollingBoundingRect.width - (boundingRect.left + boundingRect.width) + scrollContainer.scrollLeft;
+    const overflowBottom = Math.max(0, scrollingBoundingRect.top + scrollingBoundingRect.height - window.innerHeight);
+    const overflowRight = Math.max(0, scrollingBoundingRect.left + scrollingBoundingRect.width - window.innerWidth);
     const availableTop = Math.min(top, top + scrollingBoundingRect.top);
     const availableBottom = Math.min(bottom, bottom - overflowBottom);
     const availableLeft = Math.min(left, left + scrollingBoundingRect.left);
@@ -208,28 +194,28 @@ export class ZPopover {
     const availableWidth = availableLeft + availableRight + boundingRect.width;
     let position = this.currentPosition;
     const positions = [];
-    if (this.position === PopoverPositions.auto) {
+    if (this.position === PopoverPositions.AUTO) {
       /**
        * The `AUTO` position tries to place the popover in the 'safest' area,
        * where there's more space available.
        */
       if (availableLeft / availableWidth > 0.6) {
-        positions.push(PopoverPositions.left);
+        positions.push(PopoverPositions.LEFT);
       }
       else if (availableLeft / availableWidth < 0.4) {
-        positions.push(PopoverPositions.right);
+        positions.push(PopoverPositions.RIGHT);
       }
       if (availableTop / availableHeight > 0.9) {
-        positions.unshift(PopoverPositions.top);
+        positions.unshift(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight > 0.6) {
-        positions.push(PopoverPositions.top);
+        positions.push(PopoverPositions.TOP);
       }
       else if (availableTop / availableHeight < 0.1) {
-        positions.unshift(PopoverPositions.bottom);
+        positions.unshift(PopoverPositions.BOTTOM);
       }
       else {
-        positions.push(PopoverPositions.bottom);
+        positions.push(PopoverPositions.BOTTOM);
       }
       position = positions.join("_");
     }
@@ -241,18 +227,17 @@ export class ZPopover {
     const offsetLeft = boundingRect.left - relativeBoundingRect.left;
     const offsetModifier = this.center ? 0.5 : 0;
     const sizeModifier = this.center ? 0.5 : 0;
-    if (position === PopoverPositions.top ||
-      position === PopoverPositions.top_right) {
+    if (position === PopoverPositions.TOP || position === PopoverPositions.TOP_RIGHT) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height}px`;
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableTop}px`;
-      if (position === PopoverPositions.top_right) {
+      if (position === PopoverPositions.TOP_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === PopoverPositions.top_left) {
+    else if (position === PopoverPositions.TOP_LEFT) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = `${offsetBottom + boundingRect.height}px`;
@@ -260,18 +245,17 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableTop}px`;
     }
-    else if (position === PopoverPositions.bottom ||
-      position === PopoverPositions.bottom_right) {
+    else if (position === PopoverPositions.BOTTOM || position === PopoverPositions.BOTTOM_RIGHT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = "auto";
       style.bottom = "auto";
       style.left = `${offsetLeft + boundingRect.width * offsetModifier}px`;
       style.maxHeight = `${availableBottom}px`;
-      if (position === PopoverPositions.bottom_right) {
+      if (position === PopoverPositions.BOTTOM_RIGHT) {
         style.maxWidth = `${availableRight + boundingRect.width * sizeModifier}px`;
       }
     }
-    else if (position === PopoverPositions.bottom_left) {
+    else if (position === PopoverPositions.BOTTOM_LEFT) {
       style.top = `${offsetTop + boundingRect.height}px`;
       style.right = `${offsetRight + boundingRect.width * offsetModifier}px`;
       style.bottom = "auto";
@@ -279,8 +263,7 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom}px`;
     }
-    else if (position === PopoverPositions.right ||
-      position === PopoverPositions.right_bottom) {
+    else if (position === PopoverPositions.RIGHT || position === PopoverPositions.RIGHT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = "auto";
       style.bottom = "auto";
@@ -288,7 +271,7 @@ export class ZPopover {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.right_top) {
+    else if (position === PopoverPositions.RIGHT_TOP) {
       style.top = "auto";
       style.right = "auto";
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -296,8 +279,7 @@ export class ZPopover {
       style.maxWidth = `${availableRight}px`;
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.left ||
-      position === PopoverPositions.left_bottom) {
+    else if (position === PopoverPositions.LEFT || position === PopoverPositions.LEFT_BOTTOM) {
       style.top = `${offsetTop + boundingRect.height * offsetModifier}px`;
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = "auto";
@@ -305,7 +287,7 @@ export class ZPopover {
       style.maxWidth = `${availableLeft}px`;
       style.maxHeight = `${availableBottom + boundingRect.height * sizeModifier}px`;
     }
-    else if (position === PopoverPositions.left_top) {
+    else if (position === PopoverPositions.LEFT_TOP) {
       style.top = "auto";
       style.right = `${offsetRight + boundingRect.width}px`;
       style.bottom = `${offsetBottom + boundingRect.height * offsetModifier}px`;
@@ -314,7 +296,7 @@ export class ZPopover {
       style.maxHeight = `${availableTop + boundingRect.height * sizeModifier}px`;
     }
     this.currentPosition = position || this.position;
-    this.host.setAttribute('current-position', this.currentPosition);
+    this.host.setAttribute("current-position", this.currentPosition);
   }
   componentWillLoad() {
     this.validatePosition(this.position);
@@ -341,10 +323,10 @@ export class ZPopover {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PopoverPositionBean",
-          "resolved": "\"auto\" | \"bottom\" | \"bottom_left\" | \"bottom_right\" | \"left\" | \"left_bottom\" | \"left_top\" | \"right\" | \"right_bottom\" | \"right_top\" | \"top\" | \"top_left\" | \"top_right\"",
+          "original": "PopoverPositions",
+          "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
           "references": {
-            "PopoverPositionBean": {
+            "PopoverPositions": {
               "location": "import",
               "path": "../../beans"
             }
@@ -358,7 +340,7 @@ export class ZPopover {
         },
         "attribute": "position",
         "reflect": true,
-        "defaultValue": "PopoverPositions.auto"
+        "defaultValue": "PopoverPositions.AUTO"
       },
       "open": {
         "type": "boolean",

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

@@ -6,18 +6,18 @@
 
   position: relative;
   display: none;
+  min-width: calc(var(--space-unit) * 8);
+  min-height: calc(var(--space-unit) * 4);
   align-items: center;
   justify-content: center;
   padding: var(--z-popover-padding);
-  min-width: calc(var(--space-unit) * 8);
-  min-height: calc(var(--space-unit) * 4);
+  background: var(--z-popover-theme--surface);
+  border-radius: var(--border-radius-small);
   color: var(--z-popover-theme--text);
-  fill: currentColor;
+  fill: currentcolor;
+  filter: var(--z-popover-shadow-filter);
   font-family: var(--font-family-sans);
   text-align: center;
-  border-radius: var(--border-radius-small);
-  background: var(--z-popover-theme--surface);
-  filter: var(--z-popover-shadow-filter);
 }
 
 :host([open][current-position]),
@@ -59,12 +59,12 @@
   --arrow-center-x-offset: calc(50% - (var(--arrow-size) / 2));
   --arrow-center-y-offset: calc(100% - (var(--arrow-size) / 2));
 
-  display: block;
-  content: "";
   position: absolute;
+  display: block;
   width: var(--arrow-size);
   height: var(--arrow-size);
   background: var(--z-popover-theme--surface);
+  content: "";
   transform: rotate(45deg);
 }
 
@@ -142,6 +142,6 @@
 }
 
 ::slotted(*) {
-  flex: 1 auto;
   overflow: auto;
+  flex: 1 auto;
 }

package/dist/collection/components/z-section-title/index.js

@@ -1,5 +1,5 @@
-import { h } from "@stencil/core";
-import { DividerSize, ZSectionTitleDividerPositions, } from "../../beans";
+import { h, Host } from "@stencil/core";
+import { DividerSize, ZSectionTitleDividerPosition } from "../../beans";
 /**
  * Section title component.
  * An optional secondary title can be put over the primary one.
@@ -15,7 +15,7 @@ export class ZSectionTitle {
      * Divider position for the primary title.
      * This prop only works if the secondary title is not set.
      */
-    this.dividerPosition = ZSectionTitleDividerPositions.before;
+    this.dividerPosition = ZSectionTitleDividerPosition.BEFORE;
     /**
      * Whether the primary title text is uppercase.
      */
@@ -25,16 +25,7 @@ export class ZSectionTitle {
     this.hasSecondaryTitle = !!this.host.querySelector("[slot=secondary-title]");
   }
   render() {
-    return [
-      h("slot", { name: "secondary-title" }),
-      !this.hasSecondaryTitle &&
-        this.dividerPosition == ZSectionTitleDividerPositions.before &&
-        h("z-divider", { size: DividerSize.large, color: "z-section-title--divider-color" }),
-      h("slot", { name: "primary-title" }),
-      !this.hasSecondaryTitle &&
-        this.dividerPosition == ZSectionTitleDividerPositions.after &&
-        h("z-divider", { size: DividerSize.large, color: "z-section-title--divider-color" }),
-    ];
+    return (h(Host, null, h("slot", { name: "secondary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.BEFORE && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" })), h("slot", { name: "primary-title" }), !this.hasSecondaryTitle && this.dividerPosition === ZSectionTitleDividerPosition.AFTER && (h("z-divider", { size: DividerSize.LARGE, color: "z-section-title--divider-color" }))));
   }
   static get is() { return "z-section-title"; }
   static get encapsulation() { return "shadow"; }
@@ -55,7 +46,7 @@ export class ZSectionTitle {
         "mutable": false,
         "complexType": {
           "original": "ZSectionTitleDividerPosition",
-          "resolved": "\"after\" | \"before\"",
+          "resolved": "ZSectionTitleDividerPosition.AFTER | ZSectionTitleDividerPosition.BEFORE",
           "references": {
             "ZSectionTitleDividerPosition": {
               "location": "import",
@@ -71,7 +62,7 @@ export class ZSectionTitle {
         },
         "attribute": "divider-position",
         "reflect": false,
-        "defaultValue": "ZSectionTitleDividerPositions.before"
+        "defaultValue": "ZSectionTitleDividerPosition.BEFORE"
       },
       "uppercase": {
         "type": "boolean",

package/dist/collection/components/z-section-title/styles.css

@@ -2,9 +2,9 @@
   --z-section-title--divider-color: var(--red500);
 
   display: flex;
+  width: fit-content;
   flex-direction: column;
   align-items: flex-start;
-  width: fit-content;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
@@ -21,9 +21,9 @@
 ::slotted([slot="secondary-title"]) {
   padding-bottom: calc(var(--space-unit) / 2);
   border-bottom: var(--border-size-large) solid var(--z-section-title--divider-color);
-  text-transform: uppercase;
   font-size: var(--font-size-3);
   line-height: 1.5rem;
+  text-transform: uppercase;
 }
 
 ::slotted([slot="primary-title"]) {

package/dist/collection/components/z-skip-to-content/index.js

@@ -1,4 +1,4 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getElementTree, handleKeyboardSubmit } from "../../utils/utils";
 import { ThemeVariant } from "../../beans";
 /**
@@ -12,47 +12,45 @@ export class ZSkipToContent {
     this.visibleLink = "";
   }
   handleFocusOutSkipToContent(e) {
-    if (this.isInSkipToContent(e.target))
+    if (this.isInSkipToContent(e.target)) {
       this.visible = false;
+    }
   }
   handleFocusSkipToContent(e) {
-    if (this.isInSkipToContent(e.target))
+    if (this.isInSkipToContent(e.target)) {
       this.visible = true;
+    }
   }
   componentDidLoad() {
     this.showFirstChild();
   }
   componentWillRender() {
     if (this.links) {
-      this.links =
-        typeof this.links === "string" ? JSON.parse(this.links) : this.links;
+      this.links = typeof this.links === "string" ? JSON.parse(this.links) : this.links;
     }
   }
   isInSkipToContent(elem) {
     const tree = getElementTree(elem);
     const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
-    if (menuParent)
-      return true;
-    return false;
-  }
-  getFirstChild() {
-    const children = this.hostElement.children;
-    if (children.length)
-      return children[0];
-    return false;
+    return !!menuParent;
   }
   showFirstChild() {
-    const firstChild = this.getFirstChild();
-    if (firstChild)
+    var _a;
+    const firstChild = (_a = this.hostElement.children) === null || _a === void 0 ? void 0 : _a[0];
+    if (firstChild) {
       this.visibleLink = firstChild.id;
+    }
   }
   handleLinkClick() {
     this.visible = false;
   }
   render() {
-    return (h(Host, { class: `${this.variant} ${this.visible && "skip-to-content-visible"} `, ref: (el) => el }, this.links.map((link, i) => {
+    return (h(Host, { class: {
+        [this.variant]: true,
+        "skip-to-content-visible": this.visible,
+      } }, this.links.map((link, i) => {
       const id = `skip-to-content-${i}`;
-      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.dark ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
     })));
   }
   static get is() { return "z-skip-to-content"; }
@@ -74,7 +72,7 @@ export class ZSkipToContent {
         "mutable": false,
         "complexType": {
           "original": "ThemeVariant",
-          "resolved": "ThemeVariant.dark | ThemeVariant.light",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
           "references": {
             "ThemeVariant": {
               "location": "import",