BaseStatusFlow

Mostra em que etapa um documento está: rascunho, conferência, aprovação, envio ao SEI. Cada etapa tem nome, situação e, se quiser, a data em que aconteceu.

1. Rascunho, etapa concluída
2. Lançada, etapa concluída
3. Em conferência, etapa atual
4. Aprovada, etapa pendente
5. Assinada, etapa pendente
6. Enviada ao SEI, etapa pendente

Uso

• Use para mostrar onde um documento está num fluxo fixo: medição, aditivo, empenho. Para guiar alguém por um cadastro longo, uma etapa por vez, use um assistente de etapas.
• O nome da etapa é a situação do documento com as palavras da tela, como "Em conferência" e "Enviada ao SEI". O mesmo texto aparece no BaseBadge da lista.
• O label nomeia a lista para o leitor de tela: "Situação da medição", "Andamento do aditivo".
• Só uma etapa é a atual. Se os dados trouxerem duas, vale a primeira; a outra aparece como pendente, para a tela e o leitor de tela dizerem o mesmo.
• Uma situação nula ou desconhecida, vinda dos dados, aparece como pendente. Uma data nula ou vazia não aparece.
• Cada etapa tem um id único. Em desenvolvimento, id repetido ou label vazio geram um aviso no console.
• Documento devolvido para correção aparece com error: não há uma situação própria de "devolvida".
• O fluxo só mostra; não é navegação. Para abrir o histórico de uma etapa, ponha um link ao lado.

Situações

1. Concluída, etapa concluída
2. Atual, etapa atual
3. Com erro, etapa com erro
4. Pendente, etapa pendente

Situação	Quando	Sinal	O leitor de tela ouve
done	A etapa já aconteceu	Círculo cheio com visto	"Rascunho, etapa concluída"
current	O documento está nesta etapa	Anel azul com ponto e halo; nome em negrito	"Em conferência, etapa atual"
error	A etapa falhou ou foi devolvida e pede ação	Círculo com exclamação; nome em vermelho	"Envio ao SEI, etapa com erro"
todo	Ainda não chegou	Anel vazio	"Aprovada, etapa pendente"

Com data, o leitor de tela ouve a data depois de uma vírgula: "Rascunho, etapa concluída, 14/10/2026".

A cor nunca vem sozinha: cada situação tem um sinal de forma própria e um texto para o leitor de tela.

Com error, a etapa é onde o documento parou. Se nenhuma etapa for current, a primeira com error recebe aria-current="step". Diga na data ou num aviso ao lado o que houve e o que fazer: "falhou em 22/10/2026 às 16:42".

1. Rascunho, etapa concluída, 14/10/2026
2. Aprovada, etapa concluída, 22/10/2026
3. Envio ao SEI, etapa com erro, falhou em 22/10/2026 às 16:42

Com datas

A data vai embaixo do nome, já formatada: "20/10/2026", "desde 21/10/2026". Data vazia não aparece.

1. Rascunho, etapa concluída, 14/10/2026
2. Lançada, etapa concluída, 20/10/2026
3. Em conferência, etapa atual, desde 21/10/2026
4. Aprovada, etapa pendente
5. Enviada ao SEI, etapa pendente

Pouco espaço

Quando falta largura, o horizontal passa as etapas para a linha de baixo em vez de criar rolagem, e um nome longo quebra dentro da própria etapa. A linha de ligação da primeira etapa de cada linha fica escondida, para nenhuma linha começar com um traço solto. Conferido com 320 e 390 px de largura.

1. Rascunho, etapa concluída
2. Lançada, etapa concluída
3. Em conferência, etapa atual
4. Aprovada, etapa pendente
5. Assinada, etapa pendente
6. Enviada ao SEI, etapa pendente

1. Rascunho, etapa concluída, 14/10/2026
2. Aguardando assinatura do ordenador de despesa, etapa atual, desde 21/10/2026
3. Enviada ao SEI, etapa pendente

Vertical

Use em painel lateral, no celular ou quando as datas e os nomes são longos. Com seis etapas ou mais numa tela estreita, o horizontal ocupa três linhas; prefira o vertical.

1. Rascunho, etapa concluída, 14/10/2026
2. Lançada, etapa concluída, 20/10/2026
3. Em conferência, etapa atual, desde 21/10/2026
4. Aprovada, etapa pendente
5. Enviada ao SEI, etapa pendente

Tamanhos

1. Rascunho, etapa concluída
2. Lançada, etapa concluída
3. Em conferência, etapa atual
4. Aprovada, etapa pendente

1. Rascunho, etapa concluída
2. Lançada, etapa concluída
3. Em conferência, etapa atual
4. Aprovada, etapa pendente

O médio tem círculo de 24 px e texto de 13 px; o pequeno, círculo de 20 px e texto de 12 px, para tabelas e cabeçalhos de cartão.

Estilo

