Componentes
43. Lista de dados e degradação responsiva
seed-componentes.md v1.43 · §43seção 45 de 9843-lista-de-dados-e-degradacao-responsiva-estavel.md · MD5 9ff5bb45Título completo no canon: Lista de dados e degradação responsiva — estável (v0.45) · LD1–LD5 · Bloco 6/6D · fecha a paridade mobile dos dados
Base (3 rodadas, 2026-08-06): R1 — Setproduct 2026 (régua: tabela = COMPARAR atributos consistentes; cards = item rico e variado; lista = raso 1 linha) + Fiori responsive table (pop-in por IMPORTÂNCIA de coluna: High fica, Medium migra para pares rótulo-valor, Low some com "Show Details"; ≤200 itens; nível de LINHA). R2 — shadcn/Tailwind (data-attributes + variantes responsivas). R3 — MDN
<dl>(Baseline; grupos em<div>permitidos; quirks de SR documentados e não-bloqueantes) + eBay evo (todo dt pareado; sem nesting) + Ben Myers/Fedotov (dl > table para pares rótulo-valor) + Roselli responsivo (wrapper de rolagem como fallback UNIVERSAL — já no DT1).
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| LD1 | Lista de dados = <dl> com grupos em <div> (padrão MDN), nomeada; dt em caixa alta discreta, dd com peso; numérico em mono; para LEITURA de um registro (detalhe), nunca para comparar linhas (comparar = tabela §40) |
MDN/eBay/Fedotov (semântica de par rótulo-valor); Setproduct (a régua tabela×lista) | <table> de 2 colunas p/ pares (semântica errada); divs cegos |
| LD2 | Degradação tabela→mobile em DOIS regimes: (a) fallback universal = wrapper de rolagem horizontal do DT1 (sempre presente, custo zero); (b) modo cards OPT-IN (data-mobile="cards"): <640px cada linha vira card com o rótulo da coluna migrando via data-label (o pop-in do Fiori em CSS puro) |
Roselli (fallback); Fiori (pop-in por importância); opt-in porque nem toda tabela merece card (comparação morre no card — Setproduct) | Cards como default (mata a comparação); duplicar o DOM (tabela+cards) |
| LD3 | Importância de coluna (Fiori): cada coluna declara high (fica no card) · default (migra com rótulo) · low (some no card) — decisão EDITORIAL por tabela, com a régua: identificador+valor+status são high; metadados são low |
Fiori literal (High/Medium/Low); a coluna que some precisa ser decisão, não acidente | Espremer tudo no card (ilegível); sumir colunas sem critério |
| LD4 | No modo cards: thead oculto ACESSIVELMENTE (clip — o SR ainda tem a tabela), célula = linha rótulo: valor com o rótulo via ::before/data-label; seleção e ações sobrevivem (checkbox e ⋯ ficam) |
A tabela continua tabela para AT; o rótulo visual migra | display:none no thead (some para todos); perder a seleção no mobile |
| LD5 | Fronteiras: "Show Details" do Fiori (expandir os low ocultos) = evolução com demanda; virtualização/agrupamento = produto; a régua de QUANDO usar card×tabela×lista fica no §40/DT8 + aqui | Recorte honesto | Spec do Show Details sem caso real |
Pares: herdados. Os 7 testes: 1 ✓ · 2 rótulo migrado por texto (nunca só posição) · 3 grayscale ok · 4 dl×tabela a 1s (leitura×comparação) · 5 um regime por tabela · 6 low declarado visível na spec da tabela · 7 360px: card sem overflow, alvos vivos. (Suite 6D ✓; render R10: linha=bloco, low oculta, zero overflow, medidos em pixels.)
Também cita o §43: tela-busca, tela-tabela.