@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-rc1

package/dist/collection/components/z-notification/index.stories.js

@@ -2,6 +2,7 @@ import { html } from "lit";
 import { NotificationType } from "../../beans";
 import "./index";
 import "./index.stories.css";
+const DEMO_LONG_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum. Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie, justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget. Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna, pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod, tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget. Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est, non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor, elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.";
 const StoryMeta = {
     title: "ZNotification",
     component: "z-notification",
@@ -12,13 +13,21 @@ const StoryMeta = {
             },
             options: Object.values(NotificationType),
         },
+        borderposition: {
+            control: {
+                type: "inline-radio",
+            },
+            options: ["top", "bottom"],
+        },
     },
     args: {
-        contenticonname: "checkmark-circle-filled",
-        actiontext: "Annulla",
-        showclose: false,
-        sticky: false,
-        type: NotificationType.SUCCESS,
+        "--z-notification--content-max-width": "100%",
+        "contenticonname": "checkmark-circle-filled",
+        "borderposition": "bottom",
+        "actiontext": "Annulla",
+        "showclose": false,
+        "sticky": false,
+        "type": NotificationType.SUCCESS,
     },
 };
 export default StoryMeta;
@@ -30,6 +39,7 @@ export const Default = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
       <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
     </z-notification>
@@ -43,20 +53,20 @@ export const LongText = {
       .type=${args.type}
       .showclose=${args.showclose}
       .sticky=${args.sticky}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
     >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
-      Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
-      justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis augue
-      turpis, eu consectetur purus consectetur vitae.
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
+        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
+        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis
+        augue turpis, eu consectetur purus consectetur vitae.
+      </div>
     </z-notification>
   `,
 };
-/**
- * To use the banner variant set the `sticky` property to `true`.
- */
-export const BannerVariant = {
+export const StickyBanner = {
     args: {
-        notificationText: "Questo è il testo della notifica",
+        "--z-notification--top-offset": "0",
     },
     parameters: {
         controls: {
@@ -70,54 +80,48 @@ export const BannerVariant = {
         .actiontext=${args.actiontext}
         .type=${args.type}
         .showclose=${args.showclose}
-        sticky="true"
+        .sticky="true"
+        style="--z-notification--top-offset: ${args["--z-notification--top-offset"]}; --z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
-        ${args.notificationText}
+        Questo è il testo della notifica
       </z-notification>
-      <h2 class="heading-1-sb">Titolo della pagina</h2>
-      <div class="body-1">
+      <div class="heading-1-sb">Titolo della pagina</div>
+      <div class="body-1">${DEMO_LONG_TEXT}</div>
+    </div>
+  `,
+};
+export const CenteredContent = {
+    args: {
+        "--z-notification--content-max-width": "768px",
+    },
+    render: (args) => html `
+    <z-notification
+      .contenticonname=${args.contenticonname}
+      .actiontext=${args.actiontext}
+      .type=${args.type}
+      .showclose=${args.showclose}
+      .sticky=${args.sticky}
+      .borderposition=${args.borderposition}
+      style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
+    >
+      <div>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
-        Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna. Quisque molestie,
-        justo non pretium egestas, lorem elit malesuada turpis, et malesuada sapien nunc a urna. Curabitur sagittis
-        augue turpis, eu consectetur purus consectetur vitae. Sed bibendum nisl diam, eget egestas enim elementum eget.
-        Donec quis magna lobortis, tristique nunc in, fringilla lacus. Duis ac porta turpis. Aenean aliquam tortor sed
-        felis interdum aliquet dignissim vel ligula. Donec auctor risus vitae nisi finibus, sed suscipit tellus
-        fringilla. Sed malesuada gravida tincidunt. Duis tincidunt orci at magna egestas fermentum. Nulla laoreet ante
-        felis, non molestie mi venenatis sit amet. Nullam sollicitudin tempus lacus ac maximus. Suspendisse erat magna,
-        pellentesque ut lectus sit amet, aliquet scelerisque augue. In at felis facilisis, sodales tortor euismod,
-        tincidunt tellus. Quisque vulputate dolor vitae nibh pharetra, a auctor turpis mattis. Nulla facilisi. Vivamus a
-        facilisis ex. Vestibulum ultricies scelerisque sapien eu pharetra. Etiam ut porttitor lorem, id ullamcorper
-        risus. Donec sed sollicitudin metus. Sed sapien lectus, bibendum quis lorem efficitur, pellentesque maximus
-        lectus. Quisque quis lectus quis dolor ultrices facilisis placerat finibus nulla. Donec laoreet urna id varius
-        facilisis. Nulla facilisi. Pellentesque dignissim aliquam interdum. Fusce ante mauris, blandit nec imperdiet
-        mattis, dictum non sapien. Donec aliquet feugiat quam quis cursus. Curabitur et rutrum nunc. Phasellus ut lorem
-        posuere, eleifend felis sed, lobortis arcu. Nam efficitur purus non dolor tincidunt, nec euismod lectus
-        hendrerit. Sed eget rutrum odio, ac maximus lacus. Etiam rutrum purus diam, eu pellentesque elit vulputate eget.
-        Donec nulla augue, euismod non mollis congue, laoreet vel orci. Cras eget suscipit felis. Phasellus eget erat eu
-        nisl suscipit pulvinar. Nunc ullamcorper orci sit amet dui placerat, at vulputate libero finibus. Quisque
-        dignissim risus dolor, a porta erat cursus vel. Sed cursus pellentesque magna fringilla varius. Proin sit amet
-        posuere massa. Proin nisl massa, hendrerit non congue mattis, tincidunt in turpis. Etiam pharetra posuere est,
-        non mollis sapien malesuada non. Quisque metus lectus, hendrerit vel accumsan et, ornare a eros. Donec tempor,
-        elit ut pulvinar auctor, sapien velit consectetur justo, interdum lobortis risus ligula vitae nunc. Praesent
-        quam felis, posuere et consequat consectetur, tempus non sem. Phasellus in ligula enim. Donec gravida, felis
-        vitae elementum mattis, velit ipsum aliquam ipsum, a cursus nisi nisl nec sapien. Ut et orci nulla. Donec
-        fringilla magna non risus imperdiet euismod. Sed viverra eget turpis et faucibus. Sed ante orci, interdum in
-        ligula in, tincidunt feugiat arcu. In viverra efficitur urna laoreet tristique. Phasellus hendrerit, urna et
-        condimentum aliquet, ex urna condimentum dui, vitae vestibulum mauris risus sit amet nunc. Quisque egestas est
-        vel lorem commodo, eget vestibulum enim cursus. Cras lectus velit, fermentum eget mauris id, interdum cursus
-        massa. Maecenas quis dui vehicula mauris condimentum finibus. Sed et magna velit. Duis eleifend dolor at
-        sagittis ornare. Aenean commodo massa enim, ac varius augue varius quis.
+        Curabitur volutpat mi purus, in maximus nisl volutpat quis.
       </div>
+    </z-notification>
+    <div
+      class="z-notification-demo-page"
+      style="max-width: ${args["--z-notification--content-max-width"]}"
+    >
+      <div class="heading-1">Titolo della pagina</div>
+      <div class="body-1">${DEMO_LONG_TEXT}</div>
     </div>
   `,
 };
 /**
- * To use the inline variant set the `sticky` property to `false`.
+ * To have an inline notification keep the `sticky` property set to `false`.
  */
