---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 28
titulo: "Lista — `estável` (v0.26) · LS1–LS5 · validação executada + visual aprovada em 2026-08-05 · pronta para a central de notificações"
sequencia: 30 de 98
bytes_do_corpo: 3814
md5_do_corpo: 60974a58d73569c1cc43170e9d778f3e
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
---
## 28. Lista — `estável` (v0.26) · LS1–LS5 · validação executada + visual aprovada em 2026-08-05 · pronta para a central de notificações

> **Base:** R1 — M3/M2/M1 lists (1–3 linhas; >3 → card; conteúdo distintivo à esquerda; condensação legítima no desktop), Carbon list/structured list (wrap, não truncar; >25 itens → tabela). R2 — **React Aria (a tricotomia: ul/li estático · GridList/ARIA grid quando há filhos interativos · ListBox para seleção pura — com nota explícita de quando usar cada)**, Angular Material (proíbe controles interativos dentro de options). R3 — Fiori list card/object list (células condensadas; lida/não-lida por peso), WCAG 2.5.8 herdado.

### 28.1 Decisões LS1–LS5

| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| LS1 | Dois modos com semântica distinta: **estática** = `ul/li` puro (zero interação) · **interativa com filhos interativos** = padrão ARIA **grid** (role=grid/row/gridcell, roving tabindex, setas/Home/End, UM tab-stop no grupo, Enter abre, ação por item com `tabindex=-1` e `aria-label` nomeando) · seleção pura sem filhos → listbox (registrado; caso raro no ERP) | React Aria (referência do stack Lovable/shadcn); Angular Material; APG grid | Modo único "li clicável" (inacessível); cada ação como tab-stop (Tab-maratona, anti-W5) |
| LS2 | Item de **1 a 3 linhas, teto duro** — acima é card (§26). Anatomia: leading (ícone/avatar — slot nasce agora, componente avatar chega no sub-bloco I) + corpo (primário/secundário/terciário) + trailing (meta em JetBrains Mono ou ação). Distintivo à esquerda. Truncamento evitado: wrap; exceção densa usa tooltip §23 | M3/M1; Carbon; Fiori | Truncar por padrão; 4+ linhas em lista |
| LS3 | Densidades: **default touch-first** (item ≥44px — teste do polegar) + **densa** desktop opt-in (36px). A degradação densa→toque da TABELA fica no Bloco 6 (pendência declarada, não invadida) | Premissa mobile M1–M3; M1 (condensar quando mouse domina); WCAG 2.5.8 | Densa como default (mata o toque) |
| LS4 | Divider em lista: **default SEM divider** (spacing separa); inset opcional herdando DV2, sempre decorativo | M3 ("margem basta em itens repetitivos"); DV1 | Zebra (território da tabela, B6) |
| LS5 | Slots da CENTRAL DE NOTIFICAÇÕES declarados desde já: **não-lida por peso tipográfico + dot** (nunca só cor), timestamp no trailing, severidade T1–T5 no leading, marcar-como-lida anuncia na **live region única do grupo nomeando o item** (regime discreto 1.13-b), foco pós-ação permanece na linha, erro de carga usa slot `role="alert"` pré-existente (herda S5/Z) | CN1–CN4 (marco v1.0); Fiori (peso); W5 adaptado | Re-spec da lista quando a CN chegar |

### 28.2 Anatomia e tokens

Item: min-height 44 (densa 36) · gap 12 · leading 32px · primário 600 .9rem `text-primary` · secundário .82rem `text-secondary` · trailing JetBrains Mono .75rem `text-muted` · hover `--seed-list-hover` (surface-subtle / #273137) com cursor — reforço, nunca canal único (foco tem anel medido §1) · não-lida: primário 700 + dot 8px vermelho-500 (badge §21 dot). Pares medidos: primário 13.86/14.16 · secundário 6.55/8.92 · meta 4.74 light / 7.95 dark (elevated) · texto sobre hover 12.75 — todos ≥AA ✓.

### 28.3 Os 7 testes

1. Pares medidos acima ✓. 2. Não-lida = peso+dot; interação = foco+hover+cursor. 3. Grayscale: peso carrega (provado). 4. Estática × interativa a 1s (cursor+hover × nada). 5. Uma live region por grupo (1.13-b). 6. Estado não-lida visível sem interação. 7. 360px: item 44px, ação com hitbox estendida ~44, trailing não colide. *(Validação executada completa: suite F 32/32 + regressão A–E 166/166; visual aprovada 2026-08-05.)*

---