@govbr-ds/webcomponents 2.3.0 → 2.4.0

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

@@ -6,7 +6,7 @@ import { Host, h } from "@stencil/core";
 import { reportInvalidPropValue } from "../../../shared/utils/prop-warning";
 import { 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`.
  *
@@ -30,7 +30,8 @@ import { computeVirtualWindow } from "../../../shared/utils/virtual-scroll";
 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'
@@ -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,6 +148,8 @@ 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;
@@ -157,7 +168,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 +181,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 +242,7 @@ export class SelectList {
             this.options = [];
             this.scrollTop = 0;
             this.measuredItemHeight = null;
+            this.measuredSelectAllItemHeight = null;
             if (this.listElement) {
                 this.listElement.scrollTop = 0;
             }
@@ -280,11 +295,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 +335,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 +381,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 +447,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 +463,7 @@ export class SelectList {
     }
     createSelectAllOption() {
         return {
-            value: SelectList.SELECT_ALL_VALUE,
+            value: SELECT_ALL_OPTION_VALUE,
             label: this.selectAllLabel,
             selected: false,
             indeterminate: false,
@@ -552,14 +573,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 +582,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 +611,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 +663,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 +744,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 +757,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,31 +772,30 @@ 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));
@@ -726,7 +809,7 @@ export class SelectList {
     }
     getVirtualSpacerStyle() {
         return {
-            height: `${this.getVirtualRows().length * this.getRowHeight()}px`,
+            height: `${this.getRowsHeight(this.getVirtualRows())}px`,
             position: 'relative',
         };
     }
@@ -740,21 +823,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" }))));
     }
     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: 'c4ea2157dc925805d0542eae1a70b67375fcb12c' }, h("div", { key: 'e55d780af8ef05765173998e781f2cf0a4125988', 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 +900,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 +941,7 @@ export class SelectList {
             },
             "searchTerm": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -946,6 +1054,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 +1156,8 @@ export class SelectList {
             "isOpen": {},
             "isMultiple": {},
             "scrollTop": {},
-            "measuredItemHeight": {}
+            "measuredItemHeight": {},
+            "measuredSelectAllItemHeight": {}
         };
     }
     static get methods() {
@@ -1287,6 +1419,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 +1504,3 @@ export class SelectList {
 }
 SelectList.SELECT_ALL_LABEL = 'Selecionar todos';
 SelectList.DESELECT_ALL_LABEL = 'Desselecionar todos';
-SelectList.SELECT_ALL_VALUE = 'Alternar todos';

package/dist/collection/components/select/select-option/select-option.css

@@ -1 +1 @@
-*,*::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}pre{font-family:monospace;font-size:1em}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,optgroup,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))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@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))}.col-lg-3{flex-basis:25%;max-width:25%}}@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-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.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}fieldset[disabled]{opacity:1}.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)}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)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[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)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{--br-select-option-bg-color: var(--bg-color, var(--background, var(--background-color, #fff)));contain:paint;display:block;background-color:var(--br-select-option-bg-color);line-height:0;overflow:hidden;position:relative}:host(:focus-within){contain:none;overflow:visible}:host([active]){contain:none;overflow:visible;z-index:1}:host([active])::after{border:var(--focus-width) var(--focus-style) var(--focus);box-sizing:border-box;content:"";inset:0;pointer-events:none;position:absolute}.br-select-option{opacity:1 !important}br-item{--br-item-bg-color: var(--br-select-option-bg-color);background-color:var(--br-select-option-bg-color);display:block;line-height:normal;overflow:visible;width:100%}br-checkbox{--border-color: var(--gray-40, #888);--disabled: 1;pointer-events:none}:host(:not([disabled])) br-item::part(item){cursor:pointer}:host([disabled]){background:var(--br-select-option-bg-color) !important;cursor:not-allowed}br-item[disabled]{--br-item-bg-color: var(--br-select-option-bg-color);background:var(--br-select-option-bg-color) !important;cursor:not-allowed}:host([disabled]) ::slotted(*){opacity:var(--disabled) !important}.br-select-option-label{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled]) .br-select-option-label{opacity:var(--disabled) !important}.br-select-option-label ::slotted(*){display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+*,*::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}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}button,input,optgroup,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))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@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))}.col-lg-3{flex-basis:25%;max-width:25%}}@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-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.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}fieldset[disabled]{opacity:1}.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)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}*[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)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{--br-select-option-bg-color: var(--bg-color, var(--background, var(--background-color, #fff)));contain:paint;display:block;background-color:var(--br-select-option-bg-color);line-height:0;overflow:hidden;position:relative}:host(:focus-within){contain:none;overflow:visible}:host([active]){contain:none;overflow:visible;z-index:1}:host([active])::after{border:var(--focus-width) var(--focus-style) var(--focus);box-sizing:border-box;content:"";inset:0;pointer-events:none;position:absolute}:host([part~=select-all]){--br-select-option-bg-color: var(--gray-2)}:host([part~=select-all]) .br-select-option-label{font-weight:var(--font-weight-semi-bold)}.br-select-option{opacity:1 !important}br-item{--br-item-bg-color: var(--br-select-option-bg-color);background-color:var(--br-select-option-bg-color);display:block;line-height:normal;overflow:visible;width:100%}:host(:not([disabled])) br-item:hover{--br-item-bg-color: color-mix(in srgb, var(--color) calc(var(--surface-opacity-xs) * 100%), transparent)}:host(:not([disabled])) br-item:active{--br-item-bg-color: color-mix(in srgb, var(--color) calc(var(--surface-opacity-md) * 100%), transparent)}:host([selected]) br-item,:host([selected]) br-item:hover,:host([selected]) br-item:active{--br-item-bg-color: var(--blue-warm-vivid-50)}:host([selected]:not([disabled])) br-item:active{--br-item-bg-color: color-mix(in srgb, var(--color) calc(var(--surface-opacity-md) * 100%), transparent)}:host([selected]) br-item::part(item){background-color:var(--blue-warm-vivid-50)}:host([selected]:not([disabled])) br-item:active::part(item){background-color:color-mix(in srgb, var(--blue-warm-vivid-50) calc(var(--surface-opacity-md) * 100%), transparent);background-image:none}:host(:not([disabled]):active) br-item::part(item){background-color:color-mix(in srgb, var(--color) calc(var(--surface-opacity-md) * 100%), transparent);box-shadow:var(--surface-shadow-none);cursor:pointer}br-item::part(item){align-items:center}br-checkbox{--border-color: var(--gray-40, #888);--disabled: 1;align-self:center;display:inline-flex;align-items:center;margin-block:0;pointer-events:none}:host(:not([disabled])) br-item::part(item){cursor:pointer}:host(:not([disabled])) br-item:active::part(item){box-shadow:var(--surface-shadow-none);cursor:pointer}:host([disabled]){background:var(--br-select-option-bg-color) !important;cursor:not-allowed}br-item[disabled]{--br-item-bg-color: var(--br-select-option-bg-color);background:var(--br-select-option-bg-color) !important;cursor:not-allowed}:host([disabled]) ::slotted(*){opacity:var(--disabled) !important}.br-select-option-label{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([disabled]) .br-select-option-label{opacity:var(--disabled) !important}.br-select-option-label ::slotted(*){display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

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

@@ -3,6 +3,7 @@
  * © https://serpro.gov.br/ - MIT License.
  */
 import { Host, h } from "@stencil/core";
+import { findComposedOwner } from "../../../shared/utils/ownership";
 import { resolveDensity } from "../../../shared/utils/props";
 import { EMPTY_VALUE_WARNING, MISSING_VALUE_WARNING } from "../select.constants";
 /**
@@ -78,13 +79,17 @@ export class SelectOption {
         this.handleActivation = () => {
             if (this.disabled)
                 return;
-            const nextSelected = !this.selected;
-            if (this.isControlledBySelect)
+            const nextSelected = this.isControlledBySingleSelect && this.selected ? true : !this.selected;
+            if (this.isControlledBySelect) {
+                this.lastStateChangeKey = '';
                 this.emitStateChange(nextSelected);
+            }
             else
                 this.applySelection(nextSelected);
         };
         this.handleKeyDown = (event) => {
+            if (this.isControlledBySelect)
+                return;
             if (event.key !== 'Enter' && event.key !== ' ')
                 return;
             event.preventDefault();
@@ -135,6 +140,10 @@ export class SelectOption {
         // consolida a seleção e atualiza as demais opções por meio do evento.
         this.applySelection(nextSelected);
     }
+    get isControlledBySingleSelect() {
+        const owner = findComposedOwner(this.el, 'br-select');
+        return owner !== null && !(owner.multiple ?? owner.isMultiple);
+    }
     emitStateChange(selected = this.selected) {
         const detail = {
             disabled: this.disabled,
@@ -171,7 +180,7 @@ export class SelectOption {
      */
     applySelection(selected) {
         this.indeterminate = false;
-        this.selected = selected;
+        this.selected = selected ?? false;
         this.emitStateChange();
     }
     getCssClassMap() {
@@ -240,7 +249,7 @@ export class SelectOption {
         return this.normalizeText(this.el.textContent || '');
     }
     render() {
-        return (h(Host, { key: '5897310b67f7bbf295e052538b92e405ed3ff24d', part: "option", exportparts: "checkbox:checkbox, checkbox:option-checkbox", "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.getAccessibleLabel(), "aria-selected": this.selected ? 'true' : 'false', role: "option", tabindex: "-1", onClickCapture: this.handleActivation, onKeyDown: this.handleKeyDown, onMouseEnter: () => {
+        return (h(Host, { key: '62d927d3fc103d76f2c030c931ac1e1802f5c468', part: this.el.getAttribute('part') || 'option', exportparts: "checkbox:checkbox, checkbox:option-checkbox", "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.getAccessibleLabel(), "aria-selected": this.selected ? 'true' : 'false', role: "option", tabindex: "-1", onClickCapture: this.handleActivation, onKeyDown: this.handleKeyDown, onMouseEnter: () => {
                 this.el.dispatchEvent(new CustomEvent('brInternalSelectOptionHover', {
                     bubbles: true,
                     composed: true,
@@ -252,7 +261,7 @@ export class SelectOption {
                     composed: true,
                     detail: { label: this.getResolvedLabel(), value: this.getResolvedValue() },
                 }));
-            } }, h("br-item", { key: 'afff7ce7c07f79fad60f5b09a618a08b23a91afb', class: this.getCssClassMap(), density: this.effectiveDensity, disabled: this.disabled, active: this.active, selected: this.selected }, this.showCheckbox && (h("br-checkbox", { key: 'b6c6b32e98221cf28a822a304ee330af21206b96', exportparts: "input:checkbox, input:option-checkbox", slot: "start", checked: this.selected, disabled: true, indeterminate: this.indeterminate, name: this.getResolvedValue(), "aria-hidden": "true" })), h("span", { key: '394f225cae7fbae52889b39c4b876c477a32c7ea', class: "br-select-option-label" }, h("slot", { key: '4e26a8461a59111a8998276f554f1ebd38a5761e' }, this.getResolvedLabel())))));
+            } }, h("br-item", { key: '1c46f284774a8db5e8b805a75cfde08709ae1da9', class: this.getCssClassMap(), density: this.effectiveDensity, disabled: this.disabled, selected: this.selected }, this.showCheckbox && (h("br-checkbox", { key: 'a7164ca2d9f75dff3dde0d882591dd6eb1436a3e', exportparts: "input:checkbox, input:option-checkbox", slot: "start", checked: this.selected, disabled: true, indeterminate: this.indeterminate, name: this.getResolvedValue(), "aria-hidden": "true" })), h("span", { key: '35e6dae591af64c5e077ba5e9c5817a287644093', class: "br-select-option-label" }, h("slot", { key: 'deabf1daf900d9aca934a2c00f5809e2e9862729' }, this.getResolvedLabel())))));
     }
     static get is() { return "br-select-option"; }
     static get encapsulation() { return "shadow"; }