@govbr-ds/webcomponents 2.3.0 → 2.5.0

package/dist/types/components/radio-group/radio-group.d.ts

@@ -3,32 +3,32 @@ import { type FormValidationState } from '../../shared/utils/form';
 import { type FormValidationChangeDetail } from '../../shared/utils/validator';
 import type { RadioGroupOrientation, RadioGroupValidator } from './radio-group.types';
 /**
- * O componente `br-radio-group` é o contêiner semântico e orquestrador de opções `br-radio` no GovBR-DS, responsável por garantir a exclusividade mútua de seleção, a navegação contínua por teclado e a validação integrada do grupo.
+ * O `br-radio-group` agrupa opções de múltipla escolha onde apenas uma pode ser selecionada.
  *
- * ### Para que serve
+ * Adicione os elementos `br-radio` no slot padrão. Defina o rótulo do grupo em `label` e o valor selecionado em `value`.
  *
- * - **Coordenação de seleção mútua:** Garante que apenas um botão de rádio permaneça selecionado por vez entre todos os rádios filhos.
- * - **Navegação acessível por teclado WAI-ARIA:** Implementa o padrão de navegação com setas direcionais (cima/baixo/esquerda/direita) com foco cíclico dentro do grupo.
- * - **Agrupamento semântico:** Estrutura o grupo com a semântica de `radiogroup`, fornecendo rótulo acessível para tecnologias assistivas.
- * - **Associação com formulários:** Atua como controle integrado (`formAssociated`), emitindo o valor consolidado selecionado para o formulário pai.
+ * ```html
+ * <br-radio-group label="Turno de atendimento" name="turno">
+ *   <br-radio value="manha" label="Manhã"></br-radio>
+ *   <br-radio value="tarde" label="Tarde"></br-radio>
+ *   <br-radio value="noite" label="Noite"></br-radio>
+ * </br-radio-group>
+ * ```
  *
- * ### Quando utilizar
+ * Em formulários HTML, o grupo integra-se via `ElementInternals`, controlando validação nativa com `required`.
  *
- * - **Utilize quando:**
- *   - Apresentar um conjunto de 2 a 5 alternativas mutuamente exclusivas onde todas as opções devam ser comparadas lado a lado ou em lista vertical.
- * - **Evite e prefira outro componente quando:**
- *   - Houver muitas alternativas (mais de 5 a 7 opções): prefira `br-select`.
- *   - A seleção permitir múltiplas alternativas independentes: prefira `br-checkbox-group`.
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Entre 2 e 5 opções mutuamente exclusivas que devem permanecer visíveis.
  *
- * O `br-radio-group` é um orquestrador de seleção:
- * - `default`: Slot onde devem ser declarados os componentes filhos `br-radio`.
- * - `label`: Slot para personalização do rótulo ou enunciado da pergunta do grupo.
+ * ### Quando evitar
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/radio-group?tab=designer).
+ * - Mais de 6 opções: use `br-select` para economizar espaço de tela.
+ * - Seleção de múltiplas opções ao mesmo tempo: use `br-checkbox-group`.
+ * - Liga/desliga imediato: use `br-switch`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/radio-group?tab=designer).
  *
-
  * @category Formulários, Seleção
  * @see br-radio
  * @slot default - Radios pertencentes ao grupo.

package/dist/types/components/scrim/scrim.d.ts

@@ -1,29 +1,26 @@
 import { type EventEmitter } from '../../stencil-public-runtime';
 import type { ScrimContentLayout, ScrimDisplayMode, ScrimLegibilityAnchor, ScrimPositionContent, ScrimScrollStrategy, ScrimSpotlightShape, ScrimVariant } from './scrim.types';
 /**
- * O componente `br-scrim` é a camada de sobreposição visual (backdrop / máscara) do GovBR-DS, utilizada para escurecer temporariamente a interface e direcionar a atenção da pessoa usuária para um ponto de interesse ou diálogo.
+ * O `br-scrim` cria uma máscara visual escura sobre a tela ou sobre um elemento pai para focar a atenção do usuário.
  *
- * ### Para que serve
+ * Use os métodos `show()`, `hide()` ou a propriedade `active` para controlar a exibição. Coloque o conteúdo em destaque no slot padrão.
  *
- * - **Destaque visual exclusivo (Spotlight):** Cria um foco exclusivo sobre determinado elemento da página (como um tour guiado ou tutorial introdutório).
- * - **Bloqueio de interação com o fundo:** Impede cliques acidentais e rolagem na interface subjacente enquanto uma superfície flutuante estiver ativa.
- * - **Comportamento acessível de fechamento:** Suporta fechamento ao clicar na máscara ou ao pressionar a tecla Escape, com controle de foco previsível.
+ * ```html
+ * <br-scrim active>
+ *   <div class="destaque">Conteúdo em evidência</div>
+ * </br-scrim>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - For necessário criar máscaras de fundo personalizadas para fluxos de onboarding, tutoriais ou menus temporários imersivos.
- * - **Evite e prefira outro componente quando:**
- *   - Estiver implementando uma caixa de diálogo padrão com cabeçalho, corpo e rodapé (prefira `br-modal`, que já inclui seu próprio scrim interno).
+ * - Destaque visual pontual de um elemento (tutoriais guiados ou máscaras personalizadas).
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-scrim` atua como superfície de sobreposição:
- * - `default`: Slot para inserção do elemento que receberá o destaque em primeiro plano sobre a máscara.
+ * - Caixas de diálogo modais padrão: use `br-modal` (que já gerencia seu próprio scrim internamente).
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/scrim?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/scrim?tab=designer).
  *
-
  * @category Feedback, Sobreposições
  * @status stable
  * @slot default - Slot para o conteúdo principal a ser exibido sobre o fundo escurecido do scrim.

package/dist/types/components/select/select-input/select-input.d.ts

@@ -1,18 +1,11 @@
 import { type EventEmitter } from '../../../stencil-public-runtime';
 import type { BrDensity } from '../../global.types';
 import type { InputToggle } from '../../input/input.types';
+import type { SelectComboboxState } from '../select.types';
 /**
- * Subcomponente especializado de `br-select` responsável pelo campo de acionamento, entrada de texto e controle de expansão do popup.
+ * Campo de texto e acionamento interno do `br-select`.
  *
- * ### Papel na composição
- * - Exibe o rótulo (`label`), texto de espaço reservado (`placeholder`) e o resumo dos itens atualmente selecionados.
- * - Atua como campo de entrada textual para digitação de filtros e termos de busca local ou remota.
- * - Contém o botão de ação para abrir ou recolher a lista de opções (`br-select-list`), controlando a rotação do ícone indicador.
- *
- * ### Regra de uso e relacionamento
- * Na quase totalidade das aplicações, este componente é instanciado e gerenciado internamente pelo orquestrador `br-select`. Ele não fornece nem renderiza a coleção de opções: recebe do pai o valor exibido, o termo de busca e os estados de abertura e desabilitação. Não deve ser declarado manualmente na página, pois depende da coordenação do pai para foco, ARIA, eventos e sincronização com formulários. Use isoladamente apenas em composições arquiteturais altamente customizadas onde a aplicação assumir explicitamente toda a orquestração de foco e estado.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ * É gerenciado automaticamente pelo `br-select` para exibir o valor selecionado, receber termos de busca e abrir ou fechar a lista suspensa. Não é necessário utilizá-lo de forma avulsa.
  *
  * @category Formulários, Seleção
  * @status stable
@@ -23,6 +16,7 @@ import type { InputToggle } from '../../input/input.types';
  * @part icon - Ícone do campo.
  * @part action - Botão de ação.
  * @part action-button - Botão interno da ação.
+ * @part clear - Botão de limpar o texto digitado.
  */
 export declare class SelectInput {
     /**
@@ -96,11 +90,20 @@ export declare class SelectInput {
      */
     filterable: boolean;
     /**
-     * Exibe o ícone de busca dentro do campo.
+     * Exibe a lupa mesmo quando o campo não é filtrável.
+     * Quando filterable é true, a lupa é exibida automaticamente.
+     * Em campos com menos de 128px, a lupa é omitida para preservar valor e seta.
      *
      * @type {boolean | undefined}
      */
     showSearchIcon?: boolean;
+    /**
+     * Exibe o botão de limpar enquanto houver texto no campo editável.
+     * O `br-select` o ativa somente durante a busca, para limpar o termo digitado
+     * sem alterar a seleção.
+     * @default false
+     */
+    clearable: boolean;
     /**
      * Valor textual apresentado no input.
      *
@@ -140,6 +143,12 @@ export declare class SelectInput {
     private flipped;
     private inputElement?;
     componentDidRender(): void;
+    private comboboxState?;
+    private accessibleList?;
+    private accessibleStatus?;
+    private accessibleDescription?;
+    syncCombobox(state: SelectComboboxState): Promise<void>;
+    private applyComboboxState;
     /**
      * Atualiza o ícone para o estado visual de lista aberta.
      *
@@ -162,7 +171,6 @@ export declare class SelectInput {
     private handleFocus;
     private handleInput;
     private handleClick;
-    handleActionClick(): void;
     private getCssClassMap;
     private renderSearchIcon;
     private renderDropdownIcon;

package/dist/types/components/select/select-list/select-list.d.ts

@@ -1,32 +1,24 @@
 import type { BrDensity } from '../../global.types';
-import type { SelectOptionData } from '../select.types';
+import type { SelectOptionData, SelectSearchMode } from '../select.types';
 /**
- * Subcomponente de lista virtualizada de opções, projetado para renderizar o conjunto de escolhas do `br-select`.
+ * Painel suspenso com lista virtualizada do `br-select`.
  *
- * ### Papel na composição
- * - Atua como o painel suspenso (popup `listbox`) que exibe os itens `br-select-option`.
- * - Implementa virtualização de itens para oferecer alta performance mesmo em listas extensas com centenas ou milhares de opções.
- * - Mantém o posicionamento flutuante e controla a rolagem de visualização do item ativo em navegação por teclado.
- *
- * ### Regra de uso e relacionamento
- * Gerenciado exclusivamente pelo componente pai `br-select`, que injeta a coleção normalizada em `options`, controla o estado de exibição (aberto/fechado), a seleção múltipla e o índice ativo. A prop `options` desta lista é um contrato interno de composição e não substitui a API de opções do `br-select`. A lista cria internamente elementos `br-select-option` para a janela virtualizada, em vez de exibir diretamente os filhos declarados no slot do pai. Não utilize `br-select-list` como controle autônomo de formulário, pois ele não possui associação nativa com formulários (`formAssociated`) nem campo de acionamento próprio.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ * É gerenciado internamente pelo `br-select` para exibir as opções com alta performance, mesmo em listas grandes. Não é necessário utilizá-lo de forma avulsa.
  *
  * @category Formulários, Seleção
  * @status stable
  * @part list - Contêiner visual da lista virtualizada.
- * @slot loading - Indicador exibido enquanto resultados remotos são carregados.
+ * @slot loading - Indicador exibido enquanto resultados remotos são carregados. Padrão: spinner com o texto "Pesquisando…".
  * @part loading - Área do indicador de carregamento.
  * @part option-group - Cabeçalho visual de um grupo de opções.
  */
 export declare class SelectList {
     private static readonly SELECT_ALL_LABEL;
     private static readonly DESELECT_ALL_LABEL;
-    private static readonly SELECT_ALL_VALUE;
     el: HTMLBrSelectListElement;
     /**
-     * Define a densidade visual da lista, das opções e do indicador de carregamento.
+     * Define a densidade visual da lista, das opções regulares e do indicador de carregamento.
+     * A opção sintética de selecionar todos permanece com densidade `small`.
      * Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.
      *
      * @default 'medium'
@@ -51,6 +43,15 @@ export declare class SelectList {
      * @default ''
      */
     searchTerm: string;
+    /**
+     * Define se `searchTerm` filtra as opções (`local`) ou se as opções já chegam
+     * filtradas pelo servidor (`remote`). Nos dois modos, um termo sem resultados
+     * exibe a mensagem de lista vazia. Valores inválidos usam `local`.
+     *
+     * @default 'local'
+     */
+    searchMode: SelectSearchMode;
+    private get effectiveSearchMode();
     /** Indica que os resultados remotos estão sendo carregados.
      * @default false
      */
@@ -77,6 +78,11 @@ export declare class SelectList {
      * @default 0
      */
     overscan: number;
+    /**
+     * Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas.
+     * @default false
+     */
+    hideDividers: boolean;
     /**
      * Rótulo apresentado para a ação de selecionar todos no modo múltiplo.
      *
@@ -107,6 +113,7 @@ export declare class SelectList {
     isMultiple: boolean;
     scrollTop: number;
     measuredItemHeight: number | null;
+    measuredSelectAllItemHeight: number | null;
     /**
      * O `br-select` fornece a opção sintética de selecionar todos antes de
      * conseguir chamar `setMultiple()` no elemento da lista. Usar esse
@@ -116,6 +123,8 @@ export declare class SelectList {
     private get effectiveMultiple();
     private listElement?;
     private measurementFrame;
+    private measurementInProgress;
+    private measurementRequested;
     private filteredOptionsCache;
     private filteredOptionsCacheKey;
     private filteredOptionsCacheSource?;
@@ -193,6 +202,8 @@ export declare class SelectList {
      * @returns `true` quando a opção foi encontrada para foco.
      */
     focusOption(index: number): Promise<boolean>;
+    /** Torna o item ativo visível sem retirar o foco do campo. */
+    revealOption(index: number): Promise<boolean>;
     /**
      * Aciona a seleção programática de uma opção específica.
      *
@@ -227,6 +238,8 @@ export declare class SelectList {
     private handleScroll;
     private getViewportHeight;
     private getRowHeight;
+    private getRowsHeight;
+    private getRowTop;
     private getVisibleRange;
     private clampScrollPosition;
     private scheduleMeasureItemHeight;

package/dist/types/components/select/select-option/select-option.d.ts

@@ -2,18 +2,13 @@ import { type EventEmitter } from '../../../stencil-public-runtime';
 import type { BrDensity } from '../../global.types';
 import type { SelectOptionData } from '../select.types';
 /**
- * Subcomponente que representa uma opção individual dentro de um `br-select`.
+ * Representa uma opção dentro do `br-select`. Use no slot padrão do componente.
  *
- * ### Papel na composição
- * - Define o valor de submissão (`value`) e o rótulo legível exibido para o usuário.
- * - Identifica opcionalmente o grupo visual e semântico ao qual a opção pertence.
- * - Exibe os estados de seleção (`selected`), desativação (`disabled`) e, no modo de seleção múltipla, o checkbox correspondente.
- * - Suporta marcação com destaque textual correspondente aos filtros de busca aplicados.
+ * Defina `value` para o valor de formulário e `label` para o texto exibido. Use `selected` para marcar a opção como selecionada inicialmente e `disabled` para desabilitá-la. Para agrupamento, utilize `group`.
  *
- * ### Regra de uso e relacionamento
- * Deve ser declarado no slot padrão do `br-select` (ou projetado pela lista). É a forma declarativa canônica de fornecer opções em código novo, inclusive quando um framework repete o elemento a partir de uma coleção. O `br-select` lê seus atributos e conteúdo, transforma-os em dados e entrega uma janela virtualizada à lista; portanto, o elemento declarado no slot é a fonte declarativa, não o item visual final da lista. Evite misturá-lo com a prop legada `options` ou com `setOptions()` sem necessidade, pois a coleção imperativa passa a ter precedência depois de ser utilizada. O item comunica suas mudanças de estado ao `br-select` pai, que por sua vez atualiza o valor geral do formulário e o resumo no campo de entrada. O `br-select-option` não deve ser utilizado fora do contexto de seleção.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ * ```html
+ * <br-select-option value="df" label="Distrito Federal"></br-select-option>
+ * ```
  *
  * @category Formulários, Seleção
  * @status stable
@@ -121,6 +116,7 @@ export declare class SelectOption {
      */
     setSelectedState(selected?: boolean): Promise<void>;
     private handleActivation;
+    private get isControlledBySingleSelect();
     private handleKeyDown;
     private emitStateChange;
     private get isControlledBySelect();

package/dist/types/components/select/select.d.ts

@@ -4,95 +4,39 @@ import type { BrDensity } from '../global.types';
 import type { InputToggle } from '../input/input.types';
 import type { SelectOptionData, SelectOptionStateChange, SelectSearchDetail, SelectSearchMode, SelectStateChangeDetail, SelectValidator } from './select.types';
 /**
- * O componente `br-select` é o controle oficial de seleção do GovBR-DS, desenvolvido para permitir que o usuário escolha uma ou múltiplas opções a partir de uma lista expansível. Compatível com o padrão WAI-ARIA Combobox, ele reúne em um único componente acessível o campo de acionamento/digitação, a lista suspensa e as opções selecionáveis, integrando-se nativamente a formulários HTML e frameworks modernos.
+ * O `br-select` permite escolher uma ou mais opções em uma lista suspensa expansível com suporte a busca e virtualização.
  *
- * ### Para que serve
+ * Declare as opções com `<br-select-option>` no slot padrão, ou forneça os dados dinamicamente com o método `setOptions()`. Para seleção múltipla, use `multiple`. Para habilitar busca por digitação, use `filterable`.
  *
- * O `br-select` gerencia todo o fluxo de interação de seleção:
- * - **Seleção simples e múltipla:** Permite selecionar uma única opção ou múltiplas opções (`multiple`), incluindo a opção de selecionar ou desmarcar todas em lote.
- * - **Busca e filtragem:** Oferece filtro local integrado (conforme o usuário digita) e suporte a busca remota assíncrona (`search-mode="remote"`), disparando eventos para carregamento sob demanda via API.
- * - **Agrupamento de opções:** Organiza opções contíguas por categoria, preservando virtualização, busca local e semântica nativa de formulário.
- * - **Integração com formulários:** É associado a formulários nativos (`formAssociated`), comunicando seu valor, estado de validação (válido/inválido), mensagens de erro contextuais e eventos padrão (`change`, `input`).
- * - **Navegação acessível:** Suporta controle total via teclado (setas para cima/baixo, Enter, Escape, Home, End), foco gerenciado e anúncios para leitores de tela.
+ * ```html
+ * <br-select label="Estado" placeholder="Selecione um estado">
+ *   <br-select-option value="df" label="Distrito Federal"></br-select-option>
+ *   <br-select-option value="sp" label="São Paulo"></br-select-option>
+ *   <br-select-option value="rj" label="Rio de Janeiro"></br-select-option>
+ * </br-select>
+ * ```
  *
- * ### Quando utilizar
+ * Em formulários HTML, o componente integra-se nativamente via `ElementInternals`, enviando os valores selecionados no submit e validando campos obrigatórios com `required`.
  *
- * - **Utilize quando:**
- *   - O número de opções for moderado a grande (mais de 5 a 7 itens), onde listar todas diretamente na tela consumiria muito espaço visual.
- *   - For necessário filtrar opções por texto (digitação em lista longa).
- *   - As opções forem carregadas dinamicamente de uma API externa (busca remota/paginada).
- *   - O espaço no leiaute for restrito e exigir um controle compacto e expansível.
- * - **Evite e prefira outro componente quando:**
- *   - Houver poucas opções fixas (de 2 a 4 opções mutuamente exclusivas): prefira `br-radio` ou `br-radio-group` para manter as alternativas imediatamente visíveis.
- *   - Houver uma escolha binária (sim/não, ativo/inativo): prefira `br-switch` ou `br-checkbox`.
- *   - Houver seleção múltipla com até 4 alternativas: prefira `br-checkbox` ou um grupo de checkboxes visíveis.
+ * ### Quando usar
  *
- * ### Composição e Subcomponentes
+ * - Listas com 5 ou mais opções que ocupariam muito espaço visível se exibidas abertas.
+ * - Seleção que exige filtro ou busca por digitação.
+ * - Carregamento dinâmico ou remoto de opções a partir de uma API (`search-mode="remote"`).
  *
- * O ecossistema do Select é composto pelo elemento principal orquestrador e três subcomponentes especializados:
+ * ### Quando evitar
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-select` | **Orquestrador principal.** Gerencia o valor, ciclo de vida, acessibilidade, busca, formulário e renderização dos elementos internos. | Deve ser o único componente diretamente instanciado no template da aplicação. |
- * | `br-select-input` | **Campo de acionamento.** Exibe o valor selecionado, o rótulo (`label`), o campo de busca/digitação e o botão de expandir/recolher. | Coordenado automaticamente pelo `br-select`; utilize isoladamente apenas em composições arquiteturais avançadas. |
- * | `br-select-list` | **Lista suspensa virtualizada.** Contêiner flutuante que renderiza as opções de forma otimizada com suporte a rolagem e virtualização. | Gerenciada exclusivamente pelo `br-select`; não deve ser usada como controle autônomo. |
- * | `br-select-option` | **Item individual de opção.** Representa um valor selecionável, exibindo texto, estado de seleção e checkbox/radio associado. | Deve ser declarado dentro do slot padrão do `br-select` para cada opção desejada. |
+ * - Poucas opções fixas (2 a 4 opções): use `br-radio` ou `br-radio-group`.
+ * - Escolha simples de sim/não: use `br-switch` ou `br-checkbox`.
  *
- * Além dos subcomponentes, o `br-select` oferece slots dedicados:
- * - `default`: Slot principal onde são passados os elementos `br-select-option`.
- * - `feedback`: Slot para exibição de mensagens de validação (ex.: `br-message`).
- * - `loading`: Slot para indicador de carregamento durante busca remota.
- * - `validation-loading`: Slot para indicador visual durante validação assíncrona.
- *
- * ### Como fornecer opções
- *
- * O `br-select` possui uma API declarativa canônica e uma API imperativa para atualizações dinâmicas:
- *
- * 1. **Slot com `br-select-option`:** é a forma declarativa canônica para código novo. O pai lê os atributos e o conteúdo de cada opção e os transforma em dados para a lista. Em frameworks, a coleção também pode ser renderizada como vários elementos `br-select-option`.
- * 2. **Método `setOptions()`:** substitui a coleção de forma imperativa e deve ser reservado para dados dinâmicos, especialmente respostas de busca remota. A lista recebe os objetos e cria internamente somente a janela visível de opções.
- *
- * `br-select-input` e `br-select-list` não substituem essas fontes. Eles são peças internas da composição: o primeiro controla o campo de acionamento e busca; o segundo recebe a coleção normalizada e renderiza a lista virtualizada.
- *
- * Evite misturar slot e dados imperativos sem necessidade. Na inicialização, opções declaradas no slot têm precedência quando existem. Depois que `options` é alterada ou `setOptions()` é chamado, a coleção imperativa passa a ser a fonte de dados e alterações posteriores no slot não são sincronizadas.
- *
- * A prop `options` é uma API legada e está depreciada. Ela continua funcionando apenas para preservar compatibilidade: no HTML, recebe uma string JSON; em JavaScript e frameworks, recebe um array por property binding. Não a adote em código novo; use `br-select-option` ou, para respostas dinâmicas/remotas, `setOptions()`.
- *
- * Cada objeto deve conter `value` string e pode conter `label`, `selected`, `disabled`, `indeterminate` e `content`. `content` é renderizado como HTML na lista; não use esse campo com conteúdo não confiável.
- *
- * ### O Conceito "Lego" e a Diferença entre os Componentes {#conceito-lego}
- *
- * O ecossistema de seleção do GovBR-DS foi projetado seguindo o **conceito de peças de Lego**: modular, flexível e combinável:
- *
- * 1. **`br-select` (Componente Principal / Modelo Pronto):**
- *    É o **componente principal**. Já vem montado com todas as peças essenciais integradas: o acionador (`br-select-input`), a lista flutuante virtualizada (`br-select-list`), a navegação por teclado e a integração nativa com formulários (`formAssociated`). Na quase totalidade das aplicações (99% dos casos), você deve usar apenas `<br-select>`.
- *
- * 2. **`br-select-option` (Peça de Conteúdo):**
- *    É a peça de Lego que você encaixa diretamente no slot padrão do `<br-select>` para definir cada valor selecionável.
- *
- * 3. **`br-select-input` e `br-select-list` (Subcomponentes Internos):**
- *    São as peças internas que formam a estrutura do `br-select`. No uso comum, **não devem ser declarados manualmente**, pois o `br-select` já os instancia e os sincroniza automaticamente.
- *
- * #### Quando usar apenas `<br-select>`?
- * Use apenas `<br-select>` em quase todos os fluxos. Para opções fixas, declare os itens `<br-select-option>` no slot padrão; para opções dinâmicas, alimente a coleção com `setOptions()`. A prop `options` permanece disponível somente para compatibilidade legada.
- *
- * #### Quando montar os componentes separadamente?
- * A montagem separada das peças avulsas de Lego (`br-select-input` + `br-select-list` + `br-select-option`) destina-se exclusivamente a **composições arquiteturais avançadas**, onde o leiaute exige desacoplar fisicamente o campo de acionamento da lista suspensa (ex.: campo de busca fixo na barra superior e a lista exibida dentro de um drawer ou modal lateral). Nesse caso, a aplicação precisa implementar manualmente a sincronização de foco, abertura, navegação por teclado e repasse de valor ao formulário.
- *
- * ### Como os subcomponentes se relacionam
- *
- * A arquitetura do `br-select` segue o padrão de **orquestrador centralizado**:
- * 1. **O componente pai coordena o estado:** A aplicação declara o `<br-select>` com múltiplos `<br-select-option>` filhos ou usa `setOptions()` para dados dinâmicos. O `br-select` projeta internamente o `<br-select-input>` e a `<br-select-list>`, garantindo sincronia total de foco, estados de abertura, termos pesquisados e eventos. A prop `options` não é uma alternativa para código novo; existe somente para compatibilidade legada.
- * 2. **Evite montagem manual desarticulada:** Tentar declarar manualmente `br-select-input` e `br-select-list` fora do `br-select` quebra as relações de acessibilidade WAI-ARIA (combobox, controles expandidos, aria-activedescendant) e desvincula o controle da validação nativa de formulários (`ElementInternals`).
- * 3. **Comunicação por eventos:** Para busca remota ou resposta a seleção, a aplicação escuta os eventos disparados diretamente pelo `br-select` (`brSearch`, `change`, `input`), sem precisar interceptar nós internos da lista ou do campo de texto.
- *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/select?tab=designer).
  *
  * @category Formulários, Seleção
  * @status stable
  * @slot default - Opções declaradas com elementos br-select-option.
  * @slot feedback - Mensagem de validação, normalmente um br-message.
  * @slot validation-loading - Indicador exibido durante validação assíncrona.
- * @slot loading - Indicador exibido durante a busca remota de opções.
+ * @slot loading - Indicador exibido na lista enquanto `loading` está ativo. Padrão: spinner com o texto "Pesquisando…"; aceita texto, imagem ou qualquer HTML.
  *
  * @part container - Contêiner visual principal do select.
  * @part input - Campo de seleção e busca.
@@ -103,6 +47,7 @@ import type { SelectOptionData, SelectOptionStateChange, SelectSearchDetail, Sel
  * @part input-icon - Ícone do campo.
  * @part input-action - Botão de abertura e fechamento.
  * @part input-action-button - Botão interno da ação.
+ * @part input-clear - Botão de limpar o termo digitado durante a busca.
  * @part list - Lista de opções.
  * @part option - Opção individual.
  * @part option-group - Cabeçalho visual de um grupo de opções.
@@ -141,6 +86,7 @@ export declare class Select {
     /**
      * Define a densidade visual compartilhada pelo campo e pela lista de opções.
      * Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.
+     * A opção sintética de selecionar todos permanece com densidade `small`.
      *
      * @default 'medium'
      */
@@ -200,6 +146,11 @@ export declare class Select {
      * @default 1
      */
     overscan: number;
+    /**
+     * Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas.
+     * @default false
+     */
+    hideDividers: boolean;
     private get effectiveVisibleItems();
     private get effectiveDensity();
     private get effectiveItemHeight();
@@ -264,25 +215,42 @@ export declare class Select {
     filterable: boolean;
     /**
      * Define se as opções são filtradas localmente ou fornecidas por uma busca remota.
-     * Em `remote`, o componente emite `brSelectSearch`; a aplicação deve buscar,
-     * validar e aplicar as opções por `setOptions()`.
+     * Em `remote`, o componente emite `brSelectSearch` e exibe as opções recebidas
+     * sem filtrá-las de novo pelo termo digitado; a aplicação deve buscar, validar e
+     * aplicar a resposta com `setOptions()` ou re-renderizando os `br-select-option`.
+     * A seleção é preservada mesmo quando não aparece na resposta seguinte.
      * @default 'local'
      */
     searchMode: SelectSearchMode;
+    /**
+     * Termo repassado à lista. Ela só filtra no modo local; no remoto, usa o termo
+     * apenas para exibir a mensagem de lista vazia.
+     */
+    private get listSearchTerm();
     private get effectiveSearchMode();
     /**
      * Indica que uma busca remota de opções está pendente.
-     * Enquanto ativo, novas opções não podem ser selecionadas; a aplicação
-     * continua responsável por debounce, cancelamento, erros e autenticação.
+     * Enquanto ativo, a lista exibe o slot `loading` (padrão: "Pesquisando…") e novas
+     * opções não podem ser selecionadas; a aplicação continua responsável por
+     * debounce, cancelamento, erros e autenticação.
      * @default false
      */
     loading: boolean;
     /**
-     * Exibe o ícone de busca no campo de entrada.
+     * Exibe a lupa mesmo quando o select não é filtrável; selects com `filterable`
+     * já a exibem. A lupa é omitida quando o campo é estreito demais (menos de
+     * 128px) para comportar lupa, valor e seta.
      *
      * @default false
      */
     showSearchIcon: boolean;
+    /**
+     * Oculta a lupa mesmo quando `filterable` está ativo, sem desabilitar a busca.
+     * Tem precedência visual sobre `showSearchIcon` e não altera o comportamento padrão.
+     *
+     * @default false
+     */
+    hideSearchIcon: boolean;
     /**
      * Rótulo apresentado quando todas as opções já estão selecionadas no modo múltiplo.
      *
@@ -388,6 +356,8 @@ export declare class Select {
     private selectInputElement;
     private selectListElement;
     private shouldRestoreSelectedOptionOnOpen;
+    private isSelectInputPointerDown;
+    private skipSelectInputClickToggle;
     private pendingOptions;
     private slotElement;
     private handleSlotChange;
@@ -396,7 +366,15 @@ export declare class Select {
     private isStateChangeReady;
     private isValueChangeReady;
     private readonly listboxId;
+    private checkingValidity;
+    private showValidationErrors;
+    private validationErrorMessage;
     private activeOptionIndex;
+    /**
+     * Oculta o indicador visual da opção ativa após interação por ponteiro, como `:focus-visible`.
+     * O índice ativo e o `aria-activedescendant` são preservados; o teclado volta a exibi-lo.
+     */
+    private isActiveIndicatorHidden;
     private displayValue?;
     private searchTerm;
     private formDisabled;
@@ -416,8 +394,9 @@ export declare class Select {
     private hasImperativeOptions;
     private remoteSelectedOptions;
     private selectionInitialized;
+    private typeAhead;
+    private lastTypeAheadTime;
     private selectedValues;
-    private suppressFocusOpen;
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
@@ -443,11 +422,14 @@ export declare class Select {
     private syncOpenState;
     private attachBlockingSurfaceListener;
     private detachBlockingSurfaceListener;
+    handleSelectFocusOut(event: FocusEvent): void;
+    handleSelectInvalid(event: Event): void;
     handleSelectInputFocus(): void;
+    handleSelectPointerDown(event: PointerEvent): void;
     handleSelectInputValueChange(event: CustomEvent<string>): void;
     handleSelectInputActionClick(): void;
     handleSelectInputClick(): void;
-    handleSelectOptionStateChange(event: CustomEvent<SelectOptionStateChange>): void;
+    handleSelectOptionStateChange(event: CustomEvent<SelectOptionStateChange>, restoreFocus?: boolean): void;
     /**
      * Recalcula a coleção quando uma opção projetada muda por atribuição direta
      * de `selected`, `disabled`, `label`, `group` ou `value`. A lista virtualizada em
@@ -573,15 +555,21 @@ export declare class Select {
      *
      * @returns O id da opção ativa ou `undefined` quando a lista está fechada.
      */
-    private getActiveDescendant;
+    private syncComboboxAccessibility;
+    /**
+     * Indica se o clique atual foi o mesmo que deu foco ao campo e abriu a lista,
+     * limpando o estado do ponteiro. Esse clique não deve alternar a lista de novo.
+     */
+    private consumeFocusOpenClick;
     private toggleOpenFromPointer;
     private openListAndRestorePointerFocus;
     private scrollFirstSelectedOptionToTop;
     private openAndFocusBoundary;
+    private focusOptionByTypedCharacters;
     /**
-     * Define qual opção deve receber foco ao abrir o select pelo teclado.
+     * Define qual opção deve receber foco ao abrir ou iniciar a navegação pelo teclado.
      *
-     * @param direction Direção inicial da navegação. `1` abre do topo para baixo e `-1` do fim para cima.
+     * @param direction Direção inicial da navegação. `1` avança e `-1` recua.
      */
     private focusInitialOption;
     private moveActiveOption;
@@ -595,13 +583,14 @@ export declare class Select {
      * Encaminha o foco lógico para uma opção específica da lista interna.
      *
      * @param index Índice da opção que deve receber foco.
+     * @param scrollToTop Posiciona a opção no topo da viewport quando verdadeiro.
      */
     private focusOptionByIndex;
     /**
      * Seleciona a opção atualmente ativa sem duplicar a lógica de seleção da lista.
      *
      * @remarks
-     * Em modo simples, a opção ativa é sempre marcada. Em modo múltiplo, a seleção é alternada.
+     * Em modo simples, confirma a opção ativa; no múltiplo, alterna sua seleção.
      */
     private selectFocusedOption;
     private syncActiveOptionIndex;
@@ -633,7 +622,6 @@ export declare class Select {
      * os filhos atuais do host.
      */
     private getCurrentOptions;
-    private normalizeSearchText;
     private getNavigableOptions;
     private clearSearch;
     private getEventPath;

package/dist/types/components/select/select.types.d.ts

@@ -43,6 +43,7 @@ export type SelectSearchDetail = {
     query: string;
 };
 export type SelectListController = {
+    revealOption?: (index: number) => Promise<boolean>;
     focusOption?: (index: number) => Promise<boolean>;
     scrollOptionToTop?: (index: number) => Promise<boolean>;
     scrollFirstSelectedOptionToTop?: () => Promise<boolean>;
@@ -53,3 +54,14 @@ export type SelectListController = {
 export type EventWithLegacyPath = Event & {
     path?: EventTarget[];
 };
+export type SelectComboboxState = {
+    options: SelectOptionData[];
+    activeIndex: number;
+    expanded: boolean;
+    multiple: boolean;
+    label: string;
+    loading: boolean;
+    required: boolean;
+    invalid: boolean;
+    errorMessage: string;
+};

package/dist/types/components/select/select.utils.d.ts

@@ -1,3 +1,5 @@
+import type { SelectOptionData } from './select.types';
+export declare const SELECT_ALL_OPTION_VALUE = "__select_all__";
 export type SelectionTransitionInput = {
     currentValues: string[];
     multiple: boolean;
@@ -11,3 +13,4 @@ export type SelectionTransition = {
 };
 export declare function transitionSelection({ currentValues, multiple, value, selected, selectableValues, }: SelectionTransitionInput): SelectionTransition;
 export declare function transitionAllSelection(currentValues: string[], selected: boolean, selectableValues: string[]): SelectionTransition;
+export declare function filterSelectOptions(options: SelectOptionData[], term: string, selectAllLabel: string, unselectAllLabel: string): SelectOptionData[];