-export const InlineVariant = {
-    args: {
-        notificationText: "Questo è il testo della notifica",
-    },
+export const Inline = {
     parameters: {
         controls: {
             exclude: ["sticky"],
@@ -126,16 +130,17 @@ export const InlineVariant = {
     render: (args) => html `
     <div class="inline-notification-demo">
       <z-notification
-        contenticonname=${args.contenticonname}
-        actiontext=${args.actiontext}
-        type=${args.type}
-        showclose=${args.showclose}
-        sticky="false"
+        .contenticonname=${args.contenticonname}
+        .actiontext=${args.actiontext}
+        .type=${args.type}
+        .showclose=${args.showclose}
+        .sticky="false"
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
       >
-        ${args.notificationText}
+        Questo è il testo della notifica
       </z-notification>
       <div class="content">
-        <h2 class="heading-1">Titolo della scheda</h2>
+        <div class="heading-1">Titolo della scheda</div>
         <div class="body-1">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus magna imperdiet malesuada interdum.
           Curabitur volutpat mi purus, in maximus nisl volutpat quis. Suspendisse sed vestibulum magna.
@@ -144,4 +149,26 @@ export const InlineVariant = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map
+/**
+ * The position of the border can be changed to correctly display the notification when put on the bottom of the screen.
+ */
+export const BorderPosition = {
+    args: {
+        borderposition: "top",
+    },
+    render: (args) => html `
+    <div class="z-notification-border-position-demo">
+      <z-notification
+        .contenticonname=${args.contenticonname}
+        .actiontext=${args.actiontext}
+        .type=${args.type}
+        .showclose=${args.showclose}
+        .sticky=${args.sticky}
+        .borderposition=${args.borderposition}
+        style="--z-notification--content-max-width: ${args["--z-notification--content-max-width"]}"
+      >
+        <div class="notification-container"><strong>NOVITÀ</strong>: Testo che descrive le novità.</div>
+      </z-notification>
+    </div>
+  `,
+};

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

@@ -1,14 +1,20 @@
 :host {
   --z-notification--top-offset: 0;
+  --z-notification--content-max-width: 100%;
+  --z-notification--inline-padding: ;
 
-  display: flex;
+  display: block;
   width: 100%;
-  box-sizing: border-box;
+}
+
+.main-container {
+  display: flex;
+  max-width: var(--z-notification--content-max-width);
   align-items: flex-start;
-  padding: calc(var(--space-unit) * 2);
-  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+  padding: calc(var(--space-unit) * 2) var(--z-notification--inline-padding, calc(var(--space-unit) * 2));
+  margin: 0 auto;
+  background-color: transparent;
   font-family: var(--font-family-sans);
-  outline: none;
 }
 
 :host([sticky]) {
@@ -54,8 +60,15 @@
   fill: var(--color-default-error);
 }
 
-:host > button,
-.content-container > button {
+:host([borderposition="bottom"]) {
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+}
+
+:host([borderposition="top"]) {
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+}
+
+button {
   padding: 0;
   border: none;
   margin: 0;
@@ -78,12 +91,12 @@
 }
 
 .content-text {
-  max-width: 800px;
+  width: 100%;
   color: var(--color-default-text);
   font-size: var(--font-size-2);
   font-weight: var(--font-rg);
   letter-spacing: 0.16px;
-  line-height: 20px;
+  line-height: 1.4;
 }
 
 .action-button {
@@ -91,12 +104,12 @@
   font-size: var(--font-size-1);
   font-weight: var(--font-sb);
   letter-spacing: 0.32px;
-  line-height: 16px;
+  line-height: 1.333;
+  outline: none;
 }
 
-.action-button:focus {
+.action-button:focus-visible {
   box-shadow: var(--shadow-focus-primary);
-  outline: none !important;
 }
 
 .content-container + .close-button {
@@ -108,7 +121,7 @@
 }
 
 /* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
+@media (min-width: 768px) {
   .content-container {
     flex-wrap: nowrap;
   }

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

@@ -8,14 +8,33 @@ import { KeyboardCode, OffCanvasVariant, TransitionDirection } from "../../beans
  */
 export class ZOffcanvas {
     constructor() {
-        this.allFocusableElements = [];
-        this.previouslyFocusedElement = null;
+        /**
+         * Offcanvas variant.
+         * - `overlay`: The offcanvas covers the page content putting an overlay.
+         * - `pushcontent`: The offcanvas isn't absolutely positioned and "pushes" the page content.
+         * > NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.
+         * Also, the `pushcontent` variant doesn't have the open/close transition.
+         */
         this.variant = OffCanvasVariant.PUSHCONTENT;
+        /** Whether the offcanvas is open. Default: false */
         this.open = false;
+        /**
+         * Open the content transitioning to a specified direction.
+         * The `up` direction always show the `overlay`, also when the variant is `pushcontent`.
+         */
         this.transitiondirection = TransitionDirection.LEFT;
+        /**
+         * Skip the opening transition when the offcanvas is already open at the first render.
+         * @deprecated This prop is not needed anymore, the component will automatically skip the transition
+         *  when it starts with `open` set to `true`. Only exists for Typescript backward compatibility.
+         */
         this.skipLoadAnimation = false;
+        /** Whether to show the backdrop when the offcanvas is open. Default: true */
         this.showBackdrop = true;
+        /** Used to skip the opening transition when the offcanvas is already open at the first render. */
         this.skipAnimation = false;
+        this.allFocusableElements = [];
+        this.previouslyFocusedElement = null;
     }
     /**
      * Returns all focusable elements inside the offcanvas content.
@@ -140,8 +159,8 @@ export class ZOffcanvas {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '8d7045110c92bf5ef1ef2f8d60ddaf1af55ace92', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: 'ef823ffd39a7f63aae8ef95333da611ec4485292', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '7a6586d273275f1686fe0b1406d71e782d5d71c3', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: '5930bb55687c9dd286828dc262c1f2cb18ebdd75', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
-            this.showBackdrop && (h("div", { key: 'a65de1a8b0e92e0520d410a88c98edfe5bb56100', class: "backdrop", onClick: () => (this.open = false) }))));
+        return (h(Host, { key: '4a7d050590730574ccb25ecd1f93032fac113549', "skip-animation": this.skipAnimation, "aria-hidden": !this.open ? "true" : null }, h("div", { key: '4507bf74ea9c8b097173ed048cd52af0704b8fb6', class: "canvas-container", role: "presentation", ref: (el) => (this.canvasContainer = el) }, h("div", { key: '79c69732bcdf90d5dc25713bdec66034b595f75d', class: "canvas-content z-scrollbar", role: "presentation", ref: (el) => (this.canvasContent = el) }, h("slot", { key: 'f133b7048d147138f4db154f2591070b5c74bd8a', name: "canvasContent" }))), (this.variant == OffCanvasVariant.OVERLAY || this.transitiondirection === TransitionDirection.UP) &&
+            this.showBackdrop && (h("div", { key: '885eeed8b2ebd31467366f208c5f66eace44ad0c', class: "backdrop", onClick: () => (this.open = false) }))));
     }
     static get is() { return "z-offcanvas"; }
     static get encapsulation() { return "scoped"; }
@@ -167,7 +186,8 @@ export class ZOffcanvas {
                         "OffCanvasVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::OffCanvasVariant"
+                            "id": "src/beans/index.tsx::OffCanvasVariant",
+                            "referenceLocation": "OffCanvasVariant"
                         }
                     }
                 },
@@ -177,8 +197,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Offcanvas variant.\n- `overlay`: The offcanvas covers the page content putting an overlay.\n- `pushcontent`: The offcanvas isn't absolutely positioned and \"pushes\" the page content.\n> NB: `pushcontent` variant may need some extra style tuning of the context around the component to work properly.\nAlso, the `pushcontent` variant doesn't have the open/close transition."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "OffCanvasVariant.PUSHCONTENT"
             },
             "open": {
@@ -195,8 +217,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether the offcanvas is open. Default: false"
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "transitiondirection": {
@@ -209,7 +233,8 @@ export class ZOffcanvas {
                         "TransitionDirection": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::TransitionDirection"
+                            "id": "src/beans/index.tsx::TransitionDirection",
+                            "referenceLocation": "TransitionDirection"
                         }
                     }
                 },
@@ -219,8 +244,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Open the content transitioning to a specified direction.\nThe `up` direction always show the `overlay`, also when the variant is `pushcontent`."
                 },
-                "attribute": "transitiondirection",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "transitiondirection",
                 "defaultValue": "TransitionDirection.LEFT"
             },
             "skipLoadAnimation": {
@@ -240,8 +267,10 @@ export class ZOffcanvas {
                         }],
                     "text": "Skip the opening transition when the offcanvas is already open at the first render."
                 },
-                "attribute": "skip-load-animation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "skip-load-animation",
                 "defaultValue": "false"
             },
             "showBackdrop": {
@@ -258,8 +287,10 @@ export class ZOffcanvas {
                     "tags": [],
                     "text": "Whether to show the backdrop when the offcanvas is open. Default: true"
                 },
-                "attribute": "show-backdrop",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-backdrop",
                 "defaultValue": "true"
             }
         };
@@ -318,4 +349,3 @@ export class ZOffcanvas {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -141,4 +141,3 @@ export const PushContent = {
       </div>
     </div>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { InputType } from "../../beans";
 /**
  * Pagination bar component.
@@ -7,17 +7,24 @@ import { InputType } from "../../beans";
  */
 export class ZPagination {
     constructor() {
-        this.label = undefined;
+        /** Enable navigation arrows. */
         this.navArrows = true;
-        this.totalPages = undefined;
+        /** Number of pages to skip. */
         this.skip = 0;
+        /** Enable buttons to go to the first and last pages. */
         this.edges = false;
-        this.split = undefined;
-        this.visiblePages = undefined;
+        /** Current page. */
         this.currentPage = 1;
-        this.goToPage = undefined;
+        /**
+         * Internal visible pages variable.
+         * Needed to better handle conflicting props like `visiblePages` and `split`.
+         * This state will change based on props values and validation,
+         * keeping original `visiblePages` value intact.
+         */
         this._visiblePages = this.visiblePages;
+        /** Used to hides/change some functionalities on smaller screen sizes */
         this.isMobile = false;
+        /** Value of the go to page input */
         this.goToPageValue = null;
     }
     /**
@@ -171,10 +178,10 @@ export class ZPagination {
         ];
     }
     renderBackButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla pagina precedente", title: "Vai alla pagina precedente", disabled: this.currentPage === 1, onClick: () => this.selectPage(this.currentPage - 1) }, h("z-icon", { name: "chevron-left" })));
     }
     renderForwardButton() {
-        return (h("button", { class: "navigation-button", type: "button", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
+        return (h("button", { class: "navigation-button", type: "button", "aria-label": "Vai alla prossima pagina", title: "Vai alla prossima pagina", disabled: this.currentPage === this.totalPages, onClick: () => this.selectPage(this.currentPage + 1) }, h("z-icon", { name: "chevron-right" })));
     }
     renderMobile() {
         const pagesChunks = this.getPagesChunks();
@@ -235,8 +242,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Pagination label placed before the bar."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "navArrows": {
                 "type": "boolean",
@@ -252,8 +261,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Enable navigation arrows."
                 },
-                "attribute": "nav-arrows",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "nav-arrows",
                 "defaultValue": "true"
             },
             "totalPages": {
@@ -270,8 +281,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Total number of pages. Required."
                 },
-                "attribute": "total-pages",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-pages"
             },
             "skip": {
                 "type": "number",
@@ -287,8 +300,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to skip."
                 },
-                "attribute": "skip",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "skip",
                 "defaultValue": "0"
             },
             "edges": {
@@ -305,8 +320,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Enable buttons to go to the first and last pages."
                 },
-                "attribute": "edges",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "edges",
                 "defaultValue": "false"
             },
             "split": {
@@ -323,8 +340,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to show left/right of the current, before showing \"load more\" symbol (\u2026)."
                 },
-                "attribute": "split",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "split"
             },
             "visiblePages": {
                 "type": "number",
@@ -340,8 +359,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Number of pages to show at a time. If not set, all pages will be shown."
                 },
-                "attribute": "visible-pages",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible-pages"
             },
             "currentPage": {
                 "type": "number",
@@ -357,8 +378,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Current page."
                 },
-                "attribute": "current-page",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "current-page",
                 "defaultValue": "1"
             },
             "goToPage": {
@@ -375,8 +398,10 @@ export class ZPagination {
                     "tags": [],
                     "text": "Whether to show \"go to page\" feature."
                 },
-                "attribute": "go-to-page",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "go-to-page"
             }
         };
     }
@@ -431,4 +456,3 @@ export class ZPagination {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -115,4 +115,3 @@ export const Skip = {
         skip: 10,
     },
 };
-//# sourceMappingURL=index.stories.js.map