@govbr-ds/webcomponents 2.1.2 → 2.2.0

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

@@ -3,13 +3,23 @@
  * © https://serpro.gov.br/ - MIT License.
  */
 import { Host, h } from "@stencil/core";
+import { resolveDensity } from "../../../shared/utils/props";
 import { EMPTY_VALUE_WARNING, MISSING_VALUE_WARNING } from "../select.constants";
 /**
- * ## Design System
+ * Subcomponente que representa uma opção individual dentro de um `br-select`.
  *
- * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ * ### Papel na composição
+ * - Define o valor de submissão (`value`) e o rótulo legível exibido para o usuário.
+ * - Identifica opcionalmente o grupo visual e semântico ao qual a opção pertence.
+ * - Exibe os estados de seleção (`selected`), desativação (`disabled`) e, no modo de seleção múltipla, o checkbox correspondente.
+ * - Suporta marcação com destaque textual correspondente aos filtros de busca aplicados.
  *
- * @category Formulários
+ * ### Regra de uso e relacionamento
+ * Deve ser declarado no slot padrão do `br-select` (ou projetado pela lista). É a forma declarativa canônica de fornecer opções em código novo, inclusive quando um framework repete o elemento a partir de uma coleção. O `br-select` lê seus atributos e conteúdo, transforma-os em dados e entrega uma janela virtualizada à lista; portanto, o elemento declarado no slot é a fonte declarativa, não o item visual final da lista. Evite misturá-lo com a prop legada `options` ou com `setOptions()` sem necessidade, pois a coleção imperativa passa a ter precedência depois de ser utilizada. O item comunica suas mudanças de estado ao `br-select` pai, que por sua vez atualiza o valor geral do formulário e o resumo no campo de entrada. O `br-select-option` não deve ser utilizado fora do contexto de seleção.
+ *
+ * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ *
+ * @category Formulários, Seleção
  * @status stable
  * @slot default - Conteúdo ou rótulo visual da opção.
  * @part option - Item visual da opção.
@@ -17,6 +27,13 @@ import { EMPTY_VALUE_WARNING, MISSING_VALUE_WARNING } from "../select.constants"
  */
 export class SelectOption {
     constructor() {
+        /**
+         * Define a densidade visual da opção e do item interno.
+         * Aceita `small`, `medium` ou `large`. Valores inválidos usam `medium`.
+         *
+         * @default 'medium'
+         */
+        this.density = 'medium';
         /**
          * Desativa a interação da opção.
          *
@@ -58,35 +75,21 @@ export class SelectOption {
         this.hasWarnedMissingValue = false;
         this.hasWarnedEmptyValue = false;
         this.lastStateChangeKey = '';
-        // Flag para ignorar eventos emitidos durante a montagem inicial
-        this.hasMounted = false;
-        this.handleSelect = (event) => {
+        this.handleActivation = () => {
             if (this.disabled)
                 return;
-            // Ignora eventos que ocorram antes do componente estar montado (evita tratar emissões iniciais)
-            if (event && !this.hasMounted)
-                return;
-            let current = this.selected;
-            if (event && event.detail !== undefined) {
-                const detail = event.detail;
-                if (typeof detail === 'object') {
-                    current = detail.selected ?? detail.checked ?? current;
-                }
-                else if (typeof detail === 'boolean') {
-                    current = detail;
-                }
-            }
-            if (this.isRedundantCheckboxReflection(event, current)) {
-                return;
-            }
+            const nextSelected = !this.selected;
             if (this.isControlledBySelect)
-                this.emitStateChange(current);
+                this.emitStateChange(nextSelected);
             else
-                this.applySelection(current);
+                this.applySelection(nextSelected);
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key !== 'Enter' && event.key !== ' ')
+                return;
+            event.preventDefault();
+            this.handleActivation();
         };
-    }
-    componentDidLoad() {
-        this.hasMounted = true;
     }
     handleDisabledChange() {
         this.brSelectOptionPropsChange.emit();
@@ -95,6 +98,12 @@ export class SelectOption {
     handlePropsChange() {
         this.brSelectOptionPropsChange.emit();
     }
+    handleSelectedChange() {
+        this.brSelectOptionPropsChange.emit();
+        // Alterações programáticas de `selected` seguem o mesmo protocolo de
+        // interação e permitem que o select pai atualize seu modelo canônico.
+        this.emitStateChange();
+    }
     /**
      * Retorna a altura efetiva da opção para cálculo de virtual scroll.
      *
@@ -110,7 +119,7 @@ export class SelectOption {
      * @returns Uma promise concluída após a tentativa de foco.
      */
     async setFocus() {
-        await this.itemElement?.setFocus?.();
+        this.el.focus();
     }
     /**
      * Atualiza programaticamente o estado selecionado da opção.
@@ -121,20 +130,10 @@ export class SelectOption {
         if (this.disabled)
             return;
         const nextSelected = typeof selected === 'boolean' ? selected : !this.selected;
-        if (this.isControlledBySelect)
-            this.emitStateChange(nextSelected);
-        else
-            this.applySelection(nextSelected);
-    }
-    isRedundantCheckboxReflection(event, nextSelected) {
-        if (!event)
-            return false;
-        const checkboxTarget = event.composedPath().find((node) => {
-            return node.tagName?.toLowerCase() === 'br-checkbox';
-        });
-        if (!checkboxTarget)
-            return false;
-        return Boolean(nextSelected) === Boolean(this.selected);
+        // Mesmo quando o select pai controla a coleção, a opção deve refletir
+        // imediatamente o estado solicitado pelo método público. O pai ainda
+        // consolida a seleção e atualiza as demais opções por meio do evento.
+        this.applySelection(nextSelected);
     }
     emitStateChange(selected = this.selected) {
         const detail = {
@@ -143,6 +142,7 @@ export class SelectOption {
             selected,
             value: this.getResolvedValue(),
             label: this.getResolvedLabel(),
+            group: this.getResolvedGroup(),
         };
         const nextKey = JSON.stringify(detail);
         if (nextKey === this.lastStateChangeKey)
@@ -179,10 +179,20 @@ export class SelectOption {
             'br-select-option': true,
         };
     }
+    get effectiveDensity() {
+        return resolveDensity(this.el, this.density);
+    }
     getResolvedLabel() {
         const normalizedLabel = this.normalizeText(this.label);
         return normalizedLabel || this.getResolvedValue();
     }
+    getResolvedGroup() {
+        return this.normalizeText(this.group) || undefined;
+    }
+    getAccessibleLabel() {
+        const group = this.getResolvedGroup();
+        return group ? `${group}: ${this.getResolvedLabel()}` : null;
+    }
     getResolvedValue() {
         const explicitValue = this.normalizeText(this.value);
         if (explicitValue)
@@ -230,7 +240,7 @@ export class SelectOption {
         return this.normalizeText(this.el.textContent || '');
     }
     render() {
-        return (h(Host, { key: '3b20b8766d73d6a862765fb890028e6ff7374d96', part: "option", exportparts: "checkbox:checkbox, checkbox:option-checkbox", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.selected ? 'true' : 'false', role: "option", onMouseEnter: () => {
+        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: () => {
                 this.el.dispatchEvent(new CustomEvent('brInternalSelectOptionHover', {
                     bubbles: true,
                     composed: true,
@@ -242,7 +252,7 @@ export class SelectOption {
                     composed: true,
                     detail: { label: this.getResolvedLabel(), value: this.getResolvedValue() },
                 }));
-            } }, h("br-item", { key: '7b32b68bbc5541090e24d81e55602045bdbbba47', class: this.getCssClassMap(), disabled: this.disabled, active: this.active, selected: this.selected, "is-interactive": true, ref: (el) => (this.itemElement = el), onBrItemSelect: this.handleSelect }, this.showCheckbox && (h("br-checkbox", { key: 'fd5426e02e229eaaa8b22d457329cce6acf59e51', exportparts: "input:checkbox, input:option-checkbox", slot: "start", checked: this.selected, disabled: this.disabled, indeterminate: this.indeterminate, name: this.getResolvedValue(), onCheckedChange: this.handleSelect })), h("span", { key: '6185b2e6b60bf65059c321d4118d675859f9940e', class: "br-select-option-label" }, h("slot", { key: 'c78020a423fe1ed34ef39f46301f71baf5b0cbd8' }, this.getResolvedLabel())))));
+            } }, 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())))));
     }
     static get is() { return "br-select-option"; }
     static get encapsulation() { return "shadow"; }
@@ -259,6 +269,36 @@ export class SelectOption {
     }
     static get properties() {
         return {
+            "density": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BrDensity",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "BrDensity": {
+                            "location": "import",
+                            "path": "../../global.types",
+                            "id": "src/components/global.types.ts::BrDensity",
+                            "referenceLocation": "BrDensity"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'medium'"
+                        }],
+                    "text": "Define a densidade visual da op\u00E7\u00E3o e do item interno.\nAceita `small`, `medium` ou `large`. Valores inv\u00E1lidos usam `medium`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "density",
+                "defaultValue": "'medium'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -327,6 +367,25 @@ export class SelectOption {
                 "reflect": true,
                 "attribute": "label"
             },
+            "group": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome do grupo visual e sem\u00E2ntico da op\u00E7\u00E3o dentro do `br-select`.\nString vazia \u00E9 tratada como aus\u00EAncia de grupo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "group"
+            },
             "indeterminate": {
                 "type": "boolean",
                 "mutable": true,
@@ -443,7 +502,7 @@ export class SelectOption {
                 },
                 "complexType": {
                     "original": "SelectOptionData",
-                    "resolved": "{ content?: string; disabled?: boolean; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
+                    "resolved": "{ content?: string; disabled?: boolean; group?: string; indeterminate?: boolean; label?: string; selected?: boolean; value: string; }",
                     "references": {
                         "SelectOptionData": {
                             "location": "import",
@@ -553,12 +612,15 @@ export class SelectOption {
             }, {
                 "propName": "label",
                 "methodName": "handlePropsChange"
+            }, {
+                "propName": "group",
+                "methodName": "handlePropsChange"
             }, {
                 "propName": "value",
                 "methodName": "handlePropsChange"
             }, {
                 "propName": "selected",
-                "methodName": "handlePropsChange"
+                "methodName": "handleSelectedChange"
             }];
     }
 }

package/dist/collection/components/select/select.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}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}
+*,*::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}.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{box-sizing:border-box;display:block;max-width:100%;width:100%}.br-select{box-sizing:border-box;min-width:0;position:relative;width:100%;max-width:100%}:host([multiple]) .br-select{min-width:0}