@govbr-ds/webcomponents 2.1.1 → 2.1.3

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

@@ -8,6 +8,7 @@ import { listenForExternalBlockingSurface } from "../../shared/utils/floating-su
 import { getFormValidationState, isFormControlDisabled, safeSetFormValue, syncNativeFormValidity, } from "../../shared/utils/form";
 import { hasAssignedSlotContent, hasNamedLightDomSlot } from "../../shared/utils/slot";
 import { resolveFormValidator } from "../../shared/utils/validator";
+import { transitionAllSelection, transitionSelection } from "./select.utils";
 let selectId = 0;
 /**
  * ## Design System
@@ -192,6 +193,7 @@ export class Select {
         this.validatorMessage = null;
         this.hasFeedbackSlot = false;
         this.hasValidationLoadingSlot = false;
+        this.selectedValuesState = [];
         this.customValidationMessage = '';
         this.validationRunId = 0;
         this.lastAnnouncedOpen = false;
@@ -199,6 +201,9 @@ export class Select {
         this.suppressValueChange = false;
         this.hasImperativeOptions = false;
         this.remoteSelectedOptions = new Map();
+        this.selectionInitialized = false;
+        this.selectedValues = [];
+        this.suppressFocusOpen = false;
         /**
          * Sincroniza as opções declaradas no slot com a lista interna renderizada.
          *
@@ -209,10 +214,11 @@ export class Select {
         this.syncOptionsFromSlot = (updateDisplayValue = true) => {
             if (this.hasImperativeOptions)
                 return;
-            const nodes = this.slotElement?.assignedNodes({ flatten: true }) ?? [];
+            const nodes = this.slotElement?.assignedNodes({ flatten: true }) ?? Array.from(this.el.childNodes);
             const options = nodes.map((n) => this.nodeToOption(n)).filter((o) => Boolean(o));
             // Envia opções para o br-select-list
-            this.selectListElement?.setOptions(options);
+            if (this.selectListElement)
+                this.selectListElement.options = this.getListOptions(options);
             if (updateDisplayValue)
                 this.syncDisplayValue(options);
         };
@@ -242,6 +248,10 @@ export class Select {
         this.setSelectionMode(this.effectiveMultiple);
         const initialOptions = this.getHostOptions();
         const propOptions = this.getOptionsProp();
+        const sourceOptions = initialOptions.length === 0 && propOptions.length > 0 ? propOptions : initialOptions;
+        this.setSelectedValues(this.valueFromPublicValue(this.value) ??
+            sourceOptions.filter((option) => option.selected).map((option) => option.value));
+        this.selectionInitialized = true;
         if (initialOptions.length === 0 && propOptions.length > 0) {
             this.pendingOptions = propOptions;
             this.syncDisplayValue(propOptions);
@@ -263,7 +273,7 @@ export class Select {
             this.slotElement.addEventListener('slotchange', this.handleSlotChange);
         }
         if (this.pendingOptions && this.selectListElement) {
-            this.selectListElement.setOptions(this.pendingOptions);
+            this.selectListElement.options = this.getListOptions(this.pendingOptions);
             this.pendingOptions = null;
         }
         this.isValueChangeReady = true;
@@ -272,6 +282,10 @@ export class Select {
             this.attachBlockingSurfaceListener();
         this.updateValidity();
     }
+    componentDidRender() {
+        this.syncNativeSelectSelection();
+        this.updateValidity();
+    }
     disconnectedCallback() {
         if (this.slotElement) {
             this.slotElement.removeEventListener('slotchange', this.handleSlotChange);
@@ -288,6 +302,49 @@ export class Select {
     get effectiveOpen() {
         return this.open ?? this.isOpen;
     }
+    valueFromPublicValue(value) {
+        if (this.effectiveMultiple)
+            return Array.isArray(value) ? [...new Set(value.filter(Boolean))] : null;
+        return typeof value === 'string' && value ? [value] : null;
+    }
+    setSelectedValues(values) {
+        const next = [...new Set(values.filter(Boolean))];
+        if (!this.effectiveMultiple && next.length > 1)
+            next.splice(1);
+        if (this.selectedValues.length === next.length &&
+            this.selectedValues.every((value, index) => value === next[index]))
+            return;
+        this.selectedValues = next;
+        this.selectedValuesState = next;
+    }
+    get canonicalSelectedValues() {
+        // A leitura do @State registra a dependência reativa; o campo síncrono evita snapshots atrasados na mesma interação.
+        void this.selectedValuesState;
+        return this.selectedValues;
+    }
+    applyCanonicalSelection(options, values = this.canonicalSelectedValues) {
+        if (!this.selectionInitialized)
+            return options.map((option) => ({ ...option }));
+        const selected = new Set(values);
+        return options.map((option) => ({ ...option, selected: selected.has(option.value) }));
+    }
+    getListOptions(options) {
+        const normalized = this.applyCanonicalSelection(options).filter((option) => option.value !== '__select_all__');
+        if (!this.effectiveMultiple)
+            return normalized;
+        const selectable = normalized.filter((option) => !this.isSelectAllLabel(this.getOptionLabel(option)));
+        const allSelected = selectable.length > 0 && selectable.every((option) => Boolean(option.selected));
+        const anySelected = selectable.some((option) => Boolean(option.selected));
+        return [
+            {
+                value: '__select_all__',
+                label: allSelected ? this.unselectAllLabel : this.selectAllLabel,
+                selected: allSelected,
+                indeterminate: anySelected && !allSelected,
+            },
+            ...selectable,
+        ];
+    }
     isDisabled() {
         return isFormControlDisabled(this.disabled, this.formDisabled);
     }
@@ -360,6 +417,8 @@ export class Select {
     }
     handleSelectInputFocus() {
         this.activeOptionIndex = -1;
+        if (this.suppressFocusOpen)
+            return;
         if (this.filterable && !this.effectiveOpen) {
             this.clearSearch();
             void this.show();
@@ -396,16 +455,50 @@ export class Select {
         this.toggleOpenFromPointer();
     }
     handleSelectOptionStateChange(event) {
-        this.syncSlottedOptionSelection(event.detail);
-        this.rememberRemoteSelections(this.getCurrentOptions());
-        this.syncDisplayValue();
-        this.syncActiveOptionIndex(event.detail);
         event.stopPropagation();
-        const detail = { selected: event.detail.selected, value: event.detail.value };
+        const detail = event.detail;
+        // 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;
+        const sourceOptions = Array.isArray(listOptions) && listOptions.length > 0
+            ? listOptions.map((option) => ({ ...option }))
+            : this.getCurrentOptions();
+        // No modo simples, o evento é a decisão final da interação. A lista
+        // virtualizada e as opções projetadas podem ainda conter o snapshot da
+        // interação anterior durante cliques consecutivos; derivar a coleção a
+        // 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)))
+            .map((option) => option.value);
+        const transition = this.isSelectAllLabel(detail.label ?? detail.value)
+            ? transitionAllSelection(this.selectedValues, Boolean(detail.selected), selectableValues)
+            : transitionSelection({
+                currentValues: this.selectedValues,
+                multiple: this.effectiveMultiple,
+                value: detail.value,
+                selected: Boolean(detail.selected),
+            });
+        this.setSelectedValues(transition.values);
+        const options = this.applyCanonicalSelection(sourceOptions, transition.values);
+        if (this.selectListElement)
+            this.selectListElement.options = this.getListOptions(options);
+        this.reflectRenderedListSelection(transition.values, options);
+        this.syncSlottedOptionSelection(transition.values);
+        this.rememberRemoteSelections(options);
+        this.syncDisplayValue(options);
+        this.syncActiveOptionIndex(event.detail);
         this.emitStateChange(detail);
         this.updateValidity();
-        if (!this.keepOpenOnSelect && !this.effectiveMultiple)
-            void this.close();
+        if (!transition.changed)
+            return;
+        if (!this.effectiveMultiple) {
+            this.suppressFocusOpen = true;
+            void this.selectInputElement?.setFocus?.();
+            void this.close().finally(() => {
+                this.suppressFocusOpen = false;
+            });
+        }
         dispatchNativeFormEvent(this.el, 'input');
         dispatchNativeFormEvent(this.el, 'change');
     }
@@ -622,7 +715,7 @@ export class Select {
         this.suppressValueChange = true;
         try {
             if (this.selectListElement) {
-                await this.selectListElement.setOptions(nextOptions);
+                this.selectListElement.options = this.getListOptions(nextOptions);
             }
             else {
                 this.pendingOptions = nextOptions;
@@ -641,20 +734,20 @@ export class Select {
      */
     async setOption(option) {
         this.hasImperativeOptions = true;
+        const currentOptions = this.getCurrentOptions();
+        const index = currentOptions.findIndex((currentOption) => currentOption.value === option.value);
+        const nextOptions = [...currentOptions];
+        if (index === -1)
+            nextOptions.push(option);
+        else
+            nextOptions[index] = option;
         if (this.selectListElement) {
-            await this.selectListElement.setOption(option);
-        }
-        else if (this.pendingOptions) {
-            const index = this.pendingOptions.findIndex((currentOption) => currentOption.value === option.value);
-            if (index !== -1)
-                this.pendingOptions[index] = option;
-            else
-                this.pendingOptions.push(option);
+            this.selectListElement.options = this.getListOptions(nextOptions);
         }
         else {
-            this.pendingOptions = [option];
+            this.pendingOptions = nextOptions;
         }
-        this.syncDisplayValue();
+        this.syncDisplayValue(nextOptions);
     }
     getHostOptions() {
         return Array.from(this.el.childNodes)
@@ -683,15 +776,16 @@ export class Select {
         const rawLabel = el.getAttribute('label') ?? el.label ?? '';
         let value = String(rawValue || '').trim();
         let label = String(rawLabel || '').trim();
+        const inner = this.extractInnerTextFromOption(el);
+        const content = (el.innerHTML || '').trim();
         const selected = el.hasAttribute('selected') || Boolean(el.selected);
         if (!value) {
-            const inner = this.extractInnerTextFromOption(el);
             if (inner)
                 value = inner.trim();
         }
         if (!label)
-            label = value;
-        return { value: value || '', label: label || undefined, selected };
+            label = inner?.trim() || value;
+        return { value: value || '', label: label || undefined, selected, content: content || undefined };
     }
     extractInnerTextFromOption(el) {
         const fromSlot = this.getAssignedSlotText(el);
@@ -744,6 +838,9 @@ export class Select {
         this.syncValue(resolvedOptions);
     }
     syncValue(options) {
+        this.setSelectedValues(options
+            .filter((option) => option.selected && !this.isSelectAllLabel(this.getOptionLabel(option)))
+            .map((option) => option.value));
         const nextValue = this.getSerializedValue(options);
         this.syncFormState(options);
         if (this.value === nextValue)
@@ -783,15 +880,18 @@ export class Select {
     }
     applySelectedValue(value) {
         const currentOptions = this.getCurrentOptions();
+        const requestedValues = this.valueFromPublicValue(value) ?? [];
+        this.setSelectedValues(requestedValues);
         const options = currentOptions.map((option) => ({
             ...option,
-            selected: this.effectiveMultiple ? Array.isArray(value) && value.includes(option.value) : value === option.value,
+            selected: requestedValues.includes(option.value),
         }));
         this.isApplyingExternalValue = true;
         if (this.selectListElement)
-            void this.selectListElement.setOptions(options);
+            this.selectListElement.options = this.getListOptions(options);
         else
             this.pendingOptions = options;
+        this.reflectRenderedListSelection(requestedValues, options);
         this.value = value;
         this.isApplyingExternalValue = false;
         this.remoteSelectedOptions.clear();
@@ -814,7 +914,7 @@ export class Select {
     }
     applyRemoteSelection(options) {
         this.rememberRemoteSelections(this.getCurrentOptions());
-        const selectedValues = new Set(Array.isArray(this.value) ? this.value : [this.value ?? '']);
+        const selectedValues = new Set(this.selectedValues);
         const nextOptions = options.map((option) => ({
             ...option,
             selected: selectedValues.has(option.value) || Boolean(option.selected),
@@ -849,38 +949,36 @@ export class Select {
         const selectedValues = selected.map((option) => option.value);
         const formValue = this.effectiveMultiple ? JSON.stringify(selectedValues) : (selectedValues[0] ?? null);
         safeSetFormValue(this.elementInternals, formValue);
-        if (this.nativeSelect) {
-            this.nativeSelect.value = selectedValues[0] ?? '';
-            const selectedSet = new Set(selectedValues);
-            const optionNodes = Array.from(this.nativeSelect.options);
-            selectedSet.forEach((value) => {
-                if (optionNodes.some((option) => option.value === value))
-                    return;
-                const option = document.createElement('option');
-                option.value = value;
-                this.nativeSelect?.append(option);
-            });
-            optionNodes.forEach((option) => {
-                if (option.value !== '' && !selectedSet.has(option.value))
-                    option.remove();
-                else
-                    option.selected = selectedSet.has(option.value);
-            });
-            this.nativeSelect.value = selectedValues[0] ?? '';
-        }
-        this.updateValidity();
+        this.syncNativeSelectSelection(selectedValues);
+        this.updateValidity(selectedValues.length);
     }
-    updateValidity() {
-        if (!this.nativeSelect)
+    syncNativeSelectSelection(values = this.getSelectedValues()) {
+        const nativeSelect = this.getNativeSelect();
+        if (!nativeSelect)
+            return;
+        const selectedValues = new Set(values);
+        Array.from(nativeSelect.options).forEach((option) => {
+            option.selected = option.value === '' ? selectedValues.size === 0 : selectedValues.has(option.value);
+        });
+    }
+    getSelectedValues() {
+        return [...this.selectedValues];
+    }
+    updateValidity(selectedCount = this.getSelectedValues().length) {
+        const nativeSelect = this.getNativeSelect();
+        if (!nativeSelect)
             return;
-        const selectedCount = this.getFormOptions(this.getCurrentOptions()).filter((option) => option.selected).length;
         const selectionMessage = this.effectiveMultiple && this.minSelections > 0 && selectedCount < this.minSelections
             ? `Selecione pelo menos ${this.minSelections} opções.`
             : this.effectiveMultiple && this.maxSelections > 0 && selectedCount > this.maxSelections
                 ? `Selecione no máximo ${this.maxSelections} opções.`
                 : '';
-        this.nativeSelect.setCustomValidity(this.customValidationMessage || this.validatorMessage || selectionMessage);
-        syncNativeFormValidity(this.elementInternals, this.nativeSelect);
+        nativeSelect.setCustomValidity(this.customValidationMessage || this.validatorMessage || selectionMessage);
+        syncNativeFormValidity(this.elementInternals, nativeSelect);
+    }
+    getNativeSelect() {
+        return (this.el.shadowRoot?.querySelector('select[part="hidden-select"]') ??
+            this.nativeSelect);
     }
     resolveValidator() {
         return resolveFormValidator(this.validator);
@@ -991,6 +1089,17 @@ export class Select {
         const index = this.getCurrentActiveIndex();
         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,
+                },
+            }));
+            return;
+        }
         const didSelect = await this.getSelectListController()?.setOptionSelected?.(index, nextSelected);
         if (didSelect) {
             this.activeOptionIndex = index;
@@ -1011,55 +1120,19 @@ export class Select {
      * Essa sincronização mantém as props/atributos das opções declaradas pelo consumidor em
      * conformidade com o estado calculado internamente, inclusive no caso do "selecionar todos".
      */
-    syncSlottedOptionSelection(detail) {
-        if (!this.slotElement || !detail?.value)
-            return;
-        const slottedOptions = this.slotElement
-            .assignedElements({ flatten: true })
-            .filter((el) => el.tagName.toLowerCase() === 'br-select-option');
+    syncSlottedOptionSelection(values = this.selectedValues) {
+        const slottedOptions = Array.from(this.el.children).filter((el) => el.tagName.toLowerCase() === 'br-select-option');
         if (slottedOptions.length === 0)
             return;
-        const detailLabel = (detail.label ?? detail.value).trim();
-        const isSelectAll = this.isSelectAllLabel(detailLabel);
-        if (this.effectiveMultiple && isSelectAll) {
-            slottedOptions.forEach((option) => {
-                const optionLabel = (option.label ?? option.value).trim();
-                const isSelectAllOption = this.isSelectAllLabel(optionLabel);
-                if (isSelectAllOption) {
-                    option.indeterminate = false;
-                    option.selected = Boolean(detail.selected);
-                    this.normalizeSelectAllState(option);
-                    if (option.selected)
-                        option.setAttribute('selected', '');
-                    else
-                        option.removeAttribute('selected');
-                    return;
-                }
-                option.selected = Boolean(detail.selected);
-                if (option.selected)
-                    option.setAttribute('selected', '');
-                else
-                    option.removeAttribute('selected');
-            });
-            return;
-        }
+        const selectedValues = new Set(values);
         slottedOptions.forEach((option) => {
-            const isTarget = option.value === detail.value;
-            const nextSelected = this.effectiveMultiple ? (isTarget ? Boolean(detail.selected) : option.selected) : isTarget;
-            if (isTarget) {
-                option.indeterminate = false;
-            }
-            option.selected = nextSelected;
-            if (nextSelected) {
+            const resolved = this.optionElementToData(option).value;
+            option.selected = selectedValues.has(resolved);
+            option.indeterminate = false;
+            if (option.selected)
                 option.setAttribute('selected', '');
-            }
-            else {
-                option.removeAttribute('selected');
-            }
-            if (!this.effectiveMultiple && !isTarget) {
-                option.selected = false;
+            else
                 option.removeAttribute('selected');
-            }
         });
         if (!this.effectiveMultiple)
             return;
@@ -1082,6 +1155,26 @@ export class Select {
                 option.removeAttribute('selected');
         });
     }
+    reflectRenderedListSelection(values, sourceOptions) {
+        const renderedOptions = this.selectListElement?.shadowRoot?.querySelectorAll('br-select-option');
+        if (!renderedOptions)
+            return;
+        const selectedValues = new Set(values);
+        const selectableOptions = (sourceOptions?.length
+            ? sourceOptions
+            : Array.from(renderedOptions).map((option) => ({ label: option.label, value: option.value }))).filter((option) => !this.isSelectAllLabel(this.getOptionLabel(option)));
+        const allSelected = selectableOptions.length > 0 && selectableOptions.every((option) => selectedValues.has(option.value));
+        const anySelected = selectableOptions.some((option) => selectedValues.has(option.value));
+        renderedOptions.forEach((option) => {
+            if (this.isSelectAllLabel(option.label ?? option.value)) {
+                option.indeterminate = anySelected && !allSelected;
+                option.selected = allSelected;
+                option.label = this.getSelectAllLabel(allSelected, option.indeterminate);
+                return;
+            }
+            option.selected = selectedValues.has(option.value);
+        });
+    }
     isSelectAllLabel(label) {
         return label === this.selectAllLabel || label === this.unselectAllLabel;
     }
@@ -1162,6 +1255,7 @@ export class Select {
      * A precedência é: lista interna, opções pendentes, conteúdo do slot e, por último,
      * os filhos atuais do host.
      */
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: prioriza a precedência entre slot, lista e opções remotas.
     getCurrentOptions() {
         // As opções projetadas são a fonte canônica quando não há coleção
         // imperativa: a lista virtualizada pode manter um snapshot enquanto o
@@ -1171,21 +1265,53 @@ export class Select {
             const slotOptions = nodes
                 .map((node) => this.nodeToOption(node))
                 .filter((option) => Boolean(option));
-            if (slotOptions.length > 0)
-                return slotOptions;
+            if (slotOptions.length > 0) {
+                const normalizedSlotOptions = this.applyCanonicalSelection(slotOptions);
+                if (this.effectiveMultiple &&
+                    !normalizedSlotOptions.some((option) => this.isSelectAllLabel(this.getOptionLabel(option)))) {
+                    normalizedSlotOptions.unshift({
+                        value: '__select_all__',
+                        label: this.selectAllLabel,
+                        selected: false,
+                        indeterminate: false,
+                    });
+                }
+                return normalizedSlotOptions;
+            }
         }
         const listOptions = this.getSelectListController()?.options;
         if (Array.isArray(listOptions) && listOptions.length > 0) {
             const normalizedListOptions = listOptions.map((option) => ({ ...option }));
             const hasRealOptions = normalizedListOptions.some((option) => !this.isSelectAllLabel(this.getOptionLabel(option)));
             if (hasRealOptions) {
-                return normalizedListOptions;
+                if (this.effectiveMultiple &&
+                    !normalizedListOptions.some((option) => this.isSelectAllLabel(this.getOptionLabel(option)))) {
+                    normalizedListOptions.unshift({
+                        value: '__select_all__',
+                        label: this.selectAllLabel,
+                        selected: false,
+                        indeterminate: false,
+                    });
+                }
+                return this.applyCanonicalSelection(normalizedListOptions);
             }
         }
         if (this.pendingOptions) {
-            return this.pendingOptions.map((option) => ({ ...option }));
+            return this.applyCanonicalSelection(this.pendingOptions);
         }
-        return this.getHostOptions();
+        const hostOptions = this.applyCanonicalSelection(this.getHostOptions());
+        if (this.effectiveMultiple && hostOptions.length > 0) {
+            return [
+                {
+                    value: '__select_all__',
+                    label: this.selectAllLabel,
+                    selected: false,
+                    indeterminate: false,
+                },
+                ...hostOptions,
+            ];
+        }
+        return hostOptions;
     }
     normalizeSearchText(value) {
         return value
@@ -1235,7 +1361,7 @@ export class Select {
         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, "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.autocomplete, "input-width": this.inputWidth, role: "combobox", value: this.filterable && this.effectiveOpen ? this.searchTerm : this.getRenderedDisplayValue() }));
     }
     renderSelectList() {
-        return (h("br-select-list", { part: "list", exportparts: "list, option, checkbox, select-all, empty-option, option-checkbox, option-radio", "active-option-index": this.activeOptionIndex, "aria-label": this.getAccessibleLabel(), "aria-multiselectable": this.effectiveMultiple ? 'true' : 'false', id: this.listboxId, "visible-items": this.visibleItems, "item-height": this.itemHeight, overscan: this.overscan, "search-term": this.filterable && this.searchMode === 'local' ? this.searchTerm : '', role: "listbox", "select-all-label": this.selectAllLabel, "unselect-all-label": this.unselectAllLabel, ref: (el) => {
+        return (h("br-select-list", { part: "list", options: this.getCurrentOptions(), exportparts: "list, option, checkbox, select-all, empty-option, option-checkbox, option-radio", "active-option-index": this.activeOptionIndex, "aria-label": this.getAccessibleLabel(), "aria-multiselectable": this.effectiveMultiple ? 'true' : 'false', id: this.listboxId, "visible-items": this.visibleItems, "item-height": this.itemHeight, overscan: this.overscan, "search-term": this.filterable && this.searchMode === '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);
@@ -1243,9 +1369,8 @@ export class Select {
             } }, h("slot", null), h("slot", { name: "loading", slot: "loading" })));
     }
     renderHiddenSelect() {
-        const selectedOptions = this.getFormOptions(this.getCurrentOptions())
-            .filter((option) => !this.isSelectAllLabel(this.getOptionLabel(option)))
-            .filter((option) => option.selected);
+        const options = this.getFormOptions(this.getCurrentOptions()).filter((option) => !this.isSelectAllLabel(this.getOptionLabel(option)));
+        const hasSelection = options.some((option) => option.selected);
         return (h("select", { ref: (el) => (this.nativeSelect = el), part: "hidden-select", name: this.name, autocomplete: this.autocomplete, multiple: this.effectiveMultiple, required: this.required, disabled: this.isDisabled(), tabIndex: -1, "aria-hidden": "true", style: {
                 position: 'absolute',
                 width: '1px',
@@ -1256,10 +1381,10 @@ export class Select {
                 clip: 'rect(0, 0, 0, 0)',
                 whiteSpace: 'nowrap',
                 border: '0',
-            }, onChange: (event) => event.preventDefault() }, h("option", { value: "", selected: selectedOptions.length === 0 }), selectedOptions.map((option) => (h("option", { key: option.value, value: option.value, selected: option.selected, disabled: option.disabled })))));
+            }, onChange: (event) => event.preventDefault() }, h("option", { value: "", selected: !hasSelection }), options.map((option) => (h("option", { key: option.value, value: option.value, selected: option.selected, disabled: option.disabled })))));
     }
     render() {
-        return (h(Host, { key: 'acca9307d38da5b977fa8eac160bdd2b74eb573c', "aria-busy": this.isValidating || this.loading ? 'true' : null }, h("div", { key: 'b6a55059b9948c89c40415297315af9fa40939de', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), h("div", { key: '789c2752631fed675dfe4f24e703a04a6012681f', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validatorMessage }, h("slot", { key: '13f7245f98ee7c5529881b12d400180316e439f0', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }, this.validatorMessage)), h("div", { key: '3e2076875f4a9d7fd717151b918011b6ea89455e', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: 'cb51e859372eb703c4eed65e157bbefe7ab9e844', name: "validation-loading" })), this.renderHiddenSelect())));
+        return (h(Host, { key: '81db917bc8a39989db84e7e0c9f4aa1272d52af0', "aria-busy": this.isValidating || this.loading ? 'true' : null }, h("div", { key: '150cc02f7a66f90546741550586ba254b9b6728a', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), h("div", { key: 'd3a981fd4da448b3e2355b78bab07fb7245624d8', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validatorMessage }, h("slot", { key: '9f40bb218c36ab6b19579ceac0a849e40ec00ad4', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }, this.validatorMessage)), h("div", { key: 'd33a5d0ebd54ebeda226e06de1a60b0f75e5b94c', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: '8b098ffce8ca2ed341f5a06252bf662574343717', name: "validation-loading" })), this.renderHiddenSelect())));
     }
     static get is() { return "br-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1992,7 +2117,8 @@ export class Select {
             "isValidating": {},
             "validatorMessage": {},
             "hasFeedbackSlot": {},
-            "hasValidationLoadingSlot": {}
+            "hasValidationLoadingSlot": {},
+            "selectedValuesState": {}
         };
     }
     static get events() {
@@ -2457,7 +2583,7 @@ export class Select {
                     "signature": "(option: SelectOptionData) => Promise<void>",
                     "parameters": [{
                             "name": "option",
-                            "type": "{ disabled?: boolean; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
+                            "type": "{ content?: string; disabled?: boolean; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
                             "docs": "Op\u00E7\u00E3o que deve ser inserida ou atualizada."
                         }],
                     "references": {

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

@@ -0,0 +1,34 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+export function transitionSelection({ currentValues, multiple, value, selected, selectableValues = [], }) {
+    const current = [...new Set(currentValues)];
+    if (!multiple) {
+        const values = selected && value ? [value] : [];
+        return { values, changed: values.length !== current.length || values[0] !== current[0] };
+    }
+    if (!value && selectableValues.length > 0) {
+        const values = selected ? [...new Set(selectableValues)] : [];
+        return {
+            values,
+            changed: values.length !== current.length || values.some((item, index) => item !== current[index]),
+        };
+    }
+    const next = new Set(current);
+    if (selected)
+        next.add(value);
+    else
+        next.delete(value);
+    const values = [...next];
+    return { values, changed: values.length !== current.length || values.some((item, index) => item !== current[index]) };
+}
+export function transitionAllSelection(currentValues, selected, selectableValues) {
+    return transitionSelection({
+        currentValues,
+        multiple: true,
+        value: '',
+        selected,
+        selectableValues,
+    });
+}