Componentes
84. TELA A20 — ONBOARDING / PRIMEIRO USO
seed-componentes.md v1.43 · §84seção 90 de 9884-tela-a20-onboarding-primeiro-uso-estavel-2026.md · MD5 84d751b1Título completo no canon: TELA A20 — ONBOARDING / PRIMEIRO USO · estável (2026-08-23, gate dele: "a imagem da onboarding está ok. aprovo") · tela 05-html-de-referencia/telas/tela-onboarding.html v0.1 · instrumento 06-validacao/suites/suite-onboarding.mjs (14 PASS · 0 FAIL · 1 [n/a] declarado)
O que é: a segunda tela da F7.6. O gabarito da F7.1 define o arquétipo como COMPOSIÇÃO, não peça nova: "herda o canvas do arquétipo que ainda não tem dado; o vazio de primeiro-uso (§25/Z1) ocupando o slot da peça ausente; ilustração colapsa antes do texto (<600px)". O hospedeiro é o PAINEL (§48) e o consumidor real declarado é o primeiro acesso ao ERP. A tela põe a taxonomia Z1 — já
estáveldesde o Bloco 3 — viva em composição, nos três estados que a leitura provou não serem intercambiáveis (CU §6.1: "um vazio de onboarding sem ilustração parece uma tela quebrada"; VdIA §3.13: o vazio ensina).
84.1 Contratos (medidos por comportamento na suíte)#
- ON-01 — a tela abre em PRIMEIRO USO, um estado visível por vez; o primeiro-uso é educativo + CTA primário de criação (Z1).
- ON-02 — Z5 vivo: EEny presente em primeiro-uso e esvaziado,
AUSENTE em sem-permissão (ícone neutro no lugar); toda ilustração é
aria-hidden. - ON-03 — o vazio ENSINA: o principal diz o critério de preenchimento ("tudo o que a equipe cadastrar aparece neste painel…" — A7 do VdIA / PN21-16); os slots menores usam vazio TEXTUAL seco (tratamento B da leitura) dizendo O QUE os preenche, sem CTA — uma âncora por página.
- ON-04 — os três estados têm título, texto e ação PRÓPRIOS (Z1); sem-permissão esconde os slots e diz o CAMINHO de desbloqueio (quem/onde).
- ON-05 — a ilustração colapsa ANTES do texto <600px (§25.4-7) —
[n/a] no jsdom (container query é render), provado em navegador real a
390px:
display:none, app empilha, zero overflow. - ON-06 — vazio é estático: NENHUMA live region própria (Z6); só o
anúncio global
.vh. - ON-07 — hero herda a saudação ciente da hora do painel (PN21c).
- ON-08 — os EEny são os ASSETS OFICIAIS byte-idênticos
(
03-assets/mascote-eeny/pose-01 no primeiro-uso, pose-04 no esvaziado, injetados por script; a suíte confere o raster contra o arquivo). Esclarecimento de termo, do gate: *"byte-idêntico" é fidelidade EMBED↔ASSET, nunca igualdade entre poses — as 8 poses têm 8 MD5 distintos, medidos em 2026-08-23 a pedido dele. - ON-09 — o h1 do hero NÃO carrega número: não existe KPI antes do primeiro dado (PN21-06b por vacuidade).
84.2 Fatos de produção que viram regra de consumo#
- Escolher pose de mascote exige OLHAR o pose: o pose-05 (o mais leve) é o EEny DE COSTAS e parecia decapitado na tela; e o desenho ocupa só ~35%×49% do canvas 1773². Régua: medir o bounding box por pixel antes de embutir e, quando o canvas tem margem gorda, usar crop de APRESENTAÇÃO no viewBox do embed — o desenho fica intocado.
- Peso: a tela carrega 242KB (dois rasters do mascote) — aceitável em gabarito interno; peça PÚBLICA com EEny usa asset otimizado (MK12).
- A 1ª versão da régua ON-03a reprovou a tela CORRETA: o texto quebra linha no fonte e o regex exigia espaço literal — whitespace ≠ espaço; régua corrigida com o defeito anotado nela.
84.3 Fronteiras (do consolidado aprovado)#
Tour guiado/coach marks — FORA (nenhuma fonte tem leitura; se o produto
pedir, nasce com leitura própria) · persistência do "já vi"/dispensa =
produto (CN4) · wizard multi-página = §38/produto · o deep-link
#estado=…&tema=… é instrumento de avaliação, não spec.