MetaLine

A MetaLine mostra o contexto de uma tela em uma linha curta de pares rótulo e valor: o período de uma métrica, quando os dados foram atualizados, a versão das definições. Ela fica sob os filtros ou o título e responde "de que dados estou olhando?". A altura de duas linhas é reservada, então a página não pula quando uma nota chega depois.

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

Padrão

items é uma lista de { label, value }. Rótulo em cinza, valor em peso médio.

Com nota

note abre uma segunda linha, de largura inteira, para um aviso curto sobre os dados.

Valor ausente

Quando um valor ainda não existe, passe um EmptyValue com o motivo em vez de um traço solto. O value aceita qualquer nó React.

Altura reservada

Com e sem nota, a linha ocupa a mesma altura. Reserve o espaço desde o início para a tela não deslocar o que vem abaixo.

Anatomia

MetaLine
├── <dl>        pares dt/dd (display: contents)
│   └── item    rótulo (dt) + valor (dd)
└── <p> nota    opcional, fora do <dl>

A nota fica fora do <dl> de propósito: só pares dt/dd vivem dentro da lista de definição, o que mantém a semântica válida.

Propriedades

Animações

A MetaLine não anima. Os valores trocam de texto sem transição. Não há movimento a reduzir com prefers-reduced-motion.

Acessibilidade

• Os pares são uma lista de definição (dl, dt, dd), lida pelo leitor de tela como "Período: 14/09 a 13/10".
• A nota fica fora da lista para não quebrar a estrutura exigida pelo axe (definition-list).
• O rótulo usa o token muted e o valor o de texto; a hierarquia não depende só de cor, também do peso.
• Valores dinâmicos que mudam (atualizado, período) podem ser anunciados por uma região aria-live na tela, se isso importar.

Boas práticas

• Use a nota para uma ressalva sobre os dados, não para instruções.
• Use EmptyValue para o que não existe, nunca um texto vazio.
• Para muitos pares em uma ficha completa, use DescriptionList.

Relacionados

• EmptyValue para valores ausentes dentro de um par.
• DescriptionList fichas com muitos pares.
• PageHeader o cabeçalho sob o qual a linha costuma ficar.
• FilterField a barra de filtros que a antecede.