Início Boas práticas Tema Idiomas e RTL App e cabeçalho Layout Tipografia Abas Menu e âncora Dropdown e popover Command e toggles Botão Campos Seleção e valores Combobox e menções Datas e calendário Árvore e cascata Transfer Upload Filtros Tabela Planilha KPI e estatística Badge e tag Listas e detalhes Gráficos Imagem e carrossel Ícones Diagramas Alertas e estados Progresso e passos Diálogo e toast Drawer e notificação Utilitários Overview Work queue Report Report com htmx Form / request Tabela administrativa Página de detalhe Formulário em diálogo Gráfico com dados do servidor Buscar… llms.txt Tema Tema Restaurar Retos (4 / 2)Padrão (8 / 6)Arredondados (16 / 10) ConfortávelCompacta ClaroEscuroAutomático Copiar prompt Copiar snippet Prompt: para as instruções de um agente. Snippet: direto no templates/base.html. v0.11.0 Key number with label, optional note and change indicator. Linha de KPIsNo máximo 4, só números que as pessoas acompanham. O valor é bruto: o type formata. <ab-grid cols="4" min="12rem"> <ab-kpi label="Recebido no mês" icon="wallet" value="184230.5" type="currency" delta="0.124" note="vs. mês anterior"></ab-kpi> <ab-kpi label="Em aberto" value="42" type="number" note="faturas"></ab-kpi> <ab-kpi label="Inadimplência" value="0.037" type="percent" delta="-0.008" invert-delta tone="warn"></ab-kpi> <ab-kpi label="Carregando" loading></ab-kpi> </ab-grid> Estatísticasab-statistic é o número com rótulo sem a moldura do KPI: para dentro de cards e cabeçalhos. O valor conta até o novo número quando muda. / 5 Atualizar valores <ab-card> <ab-grid cols="4" min="10rem"> <ab-statistic label="Clientes ativos" value="1284"></ab-statistic> <ab-statistic label="Ticket médio" value="342.9" type="currency"></ab-statistic> <ab-statistic label="Conversão" value="0.186" type="percent" tone="ok"></ab-statistic> <ab-statistic label="Avaliação" value="4.7" digits="1"><span slot="suffix">/ 5</span></ab-statistic> </ab-grid> <ab-cluster style="margin-top: var(--ab-space-4)"> <ab-button id="stat-atualizar" size="sm" icon="arrows-clockwise">Atualizar valores</ab-button> </ab-cluster> </ab-card> <script type="module"> document.querySelector("#stat-atualizar").addEventListener("click", (e) => { const card = e.target.closest("ab-card"); const [clientes, ticket] = card.querySelectorAll("ab-statistic"); clientes.value = 1200 + Math.round(Math.random() * 300); ticket.value = 300 + Math.random() * 80; }); </script> Contagem regressivacountdown recebe a data-alvo em ISO e mostra o tempo restante (HH:mm:ss, com dias quando passa de 24 h). Dispara ab-finish ao chegar a zero. <ab-card> <ab-grid cols="2" min="12rem"> <ab-statistic id="stat-fechamento" label="Fechamento do mês"><ab-icon slot="prefix" name="clock"></ab-icon></ab-statistic> <ab-statistic id="stat-oferta" label="Oferta termina em" tone="warn"></ab-statistic> </ab-grid> </ab-card> <script type="module"> const now = new Date(); const fim = new Date(now.getFullYear(), now.getMonth() + 1, 0, 18, 0, 0); document.querySelector("#stat-fechamento").countdown = fim.toISOString(); const oferta = document.querySelector("#stat-oferta"); oferta.countdown = new Date(Date.now() + 15000).toISOString(); oferta.addEventListener("ab-finish", () => abToast("A oferta terminou.")); </script> APIAtributos, propriedades, métodos, eventos e slots de cada tag. <ab-kpi>Key number with label, optional note and change indicator. It is a card: put it directly in an ab-grid, not inside an ab-card (use ab-statistic there). Data flow: set value (raw number or numeric string; type formats it) as often as needed; null shows "—". loading shows a skeleton. Load with abLoad(kpi, () => get_total()), or for several KPIs from one call abLoad([a, b], () => get_kpis(), { apply: (d, el) => (el.value = d[el.id]) }). <ab-statistic>A labeled number without the card chrome of ab-kpi (inside cards, headers, summaries). The value is formatted by type and counts up when it changes. With countdown set to an ISO datetime it shows the time left (HH:mm:ss, with days when longer) and fires ab-finish at zero.