@govbr-ds/webcomponents 2.3.0 → 2.4.0

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

@@ -12,7 +12,7 @@ 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'];
 /**
@@ -27,6 +27,20 @@ const SELECT_AUTOCOMPLETE_VALUES = ['on', 'off'];
  * - **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.
  *
+ * ### Navegação por teclado
+ *
+ * O foco permanece no campo `combobox` enquanto a lista está aberta; a opção em destaque é comunicada por `aria-activedescendant`.
+ * Ao receber foco, o campo abre a lista sem alterar a seleção atual.
+ *
+ * - **ArrowDown / ArrowUp:** abre a lista e destaca a próxima opção na direção pressionada; com a lista aberta, move o destaque sem mover o foco físico.
+ * - **Home / End:** em modo não filtrável, destaca a primeira ou a última opção habilitada; em modo filtrável, preserva o movimento do cursor no texto.
+ * - **Enter:** abre a lista quando fechada e confirma a opção destacada quando aberta.
+ * - **Espaço:** confirma a opção destacada em modo não filtrável; em modo filtrável, insere um espaço no campo de busca.
+ * - **Escape:** fecha a lista, remove o destaque e devolve o foco ao campo.
+ * - **Tab:** fecha a lista e deixa o navegador mover o foco para o próximo controle, sem alterar a seleção implicitamente.
+ * - **Busca incremental:** em modo não filtrável, caracteres consecutivos destacam a primeira opção habilitada correspondente; em modo filtrável, a digitação filtra a lista.
+ * - **Alt+ArrowDown / Alt+ArrowUp:** abre ou fecha a lista sem alterar a seleção.
+ *
  * ### Quando utilizar
  *
  * - **Utilize quando:**
@@ -143,6 +157,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 +213,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.
          *
@@ -292,6 +312,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 +322,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 +346,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 +372,8 @@ export class Select {
         this.formDisabled = disabled;
     }
     formResetCallback() {
+        this.showValidationErrors = false;
+        this.validationErrorMessage = '';
         this.validationRunId++;
         this.validatorMessage = null;
         this.customValidationMessage = '';
@@ -476,7 +509,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 +587,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())
@@ -581,21 +633,27 @@ export class Select {
         }
     }
     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 +666,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 +687,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 +718,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 +753,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 +805,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 +856,7 @@ export class Select {
             this.open = false;
         else
             this.isOpen = false;
+        this.typeAhead = '';
         this.clearSearch();
     }
     /**
@@ -817,9 +905,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 +927,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 +1036,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 +1250,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 +1267,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 +1326,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 +1336,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 +1393,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 +1408,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 +1481,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 +1511,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;
@@ -1443,25 +1618,12 @@ export class Select {
         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);
+        return filterSelectOptions(options, this.filterable && this.effectiveSearchMode === 'local' ? this.searchTerm : '', this.selectAllLabel, this.unselectAllLabel);
     }
     clearSearch() {
         if (!this.searchTerm)
@@ -1488,14 +1650,17 @@ 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", 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, 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.filterable && this.effectiveSearchMode === 'local' ? this.searchTerm : '', 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 : '');
+                void this.getSelectListController()?.setSearchTerm?.(this.filterable && this.effectiveSearchMode === 'local' ? this.searchTerm : '');
             } }, h("slot", null), h("slot", { name: "loading", slot: "loading" })));
     }
     renderHiddenSelect() {
@@ -1535,7 +1700,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: '4ed2f91b85ca8a208a3a090d65391b91d8dcd27b', "aria-busy": this.isValidating || this.loading ? 'true' : null }, h("div", { key: 'cef813f9d0a45140eb99bc63343991b4012c7599', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), h("div", { key: '9b80f32b29b8496d35d6f77c320d777cf855ac03', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validationErrorMessage }, h("slot", { key: 'd998e50ccc9ac15515ec9c58c31c444212a6a555', 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: '2bf9e897eb977caa4349242960580fd3ec9dd1bc', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: 'e0579acbfb5a288ecce89b85f8f6899640dee957', name: "validation-loading" })), this.renderHiddenSelect())));
     }
     static get is() { return "br-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1620,7 +1785,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 +2004,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,
@@ -2300,7 +2488,10 @@ export class Select {
     }
     static get states() {
         return {
+            "showValidationErrors": {},
+            "validationErrorMessage": {},
             "activeOptionIndex": {},
+            "isActiveIndicatorHidden": {},
             "displayValue": {},
             "searchTerm": {},
             "formDisabled": {},
@@ -2836,11 +3027,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",