@govbr-ds/webcomponents 2.1.1 → 2.1.2

package/dist/cjs/br-dropdown_2.cjs.entry.js

@@ -577,6 +577,37 @@ const Dropdown = class {
 };
 Dropdown.style = dropdownCss();
 
+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]) };
+}
+function transitionAllSelection(currentValues, selected, selectableValues) {
+    return transitionSelection({
+        currentValues,
+        multiple: true,
+        value: '',
+        selected,
+        selectableValues,
+    });
+}
+
 const selectCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-select{--select-divider:1px solid var(--color-secondary-04);--select-shadow:var(--surface-shadow-md)}.br-select .br-input input{padding-right:29px;text-overflow:ellipsis}.br-select .br-input input::after{bottom:0;padding:0 5px;position:absolute;right:0}.br-select{max-width:400px;min-width:100px;position:relative}.br-select .br-list{background:var(--bg-color);box-shadow:var(--select-shadow);display:none;margin-top:-2px;max-height:404px;overflow:auto;position:absolute;resize:none;width:100%;z-index:1}.br-select .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-select .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-select .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-select .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-select .br-list:focus,.br-select .br-list:active{color:var(--color-secondary-09);outline:none}.br-select .br-list:hover::-webkit-scrollbar-thumb{background:var(--color-secondary-07)}.br-select .br-list[expanded]{display:block}.br-select .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--interactive-light-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x)}.br-select .br-item .content{padding:0}.br-select .br-item .br-checkbox,.br-select .br-item .br-radio{--item-padding-x:var(--spacing-scale-2x);--item-padding-y:var(--spacing-scale-2x)}.br-select .br-item .br-checkbox input:hover:not(:disabled)+label::before,.br-select .br-item .br-radio input:hover:not(:disabled)+label::before{background-image:none}.br-select .br-item .br-checkbox input+label,.br-select .br-item .br-radio input+label{padding-left:calc(var(--checkbox-padding) + var(--checkbox-size) + var(--item-padding-x))}.br-select .br-item .br-radio input+label{color:var(--text-color);display:block;height:auto;min-height:0;padding:var(--item-padding)}.br-select .br-item .br-radio input+label::before,.br-select .br-item .br-radio input+label::after{content:none}.br-select .br-item:not(:last-child){border-bottom:var(--select-divider)}.br-select .br-item:not([disabled]){--focus-offset:calc(var(--spacing-scale-half) * -1)}.br-select .br-item:not([disabled]):focus{outline:none}.br-select .br-item:not([disabled]).focus-visible,.br-select .br-item:not([disabled]):focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-select .br-item:not([disabled]):not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-select .br-item.selected,.br-select .br-item[selected]{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.br-select .br-item.selected:focus,.br-select .br-item[selected]:focus{outline:none}.br-select .br-item.selected.focus-visible,.br-select .br-item.selected:focus-visible,.br-select .br-item[selected].focus-visible,.br-select .br-item[selected]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-select .br-item.selected:not(:disabled):hover,.br-select .br-item[selected]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--color-rgb), var(--hover)), rgba(var(--color-rgb), var(--hover)))}.br-select .br-item.disabled{line-height:calc(var(--font-line-height-high)*2);padding-left:calc(var(--item-padding) + var(--spacing-scale-base))}.br-select.inverted .br-input,.br-select.inverted .br-input label,.br-select.dark-mode .br-input,.br-select.dark-mode .br-input label{--color:var(--color-dark);--focus-color:var(--focus-color-dark)}:host{display:inline-block}.br-select{min-width:100px;max-width:400px;position:relative}:host([multiple]) .br-select{min-width:200px}`;
 
 let selectId = 0;
@@ -747,6 +778,7 @@ const Select = class {
         this.validatorMessage = null;
         this.hasFeedbackSlot = false;
         this.hasValidationLoadingSlot = false;
+        this.selectedValuesState = [];
         this.customValidationMessage = '';
         this.validationRunId = 0;
         this.lastAnnouncedOpen = false;
@@ -754,6 +786,9 @@ const Select = class {
         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.
          *
@@ -764,10 +799,11 @@ const Select = class {
         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);
         };
@@ -797,6 +833,10 @@ const Select = class {
         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);
@@ -818,7 +858,7 @@ const Select = class {
             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;
@@ -827,6 +867,10 @@ const Select = class {
             this.attachBlockingSurfaceListener();
         this.updateValidity();
     }
+    componentDidRender() {
+        this.syncNativeSelectSelection();
+        this.updateValidity();
+    }
     disconnectedCallback() {
         if (this.slotElement) {
             this.slotElement.removeEventListener('slotchange', this.handleSlotChange);
@@ -843,6 +887,47 @@ const Select = class {
     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() {
+        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 validator.isFormControlDisabled(this.disabled, this.formDisabled);
     }
@@ -915,6 +1000,8 @@ const Select = class {
     }
     handleSelectInputFocus() {
         this.activeOptionIndex = -1;
+        if (this.suppressFocusOpen)
+            return;
         if (this.filterable && !this.effectiveOpen) {
             this.clearSearch();
             void this.show();
@@ -951,16 +1038,50 @@ const Select = class {
         this.toggleOpenFromPointer();
     }
     handleSelectOptionStateChange(event$1) {
-        this.syncSlottedOptionSelection(event$1.detail);
-        this.rememberRemoteSelections(this.getCurrentOptions());
-        this.syncDisplayValue();
-        this.syncActiveOptionIndex(event$1.detail);
         event$1.stopPropagation();
-        const detail = { selected: event$1.detail.selected, value: event$1.detail.value };
+        const detail = event$1.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);
+        this.syncSlottedOptionSelection(transition.values);
+        this.rememberRemoteSelections(options);
+        this.syncDisplayValue(options);
+        this.syncActiveOptionIndex(event$1.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;
+            });
+        }
         event.dispatchNativeFormEvent(this.el, 'input');
         event.dispatchNativeFormEvent(this.el, 'change');
     }
@@ -1177,7 +1298,7 @@ const Select = class {
         this.suppressValueChange = true;
         try {
             if (this.selectListElement) {
-                await this.selectListElement.setOptions(nextOptions);
+                this.selectListElement.options = this.getListOptions(nextOptions);
             }
             else {
                 this.pendingOptions = nextOptions;
@@ -1196,20 +1317,20 @@ const Select = class {
      */
     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)
@@ -1238,15 +1359,16 @@ const Select = class {
         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);
@@ -1299,6 +1421,9 @@ const Select = class {
         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)
@@ -1338,15 +1463,18 @@ const Select = class {
     }
     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);
         this.value = value;
         this.isApplyingExternalValue = false;
         this.remoteSelectedOptions.clear();
@@ -1369,7 +1497,7 @@ const Select = class {
     }
     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),
@@ -1404,38 +1532,36 @@ const Select = class {
         const selectedValues = selected.map((option) => option.value);
         const formValue = this.effectiveMultiple ? JSON.stringify(selectedValues) : (selectedValues[0] ?? null);
         validator.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);
-        validator.syncNativeFormValidity(this.elementInternals, this.nativeSelect);
+        nativeSelect.setCustomValidity(this.customValidationMessage || this.validatorMessage || selectionMessage);
+        validator.syncNativeFormValidity(this.elementInternals, nativeSelect);
+    }
+    getNativeSelect() {
+        return (this.el.shadowRoot?.querySelector('select[part="hidden-select"]') ??
+            this.nativeSelect);
     }
     resolveValidator() {
         return validator.resolveFormValidator(this.validator);
@@ -1546,6 +1672,17 @@ const Select = class {
         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;
@@ -1566,55 +1703,19 @@ const Select = class {
      * 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;
@@ -1637,6 +1738,17 @@ const Select = class {
                 option.removeAttribute('selected');
         });
     }
+    reflectRenderedListSelection(values) {
+        const renderedOptions = this.selectListElement?.shadowRoot?.querySelectorAll('br-select-option');
+        if (!renderedOptions)
+            return;
+        const selectedValues = new Set(values);
+        renderedOptions.forEach((option) => {
+            if (this.isSelectAllLabel(option.label))
+                return;
+            option.selected = selectedValues.has(option.value);
+        });
+    }
     isSelectAllLabel(label) {
         return label === this.selectAllLabel || label === this.unselectAllLabel;
     }
@@ -1717,6 +1829,7 @@ const Select = class {
      * 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
@@ -1726,21 +1839,53 @@ const Select = class {
             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.getHostOptions();
+            return this.applyCanonicalSelection(this.pendingOptions);
+        }
+        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
@@ -1790,7 +1935,7 @@ const Select = class {
         return (index.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 (index.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 (index.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);
@@ -1798,9 +1943,8 @@ const Select = class {
             } }, index.h("slot", null), index.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 (index.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',
@@ -1811,10 +1955,10 @@ const Select = class {
                 clip: 'rect(0, 0, 0, 0)',
                 whiteSpace: 'nowrap',
                 border: '0',
-            }, onChange: (event) => event.preventDefault() }, index.h("option", { value: "", selected: selectedOptions.length === 0 }), selectedOptions.map((option) => (index.h("option", { key: option.value, value: option.value, selected: option.selected, disabled: option.disabled })))));
+            }, onChange: (event) => event.preventDefault() }, index.h("option", { value: "", selected: !hasSelection }), options.map((option) => (index.h("option", { key: option.value, value: option.value, selected: option.selected, disabled: option.disabled })))));
     }
     render() {
-        return (index.h(index.Host, { key: 'acca9307d38da5b977fa8eac160bdd2b74eb573c', "aria-busy": this.isValidating || this.loading ? 'true' : null }, index.h("div", { key: 'b6a55059b9948c89c40415297315af9fa40939de', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), index.h("div", { key: '789c2752631fed675dfe4f24e703a04a6012681f', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validatorMessage }, index.h("slot", { key: '13f7245f98ee7c5529881b12d400180316e439f0', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = slot.hasAssignedSlotContent(event.currentTarget)) }, this.validatorMessage)), index.h("div", { key: '3e2076875f4a9d7fd717151b918011b6ea89455e', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, index.h("slot", { key: 'cb51e859372eb703c4eed65e157bbefe7ab9e844', name: "validation-loading" })), this.renderHiddenSelect())));
+        return (index.h(index.Host, { key: '9eab35d12b8b0fff68f16bb1e1ccc1209ea09687', "aria-busy": this.isValidating || this.loading ? 'true' : null }, index.h("div", { key: '68747830dd29319dc044caa056ffc13fea834bea', class: this.getCssClassMap(), part: "container" }, this.renderSelectInput(), this.renderSelectList(), index.h("div", { key: '825c7934402930816fba48f02d161d936c8a4e3e', part: "feedback", hidden: !this.hasFeedbackSlot && !this.validatorMessage }, index.h("slot", { key: '10b2ee676c54b913b39b6523d3ebce462ed031e3', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = slot.hasAssignedSlotContent(event.currentTarget)) }, this.validatorMessage)), index.h("div", { key: '571a5a5e89ae14a91f8c88c0b1fb5e7341adb094', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, index.h("slot", { key: 'e9647f09ce303d15a564707e1d3a060280de10a1', name: "validation-loading" })), this.renderHiddenSelect())));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/br-header-logo.cjs.entry.js

@@ -163,8 +163,9 @@ const HeaderLogo = class {
      * @returns JSX do componente.
      */
     render() {
-        return (index.h(index.Host, { key: '474f36880dc136e05ca089304ecf59d60d2737d1' }, index.h("slot", { key: '66f9073605f683f0b716e51f86690cd5e79e77de' }, index.h("div", { key: '1b489db57d26ba0409beafb81ed8458916fcdf38', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (index.h("a", { href: this.href, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.renderImageElement())) : (this.renderImageElement())))));
+        return (index.h(index.Host, { key: '31a3b7c3feb28df1bb66fb38832ed93ffec8a47b' }, index.h("slot", { key: 'c3c1b1c2ad499c63866fe44a72ee8ec1b9cd43d6' }, index.h("div", { key: '1edc6208374cee19b27d47f1e760cd25601286be', id: this.customId, class: this.getCssClassMap(), part: "container" }, this.href && this.href.trim() !== '' ? (index.h("a", { href: this.href, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined, onClick: this.handleClick }, this.renderImageElement())) : (this.renderImageElement())))));
     }
+    static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "isCompact": [{

package/dist/cjs/br-icon.cjs.entry.js

@@ -435,7 +435,7 @@ const Icon = class {
         return {
             role: isInformative || isFocusable ? 'img' : null,
             'aria-label': this.label || null,
-            tabindex: isFocusable ? 0 : '-1',
+            tabindex: isFocusable ? 0 : null,
             'aria-hidden': isInformative || isFocusable ? null : 'true',
             focusable: isFocusable ? true : 'false',
         };