Propriedade	Token
Círculo pendente	Fundo --tj-layer-01, borda 1,5 px --tj-border-strong-01 (3,28:1 no claro, 4,40:1 no escuro)
Círculo concluído	Fundo e borda --tj-support-success-text; visto em --tj-text-inverse (5,43:1 no claro, 10,17:1 no escuro)
Círculo atual	Borda e ponto --tj-border-interactive (4,86:1 no claro, 5,07:1 no escuro); halo --tj-layer-selected-01
Círculo com erro	Fundo --tj-support-error-subtle, borda e exclamação --tj-support-error-text (5,77:1 no claro, 8,08:1 no escuro)
Nome	--tj-text-sm, --tj-weight-medium; pendente --tj-text-helper, concluída --tj-text-secondary, atual --tj-text-primary com --tj-weight-semibold, erro --tj-support-error-text
Data	--tj-text-xs, --tj-text-helper, números tabulares
Ligação entre etapas	2 px, --tj-layer-accent-02; depois de etapa concluída, --tj-support-success-text. Decorativa: a ordem da lista e os sinais já dizem tudo
Espaço	--tj-space-2 entre círculo e nome; no vertical --tj-space-3, e --tj-space-5 entre etapas (--tj-space-4 no sm)
Tamanho	Círculo de 24 px (md) ou 20 px (sm); ligação horizontal de 32 px ou 24 px
Alto contraste	Ligações em CanvasText; anel e ponto da etapa atual em Highlight

Duas trocas em relação ao protótipo v3: a ligação depois de etapa concluída usa --tj-support-success-text, como o círculo concluído, e não --tj-support-success, porque só o primeiro ganha um tom próprio no tema escuro; o ponto da etapa atual usa --tj-border-interactive, e não --tj-interactive, pelo mesmo motivo (5,07:1 no escuro). A situação is-returned (amarela) do protótipo não existe: documento devolvido usa error.

Os contrastes são das bordas e sinais contra --tj-layer-01, calculados a partir dos tokens nos dois temas (WCAG 1.4.11). No tema escuro, o visto branco sobre o verde claro ficaria abaixo de 2:1; por isso o visto usa --tj-text-inverse, que escurece no tema escuro.

Código

<script setup lang="ts">
import { BaseStatusFlow, type StatusFlowStep } from '@lab-inovacao/design-system'

const etapas: StatusFlowStep[] = [
  { id: 'rascunho', label: 'Rascunho', status: 'done', date: '14/10/2026' },
  { id: 'conferencia', label: 'Em conferência', status: 'current' },
  { id: 'aprovada', label: 'Aprovada', status: 'todo' },
  { id: 'sei', label: 'Enviada ao SEI', status: 'todo' },
]
</script>

<template>
  <BaseStatusFlow label="Situação da medição" :steps="etapas" />
</template>

Propriedade	Tipo	Padrão	Descrição
steps	StatusFlowStep[]	—	Etapas em ordem; obrigatório. Sem etapas, nada aparece
label	string	—	Nome da lista para o leitor de tela; obrigatório. Espaços nas pontas são removidos
orientation	'horizontal' | 'vertical'	'horizontal'	Em linha, que passa para a linha de baixo quando falta espaço, ou uma etapa por linha
size	'sm' | 'md'	'md'	Tamanho do círculo e do texto

StatusFlowStep:

Campo	Tipo	Descrição
id	string	Chave estável e única da etapa
label	string	Nome da etapa
status	'done' | 'current' | 'todo' | 'error'	Situação; valor desconhecido vira todo
date	string	Opcional. Data já formatada, mostrada embaixo do nome; nula ou vazia não aparece

Sem eventos.

Acessibilidade

• É uma lista ordenada (<ol>) com o nome do label em aria-label: o leitor de tela diz quantas etapas há e em qual posição cada uma está. A lista leva também role="list", porque o Safari tira a semântica de listas sem marcadores.
• A etapa atual tem aria-current="step", e só ela. Sem etapa atual, a primeira com erro recebe o atributo, porque é onde o documento parou.
• Cada situação tem texto escondido depois do nome ("etapa concluída", "etapa atual", "etapa pendente", "etapa com erro"). A palavra "etapa" faz a concordância valer para qualquer nome, como "Rascunho" ou "Aprovada". A atual também tem texto porque o TalkBack e algumas combinações de VoiceOver e navegador não anunciam aria-current num item de lista sem foco; no NVDA e no JAWS a etapa atual é anunciada duas vezes, pelo texto e pelo aria-current, o que é aceito. O círculo é decorativo e fica escondido dos leitores de tela.
• A cor nunca é o único sinal: visto, ponto, anel vazio e exclamação diferem pela forma, e a etapa atual tem o nome em negrito.
• O fluxo não recebe foco nem responde a teclado, porque não é interativo. O horizontal passa para a linha de baixo em vez de rolar, e nomes longos quebram dentro da etapa, para ninguém precisar de rolagem que o teclado não alcança (WCAG 1.4.10).
• Não há animação.
• No alto contraste do Windows, ligações e etapa atual usam as cores do sistema.
• label vazio deixa a lista sem nome; em desenvolvimento, o componente avisa no console.
• Testado com axe em todas as situações, com e sem datas, nos dois sentidos e nos dois tamanhos. O contraste foi calculado a partir dos tokens nos dois temas (veja Estilo), porque o jsdom não calcula cores.