BaseStatusLight

Semáforo com legenda: mostra o nível de um indicador (em dia, atenção, crítico) com um sinal colorido e um texto ao lado. Serve para prazos, garantias e metas.

Em diaAtençãoCríticoSem informação

Uso

• Use o semáforo para um nível dentro de uma escala: prazo em dia, perto de vencer, vencido. Para a situação de um item (rascunho, aprovada, paralisada), use o BaseBadge.
• O texto diz o nível com as palavras da tela: "Até 10 dias", "Mais de 30 dias". Sem label, aparece o texto padrão do nível.
• Se a legenda não diz o nível (por exemplo, "Garantia"), o componente põe o texto padrão do nível antes dela, só para leitor de tela: "Atenção: Garantia". Mesmo assim, prefira uma legenda que diga o nível a quem enxerga.
• Um status nulo ou desconhecido, vindo dos dados, aparece como none. Uma legenda vazia ou só com espaços cai no texto padrão.
• Cada nível tem cor e forma próprias: círculo para em dia, triângulo para atenção, losango para crítico e anel vazio para sem informação. Assim ninguém depende só da cor.
• Use os níveis sempre com o mesmo significado no sistema inteiro.
• O semáforo tem três níveis e mais o none. Legendas de mapa ou de gráfico com cores por categoria ficam fora dele.
• Em aberto: o protótipo mostra uma quarta faixa de prazo ("11 a 30 dias"), a confirmar com a planilha de alertas da Secretaria. Até lá, a escala tem três níveis.

Nível	Quando	Texto padrão
ok	Dentro do prazo ou da meta	Em dia
attention	Perto do limite, pede acompanhamento	Atenção
critical	Fora do prazo ou da meta, pede ação	Crítico
none	Sem dado para avaliar	Sem informação

Legenda de prazos

Em diaAtenção: Até 10 diasCrítico: Mais de 30 dias

Com dica

A dica traz um detalhe que não cabe na legenda. Ela aparece ao passar o mouse ou ao chegar com o Tab, e some com Esc.

• Cada semáforo com dica vira uma parada do Tab. Em tabelas com muitas linhas, prefira a dica no cabeçalho ou na legenda, não em cada semáforo, para não encher a ordem do Tab.
• A dica abre acima do semáforo e não muda de lado. Não coloque o semáforo com dica na borda de cima de um contêiner com overflow: hidden, porque a dica fica cortada.

A garantia contratual da obra vence em 27/10.Medição de setembro atrasada há 42 dias.

Tamanhos

Em diaEm dia

Estilo

Propriedade	Token
Sinal ok	--tj-support-success (círculo)
Sinal attention	--tj-support-warning (triângulo)
Sinal critical	--tj-support-error (losango)
Sinal none	--tj-border-strong-01 (anel vazio)
Texto	--tj-text-secondary, --tj-text-sm (md) ou --tj-text-xs (sm)
Espaço entre sinal e texto	--tj-space-2 (md), --tj-space-1 (sm)
Tamanho do sinal	Círculo e anel 10 px (md) e 8 px (sm); losango 12 px (md) e 10 px (sm); triângulo 12×11 px (md) e 10×9 px (sm), para o mesmo peso visual
Halo	Só no círculo, como no protótipo; o recorte do triângulo e do losango corta a sombra
Fundo da dica	--tj-background-inverse com texto --tj-text-inverse
Foco	--tj-ring (contorno Highlight em alto contraste)

Código

<BaseStatusLight status="critical" label="Mais de 30 dias" />
<BaseStatusLight status="attention" label="Garantia vence em 5 dias" tooltip="A garantia contratual da obra vence em 27/10." />

Propriedade	Tipo	Padrão	Descrição
status	'ok' | 'attention' | 'critical' | 'none'	'none'	Nível do semáforo; valor nulo ou desconhecido vira 'none'
size	'sm' | 'md'	'md'	Tamanho do sinal e do texto
label	string	texto do nível	Legenda visível; vazia ou só com espaços cai no texto do nível
tooltip	string	—	Detalhe mostrado no mouse e no foco do teclado

Slot padrão: substitui o label, para legendas com formatação. Com o slot, o leitor de tela ouve o nível antes da legenda.

Eventos: nenhum. O tipo StatusLightStatus é exportado junto com o componente.

Acessibilidade

• A legenda é texto comum. O sinal colorido é decorativo e fica fora da leitura; quem diz o nível é o texto.
• Quando a legenda é diferente do texto padrão do nível (com label ou slot), um texto escondido da tela, só para leitor de tela, diz o nível antes dela: "Atenção: Garantia vence em 5 dias".
• Como o sinal é decorativo e o texto carrega o nível, o amarelo de --tj-support-warning não precisa do contraste de 3:1 de um elemento gráfico (WCAG 1.4.11).
• A cor nunca está sozinha: há o texto e uma forma diferente para cada nível.
• Com tooltip, o semáforo vira um <button type="button"> sem ação, com a aparência do semáforo comum (como a dica de definição do Carbon). Ele entra na ordem do Tab e a dica, ao lado do botão e fora dele, vira a descrição (aria-describedby, role="tooltip"). Assim o leitor de tela anuncia um botão com nome e lê a dica uma vez só. A dica não recebe foco.
• A dica aparece no mouse e no foco e continua aberta enquanto um dos dois durar: sair com o mouse não a fecha se o foco ainda está no semáforo, e tirar o foco não a fecha se o mouse ainda está sobre ele ou sobre a dica (WCAG 1.4.13).
• Esc fecha a dica em qualquer ponto da página, mesmo aberta pelo mouse, sem tirar o foco. Esse primeiro Esc fica só com a dica e não chega a um diálogo ou gaveta em volta; o Esc seguinte fecha o diálogo. A dica volta a abrir depois que o mouse e o foco saem e voltam.
• No modo de alto contraste do Windows, os sinais mantêm a forma na cor do texto, o anel vazio continua visível e a dica ganha borda.
• O foco aparece com o anel --tj-ring. A animação da dica é desligada com prefers-reduced-motion.
• Se o nível mudar enquanto a pessoa está na tela, avise com uma região aria-live na tela, não no semáforo.
• Testado com axe em todos os níveis e tamanhos, com a dica fechada, aberta pelo foco e aberta pelo mouse, e com label e slot. Os testes também cobrem mouse e foco juntos, o Esc dentro de um contêiner e a remoção do ouvinte de teclado ao fechar e ao desmontar.