BaseSummaryList

Lista de rótulo e valor para a coluna lateral: o resumo do contrato, os saldos da medição. É uma lista de definições (<dl>), então o leitor de tela anuncia cada par como termo e descrição.

Contrato

CF018/2026

Valor inicial

R$ 8.420.000,00

Vigência

12 meses

Limite de aditivo (50%)

R$ 4.210.000,00

Uso

• Use na coluna lateral de cadastros e detalhes, para o que a pessoa precisa conferir sem sair da tela.
• O valor chega formatado: R$ 8.420.000,00, 12 meses, 71% de 84% previsto. A lista não formata números.
• Formate dinheiro com Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }). Ele põe um espaço não separável depois de R$, então o símbolo nunca fica numa linha e o número na outra. Ao escrever o valor à mão, use \u00A0 no lugar do espaço.
• Os valores usam algarismos tabulares. No layout em linha, onde ficam alinhados à direita, os valores de dinheiro se alinham pelas casas.
• Quando rótulo e valor não cabem numa linha (coluna estreita, zoom alto), o valor passa inteiro para baixo do rótulo e continua à direita. Só um valor sem espaços mais largo que a coluna quebra dentro dele.
• Marque com total a linha que fecha a conta (saldo, total). Uma por lista.
• Valor vazio ou só com espaços aparece como travessão e é lido como "Não informado".
• Lista sem itens não renderiza nada, nem quando o slot padrão não produz nenhuma linha. Mostre o estado vazio da seção no lugar dela.
• Barra de progresso ou trilha de execução fica abaixo da lista, fora do <dl>, e não dentro de uma linha.
• Para muitas linhas comparáveis entre si, use tabela, não esta lista.

Total

Acumulado até a 28

R$ 10.140.212,08

Esta medição

R$ 412.903,55

Saldo do contrato

R$ 4.309.194,77

Empilhado

Use layout="stacked" em colunas estreitas ou com valores longos, como número de processo.

Gestor

Rui Antunes

Fiscal

—Não informado

Processo

7000123-45.2026.8.08.0024

Conteúdo próprio

Os slots label e value trocam o rótulo e o valor de cada item e recebem item e index; o value recebe também hasValue. Use tj-summary-person para avatar e nome e tj-summary-pending para uma pendência. O texto diz a situação; o ícone e a cor só reforçam.

O slot value substitui o travessão e o "Não informado": trate o valor vazio dentro dele com hasValue, que é falso para valor ausente, vazio ou só com espaços, a mesma regra da lista.

Gestor

RA Rui Antunes

Fiscal

Não designado

Para escrever linhas inteiras, use o slot padrão com <div class="tj-summary-row">, um <dt> e um <dd>. Elas entram depois dos itens.

Estilo

Propriedade	Token
Rótulo	--tj-text-helper, --tj-text-md (--tj-text-sm no empilhado), regular
Valor	--tj-text-primary, --tj-text-md, semibold, algarismos tabulares; à direita no layout em linha
Valor do total	--tj-text-xl, bold
Divisória do total	1 px --tj-border-subtle-01, espaço acima --tj-space-4
Espaço entre linhas	--tj-space-4
Espaço entre rótulo e valor	--tj-space-4 (em linha), --tj-space-half (empilhado ou quando o valor desce)
tj-summary-person	avatar e nome lado a lado, espaço --tj-space-2
tj-summary-pending	ícone e texto, espaço --tj-space-1, --tj-support-error-text, semibold

Código

<BaseSummaryList
  :items="[
    { label: 'Valor inicial', value: 'R$\u00A08.420.000,00' },
    { label: 'Saldo do contrato', value: 'R$\u00A04.309.194,77', total: true },
  ]"
/>

Propriedade	Tipo	Padrão
items	SummaryItem[]	[]
layout	'inline' | 'stacked'	'inline'

SummaryItem

Campo	Tipo	Descrição
label	string	Rótulo (obrigatório)
value	string	Valor já formatado; vazio ou só espaços mostra "—"
total	boolean	Linha de fechamento, com divisória e valor maior

Slot	Props	Descrição
label	{ item, index }	Troca o rótulo de cada item
value	{ item, index, hasValue }	Troca o valor de cada item; hasValue diz se o valor está preenchido
default	—	Linhas próprias (div.tj-summary-row com dt e dd) depois dos itens

Valor próprio no slot value e linha própria no slot padrão:

<BaseSummaryList :items="[{ label: 'Gestor', value: 'Rui Antunes' }, { label: 'Fiscal' }]">
  <template #value="{ item, hasValue }">
    <span v-if="hasValue" class="tj-summary-person">
      <BaseAvatar :name="item.value" size="sm" decorative />
      {{ item.value }}
    </span>
    <span v-else class="tj-summary-pending">
      <i class="bi bi-exclamation-circle" aria-hidden="true"></i>
      Não designado
    </span>
  </template>
  <div class="tj-summary-row">
    <dt>Empenho</dt>
    <dd>86% usado</dd>
  </div>
</BaseSummaryList>

Os tipos SummaryItem e SummaryLayout saem do pacote: import type { SummaryItem } from '@lab-inovacao/design-system'.

A lista não tem eventos nem estados interativos: é só leitura.

Acessibilidade

• Marcação de lista de definições: <dl> com pares <dt>/<dd> agrupados em <div>, como o HTML permite. O leitor de tela anuncia termo e descrição.
• A lista não recebe foco. Link ou botão colocado no slot entra na ordem de tabulação normal.
• O travessão do valor vazio fica escondido do leitor de tela, que lê "Não informado".
• A linha de total se distingue pela divisória e pelo tamanho, não só pela cor.
• No slot, ícones decorativos levam aria-hidden="true" e o texto carrega o sentido.
• Avatar ao lado do nome escrito usa decorative, para o nome não ser lido duas vezes.
• Em coluna estreita ou zoom de 400%, o valor passa inteiro para baixo do rótulo; só um valor sem espaços mais largo que a coluna quebra dentro dele, para não criar rolagem horizontal (WCAG 1.4.10).
• Dê um título à seção que contém a lista (por exemplo, o title do BaseCard).
• Testado com axe em linha, empilhado, empilhado com total e valor vazio, total em linha com valor vazio, com valor ausente e vazio, e com os slots de rótulo, de pessoa, de pendência e padrão (sozinho e depois dos itens).