Ir ao conteúdo
SEED engenhariaDesign System

Componentes

84. TELA A20 — ONBOARDING / PRIMEIRO USO

estávelseed-componentes.md v1.43 · §84seção 90 de 9884-tela-a20-onboarding-primeiro-uso-estavel-2026.md · MD5 84d751b1

Tí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ável desde 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-02Z5 vivo: EEny presente em primeiro-uso e esvaziado, AUSENTE em sem-permissão (ícone neutro no lugar); toda ilustração é aria-hidden.
  • ON-03o 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-08os 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#

  1. 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.
  2. Peso: a tela carrega 242KB (dois rasters do mascote) — aceitável em gabarito interno; peça PÚBLICA com EEny usa asset otimizado (MK12).
  3. 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.


TelaSEED · Gabarito A20 — Onboarding / primeiro uso (v0.2 · estável 2026-08-23 · HV1 retroativo)abrir em página própria ↗
Esc