DescriptionList

O DescriptionList mostra pares de rótulo e valor em um <dl> semântico: dados de um Pedido, resumo de uma Marca, números de Créditos. O rótulo é discreto e o valor ganha destaque. O catálogo do HeroUI não tem esse componente, então este é o único lugar onde o Admin monta um <dl>.

import { DescriptionList } from "@rastreio-x/ui";

Padrão

O stacked divide a linha em duas colunas (2fr para o rótulo, 3fr para o valor). Serve para detalhes e blocos de formulário.

Em linha

inline põe o rótulo à esquerda e o valor alinhado à direita, com divisor leve e números tabulares. É a variante dos resumos numéricos.

Valores ricos

O value aceita qualquer nó: selos, amostras de cor, links. Valores longos quebram dentro da coluna sem estourar a linha.

No Admin

Em Créditos, o resumo "Continuidade" vive dentro de um Widget, com a variante inline.

Anatomia

Cada item vira div > dt + dd, e os div agrupam o par para o axe aceitar a lista.

Propriedades

Além delas, o componente aceita as props de um <dl> (aria-label, data-testid, className).

Animações

Estático: sem transição nem animação. Se um valor mudar depois de uma ação, a troca é imediata.

Acessibilidade

• É um <dl> com dt e dd: leitores de tela anunciam o par rótulo e valor.
• Dê um nome à lista com aria-label quando ela não tiver um título próximo.
• O valor tem o contraste do texto de corpo; o rótulo usa muted (4,5:1 no tema padrão).
• Cor sozinha nunca carrega significado: ao mostrar uma amostra de cor, escreva também o nome.

Boas práticas

• Use stacked para detalhes e inline para resumos com números.
• Um valor ausente usa EmptyValue, não um traço solto.
• Não repita o título da página como rótulo.
• Para muitos campos editáveis, prefira um formulário; esta lista é só de leitura.

Relacionados

• Widget que hospeda resumos numéricos.
• Card para detalhes soltos.
• Chip para valores em forma de selo.