---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 37
titulo: "Paginação — `estável` (v0.41) · PG1–PG5 · Bloco 5/5C · lote autônomo 1"
sequencia: 39 de 98
bytes_do_corpo: 3048
md5_do_corpo: c50f826a001db96923b9f7551ae9180c
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 37. Paginação — `estável` (v0.41) · PG1–PG5 · Bloco 5/5C · lote autônomo 1

> **Base (3 rodadas, 2026-08-06):** R1 — **Carbon Pagination** (usar >25 itens; itens-por-página + faixa do intervalo; sempre colada embaixo da tabela; NUNCA para jornada linear; variantes simple/advanced) + Carbon data-table + Michelin DS (truncamento; topo+fundo se conteúdo maior que a tela; fronteira com infinite scroll: conteúdo que atualiza muito/sem ordenação). R2 — **EUI Pagination** (modo `compressed` responsivo em xs/s — números viram texto estático + setas; **"filtre primeiro, pagine depois"**; contagem total sempre visível; `pageCount 0` p/ total desconhecido). R3 — heranças normativas: nav nomeado + `aria-current="page"` (mesma base APG do §36); select §7; botão §1.

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| PG1 | **Modelo de tabela ERP completo:** itens por página (select §7: 10/25/50) + **faixa "X–Y de N" em JetBrains Mono** + janela de páginas + anterior/próxima. Colada na base da tabela/lista. Usar quando >~25 itens | Carbon (o modelo advanced é o caso ERP); EUI (contagem total sempre) | Paginação "simples" como default (esconde o total); jump-to-page numérico na v1 (sem demanda) |
| PG2 | **Janela com reticências:** primeira e última SEMPRE visíveis + corrente ±1; reticências decorativas (`aria-hidden`). Corrente = fundo `action-primary` + `aria-current="page"` | Michelin/EUI (truncamento padrão); primeira/última ancoram o total | Todas as páginas (explode com 300+); só setas no desktop |
| PG3 | **Compacta <640px:** números somem, fica "Página X de Y" + setas — mesma informação, footprint de polegar. Automático por CSS, não prop | EUI compressed (responsivo por default em xs/s) | Janela completa no mobile (alvos minúsculos) |
| PG4 | **Estados:** anterior desabilita na 1ª, próxima na última (fim de curso é o motivo VISÍVEL — não é a classe de disabled mudo do B1/TB8: o contexto explica); trocar itens-por-página **volta à página 1** | Carbon/EUI convergem; voltar à página 1 evita intervalo fantasma | Esconder as setas no fim (layout pula) |
| PG5 | **Fronteiras:** ordenação/filtro/busca = tabela (B6 — "filtre primeiro, pagine depois" vira régua editorial de lá); infinite scroll/load-more = padrão de FEED, fora do ERP (se surgir no site institucional, F6); total desconhecido (só setas) = variante registrada, spec no B6 junto da tabela | EUI (a régua); Michelin (fronteira do infinite) | Especificar infinite scroll aqui |

**Tokens:** corrente = par do botão primário §1 (4.60 ✓ herdado); números `text-secondary`; faixa mono `text-muted` (4.74 herdado). **Nenhum par novo.** Os 7 testes: 1 herdados ✓ · 2 corrente por fundo+peso+aria-current · 3 grayscale ok · 4 paginação × tabs a 1s · 5 uma janela, uma corrente · 6 posição visível sem interação · 7 360px compacta com alvos 36+hitbox. *(Suite 5C: PG-01–08 ✓; compacta renderizada conferida na render R8 ✓.)*

---