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

package/dist/collection/components/z-info-reveal/index.js

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from '@stencil/core';
 import { InfoRevealPosition } from "../../beans";
 /**
  * Info reveal component.
@@ -13,9 +13,8 @@ import { InfoRevealPosition } from "../../beans";
 export class ZInfoReveal {
   constructor() {
     /** Name of the icon for the open button */
-    this.icon = "informationsource";
-    /** Info reveal's position */
-    this.position = InfoRevealPosition.BOTTOM_RIGHT;
+    this.icon = 'informationsource';
+    this.position = InfoRevealPosition.bottom_right;
     /** Whether the info panel is open. */
     this.open = false;
     /** Current index for the info queue. */
@@ -24,10 +23,10 @@ export class ZInfoReveal {
   watchItems() {
     Array.from(this.el.children).forEach((child, index) => {
       if (this.currentIndex === index) {
-        child.setAttribute("data-current", "");
+        child.setAttribute('data-current', '');
       }
       else {
-        child.removeAttribute("data-current");
+        child.removeAttribute('data-current');
       }
     });
   }
@@ -55,7 +54,7 @@ export class ZInfoReveal {
     }
   }
   render() {
-    return (h(Host, { open: this.open }, h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
+    return h(Host, { open: this.open }, h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { name: this.icon })), this.open && h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))));
   }
   static get is() { return "z-info-reveal"; }
   static get encapsulation() { return "shadow"; }
@@ -87,16 +86,16 @@ export class ZInfoReveal {
         },
         "attribute": "icon",
         "reflect": false,
-        "defaultValue": "\"informationsource\""
+        "defaultValue": "'informationsource'"
       },
       "position": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InfoRevealPosition",
-          "resolved": "InfoRevealPosition.BOTTOM_LEFT | InfoRevealPosition.BOTTOM_RIGHT | InfoRevealPosition.TOP_LEFT | InfoRevealPosition.TOP_RIGHT",
+          "original": "InfoRevealPositionBean",
+          "resolved": "\"bottom_left\" | \"bottom_right\" | \"top_left\" | \"top_right\"",
           "references": {
-            "InfoRevealPosition": {
+            "InfoRevealPositionBean": {
               "location": "import",
               "path": "../../beans"
             }
@@ -106,11 +105,11 @@ export class ZInfoReveal {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Info reveal's position"
+          "text": ""
         },
         "attribute": "position",
         "reflect": true,
-        "defaultValue": "InfoRevealPosition.BOTTOM_RIGHT"
+        "defaultValue": "InfoRevealPosition.bottom_right"
       },
       "label": {
         "type": "string",

package/dist/collection/components/z-info-reveal/styles.css

@@ -11,40 +11,39 @@
   color: var(--z-info-reveal-theme--text);
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
-  letter-spacing: 0;
   line-height: 1.5;
+  letter-spacing: 0;
 }
 
 button {
   padding: 0;
-  border: none;
   background-color: transparent;
+  cursor: pointer;
+  border: none;
   border-radius: 0;
   color: inherit;
-  cursor: pointer;
-  fill: currentcolor;
+  fill: currentColor;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  letter-spacing: inherit;
   line-height: inherit;
+  letter-spacing: inherit;
 }
 
 z-icon {
   --z-icon-width: calc(var(--space-unit) * 3);
   --z-icon-height: calc(var(--space-unit) * 3);
-
   display: flex;
 }
 
 .z-info-reveal-trigger {
   display: flex;
+  align-items: center;
   width: fit-content;
   height: 100%;
-  align-items: center;
+  column-gap: calc(var(--space-unit) / 2);
   padding: calc(var(--space-unit) / 2);
   box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
 }
 
 :host([position="top_left"]) .z-info-reveal-trigger,
@@ -60,10 +59,10 @@ z-icon {
   position: absolute;
   display: flex;
   max-width: var(--z-info-reveal-max-width);
+  column-gap: calc(var(--space-unit) / 2);
   padding: calc(var(--space-unit) / 2);
   background-color: var(--z-info-reveal-theme--surface);
   box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
   cursor: pointer;
 }
 

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { OffCanvasVariantsEnum, TransitionDirectionEnum } from "../../beans";
 /**
  * @slot canvasContent - set the content of the canvas
@@ -6,15 +6,15 @@ import { OffCanvasVariantsEnum, TransitionDirectionEnum } from "../../beans";
 export class ZOffcanvas {
   constructor() {
     /**
-     * Offcanvas variant.
-     * Can be one of "overlay", "pushcontent"
-     * Default variant: pushcontent
-     */
-    this.variant = OffCanvasVariantsEnum.PUSHCONTENT;
+    * Offcanvas variant.
+    * Can be one of "overlay", "pushcontent"
+    * Default variant: pushcontent
+    */
+    this.variant = OffCanvasVariantsEnum.pushcontent;
     /** open component. Default: false */
     this.open = false;
     /** open content transitioning in a specified direction left | right. Default: left */
-    this.transitiondirection = TransitionDirectionEnum.LEFT;
+    this.transitiondirection = TransitionDirectionEnum.left;
   }
   componentWillLoad() {
     this.handleOpenStatus();
@@ -27,7 +27,7 @@ export class ZOffcanvas {
     if (this.open) {
       this.hostElement.style.display = "flex";
     }
-    else if (this.variant === OffCanvasVariantsEnum.PUSHCONTENT) {
+    else if (this.variant === OffCanvasVariantsEnum.pushcontent) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "hidden";
     }
@@ -36,13 +36,16 @@ export class ZOffcanvas {
     if (this.hostElement.hasAttribute("open")) {
       this.hostElement.querySelector(`.canvas-content`).focus();
     }
-    else if (this.variant === OffCanvasVariantsEnum.OVERLAY) {
+    else if (this.variant === OffCanvasVariantsEnum.overlay) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "initial";
     }
   }
   render() {
-    return (h(Host, null, h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { class: "canvas-content", tabindex: "0" }, h("slot", { name: "canvasContent" }))), h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => (this.open = false) })));
+    return [
+      h("div", { class: "canvas-container", onAnimationEnd: () => this.handleAnimationEnd() }, h("div", { class: "canvas-content" }, h("slot", { name: "canvasContent" }))),
+      h("div", { class: "canvas-background", "data-action": "canvasBackground", onClick: () => this.open = false })
+    ];
   }
   static get is() { return "z-offcanvas"; }
   static get encapsulation() { return "scoped"; }
