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 Groups filter controls (ab-input, ab-select, ab-date-range, or native inputs with name) and emits ONE event with all values. Barra de filtrosUm único evento ab-filter-change com todos os valores. Digitação tem debounce; selects e datas disparam na hora. PagoPendenteAtrasado — <ab-stack> <ab-filter-bar id="fb"> <ab-input name="q" type="search" label="Buscar" placeholder="Cliente ou nº"></ab-input> <ab-select name="status" label="Situação" placeholder="Todas"> <option value="pago">Pago</option><option value="pendente">Pendente</option><option value="atrasado">Atrasado</option> </ab-select> <ab-date-range name="periodo" label="Vencimento"></ab-date-range> </ab-filter-bar> <ab-card padding="sm"><code id="fb-out">—</code></ab-card> </ab-stack> <script type="module"> document.getElementById("fb").addEventListener("ab-filter-change", (e) => { document.getElementById("fb-out").textContent = JSON.stringify(e.detail.values); }); </script> APIAtributos, propriedades, métodos, eventos e slots de cada tag. <ab-filter-bar>Groups filter controls (ab-input, ab-select, ab-date-range, or native inputs with name) and emits ONE event with all values. Typing is debounced; selects/dates fire immediately.