---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 38
titulo: "Stepper / Wizard — `estável` (v0.41) · ST1–ST6 · Bloco 5/5D · lote autônomo 1 · resolve a fronteira do §20"
sequencia: 40 de 98
bytes_do_corpo: 4146
md5_do_corpo: c5cbc62fd9270f1ce2f148b4a11ff458
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-componentes.md
---
## 38. 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 ✓.)*

---