@govbr-ds/webcomponents 2.3.0 → 2.5.0

package/dist/collection/components/select/select.js

@@ -12,99 +12,43 @@ import { reportInvalidPropValue } from "../../shared/utils/prop-warning";
 import { resolveAllowedPropValue, resolveDensity, resolveIntegerPropValue, resolveNumberPropValue, } from "../../shared/utils/props";
 import { hasAssignedSlotContent, hasNamedLightDomSlot } from "../../shared/utils/slot";
 import { resolveFormValidator } from "../../shared/utils/validator";
-import { transitionAllSelection, transitionSelection } from "./select.utils";
+import { filterSelectOptions, SELECT_ALL_OPTION_VALUE, transitionAllSelection, transitionSelection, } from "./select.utils";
 const SELECT_SEARCH_MODES = ['local', 'remote'];
 const SELECT_AUTOCOMPLETE_VALUES = ['on', 'off'];
 /**
- * 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.
@@ -115,6 +59,7 @@ const SELECT_AUTOCOMPLETE_VALUES = ['on', 'off'];
  * @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.
@@ -143,6 +88,7 @@ export 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'
          */
@@ -198,6 +144,11 @@ export class Select {
          * @default 1
          */
         this.overscan = 1;
+        /**
+         * Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas.
+         * @default false
+         */
+        this.hideDividers = false;
         /**
          * Controla o estado aberto/fechado da lista.
          *
@@ -244,24 +195,36 @@ export class Select {
         this.filterable = true;
         /**
          * 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'
          */
         this.searchMode = 'local';
         /**
          * 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
          */
         this.loading = false;
         /**
-         * 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
          */
         this.showSearchIcon = false;
+        /**
+         * 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
+         */
+        this.hideSearchIcon = false;
         /**
          * Rótulo apresentado quando todas as opções já estão selecionadas no modo múltiplo.
          *
@@ -292,6 +255,8 @@ export class Select {
         /** Quantidade máxima de opções selecionadas no modo múltiplo. Deve ser um inteiro não negativo; valores inválidos usam 0. */
         this.maxSelections = 0;
         this.shouldRestoreSelectedOptionOnOpen = false;
+        this.isSelectInputPointerDown = false;
+        this.skipSelectInputClickToggle = false;
         this.pendingOptions = null;
         this.slotElement = null;
         this.handleSlotChange = () => this.slotReconciler.schedule();
@@ -300,7 +265,15 @@ export class Select {
         this.isStateChangeReady = false;
         this.isValueChangeReady = false;
         this.listboxId = `${this.customId}-listbox`;
+        this.checkingValidity = false;
+        this.showValidationErrors = false;
+        this.validationErrorMessage = '';
         this.activeOptionIndex = -1;
+        /**
+         * 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.
+         */
+        this.isActiveIndicatorHidden = false;
         this.searchTerm = '';
         this.formDisabled = false;
         this.isValidating = false;
@@ -316,8 +289,9 @@ export class Select {
         this.hasImperativeOptions = false;
         this.remoteSelectedOptions = new Map();
         this.selectionInitialized = false;
+        this.typeAhead = '';
+        this.lastTypeAheadTime = 0;
         this.selectedValues = [];
-        this.suppressFocusOpen = false;
         /**
          * Sincroniza as opções declaradas no slot com a lista interna renderizada.
          *
@@ -341,6 +315,8 @@ export class Select {
         this.formDisabled = disabled;
     }
     formResetCallback() {
+        this.showValidationErrors = false;
+        this.validationErrorMessage = '';
         this.validationRunId++;
         this.validatorMessage = null;
         this.customValidationMessage = '';
@@ -368,6 +344,13 @@ export class Select {
     get effectiveOverscan() {
         return resolveIntegerPropValue(this.el, 'overscan', this.overscan, 0, Number.MAX_SAFE_INTEGER, 1);
     }
+    /**
+     * Termo repassado à lista. Ela só filtra no modo local; no remoto, usa o termo
+     * apenas para exibir a mensagem de lista vazia.
+     */
+    get listSearchTerm() {
+        return this.filterable ? this.searchTerm : '';
+    }
     get effectiveSearchMode() {
         return resolveAllowedPropValue(this.el, 'searchMode', this.searchMode, SELECT_SEARCH_MODES, 'local');
     }
@@ -476,7 +459,7 @@ export class Select {
         const anySelected = selectable.some((option) => Boolean(option.selected));
         return [
             {
-                value: '__select_all__',
+                value: SELECT_ALL_OPTION_VALUE,
                 label: allSelected ? this.unselectAllLabel : this.selectAllLabel,
                 selected: allSelected,
                 indeterminate: anySelected && !allSelected,
@@ -554,14 +537,33 @@ export class Select {
         this.cleanupBlockingSurfaceDismissal?.();
         this.cleanupBlockingSurfaceDismissal = undefined;
     }
+    handleSelectFocusOut(event) {
+        if (!this.getEventPath(event).includes(this.selectInputElement))
+            return;
+        // Aguarda o foco atravessar os Shadow Roots antes de decidir se saiu do select.
+        queueMicrotask(() => {
+            if (!this.el.isConnected || this.el.matches(':focus-within') || this.isDisabled())
+                return;
+            void this.validate();
+        });
+    }
+    handleSelectInvalid(event) {
+        if (event.target !== this.el || this.checkingValidity)
+            return;
+        this.showValidationErrors = true;
+        void this.syncComboboxAccessibility();
+    }
     handleSelectInputFocus() {
-        this.activeOptionIndex = -1;
-        if (this.suppressFocusOpen)
+        if (this.effectiveOpen)
             return;
-        if (this.filterable && !this.effectiveOpen) {
-            this.clearSearch();
-            void this.show();
-        }
+        this.activeOptionIndex = -1;
+        this.skipSelectInputClickToggle = this.isSelectInputPointerDown;
+        void this.show();
+    }
+    handleSelectPointerDown(event) {
+        this.isActiveIndicatorHidden = true;
+        this.skipSelectInputClickToggle = false;
+        this.isSelectInputPointerDown = this.getEventPath(event).includes(this.selectInputElement);
     }
     handleSelectInputValueChange(event) {
         if (!this.filterable || this.isDisabled())
@@ -575,27 +577,33 @@ export class Select {
          * alcance a lista interna. Isso evita depender apenas da remoção/atualização
          * do atributo `search-term` no custom element.
          */
-        void this.getSelectListController()?.setSearchTerm?.(nextSearchTerm);
+        void this.getSelectListController()?.setSearchTerm?.(this.listSearchTerm);
         if (!this.effectiveOpen) {
             void this.show();
         }
     }
     handleSelectInputActionClick() {
+        // O botão de ação fica dentro do campo: o foco do mesmo clique já abriu a lista.
+        if (this.consumeFocusOpenClick())
+            return;
         this.toggleOpenFromPointer();
     }
     handleSelectInputClick() {
+        if (this.consumeFocusOpenClick())
+            return;
         if (this.filterable) {
-            if (!this.effectiveOpen) {
-                this.shouldRestoreSelectedOptionOnOpen = true;
+            if (!this.effectiveOpen)
                 void this.show();
-            }
             return;
         }
-        this.toggleOpenFromPointer();
+        this.shouldRestoreSelectedOptionOnOpen = true;
+        void this.toggleOpenFromPointer();
     }
-    handleSelectOptionStateChange(event) {
+    handleSelectOptionStateChange(event, restoreFocus = true) {
         event.stopPropagation();
         const detail = event.detail;
+        if (detail.disabled)
+            return;
         // Use a lista interna para preservar rótulos e opções remotas enquanto as
         // props projetadas aguardam a próxima renderização.
         const listOptions = this.getSelectListController()?.options;
@@ -608,9 +616,9 @@ export class Select {
         // partir do valor do evento evita que esse snapshot reapareça no valor
         // público ou no formulário.
         const selectableValues = sourceOptions
-            .filter((option) => !this.isSelectAllLabel(this.getOptionLabel(option)))
+            .filter((option) => !this.isSelectAllOption(option) && !option.disabled)
             .map((option) => option.value);
-        const transition = this.isSelectAllLabel(detail.label ?? detail.value)
+        const transition = this.isSelectAllOption(detail)
             ? transitionAllSelection(this.selectedValues, Boolean(detail.selected), selectableValues)
             : transitionSelection({
                 currentValues: this.selectedValues,
@@ -629,15 +637,12 @@ export class Select {
         this.syncActiveOptionIndex(event.detail);
         this.emitStateChange(detail);
         this.updateValidity();
-        if (!transition.changed)
-            return;
-        if (!this.effectiveMultiple) {
-            this.suppressFocusOpen = true;
+        if (!this.effectiveMultiple && restoreFocus) {
             void this.selectInputElement?.setFocus?.();
-            void this.close().finally(() => {
-                this.suppressFocusOpen = false;
-            });
+            void this.close();
         }
+        if (!transition.changed)
+            return;
         dispatchNativeFormEvent(this.el, 'input');
         dispatchNativeFormEvent(this.el, 'change');
     }
@@ -663,13 +668,31 @@ export class Select {
     }
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: centraliza a navegação por teclado do componente.
     async handleKeyDown(event) {
-        if (this.isDisabled())
+        if (this.isDisabled() || event.isComposing)
             return;
         const path = this.getEventPath(event);
         const isFromInput = path.includes(this.selectInputElement);
         const isFromList = path.includes(this.selectListElement);
         if (!isFromInput && !isFromList)
             return;
+        this.isActiveIndicatorHidden = false;
+        if (event.altKey && event.key === 'ArrowDown') {
+            if (!this.effectiveOpen) {
+                event.preventDefault();
+                await this.show();
+            }
+            return;
+        }
+        if (event.altKey && event.key === 'ArrowUp') {
+            if (this.effectiveOpen) {
+                event.preventDefault();
+                await this.close();
+                this.activeOptionIndex = -1;
+            }
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
         switch (event.key) {
             case 'ArrowDown':
                 event.preventDefault();
@@ -680,29 +703,39 @@ export class Select {
                 await this.openAndFocusBoundary(isFromInput, -1);
                 return;
             case 'Home':
-                if (!this.effectiveOpen)
+                if (isFromInput && this.filterable)
                     return;
                 event.preventDefault();
-                await this.focusOptionByIndex(0);
+                if (!this.effectiveOpen)
+                    await this.show();
+                await this.focusOptionByIndex(this.getNavigableOptions().findIndex((option) => !option.disabled));
                 return;
             case 'End':
-                if (!this.effectiveOpen)
+                if (isFromInput && this.filterable)
                     return;
                 event.preventDefault();
-                await this.focusOptionByIndex(this.getNavigableOptions().length - 1);
+                if (!this.effectiveOpen)
+                    await this.show();
+                await this.focusOptionByIndex(this.getNavigableOptions()
+                    .map((option) => !option.disabled)
+                    .lastIndexOf(true), true);
                 return;
             case 'Enter':
             case ' ':
                 if (isFromInput && this.filterable && event.key === ' ') {
                     return;
                 }
-                if (isFromList) {
+                // No campo editável fechado, Enter mantém a ação nativa do formulário.
+                if (isFromInput && this.filterable && event.key === 'Enter' && !this.effectiveOpen)
                     return;
-                }
                 event.preventDefault();
                 if (!this.effectiveOpen) {
                     await this.show();
-                    await this.focusInitialOption(1);
+                    return;
+                }
+                if (this.activeOptionIndex < 0) {
+                    await this.close();
+                    this.activeOptionIndex = -1;
                     return;
                 }
                 await this.selectFocusedOption();
@@ -722,6 +755,10 @@ export class Select {
                 this.activeOptionIndex = -1;
                 return;
             default:
+                if (!this.filterable && event.key.length === 1 && event.key !== ' ') {
+                    event.preventDefault();
+                    await this.focusOptionByTypedCharacters(event.key);
+                }
                 return;
         }
     }
@@ -769,6 +806,7 @@ export class Select {
             this.open = false;
         else
             this.isOpen = false;
+        this.typeAhead = '';
         this.clearSearch();
     }
     /**
@@ -817,9 +855,18 @@ export class Select {
         await this.selectInputElement?.setFocus?.();
     }
     async checkValidity() {
-        return this.elementInternals?.checkValidity?.() ?? true;
+        this.checkingValidity = true;
+        try {
+            return this.elementInternals?.checkValidity?.() ?? true;
+        }
+        finally {
+            this.checkingValidity = false;
+        }
     }
     async reportValidity() {
+        this.showValidationErrors = true;
+        this.updateValidity();
+        await this.syncComboboxAccessibility();
         return this.elementInternals?.reportValidity?.() ?? true;
     }
     async setCustomValidity(message) {
@@ -830,6 +877,9 @@ export class Select {
         return getFormValidationState(this.elementInternals);
     }
     async validate() {
+        this.showValidationErrors = true;
+        this.updateValidity();
+        await this.syncComboboxAccessibility();
         const validator = this.resolveValidator();
         if (!validator || this.isDisabled())
             return this.checkValidity();
@@ -936,11 +986,19 @@ export class Select {
         const inner = this.extractInnerTextFromOption(el);
         const content = (el.innerHTML || '').trim();
         const selected = el.hasAttribute('selected') || Boolean(el.selected);
+        const disabled = el.hasAttribute('disabled') || Boolean(el.disabled);
         if (!value && inner)
             value = inner.trim();
         if (!label)
             label = inner?.trim() || value;
-        return { value: value || '', label: label || undefined, group, selected, content: content || undefined };
+        return {
+            value: value || '',
+            label: label || undefined,
+            group,
+            selected,
+            disabled,
+            content: content || undefined,
+        };
     }
     getOptionElementGroup(el) {
         return String(el.getAttribute('group') ?? el.group ?? '').trim() || undefined;
@@ -1142,6 +1200,7 @@ export class Select {
                 : '';
         nativeSelect.setCustomValidity(this.customValidationMessage || this.validatorMessage || selectionMessage);
         syncNativeFormValidity(this.elementInternals, nativeSelect);
+        void this.syncComboboxAccessibility();
     }
     getNativeSelect() {
         return (this.el.shadowRoot?.querySelector('select[part="hidden-select"]') ??
@@ -1158,10 +1217,38 @@ export class Select {
      *
      * @returns O id da opção ativa ou `undefined` quando a lista está fechada.
      */
-    getActiveDescendant() {
-        if (!this.effectiveOpen || this.activeOptionIndex < 0)
-            return undefined;
-        return `${this.listboxId}-option-${this.activeOptionIndex}`;
+    async syncComboboxAccessibility() {
+        const nativeSelect = this.getNativeSelect();
+        const invalid = this.showValidationErrors && Boolean(nativeSelect && !nativeSelect.validity.valid);
+        const errorMessage = !invalid
+            ? ''
+            : nativeSelect?.validity.customError
+                ? nativeSelect.validationMessage
+                : nativeSelect?.validity.valueMissing
+                    ? 'Este campo é obrigatório.'
+                    : nativeSelect?.validationMessage || '';
+        this.validationErrorMessage = errorMessage;
+        await this.selectInputElement?.syncCombobox?.({
+            options: this.getNavigableOptions(),
+            activeIndex: this.effectiveOpen ? this.activeOptionIndex : -1,
+            expanded: this.effectiveOpen,
+            multiple: this.effectiveMultiple,
+            label: this.getAccessibleLabel(),
+            loading: this.loading,
+            required: this.required,
+            invalid,
+            errorMessage,
+        });
+    }
+    /**
+     * 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.
+     */
+    consumeFocusOpenClick() {
+        const skip = this.skipSelectInputClickToggle;
+        this.skipSelectInputClickToggle = false;
+        this.isSelectInputPointerDown = false;
+        return skip;
     }
     toggleOpenFromPointer() {
         if (!this.effectiveOpen) {
@@ -1189,6 +1276,7 @@ export class Select {
     async openAndFocusBoundary(fromInput, direction) {
         if (!this.effectiveOpen) {
             await this.show();
+            await this.selectListElement?.open?.();
             await this.focusInitialOption(direction);
             return;
         }
@@ -1198,17 +1286,55 @@ export class Select {
         }
         await this.moveActiveOption(direction);
     }
+    async focusOptionByTypedCharacters(character) {
+        const now = Date.now();
+        this.typeAhead = now - this.lastTypeAheadTime < 700 ? this.typeAhead + character : character;
+        this.lastTypeAheadTime = now;
+        const options = this.getNavigableOptions();
+        if (!options.length)
+            return;
+        const normalize = (value) => value
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLocaleLowerCase('pt-BR');
+        const search = (query) => {
+            for (let offset = 1; offset <= options.length; offset++) {
+                const index = (this.activeOptionIndex + offset + options.length) % options.length;
+                const option = options[index];
+                if (!option.disabled && normalize(this.getOptionLabel(option)).startsWith(normalize(query)))
+                    return index;
+            }
+            return -1;
+        };
+        let index = search(this.typeAhead);
+        if (index < 0 && /^(.)(\1)+$/u.test(this.typeAhead))
+            index = search(character);
+        if (index < 0)
+            return;
+        if (!this.effectiveOpen)
+            await this.show();
+        await this.focusOptionByIndex(index);
+    }
     /**
-     * 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.
      */
     async focusInitialOption(direction) {
         const options = this.getNavigableOptions();
         if (options.length === 0)
             return;
-        const selectedIndex = options.findIndex((option) => Boolean(option.selected));
-        const fallbackIndex = direction > 0 ? 0 : options.length - 1;
+        const selectedIndex = options.findIndex((option) => !option.disabled && !this.isSelectAllOption(option) && Boolean(option.selected));
+        if (selectedIndex >= 0) {
+            let nextIndex = selectedIndex + direction;
+            while (nextIndex >= 0 && nextIndex < options.length && options[nextIndex].disabled)
+                nextIndex += direction;
+            await this.focusOptionByIndex(nextIndex >= 0 && nextIndex < options.length ? nextIndex : selectedIndex, true);
+            return;
+        }
+        const fallbackIndex = direction > 0
+            ? options.findIndex((option) => !option.disabled)
+            : options.map((option) => !option.disabled).lastIndexOf(true);
         const initialIndex = selectedIndex >= 0 ? selectedIndex : fallbackIndex;
         await this.focusOptionByIndex(initialIndex);
     }
@@ -1217,8 +1343,11 @@ export class Select {
         if (options.length === 0)
             return;
         const baseIndex = this.getCurrentActiveIndex();
-        const nextIndex = Math.min(options.length - 1, Math.max(0, baseIndex + step));
-        await this.focusOptionByIndex(nextIndex);
+        let nextIndex = baseIndex + step;
+        while (nextIndex >= 0 && nextIndex < options.length && options[nextIndex].disabled)
+            nextIndex += step;
+        if (nextIndex >= 0 && nextIndex < options.length)
+            await this.focusOptionByIndex(nextIndex);
     }
     /**
      * Resolve o índice ativo atual a partir do estado local ou da opção já selecionada.
@@ -1229,47 +1358,45 @@ export class Select {
         if (this.activeOptionIndex >= 0)
             return this.activeOptionIndex;
         const options = this.getNavigableOptions();
-        const selectedIndex = options.findIndex((option) => Boolean(option.selected));
+        const selectedIndex = options.findIndex((option) => !option.disabled && !this.isSelectAllOption(option) && Boolean(option.selected));
         return selectedIndex >= 0 ? selectedIndex : 0;
     }
     /**
      * 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.
      */
-    async focusOptionByIndex(index) {
-        const didFocus = await this.getSelectListController()?.focusOption?.(index);
-        if (didFocus) {
-            this.activeOptionIndex = index;
-        }
+    async focusOptionByIndex(index, scrollToTop = false) {
+        if (!this.getNavigableOptions()[index] || this.getNavigableOptions()[index].disabled)
+            return;
+        this.activeOptionIndex = index;
+        const listController = this.getSelectListController();
+        if (scrollToTop)
+            await listController?.scrollOptionToTop?.(index);
+        else
+            await listController?.revealOption?.(index);
     }
     /**
      * 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.
      */
-    async selectFocusedOption() {
+    async selectFocusedOption(restoreFocus = true) {
         const options = this.getNavigableOptions();
         if (options.length === 0)
             return;
-        const index = this.getCurrentActiveIndex();
+        const index = this.activeOptionIndex;
         const option = options[index];
-        const nextSelected = this.effectiveMultiple ? !option?.selected : true;
-        if (this.effectiveMultiple && index === 0 && option && !this.isSelectAllLabel(this.getOptionLabel(option))) {
-            this.handleSelectOptionStateChange(new CustomEvent('brSelectOptionStateChange', {
-                detail: {
-                    value: '__select_all__',
-                    label: this.selectAllLabel,
-                    selected: true,
-                    disabled: false,
-                },
-            }));
+        if (!option || option.disabled)
             return;
-        }
-        const didSelect = await this.getSelectListController()?.setOptionSelected?.(index, nextSelected);
-        if (didSelect) {
-            this.activeOptionIndex = index;
+        this.handleSelectOptionStateChange(new CustomEvent('brSelectOptionStateChange', {
+            detail: { ...option, selected: this.effectiveMultiple ? !option.selected : true },
+        }), restoreFocus);
+        if (!this.effectiveMultiple && restoreFocus) {
+            await this.close();
+            await this.selectInputElement?.setFocus();
         }
     }
     syncActiveOptionIndex(detail) {
@@ -1304,13 +1431,13 @@ export class Select {
         if (!this.effectiveMultiple)
             return;
         const selectableOptions = slottedOptions.filter((option) => {
-            const optionLabel = (option.label ?? option.value).trim();
+            const optionLabel = (option.label ?? option.value ?? '').trim();
             return !this.isSelectAllLabel(optionLabel);
         });
         const allSelected = selectableOptions.length > 0 && selectableOptions.every((option) => Boolean(option.selected));
         const anySelected = selectableOptions.some((option) => Boolean(option.selected));
         slottedOptions.forEach((option) => {
-            const optionLabel = (option.label ?? option.value).trim();
+            const optionLabel = (option.label ?? option.value ?? '').trim();
             if (!this.isSelectAllLabel(optionLabel))
                 return;
             option.indeterminate = anySelected && !allSelected;
@@ -1334,9 +1461,7 @@ export class Select {
         return label === this.selectAllLabel || label === this.unselectAllLabel;
     }
     isSelectAllOption(option) {
-        return (option.value === '__select_all__' ||
-            option.value === 'Alternar todos' ||
-            this.isSelectAllLabel(this.getOptionLabel(option)));
+        return option.value === SELECT_ALL_OPTION_VALUE || this.isSelectAllLabel(this.getOptionLabel(option));
     }
     getSelectAllLabel(selected, indeterminate) {
         return selected && !indeterminate ? this.unselectAllLabel : this.selectAllLabel;
@@ -1416,7 +1541,7 @@ export class Select {
      * os filhos atuais do host.
      */
     getCurrentOptions() {
-        // As opções projetadas são a fonte canônica quando não há coleção
+        // As opções projetadas são a fonte principal quando não há coleção
         // imperativa: a lista virtualizada pode manter um snapshot enquanto o
         // consumidor altera `selected` diretamente no slot.
         if (!this.hasImperativeOptions && this.slotElement) {
@@ -1440,28 +1565,20 @@ export class Select {
         if (this.pendingOptions) {
             return this.getListOptions(this.pendingOptions);
         }
+        // Depois de setOptions(), a coleção imperativa é a fonte: uma resposta vazia
+        // não volta a exibir as opções declaradas no HTML.
+        if (this.hasImperativeOptions)
+            return this.getListOptions([]);
         const hostOptions = this.applyCanonicalSelection(this.getHostOptions());
         return this.getListOptions(hostOptions);
     }
-    normalizeSearchText(value) {
-        return value
-            .normalize('NFD')
-            .replace(/[\u0300-\u036f]/g, '')
-            .toLocaleLowerCase('pt-BR')
-            .trim();
-    }
     getNavigableOptions() {
-        const options = this.getCurrentOptions();
-        const normalizedTerm = this.normalizeSearchText(this.searchTerm);
-        if (!this.filterable || this.effectiveSearchMode === 'remote' || !normalizedTerm)
-            return options;
-        return options.filter((option) => {
-            if (this.isSelectAllLabel(this.getOptionLabel(option)))
-                return this.effectiveMultiple;
-            const label = this.normalizeSearchText(this.getOptionLabel(option));
-            const value = this.normalizeSearchText(option.value);
-            return label.includes(normalizedTerm) || value.includes(normalizedTerm);
-        });
+        const currentOptions = this.getCurrentOptions();
+        const hostOptions = this.hasImperativeOptions ? [] : this.getHostOptions();
+        const hostDisabledState = new Map(hostOptions.map((option) => [option.value, Boolean(option.disabled)]));
+        const options = currentOptions.map((option) => hostDisabledState.has(option.value) ? { ...option, disabled: hostDisabledState.get(option.value) } : option);
+        const localSearchTerm = this.effectiveSearchMode === 'local' ? this.listSearchTerm : '';
+        return filterSelectOptions(options, localSearchTerm, this.selectAllLabel, this.unselectAllLabel);
     }
     clearSearch() {
         if (!this.searchTerm)
@@ -1488,15 +1605,18 @@ export class Select {
         this.selectListElement?.setMultiple(isMultiple);
     }
     renderSelectInput() {
-        return (h("br-select-input", { part: "input", exportparts: "container:input-container, input:input-field, label:input-label, group:input-group, icon:input-icon, action:input-action, action-button:input-action-button", ref: (el) => (this.selectInputElement = el), "aria-activedescendant": this.getActiveDescendant(), "aria-controls": this.listboxId, "aria-disabled": String(this.isDisabled()), "aria-expanded": String(this.effectiveOpen), "aria-haspopup": "listbox", "aria-label": this.getAccessibleLabel(), "aria-required": String(this.required), borderless: this.borderless, density: this.effectiveDensity, "is-inline": this.effectiveInline, "is-open": this.effectiveOpen, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled(), filterable: this.filterable, showSearchIcon: this.showSearchIcon, autocomplete: this.effectiveAutocomplete, "input-width": this.inputWidth, role: "combobox", value: this.filterable && this.effectiveOpen ? this.searchTerm : this.getRenderedDisplayValue() }));
+        return (h("br-select-input", { part: "input", exportparts: "container:input-container, input:input-field, label:input-label, group:input-group, icon:input-icon, action:input-action, action-button:input-action-button, clear:input-clear", ref: (el) => (this.selectInputElement = el), "aria-disabled": String(this.isDisabled()), "aria-label": this.getAccessibleLabel(), borderless: this.borderless, density: this.effectiveDensity, "is-inline": this.effectiveInline, "is-open": this.effectiveOpen, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled(), filterable: this.filterable, showSearchIcon: this.showSearchIcon, clearable: this.filterable && this.effectiveOpen, autocomplete: this.effectiveAutocomplete, "input-width": this.inputWidth, value: this.filterable && this.effectiveOpen ? this.searchTerm : this.getRenderedDisplayValue() }));
     }
     renderSelectList() {
-        return (h("br-select-list", { part: "list", options: this.getListOptions(this.getCurrentOptions()), exportparts: "list, option, checkbox, select-all, empty-option, option-checkbox, option-radio, option-group", "active-option-index": this.activeOptionIndex, "aria-label": this.getAccessibleLabel(), "aria-multiselectable": this.effectiveMultiple ? 'true' : 'false', density: this.effectiveDensity, id: this.listboxId, "visible-items": this.effectiveVisibleItems, "item-height": this.effectiveItemHeight, overscan: this.effectiveOverscan, "search-term": this.filterable && this.effectiveSearchMode === 'local' ? this.searchTerm : '', role: "listbox", "select-all-label": this.selectAllLabel, "unselect-all-label": this.unselectAllLabel, ref: (el) => {
+        return (h("br-select-list", { part: "list", "aria-hidden": "true", onMouseDown: (event) => {
+                event.preventDefault();
+                void this.selectInputElement?.setFocus();
+            }, options: this.getListOptions(this.getCurrentOptions()), exportparts: "list, option, checkbox, select-all, empty-option, option-checkbox, option-radio, option-group", "active-option-index": this.isActiveIndicatorHidden ? -1 : this.activeOptionIndex, "aria-label": this.getAccessibleLabel(), "aria-multiselectable": this.effectiveMultiple ? 'true' : 'false', density: this.effectiveDensity, id: this.listboxId, "visible-items": this.effectiveVisibleItems, "item-height": this.effectiveItemHeight, overscan: this.effectiveOverscan, hideDividers: this.hideDividers, "search-term": this.listSearchTerm, "search-mode": this.effectiveSearchMode, role: "listbox", "select-all-label": this.selectAllLabel, "unselect-all-label": this.unselectAllLabel, ref: (el) => {
                 this.selectListElement = el;
                 this.selectListElement.loading = this.loading;
                 this.setSelectionMode(this.effectiveMultiple);
-                void this.getSelectListController()?.setSearchTerm?.(this.filterable ? this.searchTerm : '');
-            } }, h("slot", null), h("slot", { name: "loading", slot: "loading" })));
+                void this.getSelectListController()?.setSearchTerm?.(this.listSearchTerm);
+            } }, h("slot", null), h("slot", { name: "loading", slot: "loading" }, h("br-loading", { size: "small", label: "Pesquisando\u2026", labelPosition: "right" }))));
     }
     renderHiddenSelect() {
         const options = this.getFormOptions(this.getCurrentOptions()).filter((option) => !this.isSelectAllLabel(this.getOptionLabel(option)));
@@ -1535,7 +1655,7 @@ export class Select {
         return (h("option", { key: option.value, value: option.value, selected: option.selected, disabled: option.disabled }));
     }
     render() {
-        return (h(Host, { key: '9c74748b6b9b428fc6f0388a704196e579d45ae6', "aria-busy": this.isValidating || this.loading ? 'true' : null }, h("div", { key: '291a5947bd1f1de1b93944fca855fc7a2cacd24e', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), h("div", { key: '86f0d585b01076b26926e80a10e60ae1077f4183', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validatorMessage }, h("slot", { key: 'f5aad9aa79604fe8b7be56fb80ecf27ea116559b', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }, this.validatorMessage)), h("div", { key: '1bf287a49b52beb2655d80e7195ea1657ce1cf18', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: 'e0b02f9a40c8105c901600fed485352e664ff9d2', name: "validation-loading" })), this.renderHiddenSelect())));
+        return (h(Host, { key: '6a73a46788b952ed54fc3962563d572b7303222f', "aria-busy": this.isValidating || this.loading ? 'true' : null }, h("div", { key: 'a05db2f095fb30ae9379ec87d8474289d8560a5b', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), h("div", { key: '9218c94b7c8fe9ef170c4b1c9e47559cdae50c16', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validationErrorMessage }, h("slot", { key: '2d74cf5804367c3b8dab39e57a0d050018de84b5', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }, this.validationErrorMessage ? (h("br-message", { "is-feedback": true, state: "danger", message: this.validationErrorMessage })) : null)), h("div", { key: 'f2e6019a54128ddae642226986ecf13803fce30d', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: '3d83e4359c05d95294d1d9ab87fef1d7d068f1f3', name: "validation-loading" })), this.renderHiddenSelect())));
     }
     static get is() { return "br-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1620,7 +1740,7 @@ export class Select {
                             "name": "default",
                             "text": "'medium'"
                         }],
-                    "text": "Define a densidade visual compartilhada pelo campo e pela lista de op\u00E7\u00F5es.\nAceita `small`, `medium` ou `large`. Valores inv\u00E1lidos usam `medium`."
+                    "text": "Define a densidade visual compartilhada pelo campo e pela lista de op\u00E7\u00F5es.\nAceita `small`, `medium` ou `large`. Valores inv\u00E1lidos usam `medium`.\nA op\u00E7\u00E3o sint\u00E9tica de selecionar todos permanece com densidade `small`."
                 },
                 "getter": false,
                 "setter": false,
@@ -1839,6 +1959,29 @@ export class Select {
                 "attribute": "overscan",
                 "defaultValue": "1"
             },
+            "hideDividers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Oculta os divisores entre op\u00E7\u00F5es consecutivas, sem alterar a altura das linhas."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-dividers",
+                "defaultValue": "false"
+            },
             "isOpen": {
                 "type": "boolean",
                 "mutable": true,
@@ -2071,7 +2214,7 @@ export class Select {
                             "name": "default",
                             "text": "'local'"
                         }],
-                    "text": "Define se as op\u00E7\u00F5es s\u00E3o filtradas localmente ou fornecidas por uma busca remota.\nEm `remote`, o componente emite `brSelectSearch`; a aplica\u00E7\u00E3o deve buscar,\nvalidar e aplicar as op\u00E7\u00F5es por `setOptions()`."
+                    "text": "Define se as op\u00E7\u00F5es s\u00E3o filtradas localmente ou fornecidas por uma busca remota.\nEm `remote`, o componente emite `brSelectSearch` e exibe as op\u00E7\u00F5es recebidas\nsem filtr\u00E1-las de novo pelo termo digitado; a aplica\u00E7\u00E3o deve buscar, validar e\naplicar a resposta com `setOptions()` ou re-renderizando os `br-select-option`.\nA sele\u00E7\u00E3o \u00E9 preservada mesmo quando n\u00E3o aparece na resposta seguinte."
                 },
                 "getter": false,
                 "setter": false,
@@ -2094,7 +2237,7 @@ export class Select {
                             "name": "default",
                             "text": "false"
                         }],
-                    "text": "Indica que uma busca remota de op\u00E7\u00F5es est\u00E1 pendente.\nEnquanto ativo, novas op\u00E7\u00F5es n\u00E3o podem ser selecionadas; a aplica\u00E7\u00E3o\ncontinua respons\u00E1vel por debounce, cancelamento, erros e autentica\u00E7\u00E3o."
+                    "text": "Indica que uma busca remota de op\u00E7\u00F5es est\u00E1 pendente.\nEnquanto ativo, a lista exibe o slot `loading` (padr\u00E3o: \"Pesquisando\u2026\") e novas\nop\u00E7\u00F5es n\u00E3o podem ser selecionadas; a aplica\u00E7\u00E3o continua respons\u00E1vel por\ndebounce, cancelamento, erros e autentica\u00E7\u00E3o."
                 },
                 "getter": false,
                 "setter": false,
@@ -2117,7 +2260,7 @@ export class Select {
                             "name": "default",
                             "text": "false"
                         }],
-                    "text": "Exibe o \u00EDcone de busca no campo de entrada."
+                    "text": "Exibe a lupa mesmo quando o select n\u00E3o \u00E9 filtr\u00E1vel; selects com `filterable`\nj\u00E1 a exibem. A lupa \u00E9 omitida quando o campo \u00E9 estreito demais (menos de\n128px) para comportar lupa, valor e seta."
                 },
                 "getter": false,
                 "setter": false,
@@ -2125,6 +2268,29 @@ export class Select {
                 "attribute": "show-search-icon",
                 "defaultValue": "false"
             },
+            "hideSearchIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Oculta a lupa mesmo quando `filterable` est\u00E1 ativo, sem desabilitar a busca.\nTem preced\u00EAncia visual sobre `showSearchIcon` e n\u00E3o altera o comportamento padr\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "hide-search-icon",
+                "defaultValue": "false"
+            },
             "unselectAllLabel": {
                 "type": "string",
                 "mutable": false,
@@ -2300,7 +2466,10 @@ export class Select {
     }
     static get states() {
         return {
+            "showValidationErrors": {},
+            "validationErrorMessage": {},
             "activeOptionIndex": {},
+            "isActiveIndicatorHidden": {},
             "displayValue": {},
             "searchTerm": {},
             "formDisabled": {},
@@ -2836,11 +3005,29 @@ export class Select {
     }
     static get listeners() {
         return [{
+                "name": "focusout",
+                "method": "handleSelectFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "invalid",
+                "method": "handleSelectInvalid",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
                 "name": "brSelectInputFocus",
                 "method": "handleSelectInputFocus",
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "pointerdown",
+                "method": "handleSelectPointerDown",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }, {
                 "name": "brSelectInputValueChange",
                 "method": "handleSelectInputValueChange",