Componentes
28. Lista
seed-componentes.md v2.00 · §28seção 57 de 18428-lista-estavel-v0-26-ls1-ls5-validacao-executada.md · MD5 4553c3beTítulo completo no canon: Lista — estável (v0.26) · LS1–LS5 · validação executada + visual aprovada em 2026-08-05 · pronta para a central de notificações
Em uma frase: Item de 1 a 3 linhas com o conteúdo distintivo à esquerda; acima de três linhas vira card, acima de 25 itens vira tabela.
(decisão registrada — ver Histórico da seção)
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 SIGA) |
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#
- 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.)
Também cita o §28: banco-cn, tela-busca.