---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 43
titulo: "Lista de dados e degradação responsiva — `estável` (v0.45) · LD1–LD5 · Bloco 6/6D · fecha a paridade mobile dos dados"
sequencia: 45 de 98
bytes_do_corpo: 3231
md5_do_corpo: 9ff5bb45e03cdd17f9f104db63214034
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
---
## 43. 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.)*

---

