@zanichelli/albe-web-components 5.6.0 → 6.0.0-rc1

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,8 +13,9 @@ import { InfoRevealPosition } from "../../beans";
 export class ZInfoReveal {
   constructor() {
     /** Name of the icon for the open button */
-    this.icon = 'informationsource';
-    this.position = InfoRevealPosition.bottom_right;
+    this.icon = "informationsource";
+    /** Info reveal's position */
+    this.position = InfoRevealPosition.BOTTOM_RIGHT;
     /** Whether the info panel is open. */
     this.open = false;
     /** Current index for the info queue. */
@@ -23,10 +24,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");
       }
     });
   }
@@ -54,7 +55,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"; }
@@ -86,16 +87,16 @@ export class ZInfoReveal {
         },
         "attribute": "icon",
         "reflect": false,
-        "defaultValue": "'informationsource'"
+        "defaultValue": "\"informationsource\""
       },
       "position": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "InfoRevealPositionBean",
-          "resolved": "\"bottom_left\" | \"bottom_right\" | \"top_left\" | \"top_right\"",
+          "original": "InfoRevealPosition",
+          "resolved": "InfoRevealPosition.BOTTOM_LEFT | InfoRevealPosition.BOTTOM_RIGHT | InfoRevealPosition.TOP_LEFT | InfoRevealPosition.TOP_RIGHT",
           "references": {
-            "InfoRevealPositionBean": {
+            "InfoRevealPosition": {
               "location": "import",
               "path": "../../beans"
             }
@@ -105,11 +106,11 @@ export class ZInfoReveal {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Info reveal's position"
         },
         "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,39 +11,40 @@
   color: var(--z-info-reveal-theme--text);
   font-size: var(--font-size-3);
   font-weight: var(--font-rg);
-  line-height: 1.5;
   letter-spacing: 0;
+  line-height: 1.5;
 }
 
 button {
   padding: 0;
-  background-color: transparent;
-  cursor: pointer;
   border: none;
+  background-color: transparent;
   border-radius: 0;
   color: inherit;
-  fill: currentColor;
+  cursor: pointer;
+  fill: currentcolor;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;
-  line-height: inherit;
   letter-spacing: inherit;
+  line-height: 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%;
-  column-gap: calc(var(--space-unit) / 2);
+  align-items: center;
   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,
@@ -59,10 +60,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,20 +1,20 @@
-import { h } from "@stencil/core";
-import { OffCanvasVariantsEnum, TransitionDirectionEnum } from "../../beans";
+import { h, Host } from "@stencil/core";
+import { OffCanvasVariant, TransitionDirection } from "../../beans";
 /**
  * @slot canvasContent - set the content of the canvas
  */
 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 = OffCanvasVariant.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 = TransitionDirection.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 === OffCanvasVariant.PUSHCONTENT) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "hidden";
     }
@@ -36,16 +36,13 @@ export class ZOffcanvas {
     if (this.hostElement.hasAttribute("open")) {
       this.hostElement.querySelector(`.canvas-content`).focus();
     }
-    else if (this.variant === OffCanvasVariantsEnum.overlay) {
+    else if (this.variant === OffCanvasVariant.OVERLAY) {
       this.hostElement.style.display = "none";
       document.body.style.overflowX = "initial";
     }
   }
   render() {
-    return [
-      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(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) })));
   }
   static get is() { return "z-offcanvas"; }
   static get encapsulation() { return "scoped"; }
@@ -65,10 +62,10 @@ export class ZOffcanvas {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "OffCanvasVariantsEnum",
-          "resolved": "OffCanvasVariantsEnum.overlay | OffCanvasVariantsEnum.pushcontent",
+          "original": "OffCanvasVariant",
+          "resolved": "OffCanvasVariant.OVERLAY | OffCanvasVariant.PUSHCONTENT",
           "references": {
-            "OffCanvasVariantsEnum": {
+            "OffCanvasVariant": {
               "location": "import",
               "path": "../../beans"
             }
@@ -82,7 +79,7 @@ export class ZOffcanvas {
         },
         "attribute": "variant",
         "reflect": true,
-        "defaultValue": "OffCanvasVariantsEnum.pushcontent"
+        "defaultValue": "OffCanvasVariant.PUSHCONTENT"
       },
       "open": {
         "type": "boolean",
@@ -106,10 +103,10 @@ export class ZOffcanvas {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "TransitionDirectionEnum",
-          "resolved": "TransitionDirectionEnum.left | TransitionDirectionEnum.right",
+          "original": "TransitionDirection",
+          "resolved": "TransitionDirection.LEFT | TransitionDirection.RIGHT",
           "references": {
-            "TransitionDirectionEnum": {
+            "TransitionDirection": {
               "location": "import",
               "path": "../../beans"
             }
@@ -123,7 +120,7 @@ export class ZOffcanvas {
         },
         "attribute": "transitiondirection",
         "reflect": true,
-        "defaultValue": "TransitionDirectionEnum.left"
+        "defaultValue": "TransitionDirection.LEFT"
       }
     };
   }

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

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

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 {