@govbr-ds/webcomponents 2.3.0 → 2.5.0

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

@@ -4,33 +4,26 @@
  */
 import { Host, h } from "@stencil/core";
 import { reportInvalidPropValue } from "../../../shared/utils/prop-warning";
-import { resolveDensity, resolveIntegerPropValue, resolveNumberPropValue } from "../../../shared/utils/props";
+import { resolveAllowedPropValue, resolveDensity, resolveIntegerPropValue, resolveNumberPropValue, } from "../../../shared/utils/props";
 import { createRafBatcher } from "../../../shared/utils/raf-batcher";
-import { computeVirtualWindow } from "../../../shared/utils/virtual-scroll";
+import { filterSelectOptions, SELECT_ALL_OPTION_VALUE } from "../select.utils";
 /**
- * Subcomponente de lista virtualizada de opções, projetado para renderizar o conjunto de escolhas do `br-select`.
+ * Painel suspenso com lista virtualizada do `br-select`.
  *
- * ### Papel na composição
- * - Atua como o painel suspenso (popup `listbox`) que exibe os itens `br-select-option`.
- * - Implementa virtualização de itens para oferecer alta performance mesmo em listas extensas com centenas ou milhares de opções.
- * - Mantém o posicionamento flutuante e controla a rolagem de visualização do item ativo em navegação por teclado.
- *
- * ### Regra de uso e relacionamento
- * Gerenciado exclusivamente pelo componente pai `br-select`, que injeta a coleção normalizada em `options`, controla o estado de exibição (aberto/fechado), a seleção múltipla e o índice ativo. A prop `options` desta lista é um contrato interno de composição e não substitui a API de opções do `br-select`. A lista cria internamente elementos `br-select-option` para a janela virtualizada, em vez de exibir diretamente os filhos declarados no slot do pai. Não utilize `br-select-list` como controle autônomo de formulário, pois ele não possui associação nativa com formulários (`formAssociated`) nem campo de acionamento próprio.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ * É gerenciado internamente pelo `br-select` para exibir as opções com alta performance, mesmo em listas grandes. Não é necessário utilizá-lo de forma avulsa.
  *
  * @category Formulários, Seleção
  * @status stable
  * @part list - Contêiner visual da lista virtualizada.
- * @slot loading - Indicador exibido enquanto resultados remotos são carregados.
+ * @slot loading - Indicador exibido enquanto resultados remotos são carregados. Padrão: spinner com o texto "Pesquisando…".
  * @part loading - Área do indicador de carregamento.
  * @part option-group - Cabeçalho visual de um grupo de opções.
  */
 export class SelectList {
     constructor() {
         /**
-         * Define a densidade visual da lista, das opções e do indicador de carregamento.
+         * Define a densidade visual da lista, das opções regulares e do indicador de carregamento.
+         * A opção sintética de selecionar todos permanece com densidade `small`.
          * Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.
          *
          * @default 'medium'
@@ -53,6 +46,14 @@ export class SelectList {
          * @default ''
          */
         this.searchTerm = '';
+        /**
+         * Define se `searchTerm` filtra as opções (`local`) ou se as opções já chegam
+         * filtradas pelo servidor (`remote`). Nos dois modos, um termo sem resultados
+         * exibe a mensagem de lista vazia. Valores inválidos usam `local`.
+         *
+         * @default 'local'
+         */
+        this.searchMode = 'local';
         /** Indica que os resultados remotos estão sendo carregados.
          * @default false
          */
@@ -79,6 +80,11 @@ export class SelectList {
          * @default 0
          */
         this.overscan = 0;
+        /**
+         * Oculta os divisores entre opções consecutivas, sem alterar a altura das linhas.
+         * @default false
+         */
+        this.hideDividers = false;
         /**
          * Rótulo apresentado para a ação de selecionar todos no modo múltiplo.
          *
@@ -104,7 +110,10 @@ export class SelectList {
         this.isMultiple = false;
         this.scrollTop = 0;
         this.measuredItemHeight = null;
+        this.measuredSelectAllItemHeight = null;
         this.measurementFrame = null;
+        this.measurementInProgress = false;
+        this.measurementRequested = false;
         this.filteredOptionsCache = null;
         this.filteredOptionsCacheKey = '';
         this.virtualRowsCache = null;
@@ -139,11 +148,16 @@ export class SelectList {
             return;
         const selectedByValue = new Map(options.map((option) => [option.value, Boolean(option.selected)]));
         renderedOptions.forEach((option) => {
+            if (option.value === undefined)
+                return;
             const selected = selectedByValue.get(option.value);
             if (selected !== undefined && option.selected !== selected)
                 option.selected = selected;
         });
     }
+    get effectiveSearchMode() {
+        return resolveAllowedPropValue(this.el, 'searchMode', this.searchMode, ['local', 'remote'], 'local');
+    }
     get effectiveVisibleItems() {
         return resolveIntegerPropValue(this.el, 'visibleItems', this.visibleItems, 1, Number.MAX_SAFE_INTEGER, 6);
     }
@@ -157,7 +171,7 @@ export class SelectList {
         return resolveIntegerPropValue(this.el, 'overscan', this.overscan, 0, Number.MAX_SAFE_INTEGER, 0);
     }
     get effectiveActiveOptionIndex() {
-        return resolveIntegerPropValue(this.el, 'activeOptionIndex', this.activeOptionIndex, -1, Number.MAX_SAFE_INTEGER, -1);
+        return Number.isInteger(this.activeOptionIndex) && this.activeOptionIndex >= -1 ? this.activeOptionIndex : -1;
     }
     /**
      * O `br-select` fornece a opção sintética de selecionar todos antes de
@@ -170,12 +184,15 @@ export class SelectList {
     }
     disconnectedCallback() {
         this.scrollBatch.cancel();
+        this.measurementRequested = false;
         if (this.measurementFrame !== null) {
             cancelAnimationFrame(this.measurementFrame);
             this.measurementFrame = null;
         }
     }
     handleSearchTermChange() {
+        this.filteredOptionsCache = null;
+        this.virtualRowsCache = null;
         this.scrollTop = 0;
         if (this.listElement) {
             this.listElement.scrollTop = 0;
@@ -228,6 +245,7 @@ export class SelectList {
             this.options = [];
             this.scrollTop = 0;
             this.measuredItemHeight = null;
+            this.measuredSelectAllItemHeight = null;
             if (this.listElement) {
                 this.listElement.scrollTop = 0;
             }
@@ -280,11 +298,6 @@ export class SelectList {
         if (nextTerm === this.searchTerm)
             return;
         this.searchTerm = nextTerm;
-        this.scrollTop = 0;
-        if (this.listElement) {
-            this.listElement.scrollTop = 0;
-        }
-        this.scheduleMeasureItemHeight();
     }
     /**
      * Alterna a lista entre modo simples e múltiplo.
@@ -325,10 +338,9 @@ export class SelectList {
         const rowIndex = this.getRowIndexForOption(rows, index);
         if (rowIndex < 0)
             return false;
-        const rowHeight = this.getRowHeight();
         const viewportHeight = this.getViewportHeight();
-        const maxScrollTop = Math.max(0, rows.length * rowHeight - viewportHeight);
-        const nextScrollTop = Math.min(rowIndex * rowHeight, maxScrollTop);
+        const maxScrollTop = Math.max(0, this.getRowsHeight(rows) - viewportHeight);
+        const nextScrollTop = Math.min(this.getRowTop(rows, rowIndex), maxScrollTop);
         /*
          * Atualiza primeiro o estado que define a janela virtual. Dessa forma,
          * os itens do novo intervalo são renderizados antes de o viewport nativo
@@ -372,6 +384,18 @@ export class SelectList {
         await optionElement?.setFocus?.();
         return Boolean(optionElement);
     }
+    /** Torna o item ativo visível sem retirar o foco do campo. */
+    async revealOption(index) {
+        for (let attempt = 0; attempt < 3 && !this.getFilteredOptions()[index]; attempt += 1) {
+            await this.waitForNextFrame();
+        }
+        if (!this.getFilteredOptions()[index])
+            return false;
+        await this.waitForNextFrame();
+        await this.waitForNextFrame();
+        await this.ensureOptionVisible(index);
+        return Boolean(this.listElement);
+    }
     /**
      * Aciona a seleção programática de uma opção específica.
      *
@@ -426,7 +450,7 @@ export class SelectList {
         this.options = this.options.map((o) => ({ ...o, selected: false }));
     }
     isSelectAllOption(option) {
-        if (option.value === SelectList.SELECT_ALL_VALUE || option.value === '__select_all__')
+        if (option.value === SELECT_ALL_OPTION_VALUE)
             return true;
         const optionLabel = (option.label ?? option.value).trim();
         return optionLabel === this.selectAllLabel || optionLabel === this.unselectAllLabel;
@@ -442,7 +466,7 @@ export class SelectList {
     }
     createSelectAllOption() {
         return {
-            value: SelectList.SELECT_ALL_VALUE,
+            value: SELECT_ALL_OPTION_VALUE,
             label: this.selectAllLabel,
             selected: false,
             indeterminate: false,
@@ -538,7 +562,8 @@ export class SelectList {
             .trim();
     }
     getFilteredOptions() {
-        const normalizedTerm = this.normalizeSearchText(this.searchTerm);
+        // No modo remoto o servidor já filtrou: o termo serve só para o estado vazio.
+        const normalizedTerm = this.effectiveSearchMode === 'local' ? this.normalizeSearchText(this.searchTerm) : '';
         const cacheKey = `${normalizedTerm}|${this.effectiveMultiple}|${this.selectAllLabel}|${this.unselectAllLabel}|${this.options.length}`;
         if (this.options === this.filteredOptionsCacheSource &&
             cacheKey === this.filteredOptionsCacheKey &&
@@ -552,14 +577,7 @@ export class SelectList {
             return this.options;
         }
         this.filteredOptionsCacheKey = cacheKey;
-        this.filteredOptionsCache = this.options.filter((option) => {
-            if (this.isSelectAllOption(option))
-                return this.effectiveMultiple;
-            const label = this.normalizeSearchText(option.label ?? option.value);
-            const group = this.normalizeSearchText(option.group);
-            const value = this.normalizeSearchText(option.value);
-            return label.includes(normalizedTerm) || group.includes(normalizedTerm) || value.includes(normalizedTerm);
-        });
+        this.filteredOptionsCache = filterSelectOptions(this.options, this.searchTerm, this.selectAllLabel, this.unselectAllLabel);
         return this.filteredOptionsCache;
     }
     getVirtualRows() {
@@ -568,6 +586,9 @@ export class SelectList {
             return this.virtualRowsCache;
         }
         const rows = [];
+        if (filteredOptions.length === 0 && this.normalizeSearchText(this.searchTerm)) {
+            rows.push({ kind: 'empty', key: 'empty' });
+        }
         let previousGroup;
         filteredOptions.forEach((option, optionIndex) => {
             const group = option.group?.trim() || undefined;
@@ -594,27 +615,44 @@ export class SelectList {
         return rows.findIndex((row) => row.kind === 'option' && row.optionIndex === optionIndex);
     }
     getViewportHeight() {
-        const visibleRowCount = Math.min(this.getVirtualRows().length, this.effectiveVisibleItems);
-        return visibleRowCount * this.getRowHeight();
+        const rows = this.getVirtualRows();
+        return this.getRowsHeight(rows, Math.min(rows.length, this.effectiveVisibleItems));
     }
-    getRowHeight() {
+    getRowHeight(row) {
+        if (row?.kind === 'option' && this.isSelectAllOption(row.option)) {
+            return this.measuredSelectAllItemHeight ?? this.effectiveItemHeight;
+        }
         return this.measuredItemHeight ?? this.effectiveItemHeight;
     }
+    getRowsHeight(rows, endIndex = rows.length) {
+        const rowCount = Math.min(rows.length, Math.max(0, endIndex));
+        if (rowCount === 0)
+            return 0;
+        const itemHeight = this.measuredItemHeight ?? this.effectiveItemHeight;
+        return this.getRowHeight(rows[0]) + (rowCount - 1) * itemHeight;
+    }
+    getRowTop(rows, rowIndex) {
+        return this.getRowsHeight(rows, rowIndex);
+    }
     getVisibleRange() {
         const rows = this.getVirtualRows();
-        const { startIndex, endIndex } = computeVirtualWindow({
-            totalItems: rows.length,
-            itemHeight: this.getRowHeight(),
-            scrollTop: this.scrollTop,
-            viewportHeight: this.getViewportHeight(),
-            overscan: this.effectiveOverscan,
-        });
-        return { startIndex, endIndex };
+        if (rows.length === 0)
+            return { startIndex: 0, endIndex: 0 };
+        const viewportHeight = this.getViewportHeight();
+        const viewportBottom = this.scrollTop + viewportHeight;
+        const firstRowHeight = this.getRowHeight(rows[0]);
+        const itemHeight = this.measuredItemHeight ?? this.effectiveItemHeight;
+        const firstVisibleIndex = Math.min(rows.length - 1, this.scrollTop < firstRowHeight ? 0 : 1 + Math.floor((this.scrollTop - firstRowHeight) / itemHeight));
+        const endIndex = Math.min(rows.length, Math.max(firstVisibleIndex, 1 + Math.ceil((viewportBottom - firstRowHeight) / itemHeight)));
+        return {
+            startIndex: Math.max(0, firstVisibleIndex - this.effectiveOverscan),
+            endIndex: Math.min(rows.length, endIndex + this.effectiveOverscan),
+        };
     }
     clampScrollPosition() {
         if (!this.listElement)
             return;
-        const totalHeight = this.getVirtualRows().length * this.getRowHeight();
+        const totalHeight = this.getRowsHeight(this.getVirtualRows());
         const maxScrollTop = Math.max(0, totalHeight - this.getViewportHeight());
         const nextScrollTop = Math.min(Math.max(0, this.listElement.scrollTop), maxScrollTop);
         if (this.listElement.scrollTop !== nextScrollTop) {
@@ -629,19 +667,69 @@ export class SelectList {
             return;
         if (this.measurementFrame !== null)
             return;
+        if (this.measurementInProgress) {
+            this.measurementRequested = true;
+            return;
+        }
         this.measurementFrame = requestAnimationFrame(async () => {
             this.measurementFrame = null;
-            await this.measureItemHeight();
+            this.measurementInProgress = true;
+            try {
+                await this.measureItemHeight();
+            }
+            finally {
+                this.measurementInProgress = false;
+                if (this.measurementRequested) {
+                    this.measurementRequested = false;
+                    this.scheduleMeasureItemHeight();
+                }
+            }
         });
     }
     async measureItemHeight() {
-        const firstOption = this.listElement?.querySelector('br-select-option');
-        if (!firstOption?.getItemHeight)
-            return;
-        const nextHeight = await firstOption.getItemHeight();
-        if (!nextHeight || nextHeight <= 0 || nextHeight === this.measuredItemHeight)
+        const renderedOptions = Array.from(this.listElement?.querySelectorAll('br-select-option') ?? []);
+        const originalHeights = renderedOptions.map((element) => element.style.height);
+        renderedOptions.forEach((element) => {
+            element.style.height = 'auto';
+        });
+        let measurements;
+        try {
+            await this.waitForNextFrame();
+            measurements = await Promise.allSettled(renderedOptions.map((element) => element.getItemHeight?.()));
+        }
+        finally {
+            renderedOptions.forEach((element, index) => {
+                element.style.height = originalHeights[index];
+            });
+        }
+        const measuredOptions = measurements.map((measurement, index) => {
+            if (measurement.status === 'rejected')
+                throw measurement.reason;
+            return { element: renderedOptions[index], height: measurement.value };
+        });
+        const filteredOptions = this.getFilteredOptions();
+        const selectAllOption = measuredOptions.find(({ element }) => {
+            const optionIndex = Number(element.dataset.optionIndex);
+            const option = filteredOptions[optionIndex];
+            return Number.isInteger(optionIndex) && option !== undefined && this.isSelectAllOption(option);
+        });
+        const regularOption = measuredOptions.find(({ element }) => {
+            const optionIndex = Number(element.dataset.optionIndex);
+            const option = filteredOptions[optionIndex];
+            return Number.isInteger(optionIndex) && option !== undefined && !this.isSelectAllOption(option);
+        });
+        const nextSelectAllHeight = selectAllOption?.height;
+        const nextItemHeight = regularOption?.height;
+        const hasSelectAllHeight = Boolean(nextSelectAllHeight && nextSelectAllHeight > 0);
+        const hasItemHeight = Boolean(nextItemHeight && nextItemHeight > 0);
+        if ((!hasSelectAllHeight || nextSelectAllHeight === this.measuredSelectAllItemHeight) &&
+            (!hasItemHeight || nextItemHeight === this.measuredItemHeight)) {
             return;
-        this.measuredItemHeight = nextHeight;
+        }
+        if (nextSelectAllHeight && nextSelectAllHeight > 0)
+            this.measuredSelectAllItemHeight = nextSelectAllHeight;
+        if (nextItemHeight && nextItemHeight > 0)
+            this.measuredItemHeight = nextItemHeight;
         this.clampScrollPosition();
     }
     /**
@@ -660,9 +748,9 @@ export class SelectList {
         const rowIndex = this.getRowIndexForOption(rows, index);
         if (rowIndex < 0)
             return;
-        const rowHeight = this.getRowHeight();
+        const rowHeight = this.getRowHeight(rows[rowIndex]);
         const viewportHeight = this.getViewportHeight();
-        const optionTop = rowIndex * rowHeight;
+        const optionTop = this.getRowTop(rows, rowIndex);
         const optionBottom = optionTop + rowHeight;
         const viewportTop = this.listElement.scrollTop;
         const viewportBottom = viewportTop + viewportHeight;
@@ -673,7 +761,7 @@ export class SelectList {
         else if (optionBottom > viewportBottom) {
             nextScrollTop = optionBottom - viewportHeight;
         }
-        const maxScrollTop = Math.max(0, rows.length * rowHeight - viewportHeight);
+        const maxScrollTop = Math.max(0, this.getRowsHeight(rows) - viewportHeight);
         nextScrollTop = Math.min(Math.max(0, nextScrollTop), maxScrollTop);
         if (nextScrollTop === viewportTop)
             return;
@@ -688,36 +776,38 @@ export class SelectList {
         };
     }
     renderOption(option, optionIndex, rowIndex) {
-        const rowHeight = this.getRowHeight();
-        const optionPart = this.isSelectAllOption(option) ? 'option select-all' : 'option';
-        return (h("br-select-option", { part: optionPart, active: optionIndex === this.effectiveActiveOptionIndex, "data-option-index": optionIndex, density: this.effectiveDensity, disabled: option.disabled, id: `${this.el.id || 'br-select-list'}-option-${optionIndex}`, indeterminate: option.indeterminate,
-            // A seleção faz parte da identidade visual renderizada. Incluir o estado
-            // na chave evita que uma opção virtual reutilizada retenha o snapshot
-            // interno anterior do br-select-option/br-item.
-            key: `${option.value}:${option.selected ? 'selected' : 'unselected'}:${option.group ?? ''}`, label: option.label, ref: (element) => {
+        const isSelectAllOption = this.isSelectAllOption(option);
+        const row = this.getVirtualRows()[rowIndex];
+        const rowHeight = this.getRowHeight(row);
+        const optionPart = isSelectAllOption ? 'option select-all' : 'option';
+        return (h("br-select-option", { part: optionPart, active: optionIndex === this.effectiveActiveOptionIndex, "data-option-index": optionIndex, density: isSelectAllOption ? 'small' : this.effectiveDensity, disabled: option.disabled, id: `${this.el.id || 'br-select-list'}-option-${optionIndex}`, indeterminate: option.indeterminate, key: `${option.value}:${option.selected ? 'selected' : 'unselected'}:${option.group ?? ''}`, label: option.label, ref: (element) => {
                 if (element && option.group)
                     element.setAttribute('group', option.group);
             }, selected: option.selected, "show-checkbox": this.effectiveMultiple, style: {
                 boxSizing: 'border-box',
                 height: `${rowHeight}px`,
                 position: 'absolute',
-                top: `${rowIndex * rowHeight}px`,
+                top: `${this.getRowTop(this.getVirtualRows(), rowIndex)}px`,
                 left: '0',
                 right: '0',
             }, value: option.value }, option.content ? h("span", { innerHTML: option.content }) : (option.label ?? option.value)));
     }
     renderGroup(row, rowIndex) {
-        const rowHeight = this.getRowHeight();
+        const rows = this.getVirtualRows();
+        const rowHeight = this.getRowHeight(rows[rowIndex]);
         return (h("div", { "aria-hidden": "true", class: "option-group-label", key: row.key, part: "option-group", role: "presentation", style: {
                 boxSizing: 'border-box',
                 height: `${rowHeight}px`,
                 position: 'absolute',
-                top: `${rowIndex * rowHeight}px`,
+                top: `${this.getRowTop(rows, rowIndex)}px`,
                 left: '0',
                 right: '0',
             } }, row.group));
     }
     getVirtualScrollStyle() {
+        // Durante o carregamento não há linhas virtuais: a altura acompanha o indicador.
+        if (this.loading)
+            return { overflowY: 'auto', overflowX: 'hidden' };
         return {
             height: `${this.getViewportHeight()}px`,
             overflowY: 'auto',
@@ -726,7 +816,7 @@ export class SelectList {
     }
     getVirtualSpacerStyle() {
         return {
-            height: `${this.getVirtualRows().length * this.getRowHeight()}px`,
+            height: `${this.getRowsHeight(this.getVirtualRows())}px`,
             position: 'relative',
         };
     }
@@ -740,21 +830,46 @@ export class SelectList {
     }
     renderVirtualOptions() {
         const { startIndex, visibleRows } = this.getVirtualVisibleRows();
-        if (visibleRows.length === 0) {
-            return (h("div", { part: "empty-option", role: "option", "aria-selected": "false", tabIndex: 0 }, "Nenhum resultado encontrado"));
-        }
-        return (h("div", { style: this.getVirtualSpacerStyle() }, visibleRows.map((row, relativeIndex) => {
+        const renderedRows = visibleRows.flatMap((row, relativeIndex) => {
             const rowIndex = startIndex + relativeIndex;
             if (row.kind === 'group')
-                return this.renderGroup(row, rowIndex);
-            return this.renderOption(row.option, row.optionIndex, rowIndex);
-        })));
+                return [this.renderGroup(row, rowIndex)];
+            if (row.kind === 'empty') {
+                return [
+                    h("div", { key: row.key, part: "empty-option", role: "status", style: {
+                            boxSizing: 'border-box',
+                            height: `${this.getRowHeight(row)}px`,
+                            position: 'absolute',
+                            top: `${this.getRowTop(this.getVirtualRows(), rowIndex)}px`,
+                            left: '0',
+                            right: '0',
+                        } }, "Nenhum resultado encontrado"),
+                ];
+            }
+            const option = this.renderOption(row.option, row.optionIndex, rowIndex);
+            const nextRow = this.getVirtualRows()[rowIndex + 1];
+            if (this.hideDividers || nextRow?.kind !== 'option')
+                return [option];
+            // O divisor ocupa a borda da linha, sem criar um índice ou altura extra.
+            return [
+                option,
+                h("br-divider", { key: `divider-${row.key}`, part: "option-divider", "aria-hidden": "true", orientation: "horizontal", thickness: "small", marginTop: 0, marginBottom: 0, marginLeft: 0, marginRight: 0, style: {
+                        position: 'absolute',
+                        top: `calc(${this.getRowTop(this.getVirtualRows(), rowIndex + 1)}px - var(--surface-width-sm, 1px))`,
+                        left: '0',
+                        right: '0',
+                        pointerEvents: 'none',
+                        zIndex: '1',
+                    } }),
+            ];
+        });
+        return h("div", { style: this.getVirtualSpacerStyle() }, renderedRows);
     }
     renderLoading() {
-        return (h("div", { part: "loading", role: "status", "aria-live": "polite" }, h("slot", { name: "loading" }, h("br-loading", { density: this.effectiveDensity, label: "Buscando op\u00E7\u00F5es" }))));
+        return (h("div", { part: "loading", role: "status", "aria-live": "polite" }, h("slot", { name: "loading" }, h("br-loading", { size: "small", label: "Pesquisando\u2026", labelPosition: "right" }))));
     }
     render() {
-        return (h(Host, { key: '47c188f8f3e86d028476b8583d667e4eb412ec78' }, h("div", { key: '36386dc9532a3bd3561e319493ec7b86100be204', class: this.getCssClassMap(), part: "list", ref: (el) => (this.listElement = el), onScroll: this.handleScroll, style: this.getVirtualScrollStyle() }, this.loading ? this.renderLoading() : this.renderVirtualOptions())));
+        return (h(Host, { key: 'b374cf9ebd19771a1a1dfecc4a33f6447b59fba6' }, h("div", { key: '665a2c3efef778936ca27d376c48de3cbf38f685', class: this.getCssClassMap(), part: "list", tabIndex: -1, ref: (el) => (this.listElement = el), onScroll: this.handleScroll, style: this.getVirtualScrollStyle() }, this.loading ? this.renderLoading() : this.renderVirtualOptions())));
     }
     static get is() { return "br-select-list"; }
     static get encapsulation() { return "shadow"; }
@@ -792,7 +907,7 @@ export class SelectList {
                             "name": "default",
                             "text": "'medium'"
                         }],
-                    "text": "Define a densidade visual da lista, das op\u00E7\u00F5es e do indicador de carregamento.\nAceita `small`, `medium` ou `large`. Valores inv\u00E1lidos usam `medium`."
+                    "text": "Define a densidade visual da lista, das op\u00E7\u00F5es regulares e do indicador de carregamento.\nA op\u00E7\u00E3o sint\u00E9tica de selecionar todos permanece com densidade `small`.\nAceita `small`, `medium` ou `large`. Valores inv\u00E1lidos usam `medium`."
                 },
                 "getter": false,
                 "setter": false,
@@ -833,7 +948,7 @@ export class SelectList {
             },
             "searchTerm": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -854,6 +969,36 @@ export class SelectList {
                 "attribute": "search-term",
                 "defaultValue": "''"
             },
+            "searchMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SelectSearchMode",
+                    "resolved": "\"local\" | \"remote\"",
+                    "references": {
+                        "SelectSearchMode": {
+                            "location": "import",
+                            "path": "../select.types",
+                            "id": "src/components/select/select.types.ts::SelectSearchMode",
+                            "referenceLocation": "SelectSearchMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'local'"
+                        }],
+                    "text": "Define se `searchTerm` filtra as op\u00E7\u00F5es (`local`) ou se as op\u00E7\u00F5es j\u00E1 chegam\nfiltradas pelo servidor (`remote`). Nos dois modos, um termo sem resultados\nexibe a mensagem de lista vazia. Valores inv\u00E1lidos usam `local`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-mode",
+                "defaultValue": "'local'"
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": false,
@@ -946,6 +1091,29 @@ export class SelectList {
                 "attribute": "overscan",
                 "defaultValue": "0"
             },
+            "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"
+            },
             "selectAllLabel": {
                 "type": "string",
                 "mutable": false,
@@ -1025,7 +1193,8 @@ export class SelectList {
             "isOpen": {},
             "isMultiple": {},
             "scrollTop": {},
-            "measuredItemHeight": {}
+            "measuredItemHeight": {},
+            "measuredSelectAllItemHeight": {}
         };
     }
     static get methods() {
@@ -1287,6 +1456,27 @@ export class SelectList {
                         }]
                 }
             },
+            "revealOption": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Torna o item ativo vis\u00EDvel sem retirar o foco do campo.",
+                    "tags": []
+                }
+            },
             "setOptionSelected": {
                 "complexType": {
                     "signature": "(index: number, selected?: boolean) => Promise<boolean>",
@@ -1351,4 +1541,3 @@ export class SelectList {
 }
 SelectList.SELECT_ALL_LABEL = 'Selecionar todos';
 SelectList.DESELECT_ALL_LABEL = 'Desselecionar todos';
-SelectList.SELECT_ALL_VALUE = 'Alternar todos';