---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 26
titulo: "Card — `estável` (v0.26) · CD1–CD5 · validação executada 198/198 + visual aprovada em 2026-08-05"
sequencia: 28 de 98
bytes_do_corpo: 7175
md5_do_corpo: 11eb2828ce47ed6c0ca1d3076c26d3c1
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
---
## 26. Card — `estável` (v0.26) · CD1–CD5 · validação executada 198/198 + visual aprovada em 2026-08-05
> **Base (3 rodadas, 2026-08-04):** R1 — M3 cards (elevated/filled/outlined com legibilidade equivalente — escolha é estilística), NN/g (sombra como signifier de clique), Carbon tile×card (tile é fundação sem estilo de conteúdo; card constrói em cima), Nathan Curtis (card inteiro clicável × zonas interativas), Berkeley DAP (heading + affordance obrigatórios). R2 — shadcn (6 sub-componentes; CardTitle migrou de h3→div para NÃO quebrar hierarquia de headings), EUI (card sobre panel; title em span configurável; regras de nesting), React Aria. R3 — **Inclusive Components/cards (fonte primária: pseudo-content trick + redundant click)**, Adrian Roselli (block links: wrapper `` vira bloco ilegível em AT), **Intopia (teste de usabilidade real: usuários com dislexia/baixa visão falham ao selecionar texto sob o trick)**, Fiori object card.
### 26.1 Decisões CD1–CD5
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| CD1 | Default **outlined** (borda + superfície); **elevated** (par superfície+sombra §2.8 dos tokens; no dark a borda assume) restrita a destaque deliberado, NUNCA em grade densa | M3: 3 tipos = mesma função, escolha estilística; perfil ERP denso (Fiori/EUI): sombra multiplicada vira ruído e falha no grayscale; signifier de clique da SEED é mecanismo medido (hover/focus/sublinha), não sombra permanente | Elevated default; filled (superfície tonal colide com 70/20/10 — cor pontua, não forra) |
> **⚠ SUPERSEDE PARCIAL DO CD1 — decisão do Rafael em 2026-08-15 (pacote
> PN-P7/CP-P2, MANIFESTO v7.6→v7.7), verbatim: *"o que vai prevalecer é o que
> construímos agora, se alguma informação antiga ainda não foi atualizada,
> ela não serve para referência se já temos atualização para ela. acredito
> ser a opção A."*** O conflito era latente desde o nascimento do CP17
> (2026-08-14): o CD1 declarava borda como mecanismo default de separação do
> card, e o CP17 (lei de composição, gate G1) declara que **toda PEÇA se
> separa do canvas pelo par sombra+anel** — anel de 1px na tinta
> `border-subtle` DENTRO da declaração de sombra, slot `border` livre para
> estado. Resolução: **quando o card é PEÇA sobre canvas (o caso de tela
> composta — bloco de painel, cartão de formulário, a tabela inteira), o
> CP17 prevalece e a separação é o par.** O que o CD1 PRESERVA: a difusa do
> par é a `shadow-raised` sutil (0 1px 2px @ 10%), não a "sombra
> multiplicada" que o porquê original temia — o racional anti-ruído do ERP
> denso segue respeitado; "elevated como destaque deliberado" segue valendo
> para a sombra FORTE; e o outlined literal (borda no slot border)
> permanece legítimo apenas em contexto INTERNO a outra peça (o well do CD5,
> contornos dentro de cartão), onde o elemento não é peça sobre canvas.
> **Consequência declarada:** os previews de componente que demonstram o
> card outlined como default (superfícies e herdeiros) ficam DEFASADOS desta
> decisão até o retrofit próprio — pendência **CP-P4**, registrada no
> MANIFESTO v7.7 (não entrou no lote PN-P7/CP-P2 de propósito: migrar
> artefato de spec sem o supersede escrito seria inverter a ordem
> decisão→artefato). O mecanismo permanece UM só por contrato (CP17 do
> `seed-composicao.md`): dois mecanismos convivendo em tela seria
> reintroduzir a dispersão que aquele arquivo mata.
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| CD2 | Anatomia composável de 6 zonas TODAS opcionais: container → header (título+descrição+ação) → media → content → footer; **título sem heading fixo** — nível de heading é do consumidor | shadcn (changelog: h3→div por ARIA); EUI (span default + titleElement); Zuora/Carbon | Heading h3 injetado (quebra hierarquia em dashboards de níveis variados) |
| CD3 | Card clicável em 3 regimes: **(a) estático** (default) · **(b) navegável** — UM link real no título, área estendida via `::after` do link, hover+`:focus-within` medidos, CTA decorativo `aria-hidden`; **PROIBIDO quando o corpo tem dado que o usuário copia** (código, nº de UC, medição — o pseudo-content bloqueia seleção de texto e copiar dado é fluxo real no ERP) · **(c) com ações** — sem área estendida; máx. 2 ações visíveis + overflow (regra do um preservada); secundárias sobem no z-index | Inclusive Components (primária); Intopia (falha real de seleção documentada em teste); Roselli; Berkeley; Curtis; NN/g | Wrapper `` no card inteiro (AT lê bloco único ilegível); `onclick` em div (sem teclado); redundant-click como default (JS p/ cursor + lógica duplicada — vira exceção documentada) |
| CD4 | Card selecionável = **composição com radio/checkbox do Bloco 2**, não componente novo: input nativo dentro do card-label, grupo em `fieldset+legend`, selected herda sinais do Bloco 1 (borda de ação + anel `:has(:checked)`) | EUI CheckableCard (fieldset/legend obrigatórios); Carbon selectable tile | Componente independente (duplicaria estados já specados) |
| CD5 | **Nesting proibido no mesmo estilo:** card dentro de card não repete borda/sombra — interior usa divider/spacing ou sub-painel `well` (surface-sunken) | EUI panel nesting ("painéis iguais aninhados destroem a hierarquia") + EUI form layouts (anti-padrão documentado) | Card russo (borda dentro de borda) |
### 26.2 Anatomia e tokens (camada 3 — pares light/dark declarados)
`--seed-card-bg` = surface-raised (branco / #1D272D) · `--seed-card-border` = border-subtle (cinza-100 / #38464F) — **borda DECORATIVA declarada** (1.21 light / 1.75 dark, medidos): a separação é carregada por espaço + raio + mudança de superfície + tipografia; contorno não é portador único de informação (mesmo racional do skeleton §19.2) · `--seed-card-radius` = 12px (radius lg) · padding interno 16px (12 no content vertical) · elevated: `--seed-shadow-raised` + no dark borda `#38464F` visível (par de elevação §2.8). Interação medida: título-link tq-600/branco **4.60 AA** light · tq-300/dark-page **9.32 AAA** dark, sublinhado sempre; focus ring padrão (§1); hover do navegável = sombra raised (reforço, nunca canal único — a sublinha do link é o sinal permanente).
### 26.3 Os 7 testes
1. Pares medidos: título-link 4.60/9.32 ✓; textos herdam primário/secundário (13.86/6.55 light · 14.16/8.92 dark) ✓; bordas declaradas decorativas com justificativa. 2. Clique sinalizado por sublinha+cursor+hover, nunca só tom. 3. Grayscale: contorno+raio+peso carregam (provado no preview). 4. Estático × navegável × selecionável a 1s (nada × sublinha no título × checkbox visível). 5. Regra do um: 1 gesto primário; máx. 2 secundárias. 6. Selecionado visível sem interação (borda de ação + input marcado). 7. 360px: padding 16, CTA full-width herdando §1 v0.7, área de toque ≥44. *(Validação executada completa: suite F 32/32 + regressão A–E 166/166; visual aprovada 2026-08-05.)*
---