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 Status pill: soft background, strong text. TonsStatus é fundo suave com texto forte. Use o tom pelo significado, não pela cor. Rascunho Novo Pago Pendente Atrasado Em análise <ab-cluster> <ab-badge>Rascunho</ab-badge> <ab-badge tone="accent">Novo</ab-badge> <ab-badge tone="ok" icon="check">Pago</ab-badge> <ab-badge tone="warn">Pendente</ab-badge> <ab-badge tone="danger">Atrasado</ab-badge> <ab-badge tone="info">Em análise</ab-badge> </ab-cluster> Tagsab-tag é o rótulo retangular (categorias, palavras-chave). Para status use ab-badge. Varejo Premium Adimplente Revisar cadastro Bloqueado São Paulo <ab-cluster> <ab-tag>Varejo</ab-tag> <ab-tag tone="accent" icon="star">Premium</ab-tag> <ab-tag tone="ok">Adimplente</ab-tag> <ab-tag tone="warn">Revisar cadastro</ab-tag> <ab-tag tone="danger">Bloqueado</ab-tag> <ab-tag tone="info" icon="map-pin">São Paulo</ab-tag> </ab-cluster> Tags removíveisclosable mostra o × que dispara ab-close e remove a tag com animação. Chame preventDefault() para mantê-la (ex.: confirmar antes). fornecedor nacional prioritário obrigatória <ab-cluster id="tags-removiveis"> <ab-tag closable>fornecedor</ab-tag> <ab-tag closable>nacional</ab-tag> <ab-tag closable tone="accent">prioritário</ab-tag> <ab-tag closable tone="warn" id="tag-protegida">obrigatória</ab-tag> </ab-cluster> <script type="module"> document.querySelector("#tag-protegida").addEventListener("ab-close", (e) => { e.preventDefault(); abToast("Esta tag não pode ser removida."); }); </script> Tags selecionáveischeckable vira um chip de alternância (aria-pressed) que dispara ab-change { checked }. Bom para filtros rápidos. Abertas Pagas Atrasadas Canceladas <ab-cluster id="tags-filtro"> <ab-tag checkable checked>Abertas</ab-tag> <ab-tag checkable>Pagas</ab-tag> <ab-tag checkable>Atrasadas</ab-tag> <ab-tag checkable>Canceladas</ab-tag> </ab-cluster> <script type="module"> document.querySelector("#tags-filtro").addEventListener("ab-change", (e) => { abToast(`${e.target.textContent.trim()}: ${e.detail.checked ? "incluído" : "removido"} do filtro`); }); </script> APIAtributos, propriedades, métodos, eventos e slots de cada tag. <ab-badge>Status pill: soft background, strong text. <ab-tag>Rectangular label/chip (categories, filters, keywords). Use ab-badge for statuses. closable adds an × that fires ab-close and removes the tag (call preventDefault() to keep it). checkable turns it into a toggle chip (aria-pressed) that fires ab-change.