---
fonte: 01-canonicos/seed-email.md
versao_da_fonte: v0.13
secao: 08-b
titulo: "Sub-bloco EC — componentes de e-mail (`estável` · promovido em 2026-08-08)"
sequencia: 12 de 17
bytes_do_corpo: 6291
md5_do_corpo: fa38b44f2c21816c01fed329cf6841b1
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-email.md
---
## 8-B. Sub-bloco EC — componentes de e-mail (`estável` · promovido em 2026-08-08)

> Consolidado EC1–EC8 aprovado pelo Rafael em 2026-08-08 ("aprovo") após 3 rodadas
> encadeadas: R1 Cerberus components (espaçamento por padding/spacer, nunca margin em
> tabela — respaldo do canon à nossa EL10; tags semânticas seguras com CSS inline) →
> R2 recibo transacional da Stripe via Really Good Emails + inventário de recibo
> (papéis de tabela definidos; itemização, totais, forma de pagamento) → R3 norma da
> fronteira das duas tabelas (marcação portadora de significado — th/scope/caption —
> proibida em tabela de apresentação e obrigatória em tabela de dado real; scope
> simples preferido a headers/id por suporte). 4ª rodada não disparada.
> Preview canônico: `seed-email-componentes.html` v0.1, que **herda o template-base
> v0.3** — a região CONTEUDO trocada, cabeçalho/rodapé/mecânica intactos, provando o
> contrato do EL7 na prática.

### Decisões EC

| # | Decisão | Racional | Alternativas descartadas |
|---|---|---|---|
| **EC1** | Inventário do lote: caixa de severidade · card neutro · tabela de dados · lista · bloco de contato comercial · ícone raster. Botão, divisor e spacer não se reescrevem — vivem no template-base (EL4/EL10) | Uma fonte por componente | Duplicar botão/divisor no EC (drift entre cópias) |
| **EC2** | Caixa de severidade nos 4 níveis T1–T5: barra lateral 4px na cor de texto + fundo -50 + texto no par medido da §4.2. **Mecanismo além de cor = rótulo textual em negrito** ("Sucesso:", "Atenção:", "Erro:", "Informação:"); ícone é opcional, nunca o portador | Rótulo textual sobrevive a bloqueio de imagem, grayscale e inversão; elimina dependência de PNGs hospedados só para severidade | Ícone como portador (viola EM7) · só cor de fundo (viola a escada de mecanismos) |
| **EC3** | Tabela de dados real: `<caption>` + `<thead>` + `<th scope="col">`/`<th scope="row">`, atributo booleano `data-tabela-dados` (o opt-out que a suíte reconhece), números em mono alinhados à direita, sem células mescladas, bordas horizontais visíveis | A exceção semântica do EL3, pelo lado obrigatório: sem a marcação, o leitor anuncia o valor sem o contexto da coluna | role=presentation + visual de tabela (perde as relações) · headers/id (pior suporte, desnecessário) |
| **EC4** | Lista semântica `<ul>`/`<ol>` com CSS inline: margin controlada, padding-left explícito, cor declarada | Canon: semântica é segura em e-mail; o que quebra é default não zerado | Tabela imitando lista |
| **EC5** | Ícones raster **sob demanda**: nenhum PNG especulativo. Par glifo×cor rasterizado quando um template o pedir, do SVG normalizado do §45 (24×24, stroke 2), a 48px @2x, cor assada, nome `<glifo>-<cor>@2x.png`, âncora no MANIFESTO. **Fonte dos SVGs: `seed-icones-preview.html` (Drive `validacao/`)** | 28 glifos × 4+ cores ≈ 112 arquivos, quase todos sem uso; sob demanda mantém o bucket auditável | Rasterizar o set inteiro (manutenção sem consumo) |
| **EC6** | Card neutro: tabela aninhada, borda 1px cinza-200 (decorativa, isenção §4.3), `border-radius:8px` com **degradação assumida no Outlook (canto reto)**, padding 24, fundo branco explícito | Agrupamento de resumo sem cor nova | VML para cantos de card (complexidade que só o botão justifica) |
| **EC7** | Bloco de contato comercial (ET/EN): nome, cargo, canal — texto puro com filete turquesa-600 à esquerda, **sem foto** | Remetente humano sem asset por pessoa; foto some no bloqueio | Foto do responsável · cartão gráfico (viola EM7) |
| **EC8** | Entregável: preview único `seed-email-componentes.html`, validado pela suíte e enviado à matriz real no gate | Padrão dos blocos da F3: um preview canônico por lote | Um arquivo por componente |

### Gate visual do EC (2026-08-08) — 2 achados, corrigidos no preview v0.2

| # | Cliente | Achado | Correção | Guarda |
|---|---|---|---|---|
| 6 | Gmail app Android (dark) | Valores da tabela quebrando linha no meio do número ("R$" separado de "3.104,55") | `white-space:nowrap` nas células mono de valor; a coluna Descrição absorve o aperto | revalidação |
| 7 | Outlook 2024 (motor Word) | Barra lateral da severidade rendia como **dois tocos com vão** — o Word não estica célula vazia para a altura da linha | **Supersede da anatomia EC2:** a barra deixa de ser célula de 4px e vira **`border-left` no próprio td de conteúdo**, que o Word renderiza de forma confiável | **GV5** |

Fora os achados, o gate aprovou: as 4 severidades **distinguíveis após a inversão forçada**
do Android (o cenário-alvo do EC2), card, lista e contato limpos nos dois clientes, e a
herança do template-base intacta.

### Promoção do EC

**2026-08-08 — Rafael aprovou** ("aprovo") a promoção a `estável` do sub-bloco EC:
decisões EC1–EC8 (com o supersede da anatomia EC2 — barra lateral por `border-left`,
nunca por célula), o preview canônico `seed-email-componentes.html` v0.2
(MD5 `bc1312630cbd8ce2b3a4d11a4c2d976d`) e a régua GV5. Placar do lote: 20 verificações
automatizadas, 3 clientes reais no gate (Gmail web · Gmail app Android dark forçado ·
Outlook 2024 clássico), 2 defeitos reais encontrados pelo gate humano, ambos corrigidos
e convertidos em guarda. Confirmação da v0.2 nos três clientes: barra contínua no motor
Word, valores íntegros na inversão do Android, regressão limpa no Gmail web.

**Nota cosmética registrada, sem bloqueio:** no Android, "4.812 kWh" quebra entre número
e unidade (ponto de quebra legítimo — o nowrap protege o número). Se algum template
exigir número+unidade indivisíveis, a troca do espaço por `&nbsp;` resolve caso a caso.

### Errata de suíte (registro de transparência)

Na primeira auditoria do preview real, o detector do EL3 acusou a tabela de dados como
tabela de layout sem role — **falso FAIL**: o `data-tabela-dados` estava presente como
**atributo booleano sem valor** (HTML legítimo) e o detector exigia `=`. Corrigido no
detector, com regressão confirmada (template-base 19 PASS · fixture violador seguindo
reprovado). Mesmo padrão das lições da F3: falso-positivo de suíte se corrige na suíte,
nunca afrouxando a regra.

---