feat(pagination): dispatch button click events to be consistent with PaginationNav

COMPONENT_INDEX.md

@@ -2542,9 +2542,11 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail                                           |
+| Event name             | Type       | Detail                                           |
-| :--------- | :--------- | :----------------------------------------------- |
+| :--------------------- | :--------- | :----------------------------------------------- |
-| update     | dispatched | <code>{ pageSize: number; page: number; }</code> |
+| update                 | dispatched | <code>{ pageSize: number; page: number; }</code> |
+| click:button--previous | dispatched | <code>{ page: number; }</code>                   |
+| click:button--next     | dispatched | <code>{ page: number; }</code>                   |
 
 ## `PaginationNav`
 

docs/src/COMPONENT_API.json

@@ -6475,6 +6475,16 @@
           "type": "dispatched",
           "name": "update",
           "detail": "{ pageSize: number; page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--previous",
+          "detail": "{ page: number; }"
+        },
+        {
+          "type": "dispatched",
+          "name": "click:button--next",
+          "detail": "{ page: number; }"
         }
       ],
       "typedefs": [],

src/Pagination/Pagination.svelte

@@ -1,6 +1,8 @@
 <script>
   /**
    * @event {{ pageSize: number; page: number; }} update
+   * @event {{ page: number; }} click:button--previous
+   * @event {{ page: number; }} click:button--next
    */
 
   /** Specify the current page index */
@@ -162,6 +164,7 @@
         : ''}"
       on:click="{() => {
         page--;
+        dispatch('click:button--previous', { page });
       }}"
     />
     <Button
@@ -177,6 +180,7 @@
         : ''}"
       on:click="{() => {
         page++;
+        dispatch('click:button--next', { page });
       }}"
     />
   </div>

types/Pagination/Pagination.d.ts

@@ -102,6 +102,10 @@ export interface PaginationProps
 
 export default class Pagination extends SvelteComponentTyped<
   PaginationProps,
-  { update: CustomEvent<{ pageSize: number; page: number }> },
+  {
+    update: CustomEvent<{ pageSize: number; page: number }>;
+    ["click:button--previous"]: CustomEvent<{ page: number }>;
+    ["click:button--next"]: CustomEvent<{ page: number }>;
+  },
   {}
 > {}