@agnos-ui/core 0.4.3 → 0.5.0-next.0

package/config.d.ts

@@ -8,9 +8,22 @@ import type { AccordionProps } from './components/accordion/accordion';
 import type { ProgressbarProps } from './components/progressbar/progressbar';
 import type { SliderProps } from './components/slider/slider';
 import type { ToastProps } from './components/toast/toast';
+/**
+ * A utility type that makes all properties of an object type `T` optional,
+ * and also makes all properties of the nested objects within `T` optional.
+ *
+ * @template T - The object type to be transformed.
+ */
 export type Partial2Levels<T> = Partial<{
     [Level1 in keyof T]: Partial<T[Level1]>;
 }>;
+/**
+ * Represents a store for widget configurations with support for partial updates
+ * at two levels of depth. This store includes signals for its own state, an optional
+ * parent state, and an optional adapted parent state.
+ *
+ * @template T - The type of the widget configuration.
+ */
 export type WidgetsConfigStore<T> = WritableSignal<Partial2Levels<T>> & {
     own$: WritableSignal<Partial2Levels<T>>;
     parent$: undefined | WritableSignal<Partial2Levels<T>>;
@@ -45,7 +58,10 @@ export declare const mergeInto: <T>(destination: T, source: T | undefined, level
  * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
  * The resulting store is writable, its set function is actually the set function of the own$ store.
  */
-export declare const createWidgetsConfig: <T>(parent$?: WidgetsConfigStore<T> | undefined, adaptParentConfig?: (config: Partial2Levels<T>) => Partial2Levels<T>) => WidgetsConfigStore<T>;
+export declare const createWidgetsConfig: <T>(parent$?: WidgetsConfigStore<T>, adaptParentConfig?: (config: Partial2Levels<T>) => Partial2Levels<T>) => WidgetsConfigStore<T>;
+/**
+ * Configuration for various widgets used in the application.
+ */
 export type WidgetsConfig = {
     /**
      * the pagination widget config

package/{directive-3-8yr-ZK.js → directive-CKEccryv.js}

@@ -142,13 +142,19 @@ const isBrowserHTMLElement = BROWSER ? (element) => {
   var _a;
   const contentWindow = ((_a = element == null ? void 0 : element.ownerDocument) == null ? void 0 : _a.defaultView) ?? window;
   return element instanceof contentWindow.HTMLElement;
-} : (element) => false;
+} : (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (element) => false
+);
 const browserDirective = BROWSER ? (directive) => (node, args) => {
   if (isBrowserHTMLElement(node)) {
     return directive(node, args);
   }
-} : (directive) => () => {
-};
+} : (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (directive) => () => {
+  }
+);
 const bindDirective = (directive, directiveArg$) => (element) => {
   let firstTime = true;
   let instance;
@@ -189,13 +195,13 @@ const directiveSubscribe = (store, asyncUnsubscribe = true) => () => {
   return {
     destroy: async () => {
       if (asyncUnsubscribe) {
-        await 0;
+        await Promise.resolve();
       }
       unsubscribe();
     }
   };
 };
-const directiveUpdate = (update) => (element, arg) => {
+const directiveUpdate = (update) => (_element, arg) => {
   update(arg);
   return {
     update

package/{directive-j-xRk-h3.cjs → directive-DdlwGFtf.cjs}

@@ -143,13 +143,19 @@ const isBrowserHTMLElement = esmEnv.BROWSER ? (element) => {
   var _a;
   const contentWindow = ((_a = element == null ? void 0 : element.ownerDocument) == null ? void 0 : _a.defaultView) ?? window;
   return element instanceof contentWindow.HTMLElement;
-} : (element) => false;
+} : (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (element) => false
+);
 const browserDirective = esmEnv.BROWSER ? (directive) => (node, args) => {
   if (isBrowserHTMLElement(node)) {
     return directive(node, args);
   }
-} : (directive) => () => {
-};
+} : (
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (directive) => () => {
+  }
+);
 const bindDirective = (directive, directiveArg$) => (element) => {
   let firstTime = true;
   let instance;
@@ -190,13 +196,13 @@ const directiveSubscribe = (store, asyncUnsubscribe = true) => () => {
   return {
     destroy: async () => {
       if (asyncUnsubscribe) {
-        await 0;
+        await Promise.resolve();
       }
       unsubscribe();
     }
   };
 };
-const directiveUpdate = (update) => (element, arg) => {
+const directiveUpdate = (update) => (_element, arg) => {
   update(arg);
   return {
     update

package/index.cjs

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const types = require("./types.cjs");
-const accordion = require("./accordion-DmPT0O0j.cjs");
-const alert = require("./alert-CEFbEgvG.cjs");
-const modal = require("./modal-D4d8sy85.cjs");
-const pagination = require("./pagination-B9WFv70F.cjs");
-const progressbar = require("./progressbar-DXCMeJvL.cjs");
-const rating = require("./rating-C2Y95r50.cjs");
-const select = require("./select-BBiF-m3N.cjs");
-const slider = require("./slider-BdsZpxJr.cjs");
-const toast = require("./toast-Dy3ck2cM.cjs");
+const accordion = require("./accordion-Lp-LEbZ2.cjs");
+const alert = require("./alert-Bq101evB.cjs");
+const modal = require("./modal-DDHcrykD.cjs");
+const pagination = require("./pagination-CBysiPUs.cjs");
+const progressbar = require("./progressbar-DghzCJ6_.cjs");
+const rating = require("./rating-DlfOuwuX.cjs");
+const select = require("./select-LBVhNdrd.cjs");
+const slider = require("./slider-DlOAawbZ.cjs");
+const toast = require("./toast-D_uSrRZL.cjs");
 const config = require("./config.cjs");
 const services_extendWidget = require("./services/extendWidget.cjs");
 const services_floatingUI = require("./services/floatingUI.cjs");
@@ -24,11 +24,10 @@ const services_hash = require("./services/hash.cjs");
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const services_transitions_cssTransitions = require("./services/transitions/cssTransitions.cjs");
 const services_transitions_simpleClassTransition = require("./services/transitions/simpleClassTransition.cjs");
-const utils_directive = require("./directive-j-xRk-h3.cjs");
+const utils_directive = require("./directive-DdlwGFtf.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-D46sFgGK.cjs");
+const utils_writables = require("./writables-BPAJvaL_.cjs");
 exports.INVALID_VALUE = types.INVALID_VALUE;
-exports.toSlotContextWidget = types.toSlotContextWidget;
 exports.createAccordion = accordion.createAccordion;
 exports.createAccordionItem = accordion.createAccordionItem;
 exports.factoryCreateAccordion = accordion.factoryCreateAccordion;
@@ -64,7 +63,7 @@ exports.getKeyName = services_navManager.getKeyName;
 exports.isInternalInputNavigation = services_navManager.isInternalInputNavigation;
 exports.portal = services_portal.portal;
 exports.createResizeObserver = services_resizeObserver.createResizeObserver;
-exports.sliblingsInert = services_siblingsInert.sliblingsInert;
+exports.siblingsInert = services_siblingsInert.siblingsInert;
 exports.hash$ = services_hash.hash$;
 exports.createTransition = services_transitions_baseTransitions.createTransition;
 exports.noAnimation = services_transitions_baseTransitions.noAnimation;
@@ -104,6 +103,7 @@ exports.toWritableStore = utils_stores.toWritableStore;
 exports.writableWithDefault = utils_stores.writableWithDefault;
 exports.writablesForProps = utils_stores.writablesForProps;
 exports.writablesWithDefault = utils_stores.writablesWithDefault;
+exports.createTypeEnum = utils_writables.createTypeEnum;
 exports.testToNormalizeValue = utils_writables.testToNormalizeValue;
 exports.typeArray = utils_writables.typeArray;
 exports.typeBoolean = utils_writables.typeBoolean;

package/index.js

@@ -1,13 +1,13 @@
-import { INVALID_VALUE, toSlotContextWidget } from "./types.js";
-import { a, c, f, g } from "./accordion-BnaSamoQ.js";
-import { c as c2, g as g2 } from "./alert-DdGuK__c.js";
-import { c as c3, g as g3, a as a2, m } from "./modal-CeTI4jxI.js";
-import { c as c4, g as g4 } from "./pagination-BpPHKQsH.js";
-import { c as c5, g as g5 } from "./progressbar-BybOg5FE.js";
-import { c as c6, g as g6 } from "./rating-D6Tv_4Vx.js";
-import { c as c7, g as g7 } from "./select-jUrt_lSn.js";
-import { c as c8, g as g8 } from "./slider-ByDkbyr1.js";
-import { c as c9, g as g9 } from "./toast-BzxextBQ.js";
+import { INVALID_VALUE } from "./types.js";
+import { a, c, f, g } from "./accordion-BGv150k9.js";
+import { c as c2, g as g2 } from "./alert-DJ2l7bcA.js";
+import { c as c3, g as g3, a as a2, m } from "./modal-DP-4I7vf.js";
+import { c as c4, g as g4 } from "./pagination-DwDRot6q.js";
+import { c as c5, g as g5 } from "./progressbar-CGmNq0cS.js";
+import { c as c6, g as g6 } from "./rating-Da38uaZz.js";
+import { c as c7, g as g7 } from "./select-CAEPqdz1.js";
+import { c as c8, g as g8 } from "./slider-DYrwS7Mv.js";
+import { c as c9, g as g9 } from "./toast-CpvsibAI.js";
 import { createWidgetsConfig, mergeInto } from "./config.js";
 import { extendWidgetProps } from "./services/extendWidget.js";
 import { createFloatingUI } from "./services/floatingUI.js";
@@ -17,14 +17,14 @@ import { createMatchMedia } from "./services/matchMedia.js";
 import { createNavManager, getKeyName, isInternalInputNavigation } from "./services/navManager.js";
 import { portal } from "./services/portal.js";
 import { createResizeObserver } from "./services/resizeObserver.js";
-import { sliblingsInert } from "./services/siblingsInert.js";
+import { siblingsInert } from "./services/siblingsInert.js";
 import { hash$ } from "./services/hash.js";
 import { createTransition, noAnimation } from "./services/transitions/baseTransitions.js";
 import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
 import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
-import { o, a as a3, c as c10, b, p, n, g as g10, j, f as f2, h, q, d, e, i, m as m2, k, l, r, s } from "./directive-3-8yr-ZK.js";
+import { o, a as a3, c as c10, b, p, n, g as g10, j, f as f2, h, q, d, e, i, m as m2, k, l, r, s } from "./directive-CKEccryv.js";
 import { bindableDerived, bindableProp, createPatch, findChangedProperties, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
-import { t, h as h2, c as c11, d as d2, f as f3, g as g11, a as a4, b as b2, e as e2 } from "./writables-DoU_XYTX.js";
+import { i as i2, t, h as h2, c as c11, d as d2, f as f3, g as g11, a as a4, b as b2, e as e2 } from "./writables-DCiBdIBK.js";
 export {
   INVALID_VALUE,
   activeElement$,
@@ -60,6 +60,7 @@ export {
   h as createStoreDirective,
   c9 as createToast,
   createTransition,
+  i2 as createTypeEnum,
   createWidgetsConfig,
   q as directiveAttributes,
   d as directiveSubscribe,
@@ -94,12 +95,11 @@ export {
   normalizeConfigStores,
   portal,
   r as registrationArray,
-  sliblingsInert,
+  siblingsInert,
   s as ssrAttributes,
   stateStores,
   t as testToNormalizeValue,
   toReadableStore,
-  toSlotContextWidget,
   toWritableStore,
   h2 as typeArray,
   c11 as typeBoolean,

package/{modal-D4d8sy85.cjs → modal-DDHcrykD.cjs}

@@ -1,11 +1,11 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
-const utils_writables = require("./writables-D46sFgGK.cjs");
+const utils_writables = require("./writables-BPAJvaL_.cjs");
 const utils_stores = require("./utils/stores.cjs");
 const services_transitions_baseTransitions = require("./services/transitions/baseTransitions.cjs");
 const promise = require("./promise-BMJ8qhA8.cjs");
 const func = require("./func-Qd3cD9a3.cjs");
-const utils_directive = require("./directive-j-xRk-h3.cjs");
+const utils_directive = require("./directive-DdlwGFtf.cjs");
 const services_portal = require("./services/portal.cjs");
 const services_siblingsInert = require("./services/siblingsInert.cjs");
 const internalRemoveScrollbars = () => {
@@ -179,7 +179,7 @@ function createModal(config$) {
       "aria-label": ariaCloseButtonLabel$
     },
     events: {
-      click: res.actions.closeButtonClick
+      click: () => close(modalCloseButtonClick)
     }
   }));
   const backdropAttributeDirective = utils_directive.createAttributesDirective(() => ({
@@ -192,7 +192,11 @@ function createModal(config$) {
       class: className$
     },
     events: {
-      click: res.actions.modalClick
+      click: (event) => {
+        if (event.currentTarget === event.target && closeOnOutsideClick$()) {
+          close(modalOutsideClick);
+        }
+      }
     }
   }));
   const res = {
@@ -211,13 +215,8 @@ function createModal(config$) {
     directives: {
       modalPortalDirective,
       backdropPortalDirective,
-      backdropDirective: utils_directive.mergeDirectives(utils_directive.bindDirectiveNoArg(backdropTransition.directives.directive), backdropAttributeDirective),
-      modalDirective: utils_directive.mergeDirectives(
-        utils_directive.bindDirectiveNoArg(modalTransition.directives.directive),
-        services_siblingsInert.sliblingsInert,
-        utils_directive.directiveSubscribe(action$),
-        modalAttributeDirective
-      ),
+      backdropDirective: utils_directive.mergeDirectives(backdropTransition.directives.directive, backdropAttributeDirective),
+      modalDirective: utils_directive.mergeDirectives(modalTransition.directives.directive, services_siblingsInert.siblingsInert, utils_directive.directiveSubscribe(action$), modalAttributeDirective),
       closeButtonDirective,
       dialogDirective: utils_directive.bindDirective(
         utils_directive.browserDirective((dialog, visible) => {
@@ -245,16 +244,6 @@ function createModal(config$) {
         return hideResult;
       },
       patch
-    },
-    actions: {
-      modalClick(event) {
-        if (event.currentTarget === event.target && closeOnOutsideClick$()) {
-          close(modalOutsideClick);
-        }
-      },
-      closeButtonClick(event) {
-        close(modalCloseButtonClick);
-      }
     }
   };
   return res;

package/{modal-CeTI4jxI.js → modal-DP-4I7vf.js}

@@ -1,12 +1,12 @@
 import { computed, readable } from "@amadeus-it-group/tansu";
-import { c as typeBoolean, e as typeString, f as typeFunction, g as typeHTMLElementOrNull } from "./writables-DoU_XYTX.js";
+import { c as typeBoolean, e as typeString, f as typeFunction, g as typeHTMLElementOrNull } from "./writables-DCiBdIBK.js";
 import { writablesForProps, stateStores } from "./utils/stores.js";
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { d as promiseFromStore } from "./promise-CY2U8bTP.js";
 import { n as noop } from "./func-DR0n-ShK.js";
-import { r as registrationArray, a as bindDirective, k as mergeDirectives, c as bindDirectiveNoArg, d as directiveSubscribe, b as browserDirective, n as createAttributesDirective } from "./directive-3-8yr-ZK.js";
+import { r as registrationArray, a as bindDirective, k as mergeDirectives, d as directiveSubscribe, b as browserDirective, n as createAttributesDirective } from "./directive-CKEccryv.js";
 import { portal } from "./services/portal.js";
-import { sliblingsInert } from "./services/siblingsInert.js";
+import { siblingsInert } from "./services/siblingsInert.js";
 const internalRemoveScrollbars = () => {
   const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
   const body = document.body;
@@ -178,7 +178,7 @@ function createModal(config$) {
       "aria-label": ariaCloseButtonLabel$
     },
     events: {
-      click: res.actions.closeButtonClick
+      click: () => close(modalCloseButtonClick)
     }
   }));
   const backdropAttributeDirective = createAttributesDirective(() => ({
@@ -191,7 +191,11 @@ function createModal(config$) {
       class: className$
     },
     events: {
-      click: res.actions.modalClick
+      click: (event) => {
+        if (event.currentTarget === event.target && closeOnOutsideClick$()) {
+          close(modalOutsideClick);
+        }
+      }
     }
   }));
   const res = {
@@ -210,13 +214,8 @@ function createModal(config$) {
     directives: {
       modalPortalDirective,
       backdropPortalDirective,
-      backdropDirective: mergeDirectives(bindDirectiveNoArg(backdropTransition.directives.directive), backdropAttributeDirective),
-      modalDirective: mergeDirectives(
-        bindDirectiveNoArg(modalTransition.directives.directive),
-        sliblingsInert,
-        directiveSubscribe(action$),
-        modalAttributeDirective
-      ),
+      backdropDirective: mergeDirectives(backdropTransition.directives.directive, backdropAttributeDirective),
+      modalDirective: mergeDirectives(modalTransition.directives.directive, siblingsInert, directiveSubscribe(action$), modalAttributeDirective),
       closeButtonDirective,
       dialogDirective: bindDirective(
         browserDirective((dialog, visible) => {
@@ -244,16 +243,6 @@ function createModal(config$) {
         return hideResult;
       },
       patch
-    },
-    actions: {
-      modalClick(event) {
-        if (event.currentTarget === event.target && closeOnOutsideClick$()) {
-          close(modalOutsideClick);
-        }
-      },
-      closeButtonClick(event) {
-        close(modalCloseButtonClick);
-      }
     }
   };
   return res;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/core",
-	"description": "Framework-agnostic headless widget library.",
-	"version": "0.4.3",
+	"description": "Framework-agnostic headless component library.",
+	"version": "0.5.0-next.0",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",
@@ -45,11 +45,11 @@
 	},
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^1.0.0",
-		"@floating-ui/dom": "^1.6.8",
-		"esm-env": "^1.0.0"
+		"@floating-ui/dom": "^1.6.11",
+		"esm-env": "^1.1.4"
 	},
 	"sideEffects": false,
-	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
+	"homepage": "https://www.agnosui.dev/latest/",
 	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
 	"license": "MIT",
 	"repository": {
@@ -62,6 +62,7 @@
 		"accordion",
 		"AgnosUI",
 		"alert",
+		"collapse",
 		"components",
 		"modal",
 		"pagination",

package/{pagination-B9WFv70F.cjs → pagination-CBysiPUs.cjs}

@@ -1,10 +1,9 @@
 "use strict";
 const tansu = require("@amadeus-it-group/tansu");
-const types = require("./types.cjs");
 const utils_stores = require("./utils/stores.cjs");
-const utils_writables = require("./writables-D46sFgGK.cjs");
+const utils_writables = require("./writables-BPAJvaL_.cjs");
 const func = require("./func-Qd3cD9a3.cjs");
-const utils_directive = require("./directive-j-xRk-h3.cjs");
+const utils_directive = require("./directive-DdlwGFtf.cjs");
 const PAGE_LINK_DEFAULT = "#";
 const defaultConfig = {
   page: 1,
@@ -13,7 +12,6 @@ const defaultConfig = {
   disabled: false,
   directionLinks: true,
   boundaryLinks: false,
-  size: null,
   onPageChange: func.noop,
   pagesFactory: (_page, pageCount) => {
     const pages = [];
@@ -30,7 +28,7 @@ const defaultConfig = {
   ariaNextLabel: "Action link for next page",
   ariaLastLabel: "Action link for last page",
   ariaEllipsisLabel: "Ellipsis page element",
-  ariaLiveLabel: (currentPage, pageCount) => `Current page is ${currentPage}`,
+  ariaLiveLabel: (currentPage) => `Current page is ${currentPage}`,
   className: "",
   pageLink: (_page) => PAGE_LINK_DEFAULT
 };
@@ -44,7 +42,6 @@ const configValidator = {
   disabled: utils_writables.typeBoolean,
   directionLinks: utils_writables.typeBoolean,
   boundaryLinks: utils_writables.typeBoolean,
-  size: { normalizeValue: (value) => value === "lg" || value === "sm" || value === null ? value : types.INVALID_VALUE },
   onPageChange: utils_writables.typeFunction,
   pagesFactory: utils_writables.typeFunction,
   ariaLabel: utils_writables.typeString,
@@ -56,7 +53,8 @@ const configValidator = {
   ariaLastLabel: utils_writables.typeString,
   ariaLiveLabel: utils_writables.typeFunction,
   className: utils_writables.typeString,
-  pageLink: utils_writables.typeFunction
+  pageLink: utils_writables.typeFunction,
+  ariaEllipsisLabel: utils_writables.typeString
 };
 function createPagination(config) {
   const [
@@ -110,17 +108,13 @@ function createPagination(config) {
     };
   });
   const ariaLiveLabelText$ = tansu.computed(() => ariaLiveLabel$()(page$(), pageCount$()));
-  function handleNavigation(pageNumber, event, pageNavigationHandler) {
+  function handleNavigation(pageNumber, event) {
     if (pagesHrefs$()[pageNumber - 1] === PAGE_LINK_DEFAULT) {
       event == null ? void 0 : event.preventDefault();
     }
     if (!event || !(event.ctrlKey || event.metaKey)) {
       event == null ? void 0 : event.preventDefault();
-      if (pageNavigationHandler) {
-        page$.update(pageNavigationHandler);
-      } else {
-        page$.set(pageNumber);
-      }
+      page$.set(pageNumber);
     }
   }
   const widget = {
@@ -142,50 +136,44 @@ function createPagination(config) {
       ...stateProps
     }),
     patch,
-    actions: {
+    api: {
       /**
        * Set the current page pageNumber (starting from 1)
        * @param pageNumber - Current page number to set.
        * Value is normalized between 1 and the number of page
-       * @param event UI event that triggered the select
        */
-      select(pageNumber, event) {
-        handleNavigation(pageNumber, event);
+      select(pageNumber) {
+        page$.set(pageNumber);
       },
       /**
        * Select the first page
-       * @param event Event triggering the action
        */
-      first(event) {
-        handleNavigation(1, event);
+      first() {
+        page$.set(1);
       },
       /**
        * Select the previous page
-       * @param event Event triggering the action
        */
-      previous(event) {
-        handleNavigation(page$() - 1, event, (page) => page - 1);
+      previous() {
+        page$.update((p) => p - 1);
       },
       /**
        * Select the next page
-       * @param event Event triggering the action
        */
-      next(event) {
-        handleNavigation(page$() + 1, event, (page) => page + 1);
+      next() {
+        page$.update((p) => p + 1);
       },
       /**
        * Select the last page
-       * @param event Event triggering the action
        */
-      last(event) {
-        handleNavigation(pageCount$(), event);
+      last() {
+        page$.set(pageCount$());
       }
     },
-    api: {},
     directives: {
       pageLink: utils_directive.createAttributesDirective((pageLinkContext$) => ({
         events: {
-          click: (e) => widget.actions.select(pageLinkContext$().page, e)
+          click: (e) => handleNavigation(pageLinkContext$().page, e)
         },
         attributes: {
           "aria-current": tansu.computed(() => page$() === pageLinkContext$().page ? "page" : void 0),
@@ -200,7 +188,7 @@ function createPagination(config) {
       })),
       pageFirst: utils_directive.createAttributesDirective(() => ({
         events: {
-          click: (e) => widget.actions.first(e)
+          click: (e) => handleNavigation(1, e)
         },
         attributes: {
           "aria-label": ariaFirstLabel$,
@@ -214,7 +202,7 @@ function createPagination(config) {
       })),
       pagePrev: utils_directive.createAttributesDirective(() => ({
         events: {
-          click: (e) => widget.actions.previous(e)
+          click: (e) => handleNavigation(page$() - 1, e)
         },
         attributes: {
           "aria-label": ariaPreviousLabel$,
@@ -228,7 +216,7 @@ function createPagination(config) {
       })),
       pageNext: utils_directive.createAttributesDirective(() => ({
         events: {
-          click: (e) => widget.actions.next(e)
+          click: (e) => handleNavigation(page$() + 1, e)
         },
         attributes: {
           "aria-label": ariaNextLabel$,
@@ -242,7 +230,7 @@ function createPagination(config) {
       })),
       pageLast: utils_directive.createAttributesDirective(() => ({
         events: {
-          click: (e) => widget.actions.last(e)
+          click: (e) => handleNavigation(pageCount$(), e)
         },
         attributes: {
           "aria-label": ariaLastLabel$,