Componentes
37. Paginação
seed-componentes.md v1.43 · §37seção 39 de 9837-paginacao-estavel-v0-41-pg1-pg5-bloco-5-5c-lote.md · MD5 c50f826aTítulo completo no canon: 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
compressedresponsivo em xs/s — números viram texto estático + setas; "filtre primeiro, pagine depois"; contagem total sempre visível;pageCount 0p/ 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 ✓.)
Também cita o §37: banco-dados, tela-busca.