@aiaiai-pt/design-system 0.4.0 → 0.4.1

package/components/Pagination.svelte

@@ -2,7 +2,8 @@
   @component Pagination
 
   Cursor-based and offset-based pagination with page size selector.
-  Consumes --pagination-* tokens (falls back to semantic tokens).
+  Self-contained nav controls with correct icon placement (chevron
+  leading for PREV, trailing for NEXT).
 
   @example Cursor mode (default)
   <Pagination
@@ -27,7 +28,6 @@
 -->
 <script>
   import Select from './Select.svelte';
-  import Button from './Button.svelte';
 
   let {
     /** @type {'cursor' | 'offset'} */
@@ -72,7 +72,6 @@
 
   const page_size_value = $derived(String(page_size));
 
-  /** Compute visible page numbers with ellipsis for offset mode */
   const page_numbers = $derived(
     mode === 'offset' && total_pages
       ? build_pages(current_page, total_pages)
@@ -103,20 +102,29 @@
       return Array.from({ length: total }, (_, i) => i + 1);
     }
     const pages = /** @type {(number | null)[]} */ ([]);
-    // Always show first
     pages.push(1);
-    if (current > 3) pages.push(null); // left ellipsis
-    // Window around current
+    if (current > 3) pages.push(null);
     const win_start = Math.max(2, current - 1);
     const win_end = Math.min(total - 1, current + 1);
     for (let p = win_start; p <= win_end; p++) pages.push(p);
-    if (current < total - 2) pages.push(null); // right ellipsis
-    // Always show last
+    if (current < total - 2) pages.push(null);
     pages.push(total);
     return pages;
   }
 </script>
 
+{#snippet chevronLeft()}
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+{/snippet}
+
+{#snippet chevronRight()}
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+    <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+{/snippet}
+
 <div class="pagination {className}" {...rest}>
   {#if page_sizes && page_sizes.length > 0}
     <div class="pagination-size">
@@ -137,51 +145,17 @@
   <span class="pagination-spacer" aria-hidden="true"></span>
 
   {#if mode === 'cursor'}
-    <Button
-      variant="ghost"
-      size="sm"
-      disabled={!has_prev}
-      onclick={on_prev}
-      aria-label="Previous page"
-    >
-      {#snippet icon()}
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-          <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      {/snippet}
-      PREV
-    </Button>
-
-    <Button
-      variant="ghost"
-      size="sm"
-      disabled={!has_next}
-      onclick={on_next}
-      aria-label="Next page"
-    >
-      NEXT
-      {#snippet icon()}
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-          <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      {/snippet}
-    </Button>
+    <button class="pagination-nav" disabled={!has_prev} onclick={on_prev} aria-label="Previous page">
+      {@render chevronLeft()}<span>PREV</span>
+    </button>
+    <button class="pagination-nav" disabled={!has_next} onclick={on_next} aria-label="Next page">
+      <span>NEXT</span>{@render chevronRight()}
+    </button>
 
   {:else}
-    <Button
-      variant="ghost"
-      size="sm"
-      disabled={current_page <= 1}
-      onclick={() => on_page_change?.(current_page - 1)}
-      aria-label="Previous page"
-    >
-      {#snippet icon()}
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-          <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      {/snippet}
-      PREV
-    </Button>
+    <button class="pagination-nav" disabled={current_page <= 1} onclick={() => on_page_change?.(current_page - 1)} aria-label="Previous page">
+      {@render chevronLeft()}<span>PREV</span>
+    </button>
 
     <div class="pagination-pages">
       {#each page_numbers as p}
@@ -202,20 +176,9 @@
       {/each}
     </div>
 
-    <Button
-      variant="ghost"
-      size="sm"
-      disabled={current_page >= (total_pages ?? current_page)}
-      onclick={() => on_page_change?.(current_page + 1)}
-      aria-label="Next page"
-    >
-      NEXT
-      {#snippet icon()}
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-          <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      {/snippet}
-    </Button>
+    <button class="pagination-nav" disabled={current_page >= (total_pages ?? current_page)} onclick={() => on_page_change?.(current_page + 1)} aria-label="Next page">
+      <span>NEXT</span>{@render chevronRight()}
+    </button>
   {/if}
 </div>
 
@@ -228,7 +191,6 @@
   }
 
   .pagination-size {
-    /* Constrain size selector width */
     width: 80px;
   }
 
@@ -244,6 +206,44 @@
     min-width: var(--space-sm);
   }
 
+  /* ─── Nav buttons (PREV / NEXT) ─── */
+  .pagination-nav {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-xs) var(--space-sm);
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    letter-spacing: var(--type-label-tracking);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: color var(--duration-instant) var(--easing-default),
+                background var(--duration-instant) var(--easing-default);
+  }
+
+  .pagination-nav:hover:not(:disabled) {
+    color: var(--color-text);
+    background: var(--color-surface-secondary);
+  }
+
+  .pagination-nav:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .pagination-nav:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .pagination-nav svg {
+    width: var(--icon-size-sm);
+    height: var(--icon-size-sm);
+    flex-shrink: 0;
+  }
+
   /* ─── Offset page numbers ─── */
   .pagination-pages {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiaiai-pt/design-system",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Design system tokens and Svelte components for aiaiai products",
   "license": "MIT",
   "type": "module",