@govbr-ds/webcomponents 2.4.0 → 2.5.0

package/dist/collection/components/pagination/pagination.js

@@ -9,33 +9,25 @@ import { resolveAllowedPropValue, resolveDensity, resolveIntegerPropValue } from
 const PAGINATION_COLOR_MODES = ['dark'];
 const PAGINATION_VARIANTS = ['default', 'contextual'];
 /**
- * O componente `br-pagination` é o controle de navegação paginada do GovBR-DS, desenvolvido para segmentar grandes volumes de dados ou conteúdos extensos em páginas sequenciais numeradas.
+ * O `br-pagination` divide grandes volumes de dados em páginas numeradas sequenciais.
  *
- * ### Para que serve
+ * Informe a quantidade total de itens em `total` e a página atual em `current`. Ouça o evento `brPaginationPageChange` para carregar a página solicitada. Para permitir alterar itens por página, use a variante contextual ou defina `per-page`.
  *
- * - **Segmentação de dados volumosos:** Divide listas, tabelas e catálogos em blocos gerenciáveis de itens, reduzindo o tempo de carregamento da página e o consumo de memória.
- * - **Navegação direta e sequencial:** Oferece botões para avançar, retroceder, ir diretamente a uma página específica e navegar através de atalhos de reticências.
- * - **Variante contextual completa:** Permite alterar a quantidade de itens exibidos por página (ex.: 10, 20, 50, 100 itens) e pular diretamente para qualquer página através de campo de digitação integrado.
+ * ```html
+ * <br-pagination total="100" per-page="10" current="1"></br-pagination>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - O número total de itens for superior ao limite recomendado para visualização em uma única rolagem (geralmente mais de 20 a 50 registros).
- *   - Integrar com tabelas de dados (`br-table`) ou grades de cartões (`br-card`).
- * - **Evite e prefira outro componente quando:**
- *   - O conjunto completo de itens for pequeno (menos de 20 itens) e puder ser visualizado sem perda de performance.
- *   - A navegação representar etapas interdependentes de um processo sequencial com validação (prefira `br-step` ou `br-wizard`).
+ * - Paginação de tabelas (`br-table`) ou listas extensas.
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-pagination` disponibiliza slots para complementar a navegação:
- * - `pagination-info`: Slot para customização do texto de contagem (ex.: "Exibindo 1-20 de 240 itens").
- * - `loading`: Slot para indicador visual exibido durante a troca assíncrona de páginas.
+ * - Poucos itens (menos de 20 itens) que cabem em uma visualização direta.
+ * - Etapas sequenciais de um formulário ou cadastro: use `br-step` ou `br-wizard`.
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/pagination?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/pagination?tab=designer).
  *
-
-
  * @category Navegação, Dados, Progresso
  * @status stable
  *
@@ -872,7 +864,7 @@ export class Pagination {
             this.handleGoToPageChange(event);
     }
     renderPerPageDropdown() {
-        return (h("br-select", { part: "per-page", exportparts: "container: per-page-container, input: per-page-input, input-container: per-page-input-container, input-field: per-page-input-field, input-label: per-page-input-label, input-action: per-page-input-action, list: per-page-list", label: this.perPageLabel, isInline: true, inputWidth: "88px", borderless: true, density: this.effectiveDensity, disabled: this.loading }, this.effectivePerPageOptions.map((perPageOption) => (h("br-select-option", { key: String(perPageOption), value: String(perPageOption), selected: perPageOption === this.effectivePerPage }, perPageOption)))));
+        return (h("br-select", { part: "per-page", exportparts: "container: per-page-container, input: per-page-input, input-container: per-page-input-container, input-field: per-page-input-field, input-label: per-page-input-label, input-action: per-page-input-action, list: per-page-list", label: this.perPageLabel, isInline: true, inputWidth: "88px", borderless: true, density: this.effectiveDensity, disabled: this.loading, hideSearchIcon: true }, this.effectivePerPageOptions.map((perPageOption) => (h("br-select-option", { key: String(perPageOption), value: String(perPageOption), selected: perPageOption === this.effectivePerPage }, perPageOption)))));
     }
     renderPerPageSelect() {
         return (h("div", { class: "pagination-per-page", part: "per-page" }, this.renderPerPageDropdown()));
@@ -885,7 +877,7 @@ export class Pagination {
                 ? this.getWindowedGoToOptions(totalPages, this.goToSearchTerm)
                 : this.goToOptionsReady
                     ? this.getGoToOptions(totalPages)
-                    : this.getCurrentGoToOption(totalPages), onOpened: this.handleGoToSelectOpened, onClosed: () => (this.goToSearchTerm = ''), onBrSelectSearch: (event) => (this.goToSearchTerm = event.detail.query), value: String(this.effectiveCurrent), isInline: true, inputWidth: goToInputWidth, density: this.effectiveDensity, "visible-items": 7, filterable: true, searchMode: largePageSet ? 'remote' : 'local', borderless: true, disabled: this.loading })));
+                    : this.getCurrentGoToOption(totalPages), onOpened: this.handleGoToSelectOpened, onClosed: () => (this.goToSearchTerm = ''), onBrSelectSearch: (event) => (this.goToSearchTerm = event.detail.query), value: String(this.effectiveCurrent), isInline: true, inputWidth: goToInputWidth, density: this.effectiveDensity, "visible-items": 7, filterable: true, searchMode: largePageSet ? 'remote' : 'local', borderless: true, disabled: this.loading, hideSearchIcon: true })));
     }
     getWindowedGoToOptions(totalPages, query) {
         const parsed = Number.parseInt(query.trim(), 10);
@@ -1409,7 +1401,7 @@ export class Pagination {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico para iniciar o carregamento de uma p\u00E1gina.\nO `detail` cont\u00E9m `{ page }`; o evento n\u00E3o \u00E9 cancel\u00E1vel."
+                    "text": "Evento para iniciar o carregamento de uma p\u00E1gina.\nO `detail` cont\u00E9m `{ page }`; o evento n\u00E3o \u00E9 cancel\u00E1vel."
                 },
                 "complexType": {
                     "original": "PaginationPageChangeDetail",
@@ -1453,7 +1445,7 @@ export class Pagination {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico para iniciar o carregamento de uma nova quantidade de\nitens. O `detail` cont\u00E9m `{ perPage }`; o evento n\u00E3o \u00E9 cancel\u00E1vel."
+                    "text": "Evento para iniciar o carregamento de uma nova quantidade de\nitens. O `detail` cont\u00E9m `{ perPage }`; o evento n\u00E3o \u00E9 cancel\u00E1vel."
                 },
                 "complexType": {
                     "original": "PaginationPerPageChangeDetail",

package/dist/collection/components/radio/radio.js

@@ -11,31 +11,28 @@ import { hasAssignedSlotContent } from "../../shared/utils/slot";
 import { resolveFormValidator, runFormValidator } from "../../shared/utils/validator";
 const RADIO_STATES = ['valid', 'invalid'];
 /**
- * O componente `br-radio` é o controle de formulário do GovBR-DS para seleção de uma única opção dentro de um conjunto mutuamente exclusivo. Compatível com as diretrizes WAI-ARIA, ele integra-se nativamente a formulários HTML via `formAssociated`.
+ * O `br-radio` representa uma opção individual dentro de um conjunto de escolha única.
  *
- * ### Para que serve
+ * Defina `name` para associar as opções do mesmo grupo, `value` para o valor enviado no formulário e `label` para o texto exibido.
  *
- * - **Escolha exclusiva:** Permite que a pessoa usuária escolha exatamente uma alternativa entre as opções apresentadas no mesmo grupo.
- * - **Integração com formulários:** Comunica valor, estado de seleção (`checked`), desativação e validação diretamente com a API nativa de formulários HTML (`ElementInternals`).
- * - **Navegação acessível:** Suporta foco e seleção via teclado (teclas de seta e barra de espaço) quando agrupado.
+ * ```html
+ * <br-radio name="preferencia" value="email" label="Receber por e-mail" checked></br-radio>
+ * <br-radio name="preferencia" value="sms" label="Receber por SMS"></br-radio>
+ * ```
  *
- * ### Quando utilizar
+ * Em formulários HTML, integra-se nativamente via `ElementInternals` com suporte a `required`.
  *
- * - **Utilize quando:**
- *   - Houver um conjunto pequeno de opções (entre 2 e 5 alternativas) mutuamente exclusivas e for importante manter todas as opções imediatamente visíveis.
- * - **Evite e prefira outro componente quando:**
- *   - O número de opções for superior a 5 ou 7 itens: prefira `br-select` para economizar espaço de tela.
- *   - A pessoa usuária puder selecionar múltiplas opções simultaneamente: prefira `br-checkbox` ou `br-checkbox-group`.
- *   - Houver uma escolha binária simples de ativação/desativação imediata: prefira `br-switch`.
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Opção única em grupos pequenos de 2 a 5 alternativas.
  *
- * O `br-radio` é um controle individual:
- * - `default`: Slot para o texto do rótulo da opção (alternativa à propriedade `label`).
+ * ### Quando evitar
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/radio?tab=designer).
+ * - Mais de 5 opções: use `br-select`.
+ * - Seleção múltipla: use `br-checkbox`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/radio?tab=designer).
  *
-
  * @category Formulários, Seleção
  * @status stable
  * @see br-radio-group
@@ -403,11 +400,11 @@ export class Radio {
         });
     }
     render() {
-        return (h(Host, { key: '593c87451f1364548b183f010b0e4a857606ddcf', "aria-disabled": this.isDisabled() ? 'true' : null }, h("div", { key: '4680eb3b7b9e60d92b05a050ca71dd3ab0df0d21', class: this.getCssClassMap(), part: "container" }, h("input", { key: '4cc880256e8928a222c0acb1703075ca385b1b7e', part: "radio-input", ref: (el) => (this.nativeInput = el), "aria-label": (this.labelHidden ?? this.hasHiddenLabel) && this.label ? this.label : null, type: "radio", id: this.customId, name: this.groupNativeName || this.getNativeName(), checked: this.checked, disabled: this.isDisabled(), required: false, value: this.value, tabIndex: this.computeTabIndex(), onClick: this.onClick, onInput: this.onInput, onChange: this.onChange, "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
+        return (h(Host, { key: '245acd04dfaed7ff515c974b7cf11b2dbd9c3686', "aria-disabled": this.isDisabled() ? 'true' : null }, h("div", { key: '629b844514a89708fe02fedbeab9c5c368b5db7c', class: this.getCssClassMap(), part: "container" }, h("input", { key: 'd58ec8e5dea310a72bb16f27ffd4bf4bdaa31ed1', part: "radio-input", ref: (el) => (this.nativeInput = el), "aria-label": (this.labelHidden ?? this.hasHiddenLabel) && this.label ? this.label : null, type: "radio", id: this.customId, name: this.groupNativeName || this.getNativeName(), checked: this.checked, disabled: this.isDisabled(), required: false, value: this.value, tabIndex: this.computeTabIndex(), onClick: this.onClick, onInput: this.onInput, onChange: this.onChange, "aria-busy": this.isValidating ? 'true' : null, "aria-describedby": this.hasFeedbackSlot || this.customValidationMessage || this.validatorMessage
                 ? `${this.customId}-feedback`
                 : null, "aria-errormessage": this.customValidationMessage || this.validatorMessage || this.hasFeedbackSlot
                 ? `${this.customId}-feedback`
-                : null }), h("label", { key: 'e424af10ba938e321779eaf426fc9dfae52d102d', part: "radio-label", htmlFor: this.customId }, h("slot", { key: 'de783d9e47b7d047f405313b904b730b66bbb911' }, this.label))), h("div", { key: 'f9e544e3e331dbf079adfa0b06ed7ce3a933f4ac', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: '997e45acd2ad97857cd9ea303e10d252689392a7', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
+                : null }), h("label", { key: 'fa1bf9b09906fb7ccfc1729626a9ed210da58727', part: "radio-label", htmlFor: this.customId }, h("slot", { key: 'ca40cab634e9a794a87e0c2283e3922b24368118' }, this.label))), h("div", { key: '501e02f118696427497f25a55b6779fb276850bb', id: `${this.customId}-feedback`, part: "feedback", hidden: !this.hasFeedbackSlot && !this.customValidationMessage && !this.validatorMessage }, h("slot", { key: '48367e29644a3f8f32a6a51429e657fbe7161b54', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), !this.hasFeedbackSlot && (this.customValidationMessage || this.validatorMessage) ? (h("br-message", { state: "danger", message: this.customValidationMessage || this.validatorMessage })) : null)));
     }
     static get is() { return "br-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -583,7 +580,7 @@ export class Radio {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Estado de feedback can\u00F4nico. Quando informado, tem preced\u00EAncia sobre `state`."
+                    "text": "Estado de feedback. Quando informado, tem preced\u00EAncia sobre `state`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/radio-group/radio-group.js

@@ -13,32 +13,32 @@ import { resolveFormValidator, runFormValidator } from "../../shared/utils/valid
 const RADIO_GROUP_ORIENTATIONS = ['horizontal', 'vertical'];
 const RADIO_GROUP_STATES = ['valid', 'invalid'];
 /**
- * O componente `br-radio-group` é o contêiner semântico e orquestrador de opções `br-radio` no GovBR-DS, responsável por garantir a exclusividade mútua de seleção, a navegação contínua por teclado e a validação integrada do grupo.
+ * O `br-radio-group` agrupa opções de múltipla escolha onde apenas uma pode ser selecionada.
  *
- * ### Para que serve
+ * Adicione os elementos `br-radio` no slot padrão. Defina o rótulo do grupo em `label` e o valor selecionado em `value`.
  *
- * - **Coordenação de seleção mútua:** Garante que apenas um botão de rádio permaneça selecionado por vez entre todos os rádios filhos.
- * - **Navegação acessível por teclado WAI-ARIA:** Implementa o padrão de navegação com setas direcionais (cima/baixo/esquerda/direita) com foco cíclico dentro do grupo.
- * - **Agrupamento semântico:** Estrutura o grupo com a semântica de `radiogroup`, fornecendo rótulo acessível para tecnologias assistivas.
- * - **Associação com formulários:** Atua como controle integrado (`formAssociated`), emitindo o valor consolidado selecionado para o formulário pai.
+ * ```html
+ * <br-radio-group label="Turno de atendimento" name="turno">
+ *   <br-radio value="manha" label="Manhã"></br-radio>
+ *   <br-radio value="tarde" label="Tarde"></br-radio>
+ *   <br-radio value="noite" label="Noite"></br-radio>
+ * </br-radio-group>
+ * ```
  *
- * ### Quando utilizar
+ * Em formulários HTML, o grupo integra-se via `ElementInternals`, controlando validação nativa com `required`.
  *
- * - **Utilize quando:**
- *   - Apresentar um conjunto de 2 a 5 alternativas mutuamente exclusivas onde todas as opções devam ser comparadas lado a lado ou em lista vertical.
- * - **Evite e prefira outro componente quando:**
- *   - Houver muitas alternativas (mais de 5 a 7 opções): prefira `br-select`.
- *   - A seleção permitir múltiplas alternativas independentes: prefira `br-checkbox-group`.
+ * ### Quando usar
  *
- * ### Estrutura e Slots
+ * - Entre 2 e 5 opções mutuamente exclusivas que devem permanecer visíveis.
  *
- * O `br-radio-group` é um orquestrador de seleção:
- * - `default`: Slot onde devem ser declarados os componentes filhos `br-radio`.
- * - `label`: Slot para personalização do rótulo ou enunciado da pergunta do grupo.
+ * ### Quando evitar
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/radio-group?tab=designer).
+ * - Mais de 6 opções: use `br-select` para economizar espaço de tela.
+ * - Seleção de múltiplas opções ao mesmo tempo: use `br-checkbox-group`.
+ * - Liga/desliga imediato: use `br-switch`.
+ *
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/radio-group?tab=designer).
  *
-
  * @category Formulários, Seleção
  * @see br-radio
  * @slot default - Radios pertencentes ao grupo.
@@ -188,7 +188,7 @@ export class RadioGroup {
     }
     handleChildStateChange(event) {
         const radio = event.target;
-        // `brInternalRadioChecked` continua sendo a decisão canônica para
+        // `brInternalRadioChecked` continua sendo a decisão principal para
         // seleção. Ignorar a invalidação genérica de `checked` evita transformar
         // o desmarcamento nativo de um radio standalone em limpeza do grupo.
         if (event.detail?.property === 'checked')
@@ -471,7 +471,7 @@ export class RadioGroup {
         const isAriaInvalid = !this.isDisabled() && (hasError || this.effectiveState === 'invalid');
         const hasErrorMessage = hasError || this.hasFeedbackSlot;
         const hasVisibleLegend = Boolean(this.label || this.hasLabelSlot);
-        return (h(Host, { key: '248ac32963cb7ba0f4da47479c5f75ea4a4fd823', class: this.getCssClassMap(), "aria-busy": this.isValidating ? 'true' : null, "aria-disabled": this.isDisabled() ? 'true' : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("fieldset", { key: '10af8c4e59d75180589e616b52b17057895da18e', part: "group", disabled: this.isDisabled(), "aria-label": !hasVisibleLegend ? this.ariaLabel : null, "aria-labelledby": hasVisibleLegend ? legendId : null, "aria-describedby": this.hasDescriptionSlot ? descriptionId : null, "aria-errormessage": hasErrorMessage ? feedbackId : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("legend", { key: '421c9ebb496ba66ef708a1e104d7772649a16cec', id: legendId, part: "legend", hidden: !hasVisibleLegend }, h("slot", { key: 'f45990b75bcfbeb57d0b599abc1227945bbb8652', name: "label", onSlotchange: (event) => (this.hasLabelSlot = hasAssignedSlotContent(event.currentTarget)) }, this.label)), h("div", { key: '7bd98f81c2933d1322af6fee0afbd540ae76130a', class: "radio-group-options", part: "options" }, h("slot", { key: 'c956f5eb203e6de94d836184d60f731a343bd693' })), h("div", { key: 'd4d7626b9e910c419ac2be5ae57c2103b2525551', id: descriptionId, class: "radio-group-description", part: "description", hidden: !this.hasDescriptionSlot }, h("slot", { key: '3372397ff142ea3c56b865cdf2d145d30727f570', name: "description", onSlotchange: (event) => (this.hasDescriptionSlot = hasAssignedSlotContent(event.currentTarget)) })), h("div", { key: '3dd970dfa02b0e325fe867661d3cb44f49f88513', id: feedbackId, class: "radio-group-feedback", part: "feedback", "aria-live": "polite", "aria-atomic": "true", hidden: !hasError && !this.hasFeedbackSlot }, h("slot", { key: 'a3041ce32f51721ef4b6bb9be2f59bf6b0b63553', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), this.renderDefaultFeedback(hasError, validationMessage)), h("div", { key: '513d457c42a99df44779cf011113af84028c8859', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: '689c16ed0c86c1641806b316cec77e60a97f4987', name: "validation-loading" })))));
+        return (h(Host, { key: 'd83a897d172e99d1a973d916ce30ae801436e31f', class: this.getCssClassMap(), "aria-busy": this.isValidating ? 'true' : null, "aria-disabled": this.isDisabled() ? 'true' : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("fieldset", { key: '0e9a160909f8017c4356e7a5e0f8f00a6bdbf7fa', part: "group", disabled: this.isDisabled(), "aria-label": !hasVisibleLegend ? this.ariaLabel : null, "aria-labelledby": hasVisibleLegend ? legendId : null, "aria-describedby": this.hasDescriptionSlot ? descriptionId : null, "aria-errormessage": hasErrorMessage ? feedbackId : null, "aria-invalid": isAriaInvalid ? 'true' : null }, h("legend", { key: '47c665027622c12ae0d7ac89e925c0cdb0297d1f', id: legendId, part: "legend", hidden: !hasVisibleLegend }, h("slot", { key: 'b7777631f7322886473918812c052453b8f84b5c', name: "label", onSlotchange: (event) => (this.hasLabelSlot = hasAssignedSlotContent(event.currentTarget)) }, this.label)), h("div", { key: '12d9e8cb0d039d8fd287c7634183e0e9c07bf8f1', class: "radio-group-options", part: "options" }, h("slot", { key: '3fec31f7447e25b4f85e8559be1f3dbd1d9285c6' })), h("div", { key: '710a575506e1b43cda27d5a37c1e03831acfe76f', id: descriptionId, class: "radio-group-description", part: "description", hidden: !this.hasDescriptionSlot }, h("slot", { key: '179f7383c46326457e87b7b799b7ffce871a6167', name: "description", onSlotchange: (event) => (this.hasDescriptionSlot = hasAssignedSlotContent(event.currentTarget)) })), h("div", { key: 'fd4f3dfc54bfa81a58bf0b6f956888e470d66749', id: feedbackId, class: "radio-group-feedback", part: "feedback", "aria-live": "polite", "aria-atomic": "true", hidden: !hasError && !this.hasFeedbackSlot }, h("slot", { key: '52d04c089eddab18dababfca2d07f66aa67be06d', name: "feedback", onSlotchange: (event) => (this.hasFeedbackSlot = hasAssignedSlotContent(event.currentTarget)) }), this.renderDefaultFeedback(hasError, validationMessage)), h("div", { key: '7e7b86217b75a2086143b0795f4393465069f5e4', part: "validation-loading", hidden: !this.hasValidationLoadingSlot || !this.isValidating }, h("slot", { key: 'cda63c470da51a83e54c31cd90a15df9fcd20cee', name: "validation-loading" })))));
     }
     static get is() { return "br-radio-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrim/scrim.js

@@ -10,29 +10,26 @@ import { resolveAllowedPropValue, resolveIntegerPropValue, resolveNumberPropValu
 import { createRafBatcher } from "../../shared/utils/raf-batcher";
 import { lockBodyScroll, unlockBodyScroll } from "../../shared/utils/scrollLock";
 /**
- * O componente `br-scrim` é a camada de sobreposição visual (backdrop / máscara) do GovBR-DS, utilizada para escurecer temporariamente a interface e direcionar a atenção da pessoa usuária para um ponto de interesse ou diálogo.
+ * O `br-scrim` cria uma máscara visual escura sobre a tela ou sobre um elemento pai para focar a atenção do usuário.
  *
- * ### Para que serve
+ * Use os métodos `show()`, `hide()` ou a propriedade `active` para controlar a exibição. Coloque o conteúdo em destaque no slot padrão.
  *
- * - **Destaque visual exclusivo (Spotlight):** Cria um foco exclusivo sobre determinado elemento da página (como um tour guiado ou tutorial introdutório).
- * - **Bloqueio de interação com o fundo:** Impede cliques acidentais e rolagem na interface subjacente enquanto uma superfície flutuante estiver ativa.
- * - **Comportamento acessível de fechamento:** Suporta fechamento ao clicar na máscara ou ao pressionar a tecla Escape, com controle de foco previsível.
+ * ```html
+ * <br-scrim active>
+ *   <div class="destaque">Conteúdo em evidência</div>
+ * </br-scrim>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - For necessário criar máscaras de fundo personalizadas para fluxos de onboarding, tutoriais ou menus temporários imersivos.
- * - **Evite e prefira outro componente quando:**
- *   - Estiver implementando uma caixa de diálogo padrão com cabeçalho, corpo e rodapé (prefira `br-modal`, que já inclui seu próprio scrim interno).
+ * - Destaque visual pontual de um elemento (tutoriais guiados ou máscaras personalizadas).
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-scrim` atua como superfície de sobreposição:
- * - `default`: Slot para inserção do elemento que receberá o destaque em primeiro plano sobre a máscara.
+ * - Caixas de diálogo modais padrão: use `br-modal` (que já gerencia seu próprio scrim internamente).
  *
- * Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/scrim?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/scrim?tab=designer).
  *
-
  * @category Feedback, Sobreposições
  * @status stable
  * @slot default - Slot para o conteúdo principal a ser exibido sobre o fundo escurecido do scrim.
@@ -1283,8 +1280,8 @@ export class Scrim {
                     this.handleMaskClick(event);
                 }
             } }));
-        const contentElement = (h("div", { key: '3ac232885a157cd05d718cfed0c63af7a3a769ac', ref: (el) => (this.contentRef = el ?? null), id: `${this.customId}-content`, class: this.effectiveContentLayout === 'none' ? 'content content-unwrapped' : 'content', tabIndex: this.effectiveContentLayout === 'none' ? undefined : -1 }, h("slot", { key: '9d2306c1cc3296e63272e2e08fb5b216eb1bdb9d' })));
-        return (h(Host, { key: 'c7c171f3e033e7c80ba0f9ce98515331385b2bf5' }, h("slot", { key: '7b379fa99c11d5a0227abf44a7fb3dc27ffe1cf4', name: "activator" }), this.usesNativeDialog ? (h("dialog", { ref: (el) => {
+        const contentElement = (h("div", { key: 'f3103320a667135969fa3d215f9d0da97169f504', ref: (el) => (this.contentRef = el ?? null), id: `${this.customId}-content`, class: this.effectiveContentLayout === 'none' ? 'content content-unwrapped' : 'content', tabIndex: this.effectiveContentLayout === 'none' ? undefined : -1 }, h("slot", { key: '5cfa134aad52330abade48d26e2777776c9996d3' })));
+        return (h(Host, { key: '699b6a6137444166a9b20d486b9491a465b04e5c' }, h("slot", { key: 'eee056628c6752f65ae1dc3a05e3c5eb480423e2', name: "activator" }), this.usesNativeDialog ? (h("dialog", { ref: (el) => {
                 this.nativeDialogRef = el;
                 this.scrimDivRef = el;
             }, class: this.getCssClassMap(), id: this.customId, role: this.usesNativeTopLayer ? undefined : 'dialog', "aria-modal": "true", "aria-label": this.ariaLabel || 'Conteúdo do diálogo', "data-visible": this.isActive ? 'true' : 'false', onCancel: this.handleNativeCancel, onKeyDown: this.handleKeyDown }, maskElement, rect !== null && this.renderSpotlightOverlay(maskId, rect, padding), contentElement)) : isDialogContainer ? (h("div", { ref: (el) => {

package/dist/collection/components/select/select-input/select-input.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}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{box-sizing:border-box;display:block;cursor:pointer;max-width:100%;width:100%}br-input{cursor:pointer}:host([disabled]){opacity:1 !important;cursor:default}:host([disabled]) br-input{cursor:default}
+*,*::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{box-sizing:border-box;display:block;cursor:pointer;max-width:100%;width:100%}br-input{cursor:pointer}:host([disabled]){opacity:1 !important;cursor:default}:host([disabled]) br-input{cursor:default}br-input::part(group){container-type:inline-size}@container (width < 168px){br-input::part(clear){display:none}br-input::part(input){padding-right:var(--spacing-scale-5x)}}@container (width < 128px){br-input::part(icon){display:none}br-input::part(input){padding-left:var(--spacing-scale-2x)}}

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

@@ -6,17 +6,9 @@ import { Host, h, } from "@stencil/core";
 import { resolveAllowedPropValue, resolveDensity } from "../../../shared/utils/props";
 const SELECT_INPUT_AUTOCOMPLETE_VALUES = ['on', 'off'];
 /**
- * Subcomponente especializado de `br-select` responsável pelo campo de acionamento, entrada de texto e controle de expansão do popup.
+ * Campo de texto e acionamento interno do `br-select`.
  *
- * ### Papel na composição
- * - Exibe o rótulo (`label`), texto de espaço reservado (`placeholder`) e o resumo dos itens atualmente selecionados.
- * - Atua como campo de entrada textual para digitação de filtros e termos de busca local ou remota.
- * - Contém o botão de ação para abrir ou recolher a lista de opções (`br-select-list`), controlando a rotação do ícone indicador.
- *
- * ### Regra de uso e relacionamento
- * Na quase totalidade das aplicações, este componente é instanciado e gerenciado internamente pelo orquestrador `br-select`. Ele não fornece nem renderiza a coleção de opções: recebe do pai o valor exibido, o termo de busca e os estados de abertura e desabilitação. Não deve ser declarado manualmente na página, pois depende da coordenação do pai para foco, ARIA, eventos e sincronização com formulários. Use isoladamente apenas em composições arquiteturais altamente customizadas onde a aplicação assumir explicitamente toda a orquestração de foco e estado.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/select?tab=designer).
+ * É gerenciado automaticamente pelo `br-select` para exibir o valor selecionado, receber termos de busca e abrir ou fechar a lista suspensa. Não é necessário utilizá-lo de forma avulsa.
  *
  * @category Formulários, Seleção
  * @status stable
@@ -27,6 +19,7 @@ const SELECT_INPUT_AUTOCOMPLETE_VALUES = ['on', 'off'];
  * @part icon - Ícone do campo.
  * @part action - Botão de ação.
  * @part action-button - Botão interno da ação.
+ * @part clear - Botão de limpar o texto digitado.
  */
 export class SelectInput {
     constructor() {
@@ -67,6 +60,13 @@ export class SelectInput {
          * @default false
          */
         this.filterable = false;
+        /**
+         * Exibe o botão de limpar enquanto houver texto no campo editável.
+         * O `br-select` o ativa somente durante a busca, para limpar o termo digitado
+         * sem alterar a seleção.
+         * @default false
+         */
+        this.clearable = false;
         this.flipped = false;
         this.handleFocus = () => {
             this.brSelectInputFocus.emit();
@@ -80,12 +80,13 @@ export class SelectInput {
         this.handleClick = (event) => {
             if (this.disabled)
                 return;
-            const isActionClick = event.composedPath().some((target) => {
-                if (!(target instanceof HTMLElement))
-                    return false;
-                const parts = target.getAttribute('part')?.split(/\s+/) ?? [];
-                return parts.includes('action') || parts.includes('action-button');
-            });
+            const partsInPath = event
+                .composedPath()
+                .flatMap((target) => (target instanceof HTMLElement ? (target.getAttribute('part')?.split(/\s+/) ?? []) : []));
+            // O botão de limpar trata o próprio clique; não é um clique no campo.
+            if (partsInPath.includes('clear'))
+                return;
+            const isActionClick = partsInPath.includes('action') || partsInPath.includes('action-button');
             if (isActionClick) {
                 this.brSelectInputActionClick.emit();
                 return;
@@ -227,9 +228,9 @@ export class SelectInput {
             iconName: this.flipped ? 'fa6-solid:chevron-up' : 'fa6-solid:chevron-down', width: "16", height: "16", slot: "action" }));
     }
     render() {
-        return (h(Host, { key: '36a6850e7f9ecb425e8edd62bb693d85c63275c5' }, h("div", { key: '425892a54d2e2efa4470cdef504bc6492ba42c04', class: this.getCssClassMap(), part: "container" }, h("br-input", { key: '036bb76d093fd7026d8575a917199fa455973adb', "aria-label": this.label || this.placeholder || 'Seleção', "action-tab-index": -1, "action-label": this.flipped ? 'Fechar opções' : 'Abrir opções', autocomplete: this.effectiveAutocomplete, borderless: this.borderless, "control-width": this.inputWidth, density: this.effectiveDensity, readonly: !this.filterable, "is-inline": this.isInline, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, ref: (el) => {
+        return (h(Host, { key: '1a145e4627f1dc31d76195d06ee5637bcd39345d' }, h("div", { key: 'f08998f73c39dcd6f2705274d53b60a8fe1af8b6', class: this.getCssClassMap(), part: "container" }, h("br-input", { key: '48c84b67bb242d50c5177388bb12c4f998ebd996', "aria-label": this.label || this.placeholder || 'Seleção', "action-tab-index": -1, "action-label": this.flipped ? 'Fechar opções' : 'Abrir opções', autocomplete: this.effectiveAutocomplete, borderless: this.borderless, clearable: this.clearable, "control-width": this.inputWidth, density: this.effectiveDensity, readonly: !this.filterable, "is-inline": this.isInline, label: this.label, name: this.name, placeholder: this.placeholder, required: this.required, ref: (el) => {
                 this.inputElement = el;
-            }, value: this.value, disabled: this.disabled, onClick: this.handleClick, onInput: this.handleInput, onFocus: this.handleFocus, exportparts: "container:input, label:label, input:input, group:group, icon:icon, action:action, action-button:action-button" }, (this.filterable || this.showSearchIcon) && this.renderSearchIcon(), this.renderDropdownIcon()))));
+            }, value: this.value, disabled: this.disabled, onClick: this.handleClick, onInput: this.handleInput, onFocus: this.handleFocus, exportparts: "container:input, label:label, input:input, group:group, icon:icon, action:action, action-button:action-button, clear:clear" }, (this.filterable || this.showSearchIcon) && this.renderSearchIcon(), this.renderDropdownIcon()))));
     }
     static get is() { return "br-select-input"; }
     static get encapsulation() { return "shadow"; }
@@ -524,13 +525,36 @@ export class SelectInput {
                             "name": "type",
                             "text": "{boolean | undefined}"
                         }],
-                    "text": "Exibe a lupa mesmo quando o campo n\u00E3o \u00E9 filtr\u00E1vel.\nQuando filterable \u00E9 true, a lupa \u00E9 exibida automaticamente."
+                    "text": "Exibe a lupa mesmo quando o campo n\u00E3o \u00E9 filtr\u00E1vel.\nQuando filterable \u00E9 true, a lupa \u00E9 exibida automaticamente.\nEm campos com menos de 128px, a lupa \u00E9 omitida para preservar valor e seta."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
                 "attribute": "show-search-icon"
             },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Exibe o bot\u00E3o de limpar enquanto houver texto no campo edit\u00E1vel.\nO `br-select` o ativa somente durante a busca, para limpar o termo digitado\nsem alterar a sele\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
             "value": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/select/select-list/select-list.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}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{display:block}:host{display:block;left:0;position:absolute;right:0;top:100%;z-index:var(--z-index-layer-1)}.br-select-list{background-color:var(--bg-color);box-shadow:var(--select-shadow);display:none;margin-top:0;max-height:404px;overflow:auto;resize:none;width:100%}.br-select-list.is-open{display:block;animation:none}@media(prefers-reduced-motion: no-preference){.br-select-list.is-open{animation:select-list-open var(--duration-fast, 300ms) var(--animation-ease-out, ease-out) both}}.option-group-label{align-items:center;background-color:var(--background-light);border-bottom:1px solid var(--border-color-alternative);color:var(--color);display:flex;font-size:var(--font-size-scale-down-01);font-weight:var(--font-weight-semi-bold);padding:0 var(--spacing-scale-2x)}[part=empty-option]{align-items:center;color:var(--color);display:flex;padding:0 var(--spacing-scale-2x)}@keyframes select-list-open{from{opacity:0}to{opacity: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}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{display:block}:host{display:block;left:0;position:absolute;right:0;top:100%;z-index:var(--z-index-layer-1)}.br-select-list{background-color:var(--bg-color);box-shadow:var(--select-shadow);display:none;margin-top:0;max-height:404px;overflow:auto;resize:none;width:100%}.br-select-list.is-open{display:block;animation:none}@media(prefers-reduced-motion: no-preference){.br-select-list.is-open{animation:select-list-open var(--duration-fast, 300ms) var(--animation-ease-out, ease-out) both}}.option-group-label{align-items:center;background-color:var(--background-light);border-bottom:1px solid var(--border-color-alternative);color:var(--color);display:flex;font-size:var(--font-size-scale-down-01);font-weight:var(--font-weight-semi-bold);padding:0 var(--spacing-scale-2x)}[part=loading]{align-items:center;display:flex;min-height:var(--spacing-scale-7x);padding:var(--spacing-scale-base) var(--spacing-scale-2x)}[part=empty-option]{align-items:center;color:var(--color);display:flex;padding:0 var(--spacing-scale-2x)}@keyframes select-list-open{from{opacity:0}to{opacity:1}}