Pagination

1import { Pagination } from '@/ui/Navigation'23// The page lives in the URL. That is what makes it a position rather than4// a piece of component state that dies on refresh.5const [params, setParams] = useSearchParams()6const page = Number(params.get('page') ?? 1)7const size = Number(params.get('size') ?? 25)89<Pagination10  page={page}11  pageCount={Math.ceil(total / size)}12  totalItems={total}13  pageSize={size}14  onPageChange={(p) => {15    setParams({ page: String(p), size: String(size) })16    // The user asked for rows, not for the pager. Send them to the rows.17    resultsRef.current?.focus()18  }}19/>2021// Changing page size must not lose the user's place.22function onPageSizeChange(next: number) {23  const firstRecord = (page - 1) * size24  setParams({ page: String(Math.floor(firstRecord / next) + 1), size: String(next) })25}2627// Cursor pagination: no page numbers, because there is no stable page 7.28<Row>29  <Button disabled={!before} onClick={() => fetchPage({ before })}>Previous</Button>30  <Button disabled={!after}  onClick={() => fetchPage({ after })}>Next</Button>31</Row>

<nav role="navigation" aria-label="Pagination">
  <p class="ds-pager__summary">Showing 76–100 of 1,284</p>

  <a href="?page=3" aria-label="Go to previous page" rel="prev">
    <svg aria-hidden="true">…</svg>
  </a>

  <a href="?page=1" aria-label="Go to page 1">1</a>
  <span aria-hidden="true">…</span>
  <a href="?page=3" aria-label="Go to page 3">3</a>

  <!-- Where you are is not somewhere to go. -->
  <span aria-current="page">4</span>

  <a href="?page=5" aria-label="Go to page 5">5</a>
  <span aria-hidden="true">…</span>
  <a href="?page=52" aria-label="Go to page 52">52</a>

  <a href="?page=5" aria-label="Go to next page" rel="next">
    <svg aria-hidden="true">…</svg>
  </a>
</nav>

<p class="sr-only" role="status" aria-live="polite">Showing 76 to 100 of 1,284</p>

.ds-pager {
  display: flex;
  align-items: center;
  gap: 2px;                        /* the run of numbers is one control */
}

.ds-pager__nav {
  margin-inline: 6px;              /* 8px total — Prev/Next are a different job */
}

/* Square, so a 1 and a 400 are the same target and the row never jitters. */
.ds-pager a,
.ds-pager [aria-current] {
  min-inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ds-fg-secondary);
}

.ds-pager a:hover { background: var(--ds-layer-hover); color: var(--ds-fg); }

.ds-pager [aria-current='page'] {
  background: var(--ds-accent);
  color: var(--ds-fg-on-accent);
  cursor: default;                 /* it is not a destination */
}

/* Disabled, never removed — removing shifts every number at the set's ends. */
.ds-pager [aria-disabled='true'] {
  color: var(--ds-fg-disabled);
  pointer-events: none;
}

@media (pointer: coarse) {
  .ds-pager a,
  .ds-pager [aria-current] { min-inline-size: 44px; block-size: 44px; }
  /* Numeric paging is a desktop pattern. Drop to Prev / current / Next. */
  .ds-pager__sibling { display: none; }
}