fix(pagination): add disable attribute and remove pointer event none

Author: fabiobiondi

apps/website/src/routes/docs/headless/(components)/pagination/examples/basic.tsx

@@ -15,18 +15,6 @@ export default component$(() => {
         }}
         class="flex gap-3"
       />
-
-      <Pagination
-        selectedPage={selectedPage.value}
-        totalPages={totalPages.value}
-        onPageChange$={(page) => {
-          selectedPage.value = page;
-        }}
-        class="flex flex-col items-center gap-2 border border-sky-500"
-        defaultClass=""
-        selectedClass=""
-        dividerClass=""
-      />
     </div>
   );
 });

apps/website/src/routes/docs/headless/(components)/pagination/examples/styling.tsx

@@ -30,6 +30,18 @@ export default component$(() => {
         selectedClass="bg-red-500 w-8 h-8"
         dividerClass="bg-red-300 h-8 px-2"
       />
+
+      <Pagination
+        selectedPage={selectedPage.value}
+        totalPages={totalPages.value}
+        onPageChange$={(page) => {
+          selectedPage.value = page;
+        }}
+        class="flex flex-col items-center gap-2 border border-sky-500"
+        defaultClass=""
+        selectedClass=""
+        dividerClass=""
+      />
     </div>
   );
 });

packages/kit-headless/src/components/pagination/pagination.tsx

@@ -33,20 +33,12 @@ export const Pagination = component$<PaginationProps>((props) => {
   );
 
   return (
-    <nav
-      aria-label="pagination"
-      data-testid="pagination"
-      class={_class}
-      style={{
-        pointerEvents: disabled ? 'none' : 'inherit',
-      }}
-    >
-      {/* Prev Button */}
+    <nav aria-label="pagination" data-testid="pagination" class={_class}>
       {isPrevButtonVisible() && (
         <button
           type="button"
           aria-label={'prevAriaLabel'}
-          disabled={selectedPage <= 1}
+          disabled={disabled}
           onClick$={() => {
             if (selectedPage > 1) {
               onPageChange$(selectedPage - 1);
@@ -70,6 +62,7 @@ export const Pagination = component$<PaginationProps>((props) => {
                 type="button"
                 aria-label={`Page ${item} of ${totalPages}`}
                 aria-current={selectedPage === item}
+                disabled={true}
                 onClick$={() => {
                   onPageChange$(item);
                 }}
@@ -86,7 +79,7 @@ export const Pagination = component$<PaginationProps>((props) => {
         <button
           type="button"
           aria-label={'nextAriaLabel'}
-          disabled={selectedPage >= totalPages}
+          disabled={disabled}
           onClick$={() => {
             if (selectedPage < totalPages) {
               onPageChange$(selectedPage + 1);