@@ -63,7 +66,7 @@ export class ZOffcanvas {
         "mutable": false,
         "complexType": {
           "original": "OffCanvasVariantsEnum",
-          "resolved": "OffCanvasVariantsEnum.OVERLAY | OffCanvasVariantsEnum.PUSHCONTENT",
+          "resolved": "OffCanvasVariantsEnum.overlay | OffCanvasVariantsEnum.pushcontent",
           "references": {
             "OffCanvasVariantsEnum": {
               "location": "import",
@@ -79,7 +82,7 @@ export class ZOffcanvas {
         },
         "attribute": "variant",
         "reflect": true,
-        "defaultValue": "OffCanvasVariantsEnum.PUSHCONTENT"
+        "defaultValue": "OffCanvasVariantsEnum.pushcontent"
       },
       "open": {
         "type": "boolean",
@@ -104,7 +107,7 @@ export class ZOffcanvas {
         "mutable": false,
         "complexType": {
           "original": "TransitionDirectionEnum",
-          "resolved": "TransitionDirectionEnum.LEFT | TransitionDirectionEnum.RIGHT",
+          "resolved": "TransitionDirectionEnum.left | TransitionDirectionEnum.right",
           "references": {
             "TransitionDirectionEnum": {
               "location": "import",
@@ -120,7 +123,7 @@ export class ZOffcanvas {
         },
         "attribute": "transitiondirection",
         "reflect": true,
-        "defaultValue": "TransitionDirectionEnum.LEFT"
+        "defaultValue": "TransitionDirectionEnum.left"
       }
     };
   }

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

@@ -1,69 +1,59 @@
 :host {
   --z-offcanvas--container-width: 375px;
-  --z-offcanvas--top-space: 0;
+  --z-offcanvas--top-space: 0px;
 
   z-index: 1000;
   display: none;
-  min-width: 100%;
-  height: 100%;
   justify-content: end;
+  height: 100%;
+  min-width: 100%;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
 .canvas-container {
-  z-index: 1010;
   display: flex;
-  overflow: -moz-scrollbars-none;
-  overflow: hidden;
+  flex-direction: column;
+  z-index: 1010;
   min-width: 100%;
   height: 100%;
-  flex-direction: column;
+  overflow: -moz-scrollbars-none;
+  overflow: hidden;
   background: var(--color-surface01);
   transform: translateX(100%);
 }
 
-@keyframes enter-right {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
+@keyframes enterRight {
+  from {transform: translateX(100%);}
+  to {transform: translateX(0);}
 }
 
 :host([open]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: enter-right;
+  animation-name: enterRight;
+  animation-duration:0.4s;
   animation-timing-function: ease-out;
   transform: translateX(0);
 }
 
-@keyframes exit-right {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
+@keyframes exitRight {
+  from {transform: translateX(0);}
+  to {transform: translateX(100%);}
 }
 
 :host(:not([open])[variant="overlay"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-right;
+  animation-name: exitRight;
+  animation-duration:0.4s;
   animation-timing-function: ease-out;
   transform: translateX(100%);
 }
 
 :host([variant="overlay"]) {
   position: fixed;
+  height: calc(100% - var(--z-offcanvas--top-space));
   top: var(--z-offcanvas--top-space);
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
-  height: calc(100% - var(--z-offcanvas--top-space));
 }
 
 :host([variant="overlay"]) .canvas-background {
@@ -83,51 +73,46 @@
   transform: translateX(-100%);
 }
 
-@keyframes enter-left {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
+@keyframes enterLeft {
+  from {transform: translateX(-100%);}
+  to {transform: translateX(0);}
 }
 
 :host([transitiondirection="right"][open]) > .canvas-container {
+  animation-name: enterLeft;
   animation-duration: 0.4s;
-  animation-name: enter-left;
   animation-timing-function: ease-out;
   transform: translateX(0);
 }
 
-@keyframes exit-left {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(-100%);
-  }
+@keyframes exitLeft {
+  from {transform: translateX(0);}
+  to {transform: translateX(-100%);}
 }
 
 :host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-left;
+  animation-name: exitLeft;
+  animation-duration:0.4s;
   animation-timing-function: ease-out;
   transform: translateX(-100%);
 }
 
 .canvas-container > .canvas-content {
-  overflow: auto;
   flex: 1 auto;
-  padding: 0 calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
+  overflow: auto;
   overflow-x: hidden;
+  padding: 0 calc(var(--space-unit) * 2) ;
+  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar {
+  background: linear-gradient(
+    to right,
+    transparent 0 3px,
+    var(--gray200) 3px 7px,
+    transparent 7px 10px
+  );
   width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
@@ -136,9 +121,9 @@
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar-thumb {
-  width: 10px;
   background-color: var(--color-primary01);
   border-radius: var(--border-radius);
+  width: 10px;
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {
@@ -155,29 +140,24 @@
   :host {
     min-width: auto;
   }
-
   .canvas-container {
     width: auto;
-    min-width: max(var(--z-offcanvas--container-width), 375px);
-    max-width: max(var(--z-offcanvas--container-width), 375px);
     height: auto;
+    min-width: max(var(--z-offcanvas--container-width), 375px);
     min-height: calc(var(--space-unit) * 40);
+    max-width: max(var(--z-offcanvas--container-width), 375px);
   }
 
   @keyframes grow {
-    from {
-      width: 0;
-    }
-
-    to {
-      width: max(var(--z-offcanvas--container-width), 375px);
-    }
+    from {width: 0;}
+    to {width: max(var(--z-offcanvas--container-width), 375px)}
   }
 
   :host(:not([variant="overlay"])[open]) {
-    width: auto;
-    animation-duration: 0.4s;
     animation-name: grow;
+    animation-duration: 0.4s;
     animation-timing-function: ease-out;
+    width: auto;
   }
 }
+

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

@@ -1,5 +1,4 @@
-import { h, Host } from "@stencil/core";
-import { InputTypeEnum } from "../../beans";
+import { h, } from "@stencil/core";
 /**
  * Pagination bar component.
  */
@@ -82,7 +81,7 @@ export class ZPagination {
   getPagesChunks() {
     // array of numbers from 1 to `totalPages`
     const pages = Array.from({ length: this.totalPages }, (_, i) => i + 1);
-    const chunks = [];
+    let 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));
@@ -129,14 +128,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.
@@ -156,7 +155,8 @@ 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: InputTypeEnum.NUMBER, min: 1, max: this.totalPages, message: false, onInput: (ev) => {
+        } }, h("z-input", { class: "go-to-page-input", type: "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 !== 0) {
+    if (this.split) {
       this.edges = false;
     }
     this.setPagesContainerWidth();
@@ -204,11 +204,14 @@ export class ZPagination {
   }
   render() {
     if (this.isMobile) {
-      return h(Host, null, this.renderMobile());
+      return this.renderMobile();
     }
-    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: InputTypeEnum.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("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")))),
+    ];
   }
   static get is() { return "z-pagination"; }
   static get originalStyleUrls() {

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

@@ -3,11 +3,12 @@ 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-flow: column wrap;
+  flex-wrap: 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,
@@ -34,37 +35,40 @@ z-pagination .page-label {
 
 z-pagination .pagination-bar {
   display: flex;
-  max-width: 100%;
-  height: 48px;
   align-items: center;
+  height: 48px;
+  max-width: 100%;
 }
 
 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);
-  cursor: pointer;
+  border: none;
   font-family: inherit;
   font-weight: inherit;
-  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;
+  cursor: pointer;
 }
 
 z-pagination .pagination-bar button:focus-visible {
-  background-color: var(--color-hover-surface);
-  box-shadow: inset var(--shadow-focus-primary);
   outline: none;
+  box-shadow: inset var(--shadow-focus-primary);
+  background-color: var(--color-hover-surface);
 }
 
 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 {
@@ -118,8 +122,8 @@ z-pagination .pagination-bar .page-button:focus-visible {
 }
 
 z-pagination .pagination-bar .page-button[data-current] {
-  border-bottom-color: var(--color-primary01);
   font-size: var(--font-size-7);
+  border-bottom-color: var(--color-primary01);
 }
 
 z-pagination .go-to-page {
@@ -145,15 +149,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;
-  appearance: none;
+  -moz-appearance: none;
 }
 
 z-pagination .mobile-go-to-page {
   display: flex;
-  height: 100%;
-  flex: 1 auto;
-  align-items: center;
   justify-content: center;
+  align-items: center;
+  flex: 1 auto;
+  height: 100%;
   background-color: var(--color-surface03);
 }
 
@@ -169,6 +173,7 @@ 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 {