@govbr-ds/webcomponents 2.4.0 → 2.5.0

package/dist/collection/components/menu/menu-social/menu-social.js

@@ -7,21 +7,8 @@ import { generateUniqueId } from "../../../shared/utils/id";
 import { handleNavigationClick } from "../../../shared/utils/navigation";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * O componente `br-menu-social` é o subcomponente do GovBR-DS que reúne atalhos para os canais de redes sociais institucionais no interior do menu.
+ * Bloco de canais e redes sociais institucionais dentro do `br-menu`. Use no slot `social` ou rodapé do menu.
  *
- * ### Para que serve
- *
- * - **Acesso rápido a mídias:** Permite que o cidadão acesse perfis institucionais a partir da gaveta de navegação.
- *
- * ### Papel na composição
- *
- * Atua como bloco de engajamento social no menu.
- *
- * ### Regra de uso e relacionamento
- *
- * - Posiciona-se preferencialmente na base ou rodapé interno do `br-menu`.
- *
-
  * @slot icon - Slot para ícone personalizado da rede social.
  */
 export class MenuSocial {
@@ -250,7 +237,7 @@ export class MenuSocial {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando o link de rede social \u00E9 clicado."
+                    "text": "Evento emitido quando o link de rede social \u00E9 clicado."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/menu/menu.js

@@ -11,45 +11,38 @@ import { supportsNativeModalDialog, syncNativeModalDialog } from "../../shared/u
 import { findComposedOwner } from "../../shared/utils/ownership";
 import { resolveDensity } from "../../shared/utils/props";
 /**
- * O componente `br-menu` é o orquestrador completo de navegação lateral (drawer/sidebar) do GovBR-DS. Estrutura a navegação multinível de portais e sistemas públicos, oferecendo suporte a hierarquias em árvore, agrupamentos, busca interna, informações do usuário e canais sociais.
+ * O `br-menu` organiza a navegação lateral da aplicação em gaveta retrátil ou barra fixa.
  *
- * ### Para que serve
+ * Use `is-open` para controlar a visibilidade, ou chame os métodos `open()`, `close()` e `toggle()`. Estruture a navegação com os subcomponentes `br-menu-header`, `br-menu-group`, `br-menu-list` e `br-menu-item`.
  *
- * - **Navegação estruturada em árvore:** Permite navegar por hierarquias profundas de seções e subsistemas governamentais.
- * - **Modos responsivos:** Suporta exibição fixa/lateral no desktop e painel retrátil suspenso com cortina de fundo (`br-scrim`) em telas mobile.
- * - **Acessibilidade completa:** Gerencia controle de foco por teclado, armadilha de foco (trap focus) quando aberto e atributos WAI-ARIA (`aria-expanded`, `role="dialog"` ou `role="navigation"`).
- * - **Navegação multinível fluida:** Oferece transições suaves entre níveis hierárquicos com botões de retorno ao nível anterior.
+ * ```html
+ * <br-menu id="menu-principal">
+ *   <div slot="header">
+ *     <br-menu-header title-text="Menu Principal"></br-menu-header>
+ *   </div>
+ *   <br-menu-list>
+ *     <br-menu-item>
+ *       <br-menu-link href="/inicio">Início</br-menu-link>
+ *     </br-menu-item>
+ *     <br-menu-item>
+ *       <br-menu-link href="/servicos">Serviços</br-menu-link>
+ *     </br-menu-item>
+ *   </br-menu-list>
+ * </br-menu>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - A aplicação ou portal exigir uma estrutura de navegação lateral abrangente, com menus de múltiplos níveis e categorias.
- *   - Houver necessidade de um menu que possa ser recolhido ou deslizado em dispositivos móveis com controle de foco integrado.
- * - **Evite e prefira outro componente quando:**
- *   - A navegação tiver poucos itens e puder ser acomodada confortavelmente apenas no cabeçalho (prefira `br-header`).
- *   - O objetivo for alternar visualizações na mesma tela de forma plana (prefira `br-tab`).
+ * - Menus com hierarquia de seções, grupos ou múltiplos níveis de páginas.
+ * - Navegação lateral que precisa ser recolhida em telas móveis com fechamento por máscara (`br-scrim`).
  *
- * ### Composição e Subcomponentes
+ * ### Quando evitar
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-menu` | **Orquestrador principal.** Gerencia estado aberto/fechado, navegação multinível, scrim e armadilha de foco. | Deve ser declarado como contêiner principal da navegação lateral. |
- * | `br-menu-header` | **Cabeçalho do menu.** Exibe título e botão de fechar o painel. | Inserido no topo do `br-menu`. |
- * | `br-menu-group` | **Agrupador temático.** Agrupa itens sob um subtítulo de seção. | Inserido no corpo de navegação do `br-menu`. |
- * | `br-menu-list` | **Lista de opções.** Estrutura semântica de lista contendo itens navegáveis. | Inserido no `br-menu` ou dentro de um `br-menu-group`. |
- * | `br-menu-item` | **Item de menu.** Opção clicável de rota ou gatilho para submenu. | Deve ser utilizado dentro de um `br-menu-list`. |
- * | `br-menu-link` | **Hiperlink.** Link textual padronizado no menu. | Inserido dentro de `br-menu-item` ou seções de apoio. |
- * | `br-menu-info` | **Informações de apoio.** Exibe dados de sessão, versão ou contexto do sistema. | Posicionado na base ou topo do `br-menu`. |
- * | `br-menu-logo` | **Logotipo.** Exibe a marca do órgão no interior do menu. | Posicionado no cabeçalho ou topo do `br-menu`. |
- * | `br-menu-social` | **Redes sociais.** Bloco de canais sociais oficiais no menu. | Posicionado preferencialmente no rodapé do `br-menu`. |
+ * - Poucos itens que cabem diretamente no cabeçalho: use `br-header`.
+ * - Alternar visões na mesma página: use `br-tab`.
  *
- * ### Como os subcomponentes se relacionam
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/menu?tab=designer).
  *
- * O `br-menu` atua como o orquestrador soberano da navegação. Ele controla a transição de visibilidade, a ativação do scrim de fundo e o comportamento dos subníveis. Ao navegar entre níveis, os itens (`br-menu-item`) comunicam suas seleções ao `br-menu`, que desliza os painéis correspondentes e mantém a ordem correta de tabulação do teclado.
- *
- * 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/menu?tab=designer).
- *
-
  * @category Navegação, Estrutura
  * @status stable
  * @slot default - Slot para o conteúdo principal do menu (menu-list, menu-group e menu-item).
@@ -1003,11 +996,11 @@ export class Menu {
     // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: render combina três modos de menu, gatilhos distintos e estrutura de painel responsivo.
     render() {
         const MenuContainer = this.usesNativeDialog ? 'dialog' : 'div';
-        return (h(Host, { key: '58bacd3cc23afb2f637c5afd926aa2bc65dfed56' }, h("div", { key: 'd31f34eec727ffcbbd1efa69ed34b0f4b0ba2662', class: this.getCssClassMap() }, this.contextual && (h("div", { key: 'c8257806308974de26a7d11a96509dd67e3c1e2a', class: "menu-trigger" }, h("br-button", { key: '2c1f7cad0705c0322752391f634cd025e6fdc6df', id: "contextual-trigger", emphasis: "primary", shape: "block", "aria-label": this.contextualLabel, "prop:ariaExpanded": String(this.isOpen), onClick: this.onToggleClick, part: "trigger" }, h("span", { key: 'b198f604bd69ff5ee3866b9627fad54e510f2bd7', class: "trigger-label" }, this.contextualLabel), h("br-icon", { key: 'adce72caacaa47e0f8c71f9b9d8b891f10a1c132', iconName: `fa6-solid:chevron-${this.isOpen ? 'down' : 'up'}`, width: "16", height: "16", class: "trigger-icon", "aria-hidden": "true" })))), h(MenuContainer, { key: 'a27a85858a9c694c2cb7013d29adbdef8daa5e40', ref: (el) => (this.nativeDialogRef = this.usesNativeDialog ? el : null), class: 'menu-container', part: "container", role: this.usesNativeDialog ? 'dialog' : undefined, "aria-modal": this.usesNativeDialog ? 'true' : undefined, "aria-label": this.usesNativeDialog ? 'Menu' : undefined, onCancel: this.usesNativeDialog ? this.handleNativeCancel : undefined }, this.renderScrim(), h("div", { key: 'ec16517b86fba416ac510e695428949732758297', id: this.contextual ? 'contextual-menu-panel' : 'menu-panel', class: this.getMenuPanelClasses(), ...(this.usesNativeDialog
+        return (h(Host, { key: '3be3ad63e8b1ef0d99cb717cec9c42f2c91548d9' }, h("div", { key: '9a9439712d713fbe6e466e4cca4f123fd9fcdaf0', class: this.getCssClassMap() }, this.contextual && (h("div", { key: 'a022c87131ab81fa3fef1745e9d7348a6553f02e', class: "menu-trigger" }, h("br-button", { key: '8893badc5ed9d1cb020f0dee8cc803d186ce1b74', id: "contextual-trigger", emphasis: "primary", shape: "block", "aria-label": this.contextualLabel, "prop:ariaExpanded": String(this.isOpen), onClick: this.onToggleClick, part: "trigger" }, h("span", { key: 'dc6e337ed222cf4de431ae33255c2d097311b98e', class: "trigger-label" }, this.contextualLabel), h("br-icon", { key: '7d7f65554a07074880a8e5e54f23d85d1ec1dd16', iconName: `fa6-solid:chevron-${this.isOpen ? 'down' : 'up'}`, width: "16", height: "16", class: "trigger-icon", "aria-hidden": "true" })))), h(MenuContainer, { key: '9919eecb5ac7f569ea7d3c7ab9a952a6c62bfe00', ref: (el) => (this.nativeDialogRef = this.usesNativeDialog ? el : null), class: 'menu-container', part: "container", role: this.usesNativeDialog ? 'dialog' : undefined, "aria-modal": this.usesNativeDialog ? 'true' : undefined, "aria-label": this.usesNativeDialog ? 'Menu' : undefined, onCancel: this.usesNativeDialog ? this.handleNativeCancel : undefined }, this.renderScrim(), h("div", { key: 'b77ed8d274e749f09dbfbd77440512a94d48c4f9', id: this.contextual ? 'contextual-menu-panel' : 'menu-panel', class: this.getMenuPanelClasses(), ...(this.usesNativeDialog
                 ? {}
-                : { role: 'dialog', 'aria-label': this.contextual ? this.contextualLabel : 'Menu' }), part: "panel" }, !this.contextual && !this.push && this.hasSlotContent('header') && h("slot", { key: 'b86f6086960c4ecd1e88786a240b6032a41c2701', name: "header" }), h("nav", { key: 'ab98f6004fa867c570db7f2d4f347c074602b186', class: "menu-body", part: "body" }, this.isInSubmenu && this.currentLevel > 0 && (h("div", { key: '9b6183c904704f2ffa440c90bd809d20ad5dfba7', class: "menu-back-button" }, h("button", { key: 'f52fc11000e5f0425da6c995a7ac9aceb59a00b2', type: "button", class: "back-btn", onClick: this.onGoBackClick, "aria-label": "Voltar ao n\u00EDvel anterior", part: "back-btn" }, h("br-icon", { key: 'a44ee81741c66c4b6b7cbe08f62e12c0ced023e5', class: "back-icon", iconName: "fa6-solid:angle-left", width: "16", height: "16", "aria-hidden": "true" }), h("span", { key: '0419c60ba8a22f9c4649d5cca442ab3ee32a0e47', class: "back-title" }, this.navigationStack.length > 0
+                : { role: 'dialog', 'aria-label': this.contextual ? this.contextualLabel : 'Menu' }), part: "panel" }, !this.contextual && !this.push && this.hasSlotContent('header') && h("slot", { key: '6ca4634f0a3e1f39087651dd7f2b91303dfd44cd', name: "header" }), h("nav", { key: '9655447991eaf09248cac8b3e414b04154102866', class: "menu-body", part: "body" }, this.isInSubmenu && this.currentLevel > 0 && (h("div", { key: '5bba60e5b0b6f43cfacda6fade276df6b7a18e4d', class: "menu-back-button" }, h("button", { key: 'ab670ac9bf42568030714d959e62d2a37ad487c2', type: "button", class: "back-btn", onClick: this.onGoBackClick, "aria-label": "Voltar ao n\u00EDvel anterior", part: "back-btn" }, h("br-icon", { key: 'c9432ddbbbbecf5facf107c770616b5b7d87693c', class: "back-icon", iconName: "fa6-solid:angle-left", width: "16", height: "16", "aria-hidden": "true" }), h("span", { key: '2d784eb4f4e3583e754c4d5ab9dc4d30df729cb0', class: "back-title" }, this.navigationStack.length > 0
             ? `${this.navigationStack[this.navigationStack.length - 1].label}`
-            : '')))), h("slot", { key: '9f9a0382ba2c4d34cfdacf6e17df1d59830dd8bf' })), !this.contextual && (h("div", { key: '29476d594b8130f2274c5474b2c094764a06c993', class: "menu-footer", part: "footer" }, this.hasSlotContent('logo') && (h("div", { key: '3d660a2f9332da5082b0a02c1a0d25201b94b422', class: "menu-logos", part: "logo" }, h("slot", { key: '967798e05c043485a2fd942a19f221b56a86e753', name: "logo" }))), this.hasSlotContent('link') && (h("div", { key: 'c87e50b9abd1270107e4416a1240e807c71a8e39', class: "menu-links", part: "link" }, h("slot", { key: 'a23b1210adcf241fbdd91e0ddafaf59ff1896274', name: "link" }))), this.hasSlotContent('social') && (h("div", { key: 'b2b1c111708d3d85dc01c7ea687dfe684cb7df7f', class: "social-network", part: "social" }, this.socialTitle && h("div", { key: '9f7abb42eb84100ce3ff9b339e13a08adcfa03fd', class: "social-network-title" }, this.socialTitle), h("div", { key: '08d40944d8bfaeee8e975f7b13c080bab8d792b2', class: "sharegroup" }, h("slot", { key: '76ba4a43396f049adab56f32b661d04a460c319c', name: "social" })))), this.hasSlotContent('info') && (h("div", { key: '26470a3e0072f6605d8e2d32f2a94b6bc4567f78', class: "menu-info", part: "info" }, h("slot", { key: 'fb7c6de5c772b939a87c9ec54a7717915adc21f4', name: "info" }))))))))));
+            : '')))), h("slot", { key: '75d042726cf38ae458bddf302b09d3c49c8ee759' })), !this.contextual && (h("div", { key: '67646a1bb00df774aa76f40045ce5ef0323c7128', class: "menu-footer", part: "footer" }, this.hasSlotContent('logo') && (h("div", { key: '1451a940ea3717ddb0f74b4091b8560cd8944a97', class: "menu-logos", part: "logo" }, h("slot", { key: '82523c94193b678eea225c216e91b4dd4b997a2c', name: "logo" }))), this.hasSlotContent('link') && (h("div", { key: 'fdc4a3ec5c2c9cf5a6ad7ea2e9273593dd380492', class: "menu-links", part: "link" }, h("slot", { key: 'be1da50b6c77cf864bf6a37ca0b0df6e839035a9', name: "link" }))), this.hasSlotContent('social') && (h("div", { key: 'fccb99dd085e76237d899771268c5b992d11f5b3', class: "social-network", part: "social" }, this.socialTitle && h("div", { key: 'ceae622374867f6aabedc920563987da73e9bd13', class: "social-network-title" }, this.socialTitle), h("div", { key: 'b20b5d0b4c7e023bbded39ad88923fa72e9d5858', class: "sharegroup" }, h("slot", { key: '94899d32fad3e0586d6c96fa788d9719f1e527f8', name: "social" })))), this.hasSlotContent('info') && (h("div", { key: '3c066e04f9eb6ba5868fe2f82e85c1dd95188b1a', class: "menu-info", part: "info" }, h("slot", { key: '80c387ca73bdd2e1827274328f670d3c8f522484', name: "info" }))))))))));
     }
     static get is() { return "br-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -1247,7 +1240,7 @@ export class Menu {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando o menu abre ou fecha.\n`detail.open` cont\u00E9m o estado conclu\u00EDdo e `detail.sourceId` identifica a inst\u00E2ncia pelo `id` ou `customId`."
+                    "text": "Evento emitido quando o menu abre ou fecha.\n`detail.open` cont\u00E9m o estado conclu\u00EDdo e `detail.sourceId` identifica a inst\u00E2ncia pelo `id` ou `customId`."
                 },
                 "complexType": {
                     "original": "MenuOpenChangeDetail",

package/dist/collection/components/message/message.js

@@ -7,36 +7,33 @@ import { generateUniqueId } from "../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../shared/utils/props";
 const MESSAGE_STATES = ['info', 'warning', 'danger', 'success'];
 /**
- * O componente `br-message` é a superfície de feedback contextual e notificação em linha do GovBR-DS, utilizada para comunicar mensagens de sucesso, informação, alerta ou erro diretamente associadas à tela ou a um formulário.
+ * O `br-message` apresenta um aviso contextual ou feedback em linha sobre uma operação ou estado do sistema.
  *
- * ### Para que serve
+ * Defina o tipo de mensagem em `state` (`success`, `danger`, `warning` ou `info`). Opcionalmente, adicione um botão para fechar com `closable`.
  *
- * - **Comunicação de estados do sistema:** Exibe mensagens com cores, ícones e semânticas padronizadas: `success` (sucesso), `info` (informação), `warning` (aviso) e `danger` (erro).
- * - **Validação de formulários:** Atua como o contêiner oficial de mensagem de erro e orientação nos slots `feedback` de componentes de formulário (como `br-input`, `br-select` e `br-checkbox`).
- * - **Opção de fechamento:** Suporta botão de dispensa (`closable`), permitindo que a pessoa usuária feche a notificação após a leitura.
+ * ```html
+ * <br-message state="success" message-title="Sucesso">
+ *   Operação realizada com sucesso.
+ * </br-message>
+ * <br-message state="danger" closable>
+ *   Não foi possível salvar os dados. Tente novamente.
+ * </br-message>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - For necessário dar feedback sobre uma ação recém-executada (ex.: "Dados salvos com sucesso").
- *   - Houver orientações contextuais ou erros de validação em campos de formulário.
- * - **Evite e prefira outro componente quando:**
- *   - A mensagem for crítica e exigir confirmação bloqueadora antes de continuar (prefira `br-modal`).
- *   - As notificações forem assíncronas do sistema e acumuladas em uma central de mensagens (prefira `br-notification`).
+ * - Feedback sobre uma ação recém-executada na página (salvar, excluir, atualizar).
+ * - Mensagens de erro ou orientação em formulários (no slot `feedback` de inputs).
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-message` oferece personalização modular:
- * - `message-title`: Slot para título de destaque da mensagem.
- * - `message-body`: Slot para o corpo detalhado do texto.
- * - `icon`: Slot para substituição do ícone contextual padrão.
- * - `close-button`: Slot para botão de fechar customizado.
- * - `default`: Slot livre para renderização direta do conteúdo.
+ * - Avisos críticos que exigem decisão antes de prosseguir: use `br-modal`.
+ * - Notificações acumuladas em uma central: use `br-notification`.
  *
- * 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/message?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/message?tab=designer).
  *
-
-
+ * @category Feedback, Conteúdo
+ * @status stable
  * @category Feedback, Conteúdo
  * @status stable
  * @slot default - Conteúdo principal da mensagem. Quando utilizado, a prop `message` é ignorada.
@@ -180,7 +177,7 @@ export class Message {
         return (h("div", { class: this.getCssClassMap(), role: "status", "aria-live": this.getAriaLive(), "aria-label": this.ariaLabel || this.getStateLabel(), id: this.customId, part: "container" }, h("div", { class: "icon", part: "icon" }, this.showIcon ? (h("br-icon", { iconName: this.checkIconState(), width: "20", height: "20", "aria-hidden": "true" })) : (h("slot", { name: "icon" }))), h("div", { class: "content", part: "content" }, this.message && this.message.length > 0 ? (h("div", null, this.messageTitle && (h("span", { class: "message-title" }, h("slot", { name: "message-title" }, this.messageTitle))), this.messageTitle && !this.effectiveInline && h("br", null), this.message && (h("span", { class: "message-body" }, h("slot", { name: "message-body" }, this.message))))) : (h("div", null, this.messageTitle && this.effectiveInline && (h("strong", null, h("slot", { name: "message-title" }, this.messageTitle))), this.messageTitle && !this.effectiveInline && h("br", null), h("slot", null)))), this.effectiveClosable && !this.effectiveFeedback && (h("div", { class: "close", part: "close" }, h("slot", { name: "close-button" }, h("br-button", { shape: "circle", type: "button", "prop:ariaLabel": "Fechar a mensagem", onClick: this.dismissHandler }, h("br-icon", { iconName: "fa-solid:times", width: "16", height: "16", "aria-hidden": "true" })))))));
     }
     render() {
-        return h(Host, { key: '17572137978859f5f0376a980af26403b2b2d6b8' }, this.effectiveFeedback ? this.renderFeedback() : this.renderStandard());
+        return h(Host, { key: 'aa5d87f80e9afbfc1d401fd63c85efdd24d8cdf8' }, this.effectiveFeedback ? this.renderFeedback() : this.renderStandard());
     }
     static get is() { return "br-message"; }
     static get encapsulation() { return "shadow"; }
@@ -466,7 +463,7 @@ export class Message {
                 "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,
@@ -521,7 +518,7 @@ export class Message {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Evento can\u00F4nico emitido quando a mensagem \u00E9 fechada."
+                    "text": "Evento emitido quando a mensagem \u00E9 fechada."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/components/modal/modal.js

@@ -12,35 +12,32 @@ import { resolveAllowedPropValue } from "../../shared/utils/props";
 const MODAL_SIZES = ['xsmall', 'small', 'medium', 'large', 'auto'];
 const MODAL_FOOTER_ALIGNS = ['start', 'end', 'center'];
 /**
- * O componente `br-modal` é a caixa de diálogo bloqueadora (dialog modal) do GovBR-DS, desenvolvida para capturar o foco e exigir a atenção imediata da pessoa usuária antes de permitir o retorno ao fluxo de trabalho normal.
+ * O `br-modal` abre uma janela de diálogo bloqueadora sobre uma máscara, capturando a atenção imediata da pessoa usuária.
  *
- * ### Para que serve
+ * Controle a abertura com os métodos `open()`, `close()` e `showModal()`. Estruture o conteúdo usando os slots `header`, `default` (corpo) e `footer` (botões de ação).
  *
- * - **Confirmação de ações críticas:** Solicita confirmação explícita para ações irreversíveis ou de grande impacto (ex.: excluir registro, cancelar processo em andamento).
- * - **Entrada de dados pontual:** Permite preencher formulários breves e contextuais sem sair da tela principal.
- * - **Gestão de foco e acessibilidade WAI-ARIA:** Bloqueia o foco dentro do diálogo (`focus trap`), impede a rolagem do fundo, aplica `aria-modal="true"` e fecha com a tecla Escape ou clique externo.
+ * ```html
+ * <br-modal title-text="Excluir item">
+ *   <p>Deseja realmente excluir este registro? Esta ação não pode ser desfeita.</p>
+ *   <div slot="footer">
+ *     <br-button emphasis="secondary">Cancelar</br-button>
+ *     <br-button emphasis="primary">Excluir</br-button>
+ *   </div>
+ * </br-modal>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - A decisão for estritamente obrigatória e a continuação sem ela puder causar perda de dados ou inconsistência.
- *   - Apresentar detalhes suplementares que requerem fechamento explícito.
- * - **Evite e prefira outro componente quando:**
- *   - A mensagem for informativa e não exigir ação imediata (prefira `br-message`).
- *   - O conteúdo for extenso, demandando navegação complexa (prefira uma nova página dedicada).
+ * - Confirmação de ações críticas ou irreversíveis (excluir registro, descartar alterações).
+ * - Formulários curtos e contextuais sem sair da tela atual.
  *
- * ### Estrutura e Slots
+ * ### Quando evitar
  *
- * O `br-modal` organiza o diálogo em regiões padronizadas:
- * - `header`: Slot para cabeçalho e título (substitui a prop `title-text`).
- * - `default`: Slot principal onde é inserido o corpo de texto ou formulário do modal.
- * - `footer`: Slot para ações de rodapé (botões de confirmação, envio e cancelamento com `br-button`).
- * - `close-button`: Slot para personalizar o botão de fechar do canto superior.
+ * - Mensagens informativas que não exigem confirmação: use `br-message`.
+ * - Conteúdos longos com navegação interna: use uma página dedicada.
  *
- * 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/modal?tab=designer).
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/modal?tab=designer).
  *
-
-
  * @slot header - Cabeçalho do modal. Se não for usado, o `title-text` será exibido.
  * @slot default - Corpo do modal.
  * @slot footer - Rodapé do modal.

package/dist/collection/components/notification/notification-body/notification-body.js

@@ -5,20 +5,10 @@
 import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 /**
- * Subcomponente de corpo da superfície `br-notification`, responsável por agrupar e organizar a lista de itens de notificação.
+ * Corpo do painel de notificações com rolagem independente. Use dentro do `br-notification`.
  *
- * ### Papel na composição
+ * Insira os itens `br-notification-item` no slot padrão.
  *
- * - Atua como contêiner com rolagem independente para a lista de comunicados (`br-notification-item`).
- * - Suporta filtros por abas ou categorias de mensagens (ex.: "Todas", "Não lidas").
- *
- * ### Regra de uso e relacionamento
- *
- * Declarado dentro do slot padrão do `br-notification`, posicionado abaixo do cabeçalho. Ele recebe múltiplos elementos `br-notification-item` em seu interior. Não deve ser usado fora do painel de notificação.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/notification?tab=designer).
- *
-
  * @slot tabs - Navegação por abas quando presente.
  * @slot default - Lista principal de notificações.
  * @slot empty - Conteúdo para estado vazio.
@@ -75,7 +65,7 @@ export class NotificationBody {
         };
     }
     render() {
-        return (h(Host, { key: 'fb6e3b2e0cb4a3a7be1c364402e05ee2ff71dcaf' }, h("div", { key: 'ebd6f7b117ba8c2f11bcc9e2658b0e749f0326bc', class: this.getCssClassMap() }, h("div", { key: '53d555b517c92da58b3861ab670e465348dd6f25', class: { 'br-notification-body__tabs': true, 'd-none': !this.hasTabs } }, h("slot", { key: '064cec005bddd6f858f13d10b4df9a433c92b1ff', name: "tabs", onSlotchange: () => this.checkSlotVisibility('tabs') })), h("div", { key: 'b4d87a106221cc18f59de11d4480a57cdb0f475b', class: "br-notification-body__list", role: "log", "aria-live": "polite", "aria-relevant": "additions removals" }, this.empty ? (h("div", { class: "br-notification-body__empty" }, h("slot", { name: "empty" }, h("p", null, "Nenhuma notifica\u00E7\u00E3o encontrada.")))) : (h("slot", null))))));
+        return (h(Host, { key: '860070d9dcc7613880449329cb67ba2ff40e5183' }, h("div", { key: 'f7d744982a632cc9fab866ea71e7f26050aced81', class: this.getCssClassMap() }, h("div", { key: '5d22d4602bf50542ea527b47e76e1adb8c2137bd', class: { 'br-notification-body__tabs': true, 'd-none': !this.hasTabs } }, h("slot", { key: 'ef8bc485b07717d364798c429e3197086c3182fd', name: "tabs", onSlotchange: () => this.checkSlotVisibility('tabs') })), h("div", { key: '12837023be819258bc63d1f92c14cadf8306a6da', class: "br-notification-body__list", role: "log", "aria-live": "polite", "aria-relevant": "additions removals" }, this.empty ? (h("div", { class: "br-notification-body__empty" }, h("slot", { name: "empty" }, h("p", null, "Nenhuma notifica\u00E7\u00E3o encontrada.")))) : (h("slot", null))))));
     }
     static get is() { return "br-notification-body"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification/notification-header/notification-header.js

@@ -5,21 +5,10 @@
 import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 /**
- * Subcomponente de cabeçalho da superfície `br-notification`, responsável pela identificação da área e controles de fechamento.
+ * Cabeçalho da central de notificações com título e botão de fechar. Use no slot `header` do `br-notification`.
  *
- * ### Papel na composição
+ * Defina o título em `title-text`. O botão de fechar emite o fechamento para o painel pai.
  *
- * - Exibe o título da central de notificações, avatar da pessoa autenticada e botão de ação para fechar o painel.
- * - Fornece contexto visual imediato ao abrir a gaveta de notificações.
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser utilizado como o elemento inicial dentro do orquestrador `br-notification`. Ele é coordenado pelo painel pai para disparar o evento de fechamento quando o botão de dispensa é acionado. Não deve ser usado fora de um `br-notification`.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/notification?tab=designer).
- *
-
- * @slot avatar - Área para avatar ou elemento visual do usuário.
  * @slot title - Conteúdo customizado do título.
  * @slot subtitle - Conteúdo customizado do subtítulo.
  * @slot actions - Região para botão de fechar ou outras ações contextuais.
@@ -52,7 +41,7 @@ export class NotificationHeader {
         };
     }
     render() {
-        return (h(Host, { key: '9f8d54d73c1837ae50a329996a7d41f0b3086886' }, h("div", { key: '321bdb8d6b28ac914d4b7720acb46fc3cedac285', class: this.getCssClassMap() }, h("div", { key: '4256e88c18105c4704bc3b6fffa646d04debc026', class: "br-notification-header__avatar" }, h("slot", { key: '5edc0e7e99cd383447891ce67aff49884ed76905', name: "avatar" })), h("div", { key: 'd3f51d00ae1df94957ef250089acc11d56c69292', class: "br-notification-header__content" }, h("div", { key: '4fa300405ec27b6d056e6bfd63788d602c839ce7', class: "br-notification-header__title" }, h("slot", { key: 'ff1efef0d024a65c8a8d4519a47324eeb16f33e0', name: "title" }, this.label)), this.subtitle !== undefined && this.subtitle !== null && (h("div", { key: '5309bf9e867eb922a487b195c4122b11e008b534', class: "br-notification-header__subtitle" }, h("slot", { key: '0b01783207f17cd6126a5024d6ac19fd2d0af8b3', name: "subtitle" }, this.subtitle)))), h("div", { key: 'b90545992ea2433dc3706898910f7bdfada7db8c', class: "br-notification-header__actions" }, h("slot", { key: '92232e7de76808bf7ac1828f9318d919bb0b954e', name: "actions" }, this.showCloseButton && (h("br-button", { key: '0fd4ff7cdaa5513f4e172cc2a1e32062956099fe', shape: "circle", density: "small", "aria-label": this.closeLabel, onClick: this.handleCloseClick }, h("br-icon", { key: '78403be8afaf23a0172b3e9d06a75726d93c8ab8', iconName: "fa-solid:times", width: "16", height: "16" }))))))));
+        return (h(Host, { key: '79b4e070caa857773cbe170140f739d51c2928b9' }, h("div", { key: '53f07bebeb1ee0b28f6e5123c6e2d1d03b398db6', class: this.getCssClassMap() }, h("div", { key: '0e359ae4e3e6aa2593af1a385c839ad71b3a6791', class: "br-notification-header__avatar" }, h("slot", { key: '945bf0c46f781a17e9becb180b6cf4b3873346a4', name: "avatar" })), h("div", { key: '94a5337a1e8e2320ee493ff23c1cfc6925013501', class: "br-notification-header__content" }, h("div", { key: '381651ec74fd67b070b218175c69f005680fa42a', class: "br-notification-header__title" }, h("slot", { key: '0a50ef10a550eeb46149670e5d86a2b0d800aa27', name: "title" }, this.label)), this.subtitle !== undefined && this.subtitle !== null && (h("div", { key: '5cc3c858372a17485d4c020f222300c0ae639db6', class: "br-notification-header__subtitle" }, h("slot", { key: 'c058d9c3ae6298e8fb2e7f8f665a08a7fafc3dd1', name: "subtitle" }, this.subtitle)))), h("div", { key: 'fee8011a97afe69cf3356abb57f4b663e8d48f42', class: "br-notification-header__actions" }, h("slot", { key: '18948feb884ebd10c96b08fe839fefbfab91b0f5', name: "actions" }, this.showCloseButton && (h("br-button", { key: '0df04d1eca03a6170c022f0ad827f632c388ad9d', shape: "circle", density: "small", "aria-label": this.closeLabel, onClick: this.handleCloseClick }, h("br-icon", { key: '7066e661be2e7e034562d1d8b8195667f49c5ccd', iconName: "fa-solid:times", width: "16", height: "16" }))))))));
     }
     static get is() { return "br-notification-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification/notification-item/notification-item.js

@@ -6,23 +6,10 @@ import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 import { resolveAllowedPropValue } from "../../../shared/utils/props";
 /**
- * Subcomponente individual de `br-notification`, utilizado para representar visualmente cada mensagem, aviso ou comunicado do sistema.
+ * Item individual de notificação com título, data e status de leitura. Use dentro do `br-notification-body`.
  *
- * ### Papel na composição
+ * Defina o título em `title-text` e a data em `date`. Use `read` para indicar se o item já foi lido.
  *
- * - Exibe o ícone de status (sucesso, aviso, erro, informação), título do comunicado, data/hora e texto explicativo.
- * - Suporta indicação visual de lida/não lida e botões de ação específicos (ex.: "Ver detalhes", "Arquivar").
- *
- * ### Regra de uso e relacionamento
- *
- * Deve ser declarado dentro do contêiner `br-notification-body` (ou no slot padrão do `br-notification`). Comunica interações da pessoa usuária (clique no item, dispensa) através de eventos emitidos para a aplicação.
- *
- * Para a documentação completa de design, consulte o [Design System do GovBR](https://www.gov.br/ds/components/notification?tab=designer).
- *
-
- * @slot status - Região para tag, badge ou marcador visual de status.
- * @slot title - Conteúdo customizado do título.
- * @slot meta - Região para informação cronológica ou metadados.
  * @slot default - Conteúdo principal da notificação.
  * @slot actions - Ações contextuais do item.
  */
@@ -119,7 +106,7 @@ export class NotificationItem {
     }
     render() {
         const ariaLabel = this.getAriaLabel();
-        return (h(Host, { key: '6366841a6f0079c26568c8aae7aebe5710d05117', unread: this.unread, state: this.effectiveState }, h("br-item", { key: 'e300a06d45e322203bb557e626f9ddf71a511299', "is-interactive": this.clickable, "is-button": this.clickable, onKeyDown: (e) => this.handleKeydown(e), role: ariaLabel ? 'article' : undefined, "aria-label": ariaLabel }, h("div", { key: '3f92707df340d1f0307943e66ba4b16192914d21', class: "br-notification-item__row" }, this.unread && (h("div", { key: '0b551ba2e199b04c660789058c560220bdb051ea', class: "br-notification-item__unread" }, h("br-tag", { key: '98cf025d2ff3dfff417849a6d23bc18dd1f96aa6', status: true, density: "small", "bg-color": "var(--color-danger, #e1173f)", "aria-hidden": "true" }))), h("div", { key: 'c560a0c292bb00e16413663f4e8735d66c8eb594', class: "br-notification-item__content" }, h("div", { key: 'c087f8bfcaa52e1b4ea2bb1ad5b13a87707cffa5', class: "br-notification-item__title" }, h("slot", { key: 'bf34a8f5d82de76a13a9b6fa7eb24de7ed752428', name: "title" }, this.label)), h("div", { key: 'f09a316dd6e051d4c2c054316eed0338fa2a5b75', class: "br-notification-item__meta" }, h("slot", { key: 'e05288b8563f4230b5e59ae9cc403775abfdfb1c', name: "meta" }, this.datetime && (h("time", { key: '0f0b10928885c877972abb7c0af15d30efdfa972', class: "br-notification-item__datetime", dateTime: this.datetime }, this.datetime)))), h("div", { key: '425ad45e4faa844ee82541b6e950872ed4ccf2fb', class: "br-notification-item__description" }, h("slot", { key: '80c1b3c75415106fafbbff7e6d9733bac8ab9800' }, this.description)), h("div", { key: '547d9b3adb7770db3f637670e00a220b1a51f6c4', class: "br-notification-item__status" }, h("slot", { key: 'd59da5533236bf08066bdcd00536c2d85b3211ad', name: "status" }, this.effectiveState && (h("br-tag", { key: '4c1dcb178febbcb2befe667837c0b91142597083', status: true, density: "small", label: this.getStateLabel(), "bg-color": this.getStateColor(), "aria-hidden": "true" })))), h("div", { key: '1a798a3fe06ec979cf6d2acb50211394294abe1c', class: "br-notification-item__actions" }, h("slot", { key: '6fc76792301b790155638fb135c24c7b40ac471c', name: "actions" })))))));
+        return (h(Host, { key: '92394e5a4b6f683880da60bf3c827c18d7e43afc', unread: this.unread, state: this.effectiveState }, h("br-item", { key: '3bee315bb7527c65ce32f5f3fe03307c94cea186', "is-interactive": this.clickable, "is-button": this.clickable, onKeyDown: (e) => this.handleKeydown(e), role: ariaLabel ? 'article' : undefined, "aria-label": ariaLabel }, h("div", { key: 'b88df0bc238faa5380c47fa7400898f5124b9f9a', class: "br-notification-item__row" }, this.unread && (h("div", { key: 'bf4cd6a48ceed5c46339b8eff80fca4fab0a8333', class: "br-notification-item__unread" }, h("br-tag", { key: '14610cc87021e80dcbd3468be707e542d33e2272', status: true, density: "small", "bg-color": "var(--color-danger, #e1173f)", "aria-hidden": "true" }))), h("div", { key: '3127d6d6f6cdbb885ab7323b3809f5c394c9b2b2', class: "br-notification-item__content" }, h("div", { key: '115eabd92bddd064656d3f76482107afdeda0bcb', class: "br-notification-item__title" }, h("slot", { key: 'fe0f4a7c2c63cdc69e4ea65d7781606e8d072d8f', name: "title" }, this.label)), h("div", { key: 'de05104ff4a4111bae51bf9c6382d5f7c0c85f0d', class: "br-notification-item__meta" }, h("slot", { key: 'c15bb6e9f35f5a98de4842cc3a1584e810c1a00f', name: "meta" }, this.datetime && (h("time", { key: '02b737802875c9c2ccece752933f615068d4cdcb', class: "br-notification-item__datetime", dateTime: this.datetime }, this.datetime)))), h("div", { key: 'b9923ee771e6dac928da3c950933b1e8d34060a2', class: "br-notification-item__description" }, h("slot", { key: '9cffaf24d822c14221484f5dc656f10f62fab780' }, this.description)), h("div", { key: 'eb41de0ff7cbc7722805d7b7a0b9bfd2b9523abb', class: "br-notification-item__status" }, h("slot", { key: 'd6aa37a818a288f219a1cf73db2b72b7743968f2', name: "status" }, this.effectiveState && (h("br-tag", { key: '3e878e1ccccc6bde452a4eec5b937dc3d9072276', status: true, density: "small", label: this.getStateLabel(), "bg-color": this.getStateColor(), "aria-hidden": "true" })))), h("div", { key: '672fa7c43ff2c28dea2845a41269084a9e3b4293', class: "br-notification-item__actions" }, h("slot", { key: 'fcdf1554d03d5821bfc28d880f36d55a816c1e49', name: "actions" })))))));
     }
     static get is() { return "br-notification-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notification/notification.js

@@ -15,41 +15,32 @@ const NOTIFICATION_PLACEMENTS = [
     'top-end',
 ];
 /**
- * O componente `br-notification` é o painel oficial do GovBR-DS para centralização e exibição de avisos, comunicados e notificações do sistema, tipicamente acionado a partir de um botão com ícone de sino no cabeçalho.
+ * O `br-notification` organiza a central de mensagens, comunicados e avisos do usuário em um painel retrátil.
  *
- * ### Para que serve
+ * Use os métodos `open()`, `close()` ou a propriedade `isOpen` para controlar o painel. Estruture o conteúdo com `br-notification-header`, `br-notification-body` e `br-notification-item`.
  *
- * - **Central de notificações do usuário:** Reúne em uma única gaveta ou painel suspenso todas as mensagens, lembretes e alertas direcionados à pessoa usuária.
- * - **Estruturação por abas e contexto:** Permite organizar notificações por abas (ex.: "Todas", "Não lidas", "Arquivadas") com ações rápidas (marcar como lida, excluir).
- * - **Gerenciamento de abertura e foco:** Controla abertura, fechamento, tecla Escape e foco acessível.
+ * ```html
+ * <br-notification>
+ *   <div slot="header">
+ *     <br-notification-header title-text="Notificações"></br-notification-header>
+ *   </div>
+ *   <br-notification-body>
+ *     <br-notification-item title-text="Seu processo foi atualizado" date="10/10/2026"></br-notification-item>
+ *   </br-notification-body>
+ * </br-notification>
+ * ```
  *
- * ### Quando utilizar
+ * ### Quando usar
  *
- * - **Utilize quando:**
- *   - O sistema gerar eventos e comunicados assíncronos que a pessoa usuária precise consultar a qualquer momento.
- * - **Evite e prefira outro componente quando:**
- *   - A mensagem for uma resposta imediata a uma ação na tela atual (prefira `br-message`).
- *   - O aviso exigir confirmação bloqueadora antes de continuar (prefira `br-modal`).
+ * - Central de avisos acumulados da aplicação, normalmente acionada por um botão no cabeçalho.
  *
- * ### Composição e Subcomponentes
+ * ### Quando evitar
  *
- * | Subcomponente | Papel | Regra de uso |
- * | --- | --- | --- |
- * | `br-notification` | **Orquestrador principal.** Gerencia a superfície flutuante, estado de visibilidade e foco. | Contêiner raiz obrigatório. |
- * | `br-notification-header` | **Cabeçalho do painel.** Exibe o título, avatar do usuário, contadores e botão de fechar. | Declarado no slot `header` ou topo do `br-notification`. |
- * | `br-notification-body` | **Corpo principal.** Contém a listagem das notificações e abas de filtro opcionais. | Declarado no slot padrão do `br-notification`. |
- * | `br-notification-item` | **Notificação individual.** Representa cada mensagem com ícone, data, texto e ações. | Declarado dentro do `br-notification-body`. |
+ * - Mensagens em linha como resposta direta a uma ação na tela: use `br-message`.
+ * - Confirmação de ação crítica: use `br-modal`.
  *
- * ### Como os subcomponentes se relacionam
+ * Consulte as [diretrizes de design do GovBR](https://www.gov.br/ds/components/notification?tab=designer).
  *
- * O `br-notification` projeta o painel suspenso:
- * 1. O cabeçalho (`br-notification-header`) contextualiza o painel e fornece o botão de dispensa.
- * 2. O corpo (`br-notification-body`) agrupa e organiza a coleção de itens (`br-notification-item`).
- * 3. Cada item (`br-notification-item`) expõe eventos de clique e ações individuais (como marcar como lida).
- *
- * 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/notification?tab=designer).
- *
-
  * @category Feedback, Sobreposições
  * @status stable
  * @slot trigger - Elemento acionador externo responsável por abrir e fechar o painel.
@@ -370,12 +361,12 @@ export class Notification {
             style['--notification-height'] = this.maxHeight;
         if (this.isStatic && !this.maxHeight)
             style.maxHeight = 'none';
-        return (h(Host, { key: '8a8d04072311dab83da9bc75533fb4f32714e2bf', "mobile-fullscreen": this.mobileFullscreen, "internal-scroll": this.internalScroll, open: this.open, style: !this.isStatic ? { zIndex: 'var(--z-index-layer-1)' } : undefined }, h("div", { key: '6853c148e73fe0ed6f2fd99720313e29b4e0c085', class: { 'br-notification__trigger': true, 'd-none': !this.hasTrigger }, role: "button", tabIndex: 0, onClick: () => this.toggle(), onKeyDown: (event) => {
+        return (h(Host, { key: 'e90181153a40bb5a0326a86369dff442345dcf11', "mobile-fullscreen": this.mobileFullscreen, "internal-scroll": this.internalScroll, open: this.open, style: !this.isStatic ? { zIndex: 'var(--z-index-layer-1)' } : undefined }, h("div", { key: 'f43756665f3ab89351f4a089b301d7b166d3bf3d', class: { 'br-notification__trigger': true, 'd-none': !this.hasTrigger }, role: "button", tabIndex: 0, onClick: () => this.toggle(), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.toggle();
                 }
-            } }, h("slot", { key: '6b875f3904dc76ce8f39283262a38739ccfc1b04', name: "trigger", onSlotchange: () => this.checkSlotVisibility('trigger') })), h("div", { key: 'a7077447375a30e5c6da68ca55dc33acd94ca3ac', class: this.getCssClassMap(), id: this.customId, style: style, part: "base", "aria-label": this.label, "aria-hidden": !this.open ? 'true' : null, role: "dialog", "aria-modal": "true" }, h("div", { key: 'aace781dfdbd0dfdf7087373be9e67247fa98805', part: "header", class: { 'br-notification__header': true, 'd-none': !this.hasHeader } }, h("slot", { key: '3cecabd28ccd4d69331e80ecd64e8f69e7171015', name: "header", onSlotchange: () => this.checkSlotVisibility('header') })), h("div", { key: 'a18e18c161884e85114d722244e82376aeb11907', part: "tabs", class: { 'br-notification__tabs': true, 'd-none': !this.hasTabs } }, h("slot", { key: '6aabd8d7c6285eebf8fcb0decd60fa16635df186', name: "tabs", onSlotchange: () => this.checkSlotVisibility('tabs') })), h("div", { key: '60788b6a52b2609c4f4d0a48b3b0d80145b018f9', part: "body", class: "br-notification__body" }, h("slot", { key: 'a334d6cc7e992219962922f23e4be318fead09ad' })), h("div", { key: '6bbed27ceaa351fc942993a867b2cc1e6c6e59c6', part: "footer", class: { 'br-notification__footer': true, 'd-none': !this.hasFooter } }, h("slot", { key: 'af9300ef1596f25546476981a5564c741a7ca3c1', name: "footer", onSlotchange: () => this.checkSlotVisibility('footer') })))));
+            } }, h("slot", { key: '302bd14287a4cda84712ea2f5ab6b09ebbddac7d', name: "trigger", onSlotchange: () => this.checkSlotVisibility('trigger') })), h("div", { key: '2a024b344e2bbaf96794deb4555d845d234f9d52', class: this.getCssClassMap(), id: this.customId, style: style, part: "base", "aria-label": this.label, "aria-hidden": !this.open ? 'true' : null, role: "dialog", "aria-modal": "true" }, h("div", { key: '1ae52b2ec4728454981a62df32c77e461c402dfc', part: "header", class: { 'br-notification__header': true, 'd-none': !this.hasHeader } }, h("slot", { key: '1a57a0c13735aceb6065879420f7ada1d783ad94', name: "header", onSlotchange: () => this.checkSlotVisibility('header') })), h("div", { key: '1688a88956364843bfa49ee2c1f1dd9490d4e242', part: "tabs", class: { 'br-notification__tabs': true, 'd-none': !this.hasTabs } }, h("slot", { key: '5fa5b8c33af804ed01ff93b4549476d28c0b7ff9', name: "tabs", onSlotchange: () => this.checkSlotVisibility('tabs') })), h("div", { key: 'd863b359975f77b5ad5177c92bb0a8fc035e011b', part: "body", class: "br-notification__body" }, h("slot", { key: '6ceb765295bf7010dc5b968d7a2c042c168a56e2' })), h("div", { key: '77c33d5e03e8d5e15ec4468d1dbf4488a9c9068c', part: "footer", class: { 'br-notification__footer': true, 'd-none': !this.hasFooter } }, h("slot", { key: 'f57bfbbab273da463dd6e79f4a410f71668120d2', name: "footer", onSlotchange: () => this.checkSlotVisibility('footer') })))));
     }
     static get is() { return "br-notification"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pagination/pagination.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}.br-pagination{--pagination-margin: var(--spacing-scale-base);--pagination-select-width: 88px;--pagination-size: var(--pagination-medium);--pagination-small: 24px;--pagination-medium: 32px;--pagination-large: 40px;color:var(--color);display:flex;flex-wrap:wrap;font-weight:var(--font-weight);justify-content:center}.br-pagination ul{align-items:center;display:flex;list-style:none;margin:0;padding:0}.br-pagination li{padding:0}.br-pagination.dark-mode .page{color:var(--color-dark)}.br-pagination.dark-mode .br-select .br-item label{color:var(--color-dark)}.br-pagination .page:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-pagination .page{align-items:center;border:1px solid rgba(0,0,0,0);border-radius:100em;color:var(--interactive);display:inline-flex;justify-content:center;margin:0 calc(var(--pagination-margin)*.5);min-height:var(--pagination-size);min-width:var(--pagination-size);padding:0 var(--spacing-scale-base);white-space:nowrap}.br-pagination .page.active{background:var(--active);color:var(--color-dark);font-weight:var(--font-weight-semi-bold)}.br-pagination .pagination-ellipsis{margin:0 calc(var(--pagination-margin)*.5);position:relative}.br-pagination .pagination-ellipsis .br-button{--button-size: var(--pagination-size)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-pagination .pagination-ellipsis .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-pagination .pagination-ellipsis .br-list{max-height:220px;min-width:4em;overflow-y:auto;z-index:var(--z-index-layer-1)}.br-pagination.small{--pagination-size: var(--pagination-small)}.br-pagination.medium{--pagination-size: var(--pagination-medium)}.br-pagination.large{--pagination-size: var(--pagination-large)}.br-pagination .pagination-information{align-items:center;display:flex}.br-pagination .pagination-per-page,.br-pagination .pagination-go-to-page{align-items:center;display:flex}.br-pagination .pagination-per-page .br-input,.br-pagination .pagination-go-to-page .br-input{align-items:center;display:flex}.br-pagination .pagination-per-page .br-input label,.br-pagination .pagination-go-to-page .br-input label{font-weight:var(--font-weight-regular);margin-bottom:0;margin-right:var(--spacing-scale-base);padding-bottom:0}.br-pagination .pagination-per-page .br-input input,.br-pagination .pagination-go-to-page .br-input input{--input-size: var(--pagination-medium);padding-left:var(--spacing-scale-base);padding-right:calc(var(--spacing-scale-baseh) + 32px);text-align:right;width:var(--pagination-select-width)}.br-pagination .pagination-per-page .br-input input:not(:focus),.br-pagination .pagination-go-to-page .br-input input:not(:focus){border-color:rgba(0,0,0,0)}.br-pagination .pagination-per-page .br-list,.br-pagination .pagination-go-to-page .br-list{min-width:5em;right:0;width:auto}.br-pagination .pagination-arrows{align-items:center;display:flex}.br-pagination .br-select .br-input .br-button{bottom:auto;margin-top:0;position:absolute;right:var(--spacing-scale-half);top:auto;transform:none}.br-pagination .br-divider{border-right-width:var(--divider-size);border-top:0}.br-pagination.inverted,.br-pagination.dark-mode{--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-pagination.inverted.inverted .br-input,.br-pagination.inverted.inverted .br-input label,.br-pagination.inverted.dark-mode .br-input,.br-pagination.inverted.dark-mode .br-input label,.br-pagination.dark-mode.inverted .br-input,.br-pagination.dark-mode.inverted .br-input label,.br-pagination.dark-mode.dark-mode .br-input,.br-pagination.dark-mode.dark-mode .br-input label{--color: var(--color-dark);--focus-color: var(--focus-color-dark)}.br-pagination.inverted .page.active,.br-pagination.dark-mode .page.active{--interactive-rgb: var(--active-rgb);background-color:var(--background-light);color:var(--active)}.br-pagination .input-group .input-icon{display:none}.br-divider,hr{--divider-size: var(--surface-width-sm);border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);display:block}.br-divider.content,hr.content{align-items:center;border:0;display:flex;justify-content:center}.br-divider.content::after,.br-divider.content::before,hr.content::after,hr.content::before{border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);content:"";flex:1}.br-divider.content::after,hr.content::after{margin-left:var(--spacing-scale-base)}.br-divider.content::before,hr.content::before{margin-right:var(--spacing-scale-base)}.br-divider.vertical,hr.vertical{align-self:stretch;border-right-width:var(--divider-size);border-top-width:0}.br-divider.vertical.content,hr.vertical.content{flex-direction:column}.br-divider.vertical.content::after,.br-divider.vertical.content::before,hr.vertical.content::after,hr.vertical.content::before{border-right-width:var(--divider-size);border-top-width:0;margin:0}.br-divider.inverted,.br-divider.dark-mode,hr.inverted,hr.dark-mode{--border-color: var(--pure-0)}.br-divider.dashed,hr.dashed{border-style:dashed}.br-divider.sm,hr.sm{--divider-size: var(--surface-width-sm)}hr{--divider-padding: var(--spacing-scale-2x);margin:var(--divider-padding) 0}:host{display:block}:host .pagination-ellipsis br-list{max-height:none;overflow:visible}:host .pagination-ellipsis br-list.has-scroll{max-height:220px;overflow-y:auto}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar-track{background:var(--gray-10)}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar-thumb{background:var(--gray-30)}:host .pagination-ellipsis br-list.has-scroll:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}:host .pagination-ellipsis .pagination-ellipsis-virtual-spacer{display:block;width:100%}:host .br-pagination button.page:not(.active){background-color:rgba(0,0,0,0)}:host([variant=contextual]) .br-pagination{justify-content:space-between}.pagination-per-page br-select,.pagination-go-to-page br-select{--br-input-margin-bottom: 0}.pagination-per-page br-select::part(input-label),.pagination-go-to-page br-select::part(input-label){font-weight:var(--font-weight-regular);margin-bottom:0;margin-right:var(--spacing-scale-base);padding-bottom:0}.pagination-per-page br-select::part(input-field),.pagination-go-to-page br-select::part(input-field){--input-size: var(--pagination-medium);padding-left:var(--spacing-scale-base);padding-right:calc(var(--spacing-scale-baseh) + 32px);text-align:right}:host(:not([variant=contextual])) .br-pagination{justify-content:center}:host([variant=contextual]) .br-pagination ul{justify-content:center;width:100%}:host([color-mode=dark]) br-select{--color: var(--color-dark);--focus-color: var(--focus-color-dark)}:host([color-mode=dark]) br-select::part(label){color:var(--color-dark)}:host([color-mode=dark]) .br-pagination a.page:not(.active),:host([color-mode=dark]) .br-pagination button.page:not(.active){color:var(--color);background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.br-pagination.dark-mode .br-select .br-item label,.br-pagination.dark-mode .page{color:var(--color-dark);background-color:rgba(0,0,0,0)}:host([color-mode=dark]) .br-pagination a.page:not(.active):hover,:host([color-mode=dark]) .br-pagination a.page:not(.active):focus,:host([color-mode=dark]) .br-pagination a.page:not(.active):focus-visible,:host([color-mode=dark]) .br-pagination button.page:not(.active):hover,:host([color-mode=dark]) .br-pagination button.page:not(.active):focus,:host([color-mode=dark]) .br-pagination button.page:not(.active):focus-visible{color:var(--interactive)}.br-pagination .page:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset)}.pagination-ellipsis br-button::part(button){--button-size: var(--pagination-size)}.pagination-ellipsis br-button:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset);border-radius:50%}.br-pagination>ul{position:relative}:host([loading]) .br-pagination>ul>li.pagination-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:visible}:host([loading]) .br-pagination>ul>li.pagination-loading .pagination-loading{display:flex;align-items:center;justify-content:center}:host([loading]) .br-pagination>ul>li:not(.pagination-loading):not(:first-child):not(:last-child){visibility:hidden}.pagination-information{position:relative}.pagination-information .pagination-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([color-mode=dark]) br-select::part(radio-label){color:var(--color-dark)}
+*,*::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}.br-pagination{--pagination-margin: var(--spacing-scale-base);--pagination-select-width: 88px;--pagination-size: var(--pagination-medium);--pagination-small: 24px;--pagination-medium: 32px;--pagination-large: 40px;color:var(--color);display:flex;flex-wrap:wrap;font-weight:var(--font-weight);justify-content:center}.br-pagination ul{align-items:center;display:flex;list-style:none;margin:0;padding:0}.br-pagination li{padding:0}.br-pagination.dark-mode .page{color:var(--color-dark)}.br-pagination.dark-mode .br-select .br-item label{color:var(--color-dark)}.br-pagination .page:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}.br-pagination .page{align-items:center;border:1px solid rgba(0,0,0,0);border-radius:100em;color:var(--interactive);display:inline-flex;justify-content:center;margin:0 calc(var(--pagination-margin)*.5);min-height:var(--pagination-size);min-width:var(--pagination-size);padding:0 var(--spacing-scale-base);white-space:nowrap}.br-pagination .page.active{background:var(--active);color:var(--color-dark);font-weight:var(--font-weight-semi-bold)}.br-pagination .pagination-ellipsis{margin:0 calc(var(--pagination-margin)*.5);position:relative}.br-pagination .pagination-ellipsis .br-button{--button-size: var(--pagination-size)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar-track{background:var(--gray-10)}.br-pagination .pagination-ellipsis .br-list::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-pagination .pagination-ellipsis .br-list:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-pagination .pagination-ellipsis .br-list{max-height:220px;min-width:4em;overflow-y:auto;z-index:var(--z-index-layer-1)}.br-pagination.small{--pagination-size: var(--pagination-small)}.br-pagination.medium{--pagination-size: var(--pagination-medium)}.br-pagination.large{--pagination-size: var(--pagination-large)}.br-pagination .pagination-information{align-items:center;display:flex}.br-pagination .pagination-per-page,.br-pagination .pagination-go-to-page{align-items:center;display:flex}.br-pagination .pagination-per-page .br-input,.br-pagination .pagination-go-to-page .br-input{align-items:center;display:flex}.br-pagination .pagination-per-page .br-input label,.br-pagination .pagination-go-to-page .br-input label{font-weight:var(--font-weight-regular);margin-bottom:0;margin-right:var(--spacing-scale-base);padding-bottom:0}.br-pagination .pagination-per-page .br-input input,.br-pagination .pagination-go-to-page .br-input input{--input-size: var(--pagination-medium);padding-left:var(--spacing-scale-base);padding-right:calc(var(--spacing-scale-baseh) + 32px);text-align:right;width:var(--pagination-select-width)}.br-pagination .pagination-per-page .br-input input:not(:focus),.br-pagination .pagination-go-to-page .br-input input:not(:focus){border-color:rgba(0,0,0,0)}.br-pagination .pagination-per-page .br-list,.br-pagination .pagination-go-to-page .br-list{min-width:5em;right:0;width:auto}.br-pagination .pagination-arrows{align-items:center;display:flex}.br-pagination .br-select .br-input .br-button{bottom:auto;margin-top:0;position:absolute;right:var(--spacing-scale-half);top:auto;transform:none}.br-pagination .br-divider{border-right-width:var(--divider-size);border-top:0}.br-pagination.inverted,.br-pagination.dark-mode{--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-pagination.inverted.inverted .br-input,.br-pagination.inverted.inverted .br-input label,.br-pagination.inverted.dark-mode .br-input,.br-pagination.inverted.dark-mode .br-input label,.br-pagination.dark-mode.inverted .br-input,.br-pagination.dark-mode.inverted .br-input label,.br-pagination.dark-mode.dark-mode .br-input,.br-pagination.dark-mode.dark-mode .br-input label{--color: var(--color-dark);--focus-color: var(--focus-color-dark)}.br-pagination.inverted .page.active,.br-pagination.dark-mode .page.active{--interactive-rgb: var(--active-rgb);background-color:var(--background-light);color:var(--active)}.br-pagination .input-group .input-icon{display:none}.br-divider,hr{--divider-size: var(--surface-width-sm);border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);display:block}.br-divider.content,hr.content{align-items:center;border:0;display:flex;justify-content:center}.br-divider.content::after,.br-divider.content::before,hr.content::after,hr.content::before{border-color:var(--border-color);border-style:solid;border-width:0;border-top-width:var(--divider-size);content:"";flex:1}.br-divider.content::after,hr.content::after{margin-left:var(--spacing-scale-base)}.br-divider.content::before,hr.content::before{margin-right:var(--spacing-scale-base)}.br-divider.vertical,hr.vertical{align-self:stretch;border-right-width:var(--divider-size);border-top-width:0}.br-divider.vertical.content,hr.vertical.content{flex-direction:column}.br-divider.vertical.content::after,.br-divider.vertical.content::before,hr.vertical.content::after,hr.vertical.content::before{border-right-width:var(--divider-size);border-top-width:0;margin:0}.br-divider.inverted,.br-divider.dark-mode,hr.inverted,hr.dark-mode{--border-color: var(--pure-0)}.br-divider.dashed,hr.dashed{border-style:dashed}.br-divider.sm,hr.sm{--divider-size: var(--surface-width-sm)}hr{--divider-padding: var(--spacing-scale-2x);margin:var(--divider-padding) 0}:host{display:block}:host .pagination-ellipsis br-list{max-height:none;overflow:visible}:host .pagination-ellipsis br-list.has-scroll{max-height:220px;overflow-y:auto}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar-track{background:var(--gray-10)}:host .pagination-ellipsis br-list.has-scroll::-webkit-scrollbar-thumb{background:var(--gray-30)}:host .pagination-ellipsis br-list.has-scroll:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}:host .pagination-ellipsis .pagination-ellipsis-virtual-spacer{display:block;width:100%}:host .br-pagination button.page:not(.active){background-color:rgba(0,0,0,0)}:host([variant=contextual]) .br-pagination{justify-content:space-between}.pagination-per-page br-select,.pagination-go-to-page br-select{--br-input-margin-bottom: 0}.pagination-per-page br-select::part(input-label),.pagination-go-to-page br-select::part(input-label){font-weight:var(--font-weight-regular);margin-bottom:0;margin-right:var(--spacing-scale-base);padding-bottom:0}.pagination-per-page br-select::part(input-clear),.pagination-go-to-page br-select::part(input-clear){display:none}.pagination-per-page br-select::part(input-field),.pagination-go-to-page br-select::part(input-field){--input-size: var(--pagination-medium);padding-left:var(--spacing-scale-base);padding-right:calc(var(--spacing-scale-baseh) + 32px);text-align:right}:host(:not([variant=contextual])) .br-pagination{justify-content:center}:host([variant=contextual]) .br-pagination ul{justify-content:center;width:100%}:host([color-mode=dark]) br-select{--color: var(--color-dark);--focus-color: var(--focus-color-dark)}:host([color-mode=dark]) br-select::part(label){color:var(--color-dark)}:host([color-mode=dark]) .br-pagination a.page:not(.active),:host([color-mode=dark]) .br-pagination button.page:not(.active){color:var(--color);background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.br-pagination.dark-mode .br-select .br-item label,.br-pagination.dark-mode .page{color:var(--color-dark);background-color:rgba(0,0,0,0)}:host([color-mode=dark]) .br-pagination a.page:not(.active):hover,:host([color-mode=dark]) .br-pagination a.page:not(.active):focus,:host([color-mode=dark]) .br-pagination a.page:not(.active):focus-visible,:host([color-mode=dark]) .br-pagination button.page:not(.active):hover,:host([color-mode=dark]) .br-pagination button.page:not(.active):focus,:host([color-mode=dark]) .br-pagination button.page:not(.active):focus-visible{color:var(--interactive)}.br-pagination .page:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset)}.pagination-ellipsis br-button::part(button){--button-size: var(--pagination-size)}.pagination-ellipsis br-button:focus-visible{outline:var(--focus) var(--focus-style) var(--focus-width);outline-offset:var(--focus-offset);border-radius:50%}.br-pagination>ul{position:relative}:host([loading]) .br-pagination>ul>li.pagination-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:visible}:host([loading]) .br-pagination>ul>li.pagination-loading .pagination-loading{display:flex;align-items:center;justify-content:center}:host([loading]) .br-pagination>ul>li:not(.pagination-loading):not(:first-child):not(:last-child){visibility:hidden}.pagination-information{position:relative}.pagination-information .pagination-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}:host([color-mode=dark]) br-select::part(radio-label){color:var(--color-dark)}