P4 · Padrões

Search Bar

Primitiva de busca para listas extensas (drops, lives, membros). Inclui pílulas de filtro multi-seleção. Resultados livescan com debounce 200ms.

Funcionalidades

Função	Comportamento
Busca livre	Input de texto, debounce 200ms.
Filtros (pills)	Múltipla seleção via checkbox.
Resultados inline	Lista com título, ID, tempo decorrido.
Limpar	Botão X dentro do input + botão 'Limpar tudo' para filtros.

Estrutura ARIA

<form role="search">
  <input role="searchbox" type="search"
    aria-label="Buscar drops" />
  <button aria-label="Limpar busca">×</button>
</form>
<div class="filters" role="group" aria-label="Filtrar por tipo">
  <button role="checkbox" aria-checked="true">Tutorial</button>
  <button role="checkbox" aria-checked="false">Análise</button>
</div>

Diretrizes

Botão de limpar visível somente quando há texto.
Pílulas de filtro com aria-checked que reflete o estado.
Resultados anunciados via aria-live='polite'.
Foco preservado no input após busca — não pula para resultados.
Mostrar contagem ('42 drops') antes da lista.