8-b. Sub-bloco EC — componentes de e-mail
seed-email.md v0.13 · §08-bseção 12 de 1708-b-sub-bloco-ec-componentes-de-e-mail-estavel.md · MD5 fa38b44fTítulo completo no canon: 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.htmlv0.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 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.