Componentes
38. Stepper / Wizard
seed-componentes.md v1.43 · §38seção 40 de 9838-stepper-wizard-estavel-v0-41-st1-st6-bloco-5-5d.md · MD5 c5cbc62fTítulo completo no canon: Stepper / Wizard — estável (v0.41) · ST1–ST6 · Bloco 5/5D · lote autônomo 1 · resolve a fronteira do §20
Base (3 rodadas, 2026-08-06): R1 — Carbon Progress Indicator + evidência GOV.UK/NSW/DWP (pesquisa de campo: muitos usuários NÃO VEEM indicadores de progresso, e parte dos que veem acha ruído; "comece testando SEM; se precisar, 'Etapa X de Y' simples; nunca % enganosa") + eleken (padrões de mercado). R2 — Zuora/Michelin (linear × não-linear; ≥2 etapas não justifica; horizontal/vertical) + EUI Steps. R3 — SAP Fiori Wizard floorplan (3–8 etapas; walkthrough + página de RESUMO read-only antes da submissão; não usar com 2 etapas nem tarefa rotineira) +
aria-current="step"(ARIA 1.1) + heranças B2/B4 (validação, error summary).
| # | Decisão | Porquê | Descartado |
|---|---|---|---|
| ST1 | Papel — resolve a fronteira do §20: progress de etapas é NAVEGAÇÃO de processo, não progressbar (§20 mede tempo/quantidade; §38 mede posição em fluxo). Usar em fluxo de 3–8 etapas dependentes; 2 etapas = só botões; tarefa rotineira/familiar = não usar (só adiciona cliques) | Fiori literal (3–8; rotina não usa); a fronteira estava declarada no §20 desde o B3 | Stepper de 2 etapas; stepper como progressbar |
| ST2 | RÉGUA DUPLA por contexto (o quase-ponto-de-decisão do lote, precedente B3): ERP/wizard interno = indicador completo (usuário recorrente, tarefas longas — Fiori); formulário público de conversão = começar SEM indicador; se o teste pedir, texto "Etapa X de Y — rótulo", nunca o gráfico completo | Conflito real de evidência: DWP/GOV.UK (indicador ignorado/ruído no público) × Fiori (wizard consagrado no ERP) — os dois têm razão nos seus contextos | Um padrão único para os dois mundos (contraria uma das duas evidências) |
| ST3 | Anatomia: ol (ordem é semântica); etapa = marcador 28px + rótulo textual SEMPRE (nunca só número); estados: concluída (✓, fundo action-primary, CLICÁVEL — voltar livre) · corrente (aria-current="step", anel + peso 700) · futura (número, NÃO-interativa — é <li> texto, não botão desabilitado: sem beco do TB8) · conclusão anunciada no nome (" — concluída" oculto visual) |
aria-current="step" (ARIA); Fiori (voltar livre); rótulo sempre (eleken: sem rótulo o usuário não sabe o que vem); futura como texto evita o disabled mudo | Futuras clicáveis (linear é linear — não-linear é outra régua, fronteira); só números |
| ST4 | Comportamento: avançar VALIDA a etapa corrente (herda B4: erro bloqueia com mensagem/summary); voltar preserva os dados; última etapa = Revisão read-only que termina em AÇÃO TERMINAL nomeada ("Concluir/Enviar") — nunca um Avançar inerte (errata do gate visual); concluída a submissão, todas as etapas exibem ✓ | Fiori (summary page é parte do floorplan); B4 herdado | Avançar sem validar; perder dados no voltar |
| ST5 | Mobile: horizontal vira vertical <640px (rótulos íntegros, conexão vertical); alternativa densa = a variante texto do ST2 | Carbon/Zuora (vertical oficial); rótulo nunca some | Horizontal espremido com rótulo truncado |
| ST6 | Fronteiras: wizard COMPLETO multi-página (rotas, persistência de rascunho, branching) = pattern F6/produto — aqui vive o INDICADOR + a régua de comportamento; stepper numérico de input = §5 (nome colide, componente não) | O F6 já lista "formulários longos multi-etapa" | Especificar o floorplan inteiro aqui |
Tokens: concluída = par botão primário §1 (4.60 ✓); corrente anel action-primary + texto text-primary; futura text-secondary (4.74+); conexão border-subtle decorativa. Nenhum par novo. Os 7 testes: 1 herdados ✓ · 2 estados por ✓+anel+peso, nunca só cor · 3 grayscale ok · 4 stepper × breadcrumb a 1s (processo × hierarquia) · 5 uma corrente por vez · 6 posição visível · 7 360px vertical com alvos 44 nas concluídas. (Suite 5D: ST-01–07 ✓; vertical renderizado conferido na render R8 ✓.)
Também cita o §38: tela-onboarding.