@aiaiai-pt/design-system 0.3.8 → 0.4.1

package/components/Breadcrumb.svelte

@@ -0,0 +1,142 @@
+<!--
+  @component Breadcrumb
+
+  Navigation breadcrumb trail. Items with `href` are links; the last item
+  (current page, no href) is rendered as plain bold text.
+
+  @example
+  <Breadcrumb items={[
+    { label: 'Home', href: '/' },
+    { label: 'Settings', href: '/settings' },
+    { label: 'Profile' },
+  ]} />
+
+  @example With truncation
+  <Breadcrumb
+    items={deepPath}
+    max_items={4}
+  />
+-->
+<script>
+  /**
+   * @typedef {{ label: string, href?: string }} BreadcrumbItem
+   */
+
+  let {
+    /** @type {BreadcrumbItem[]} */
+    items = [],
+    /** @type {number | undefined} */
+    max_items = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  /**
+   * Truncate items when max_items is set.
+   * Keeps first item + ellipsis + last (max_items - 2) items.
+   * Minimum effective max_items is 3 (first + ellipsis + last).
+   * @type {(BreadcrumbItem | null)[]}
+   */
+  const visible_items = $derived(
+    !max_items || items.length <= max_items
+      ? items
+      : (() => {
+          const keep_end = Math.max(1, max_items - 2);
+          /** @type {(BreadcrumbItem | null)[]} */
+          const result = [items[0], null];
+          for (let i = items.length - keep_end; i < items.length; i++) {
+            result.push(items[i]);
+          }
+          return result;
+        })()
+  );
+</script>
+
+<nav class="breadcrumb {className}" aria-label="Breadcrumb" {...rest}>
+  <ol class="breadcrumb-list">
+    {#each visible_items as item, idx}
+      {#if item === null}
+        <li class="breadcrumb-item" aria-hidden="true">
+          <span class="breadcrumb-separator" aria-hidden="true">/</span>
+          <span class="breadcrumb-ellipsis">…</span>
+        </li>
+      {:else}
+        {#if idx > 0}
+          <li class="breadcrumb-sep-item" aria-hidden="true">
+            <span class="breadcrumb-separator">/</span>
+          </li>
+        {/if}
+        <li class="breadcrumb-item">
+          {#if item.href}
+            <a href={item.href} class="breadcrumb-link">{item.label}</a>
+          {:else}
+            <span class="breadcrumb-current" aria-current="page">{item.label}</span>
+          {/if}
+        </li>
+      {/if}
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  .breadcrumb {
+    /* no outer constraints — caller controls width */
+  }
+
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .breadcrumb-sep-item {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .breadcrumb-separator {
+    margin: 0 var(--space-xs);
+    color: var(--color-text-muted);
+    user-select: none;
+    font-size: var(--type-body-sm-size);
+  }
+
+  .breadcrumb-link {
+    color: var(--color-text-secondary);
+    text-decoration: none;
+    transition: color var(--duration-instant) var(--easing-default);
+  }
+
+  .breadcrumb-link:hover {
+    color: var(--color-text);
+    text-decoration: underline;
+  }
+
+  .breadcrumb-link:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+    border-radius: var(--radius-sm);
+  }
+
+  .breadcrumb-current {
+    color: var(--color-text);
+    font-weight: var(--raw-font-weight-semibold, 600);
+  }
+
+  .breadcrumb-ellipsis {
+    color: var(--color-text-muted);
+    user-select: none;
+  }
+</style>

package/components/Breadcrumb.svelte.d.ts

@@ -0,0 +1,38 @@
+export default Breadcrumb;
+type Breadcrumb = {
+  $on?(type: string, callback: (e: any) => void): () => void;
+  $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Breadcrumb
+ *
+ * Navigation breadcrumb trail. Items with `href` are links; the last item
+ * (current page, no href) is rendered as plain bold text.
+ *
+ * @example
+ * <Breadcrumb items={[
+ *   { label: 'Home', href: '/' },
+ *   { label: 'Settings', href: '/settings' },
+ *   { label: 'Profile' },
+ * ]} />
+ *
+ * @example With truncation
+ * <Breadcrumb
+ *   items={deepPath}
+ *   max_items={4}
+ * />
+ */
+declare const Breadcrumb: import("svelte").Component<
+  {
+    items?: any[];
+    max_items?: any;
+    class?: string;
+  } & Record<string, any>,
+  {},
+  ""
+>;
+type $$ComponentProps = {
+  items?: any[];
+  max_items?: any;
+  class?: string;
+} & Record<string, any>;

package/components/DataTable.svelte

@@ -0,0 +1,420 @@
+<!--
+  @component DataTable
+
+  Data table with sortable columns, row selection, loading and empty states.
+  Composes Skeleton and EmptyState primitives. Consumes --table-* tokens from
+  components.css, falling back to semantic tokens.
+
+  @example Basic
+  <DataTable
+    columns={[
+      { key: 'name', label: 'NAME' },
+      { key: 'status', label: 'STATUS', width: '120px' },
+    ]}
+    rows={items}
+    on_sort={(key, dir) => sort(key, dir)}
+    on_row_click={(row) => goto(`/items/${row.id}`)}
+  />
+
+  @example Selectable
+  <DataTable
+    {columns}
+    {rows}
+    selectable
+    bind:selected_rows={selected}
+    on_select={(sel) => console.log(sel)}
+  />
+
+  @example Loading
+  <DataTable {columns} rows={[]} loading />
+-->
+<script>
+  /**
+   * @typedef {{ key: string, label: string, width?: string, sortable?: boolean, render?: (value: unknown, row: Record<string, unknown>) => string }} ColumnDef
+   */
+
+  import Skeleton from './Skeleton.svelte';
+  import EmptyState from './EmptyState.svelte';
+
+  let {
+    /** @type {ColumnDef[]} */
+    columns = [],
+    /** @type {Record<string, unknown>[]} */
+    rows = [],
+    /** @type {boolean} */
+    loading = false,
+    /** @type {boolean} */
+    sortable = true,
+    /** @type {string | undefined} */
+    sort_key = undefined,
+    /** @type {'asc' | 'desc'} */
+    sort_direction = 'asc',
+    /** @type {boolean} */
+    selectable = false,
+    /** @type {Set<string>} */
+    selected_rows = $bindable(new Set()),
+    /** @type {string} */
+    row_key = 'id',
+    /** @type {string} */
+    empty_heading = 'No data',
+    /** @type {string} */
+    empty_body = 'No items to display',
+    /** @type {((key: string, direction: 'asc' | 'desc') => void) | undefined} */
+    on_sort = undefined,
+    /** @type {((selected: Set<string>) => void) | undefined} */
+    on_select = undefined,
+    /** @type {((row: Record<string, unknown>) => void) | undefined} */
+    on_row_click = undefined,
+    /** @type {import('svelte').Snippet | undefined} */
+    children = undefined,
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const SKELETON_ROWS = 5;
+
+  const all_selected = $derived(
+    rows.length > 0 &&
+    rows.every((row) => selected_rows.has(String(row[row_key])))
+  );
+
+  const some_selected = $derived(
+    rows.some((row) => selected_rows.has(String(row[row_key]))) && !all_selected
+  );
+
+  /**
+   * @param {string} key
+   */
+  function handle_header_click(key) {
+    const col = columns.find((c) => c.key === key);
+    const col_sortable = col?.sortable ?? sortable;
+    if (!col_sortable || !on_sort) return;
+
+    const next_dir = sort_key === key && sort_direction === 'asc' ? 'desc' : 'asc';
+    on_sort(key, next_dir);
+  }
+
+  /** @param {string} row_id */
+  function handle_row_check(row_id) {
+    const next = new Set(selected_rows);
+    if (next.has(row_id)) {
+      next.delete(row_id);
+    } else {
+      next.add(row_id);
+    }
+    selected_rows = next;
+    on_select?.(next);
+  }
+
+  function handle_select_all() {
+    let next;
+    if (all_selected) {
+      next = new Set(/** @type {Set<string>} */ (selected_rows));
+      for (const row of rows) {
+        next.delete(String(row[row_key]));
+      }
+    } else {
+      next = new Set(/** @type {Set<string>} */ (selected_rows));
+      for (const row of rows) {
+        next.add(String(row[row_key]));
+      }
+    }
+    selected_rows = next;
+    on_select?.(next);
+  }
+
+  /**
+   * @param {ColumnDef} col
+   * @param {unknown} value
+   * @param {Record<string, unknown>} row
+   */
+  function render_cell(col, value, row) {
+    if (col.render) return col.render(value, row);
+    if (value === null || value === undefined) return '';
+    return String(value);
+  }
+
+  /**
+   * @param {string} key
+   */
+  function is_col_sortable(key) {
+    const col = columns.find((c) => c.key === key);
+    return col?.sortable ?? sortable;
+  }
+</script>
+
+<div class="table-wrap {className}" {...rest}>
+  {#if children}
+    <div class="table-toolbar">
+      {@render children()}
+    </div>
+  {/if}
+
+  <div class="table-scroll">
+    <table class="table">
+      <thead class="table-head">
+        <tr>
+          {#if selectable}
+            <th class="table-th table-th-check" scope="col">
+              <input
+                type="checkbox"
+                class="table-checkbox"
+                checked={all_selected}
+                indeterminate={some_selected}
+                disabled={loading}
+                aria-label="Select all rows"
+                onchange={handle_select_all}
+              />
+            </th>
+          {/if}
+          {#each columns as col}
+            {@const col_sort = is_col_sortable(col.key)}
+            <th
+              class="table-th"
+              class:table-th-sortable={col_sort && !!on_sort}
+              scope="col"
+              style:width={col.width ?? undefined}
+              onclick={col_sort && on_sort ? () => handle_header_click(col.key) : undefined}
+              aria-sort={!col_sort ? undefined : sort_key === col.key ? (sort_direction === 'asc' ? 'ascending' : 'descending') : 'none'}
+            >
+              <span class="table-th-inner">
+                {col.label}
+                {#if col_sort && on_sort}
+                  <span class="table-sort-icon" aria-hidden="true">
+                    {#if sort_key === col.key}
+                      {#if sort_direction === 'asc'}
+                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                          <path d="M5 2L9 8H1L5 2Z" fill="currentColor"/>
+                        </svg>
+                      {:else}
+                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
+                          <path d="M5 8L1 2H9L5 8Z" fill="currentColor"/>
+                        </svg>
+                      {/if}
+                    {:else}
+                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style="opacity: 0.3">
+                        <path d="M5 2L9 5H1L5 2Z" fill="currentColor"/>
+                        <path d="M5 8L1 5H9L5 8Z" fill="currentColor"/>
+                      </svg>
+                    {/if}
+                  </span>
+                {/if}
+              </span>
+            </th>
+          {/each}
+        </tr>
+      </thead>
+
+      <tbody class="table-body">
+        {#if loading}
+          {#each { length: SKELETON_ROWS } as _, i}
+            <tr class="table-row" aria-hidden="true">
+              {#if selectable}
+                <td class="table-td table-td-check">
+                  <Skeleton width="16px" height="16px" radius="var(--radius-sm)" />
+                </td>
+              {/if}
+              {#each columns as col}
+                <td class="table-td">
+                  <Skeleton width={i % 3 === 0 ? '60%' : i % 3 === 1 ? '80%' : '70%'} height="14px" />
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        {:else if rows.length === 0}
+          <tr>
+            <td colspan={selectable ? columns.length + 1 : columns.length} class="table-td-empty">
+              <EmptyState heading={empty_heading} body={empty_body} />
+            </td>
+          </tr>
+        {:else}
+          {#each rows as row, row_index}
+            {@const row_id = String(row[row_key])}
+            {@const is_selected = selected_rows.has(row_id)}
+            <tr
+              class="table-row"
+              class:table-row-even={row_index % 2 === 1}
+              class:table-row-selected={is_selected}
+              class:table-row-clickable={!!on_row_click}
+              onclick={on_row_click ? () => on_row_click(row) : undefined}
+              tabindex={on_row_click ? 0 : undefined}
+              onkeydown={on_row_click ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); on_row_click(row); } } : undefined}
+            >
+              {#if selectable}
+                <td
+                  class="table-td table-td-check"
+                  onclick={(e) => { e.stopPropagation(); handle_row_check(row_id); }}
+                >
+                  <input
+                    type="checkbox"
+                    class="table-checkbox"
+                    checked={is_selected}
+                    aria-label="Select row"
+                    onchange={() => handle_row_check(row_id)}
+                    onclick={(e) => e.stopPropagation()}
+                  />
+                </td>
+              {/if}
+              {#each columns as col}
+                <td class="table-td">
+                  {render_cell(col, row[col.key], row)}
+                </td>
+              {/each}
+            </tr>
+          {/each}
+        {/if}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<style>
+  .table-wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    border: var(--elevation-border);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+  }
+
+  .table-toolbar {
+    padding: var(--space-sm) var(--space-md);
+    border-bottom: var(--elevation-border);
+    background: var(--color-surface);
+  }
+
+  .table-scroll {
+    width: 100%;
+    overflow: auto;
+    /* When a max-height is set on .table-wrap, this enables sticky thead. */
+    max-height: inherit;
+  }
+
+  .table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  /* ─── Head ───
+     Sticky headers require the consumer to set a fixed height on .table-wrap
+     or a scroll-owning ancestor. Without a constrained height the header will
+     simply sit at the top of the table and not "stick" because this scroll
+     container owns the overflow. */
+  .table-head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .table-th {
+    background: var(--color-surface-tertiary);
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    letter-spacing: var(--type-label-tracking);
+    color: var(--color-text-secondary);
+    font-weight: var(--raw-font-weight-regular, 400);
+    text-align: left;
+    padding: var(--space-sm) var(--space-md);
+    white-space: nowrap;
+    user-select: none;
+    border-bottom: var(--elevation-border);
+  }
+
+  .table-th-sortable {
+    cursor: pointer;
+  }
+
+  .table-th-sortable:hover {
+    color: var(--color-text);
+  }
+
+  .table-th-check {
+    width: 40px;
+    padding-left: var(--space-md);
+    padding-right: var(--space-sm);
+  }
+
+  .table-th-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+  }
+
+  .table-sort-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--color-text-muted);
+    flex-shrink: 0;
+  }
+
+  .table-th-sortable:hover .table-sort-icon {
+    color: var(--color-text-secondary);
+  }
+
+  /* ─── Body ─── */
+  .table-body {
+    background: var(--color-surface);
+  }
+
+  .table-row {
+    transition: background var(--duration-instant) var(--easing-default);
+  }
+
+  .table-row-even {
+    background: var(--color-surface-secondary);
+  }
+
+  .table-row:hover {
+    background: var(--color-surface-tertiary);
+  }
+
+  .table-row-selected {
+    background: var(--color-accent-subtle) !important;
+  }
+
+  .table-row-clickable {
+    cursor: pointer;
+  }
+
+  .table-row-clickable:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: -2px;
+  }
+
+  .table-td {
+    font-family: var(--type-data-font);
+    font-size: var(--type-data-size);
+    color: var(--color-text);
+    padding: var(--space-sm) var(--space-md);
+    border-bottom: var(--elevation-border);
+    vertical-align: middle;
+  }
+
+  /* Remove border from last row */
+  .table-body tr:last-child .table-td {
+    border-bottom: none;
+  }
+
+  .table-td-check {
+    width: 40px;
+    padding-left: var(--space-md);
+    padding-right: var(--space-sm);
+  }
+
+  .table-td-empty {
+    padding: 0;
+    border-bottom: none;
+  }
+
+  /* ─── Checkbox ─── */
+  .table-checkbox {
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    accent-color: var(--color-accent);
+    cursor: pointer;
+    display: block;
+  }
+</style>

package/components/DataTable.svelte.d.ts

@@ -0,0 +1,75 @@
+export default DataTable;
+type DataTable = {
+  $on?(type: string, callback: (e: any) => void): () => void;
+  $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * DataTable
+ *
+ * Data table with sortable columns, row selection, loading and empty states.
+ * Composes Skeleton and EmptyState primitives. Consumes --table-* tokens from
+ * components.css, falling back to semantic tokens.
+ *
+ * @example Basic
+ * <DataTable
+ *   columns={[
+ *     { key: 'name', label: 'NAME' },
+ *     { key: 'status', label: 'STATUS', width: '120px' },
+ *   ]}
+ *   rows={items}
+ *   on_sort={(key, dir) => sort(key, dir)}
+ *   on_row_click={(row) => goto(`/items/${row.id}`)}
+ * />
+ *
+ * @example Selectable
+ * <DataTable
+ *   {columns}
+ *   {rows}
+ *   selectable
+ *   bind:selected_rows={selected}
+ *   on_select={(sel) => console.log(sel)}
+ * />
+ *
+ * @example Loading
+ * <DataTable {columns} rows={[]} loading />
+ */
+declare const DataTable: import("svelte").Component<
+  {
+    columns?: any[];
+    rows?: any[];
+    loading?: boolean;
+    sortable?: boolean;
+    sort_key?: any;
+    sort_direction?: string;
+    selectable?: boolean;
+    selected_rows?: Set<string>;
+    row_key?: string;
+    empty_heading?: string;
+    empty_body?: string;
+    on_sort?: any;
+    on_select?: any;
+    on_row_click?: any;
+    children?: any;
+    class?: string;
+  } & Record<string, any>,
+  {},
+  "selected_rows"
+>;
+type $$ComponentProps = {
+  columns?: any[];
+  rows?: any[];
+  loading?: boolean;
+  sortable?: boolean;
+  sort_key?: any;
+  sort_direction?: string;
+  selectable?: boolean;
+  selected_rows?: Set<string>;
+  row_key?: string;
+  empty_heading?: string;
+  empty_body?: string;
+  on_sort?: any;
+  on_select?: any;
+  on_row_click?: any;
+  children?: any;
+  class?: string;
+} & Record<string, any>;

package/components/Pagination.svelte

@@ -0,0 +1,299 @@
+<!--
+  @component Pagination
+
+  Cursor-based and offset-based pagination with page size selector.
+  Self-contained nav controls with correct icon placement (chevron
+  leading for PREV, trailing for NEXT).
+
+  @example Cursor mode (default)
+  <Pagination
+    has_next={page.has_next}
+    has_prev={page.has_prev}
+    on_next={() => loadNext()}
+    on_prev={() => loadPrev()}
+    total_items={page.count}
+    page_size={25}
+  />
+
+  @example Offset mode
+  <Pagination
+    mode="offset"
+    current_page={page}
+    total_pages={totalPages}
+    total_items={totalItems}
+    on_page_change={(p) => setPage(p)}
+    page_sizes={[10, 25, 50, 100]}
+    on_page_size_change={(s) => setSize(s)}
+  />
+-->
+<script>
+  import Select from './Select.svelte';
+
+  let {
+    /** @type {'cursor' | 'offset'} */
+    mode = 'cursor',
+
+    /* Cursor mode */
+    /** @type {boolean} */
+    has_next = false,
+    /** @type {boolean} */
+    has_prev = false,
+    /** @type {(() => void) | undefined} */
+    on_next = undefined,
+    /** @type {(() => void) | undefined} */
+    on_prev = undefined,
+
+    /* Offset mode */
+    /** @type {number} */
+    current_page = 1,
+    /** @type {number | undefined} */
+    total_pages = undefined,
+    /** @type {number | undefined} */
+    total_items = undefined,
+    /** @type {((page: number) => void) | undefined} */
+    on_page_change = undefined,
+
+    /* Shared */
+    /** @type {number} */
+    page_size = 25,
+    /** @type {number[] | undefined} */
+    page_sizes = undefined,
+    /** @type {((size: number) => void) | undefined} */
+    on_page_size_change = undefined,
+
+    /** @type {string} */
+    class: className = '',
+    ...rest
+  } = $props();
+
+  const page_size_options = $derived(
+    (page_sizes ?? []).map((s) => ({ value: String(s), label: String(s) }))
+  );
+
+  const page_size_value = $derived(String(page_size));
+
+  const page_numbers = $derived(
+    mode === 'offset' && total_pages
+      ? build_pages(current_page, total_pages)
+      : /** @type {(number | null)[]} */ ([])
+  );
+
+  const item_range_text = $derived(
+    total_items === undefined
+      ? ''
+      : mode === 'cursor'
+        ? `${total_items.toLocaleString()} total`
+        : (() => {
+            const start = (current_page - 1) * page_size + 1;
+            const end = Math.min(current_page * page_size, total_items);
+            return start > total_items
+              ? `${total_items.toLocaleString()} total`
+              : `${start}–${end} of ${total_items.toLocaleString()}`;
+          })()
+  );
+
+  /**
+   * @param {number} current
+   * @param {number} total
+   * @returns {(number | null)[]}
+   */
+  function build_pages(current, total) {
+    if (total <= 7) {
+      return Array.from({ length: total }, (_, i) => i + 1);
+    }
+    const pages = /** @type {(number | null)[]} */ ([]);
+    pages.push(1);
+    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);
+    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">
+      <Select
+        size="sm"
+        value={page_size_value}
+        options={page_size_options}
+        onchange={(val) => on_page_size_change?.(Number(val))}
+        aria-label="Rows per page"
+      />
+    </div>
+  {/if}
+
+  {#if total_items !== undefined}
+    <span class="pagination-info">{item_range_text}</span>
+  {/if}
+
+  <span class="pagination-spacer" aria-hidden="true"></span>
+
+  {#if mode === 'cursor'}
+    <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 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}
+        {#if p === null}
+          <span class="pagination-ellipsis" aria-hidden="true">…</span>
+        {:else}
+          <button
+            type="button"
+            class="pagination-page"
+            class:pagination-page-active={p === current_page}
+            onclick={() => on_page_change?.(/** @type {number} */ (p))}
+            aria-label={`Page ${p}`}
+            aria-current={p === current_page ? 'page' : undefined}
+          >
+            {p}
+          </button>
+        {/if}
+      {/each}
+    </div>
+
+    <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>
+
+<style>
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    flex-wrap: wrap;
+  }
+
+  .pagination-size {
+    width: 80px;
+  }
+
+  .pagination-info {
+    font-family: var(--type-body-sm-font);
+    font-size: var(--type-body-sm-size);
+    color: var(--color-text-muted);
+    white-space: nowrap;
+  }
+
+  .pagination-spacer {
+    flex: 1;
+    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;
+    align-items: center;
+    gap: var(--space-2xs);
+  }
+
+  .pagination-page {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 var(--space-xs);
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    letter-spacing: var(--type-label-tracking);
+    color: var(--color-text-secondary);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: background var(--duration-instant) var(--easing-default);
+  }
+
+  .pagination-page:hover:not(.pagination-page-active) {
+    background: var(--color-surface-secondary);
+    color: var(--color-text);
+  }
+
+  .pagination-page:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  .pagination-page-active {
+    background: var(--color-accent);
+    color: var(--color-text-on-accent);
+    cursor: default;
+  }
+
+  .pagination-ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    font-family: var(--type-label-font);
+    font-size: var(--type-label-size);
+    color: var(--color-text-muted);
+    user-select: none;
+  }
+</style>

package/components/Pagination.svelte.d.ts

@@ -0,0 +1,66 @@
+export default Pagination;
+type Pagination = {
+  $on?(type: string, callback: (e: any) => void): () => void;
+  $set?(props: Partial<$$ComponentProps>): void;
+};
+/**
+ * Pagination
+ *
+ * Cursor-based and offset-based pagination with page size selector.
+ * Consumes --pagination-* tokens (falls back to semantic tokens).
+ *
+ * @example Cursor mode (default)
+ * <Pagination
+ *   has_next={page.has_next}
+ *   has_prev={page.has_prev}
+ *   on_next={() => loadNext()}
+ *   on_prev={() => loadPrev()}
+ *   total_items={page.count}
+ *   page_size={25}
+ * />
+ *
+ * @example Offset mode
+ * <Pagination
+ *   mode="offset"
+ *   current_page={page}
+ *   total_pages={totalPages}
+ *   total_items={totalItems}
+ *   on_page_change={(p) => setPage(p)}
+ *   page_sizes={[10, 25, 50, 100]}
+ *   on_page_size_change={(s) => setSize(s)}
+ * />
+ */
+declare const Pagination: import("svelte").Component<
+  {
+    mode?: string;
+    has_next?: boolean;
+    has_prev?: boolean;
+    on_next?: any;
+    on_prev?: any;
+    current_page?: number;
+    total_pages?: any;
+    total_items?: any;
+    on_page_change?: any;
+    page_size?: number;
+    page_sizes?: number[];
+    on_page_size_change?: any;
+    class?: string;
+  } & Record<string, any>,
+  {},
+  ""
+>;
+type $$ComponentProps = {
+  mode?: string;
+  has_next?: boolean;
+  has_prev?: boolean;
+  on_next?: any;
+  on_prev?: any;
+  current_page?: number;
+  total_pages?: any;
+  total_items?: any;
+  on_page_change?: any;
+  page_size?: number;
+  page_sizes?: number[];
+  on_page_size_change?: any;
+  class?: string;
+} & Record<string, any>;

package/components/index.d.ts

@@ -47,3 +47,6 @@ export { default as CollapsibleSection } from "./CollapsibleSection.svelte";
 export { default as OptionGrid } from "./OptionGrid.svelte";
 export { default as ConditionTable } from "./ConditionTable.svelte";
 export { default as LogViewer } from "./LogViewer.svelte";
+export { default as DataTable } from "./DataTable.svelte";
+export { default as Pagination } from "./Pagination.svelte";
+export { default as Breadcrumb } from "./Breadcrumb.svelte";

package/components/index.js

@@ -76,3 +76,8 @@ export { default as CollapsibleSection } from "./CollapsibleSection.svelte";
 export { default as OptionGrid } from "./OptionGrid.svelte";
 export { default as ConditionTable } from "./ConditionTable.svelte";
 export { default as LogViewer } from "./LogViewer.svelte";
+
+// Data & navigation
+export { default as DataTable } from "./DataTable.svelte";
+export { default as Pagination } from "./Pagination.svelte";
+export { default as Breadcrumb } from "./Breadcrumb.svelte";

package/package.json

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