@govbr-ds/webcomponents 2.1.2 → 2.2.0

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

@@ -4,10 +4,40 @@
  */
 import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../shared/utils/id";
+import { resolveAllowedPropValue } from "../../shared/utils/props";
+const MESSAGE_STATES = ['info', 'warning', 'danger', 'success'];
 /**
- * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/message?tab=designer).
+ * 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.
  *
- * @category Feedback
+ * ### Para que serve
+ *
+ * - **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.
+ *
+ * ### Quando utilizar
+ *
+ * - **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`).
+ *
+ * ### Estrutura e Slots
+ *
+ * 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.
+ *
+ * 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).
+ *
+
+
+ * @category Feedback, Conteúdo
  * @status stable
  * @slot default - Conteúdo principal da mensagem. Quando utilizado, a prop `message` é ignorada.
  * @slot icon - Ícone customizado da mensagem. Quando utilizado, o ícone padrão gerado pela prop `state` é ignorado.
@@ -19,6 +49,7 @@ import { generateUniqueId } from "../../shared/utils/id";
  * @part icon - Área do ícone da mensagem.
  * @part content - Área de conteúdo da mensagem.
  * @part close - Área do botão de fechar.
+ *
  */
 export class Message {
     constructor() {
@@ -33,15 +64,16 @@ export class Message {
         /**
          * Exibe o rótulo e o controle na mesma linha.
          *
+         * @deprecated Use `inline`.
          */
-        /** @deprecated Use `inline`. */
         this.isInline = false;
         /**
          * Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem.
          * O fechamento emitirá o evento `brDidClose`, mas não removerá automaticamente o componente do DOM, a menos que a propriedade `autoRemove` também esteja definida como `true`.
          * Este recurso não está disponível para mensagens do tipo feedback.
+         *
+         * @deprecated Use `closable`.
          */
-        /** @deprecated Use `closable`. */
         this.isClosable = false;
         /**
          * Controla o comportamento do fechamento do componente quando `isClosable` é verdadeiro.
@@ -60,11 +92,12 @@ export class Message {
         /**
          * Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário.
          * Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.
+         *
+         * @deprecated Use `feedback`.
          */
-        /** @deprecated Use `feedback`. */
         this.isFeedback = false;
         /**
-         * Define o estado do message.
+         * Define o estado do message. Valores inválidos usam `info`.
          * Os possíveis valores são:
          * - 'info': Mensagem informativa.
          * - 'warning': Mensagem de aviso.
@@ -73,13 +106,9 @@ export class Message {
          * O valor padrão é 'info'.
          */
         this.state = 'info';
-        this.previousFocus = null;
         this.dismissHandler = () => {
             this.brDidClose.emit();
             this.brMessageClose.emit();
-            if (this.previousFocus && this.effectiveClosable) {
-                this.previousFocus.focus();
-            }
             if (this.autoRemove) {
                 this.el.remove();
             }
@@ -96,12 +125,7 @@ export class Message {
             this.el.removeEventListener('keydown', this.handleKeyDown);
         }
     }
-    async componentDidLoad() {
-        if (this.effectiveClosable && !this.effectiveFeedback) {
-            this.previousFocus = document.activeElement;
-            await this.closeButton?.componentOnReady?.();
-            this.closeButton?.shadowRoot?.querySelector('button')?.focus();
-        }
+    componentDidLoad() {
         if (this.effectiveClosable && this.autoRemove) {
             this.el.addEventListener('keydown', this.handleKeyDown);
         }
@@ -116,7 +140,9 @@ export class Message {
         return this.feedback ?? this.isFeedback;
     }
     get effectiveFeedbackState() {
-        return this.feedbackState ?? this.state;
+        const value = this.feedbackState ?? this.state;
+        const propertyName = this.feedbackState !== undefined ? 'feedbackState' : 'state';
+        return resolveAllowedPropValue(this.el, propertyName, value, MESSAGE_STATES, 'info');
     }
     checkIconState() {
         const iconMap = {
@@ -125,7 +151,7 @@ export class Message {
             danger: 'fa-solid:times-circle',
             info: 'fa-solid:info-circle',
         };
-        return iconMap[this.effectiveFeedbackState] || 'check-circle';
+        return iconMap[this.effectiveFeedbackState] || 'fa-solid:check-circle';
     }
     getAriaLive() {
         return this.effectiveFeedbackState === 'warning' || this.effectiveFeedbackState === 'danger'
@@ -151,10 +177,10 @@ export class Message {
         return (h("span", { class: `feedback ${this.effectiveFeedbackState}`, role: "status", "aria-live": this.getAriaLive(), "aria-label": this.ariaLabel || this.getStateLabel(), "aria-atomic": "true", id: this.customId }, this.showIcon ? (h("br-icon", { class: "icon-space", iconName: this.checkIconState(), width: "16", height: "16" })) : null, this.message && this.message.length > 0 ? this.message : h("slot", null)));
     }
     renderStandard() {
-        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", { ref: (element) => (this.closeButton = element), 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" })))))));
+        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: 'bb97eaab55a48de88ece2ae0393a2cef3490c1f0' }, this.effectiveFeedback ? this.renderFeedback() : this.renderStandard());
+        return h(Host, { key: '17572137978859f5f0376a980af26403b2b2d6b8' }, this.effectiveFeedback ? this.renderFeedback() : this.renderStandard());
     }
     static get is() { return "br-message"; }
     static get encapsulation() { return "shadow"; }
@@ -243,7 +269,7 @@ export class Message {
                             "name": "deprecated",
                             "text": "Use `inline`."
                         }],
-                    "text": ""
+                    "text": "Exibe o r\u00F3tulo e o controle na mesma linha."
                 },
                 "getter": false,
                 "setter": false,
@@ -285,7 +311,7 @@ export class Message {
                             "name": "deprecated",
                             "text": "Use `closable`."
                         }],
-                    "text": ""
+                    "text": "Se definido como verdadeiro, um bot\u00E3o de fechar ser\u00E1 exibido para permitir que o usu\u00E1rio feche a mensagem.\nO fechamento emitir\u00E1 o evento `brDidClose`, mas n\u00E3o remover\u00E1 automaticamente o componente do DOM, a menos que a propriedade `autoRemove` tamb\u00E9m esteja definida como `true`.\nEste recurso n\u00E3o est\u00E1 dispon\u00EDvel para mensagens do tipo feedback."
                 },
                 "getter": false,
                 "setter": false,
@@ -367,7 +393,7 @@ export class Message {
                             "name": "deprecated",
                             "text": "Use `feedback`."
                         }],
-                    "text": ""
+                    "text": "Define se a mensagem \u00E9 do tipo feedback, geralmente usada para fornecer contexto adicional sobre a\u00E7\u00F5es do usu\u00E1rio.\nExemplos incluem mensagens de valida\u00E7\u00E3o em campos de formul\u00E1rio. N\u00E3o dispon\u00EDvel para mensagens que n\u00E3o sejam de feedback."
                 },
                 "getter": false,
                 "setter": false,
@@ -413,7 +439,7 @@ export class Message {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define o estado do message.\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
+                    "text": "Define o estado do message. Valores inv\u00E1lidos usam `info`.\nOs poss\u00EDveis valores s\u00E3o:\n- 'info': Mensagem informativa.\n- 'warning': Mensagem de aviso.\n- 'danger': Mensagem de erro ou alerta.\n- 'success': Mensagem de sucesso.\nO valor padr\u00E3o \u00E9 'info'."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/modal/modal.css

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}.br-modal{--modal-size: var(--modal-medium);--modal-xsmall: 220px;--modal-small: 300px;--modal-medium: 500px;--modal-large: 640px;--modal-auto: auto;background:var(--background);box-shadow:var(--surface-shadow-sm);display:flex;flex-direction:column;max-width:var(--modal-size);z-index:var(--z-index-layer-4)}.br-modal-header{font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-bold);padding:var(--spacing-scale-2x) var(--spacing-scale-2x) 0;position:relative}.br-modal-header .close{position:absolute;right:var(--spacing-scale-base);top:var(--spacing-scale-base)}.br-modal .modal-title{font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-bold);margin-right:40px;max-height:calc(var(--font-size-scale-up-01)*3);overflow:hidden;text-overflow:ellipsis}.br-modal-body{flex:1;margin:var(--spacing-scale-3x) 0 var(--spacing-scale-2x);overflow:auto;padding:0 var(--spacing-scale-2x);width:auto}.br-modal-body::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-modal-body::-webkit-scrollbar-track{background:var(--gray-10)}.br-modal-body::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-modal-body:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-modal-body>*:last-child{margin-bottom:0}.br-modal-footer{display:flex;flex-wrap:wrap;padding:var(--spacing-scale-2x)}.br-modal.xsmall{--modal-size: var(--modal-xsmall)}.br-modal.small{--modal-size: var(--modal-small)}.br-modal.medium{--modal-size: var(--modal-medium)}.br-modal.large{--modal-size: var(--modal-large)}.br-modal.auto{--modal-size: var(--modal-auto)}.br-modal .loading.medium{min-height:calc(var(--loading-indetermined-diameter-md) + var(--spacing-scale-2x)*2)}.br-modal .terms{border:0;box-shadow:var(--surface-shadow-sm-inset),var(--surface-shadow-sm-inset-up);font-size:var(--font-size-scale-base);height:216px;margin-bottom:var(--spacing-scale-2x);margin-left:calc(var(--spacing-scale-2x)*-1);margin-right:calc(var(--spacing-scale-2x)*-1);overflow:auto;padding:var(--spacing-scale-2x);resize:none;width:auto}.br-modal .terms::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-modal .terms::-webkit-scrollbar-track{background:var(--gray-10)}.br-modal .terms::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-modal .terms:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-modal .terms:active{outline:none}.br-modal .terms:hover::-webkit-scrollbar-thumb{background:var(--color-secondary-07)}@media(max-width: 991px){.br-modal .terms{margin-left:unset !important;margin-right:unset !important}.br-modal-header .close{top:0}}.br-modal:focus{outline:none}dialog.br-modal{border:0;padding:0}dialog.br-modal::backdrop{background:rgba(0,0,0,.45)}.br-modal.scrollable{max-height:400px}.br-modal-footer.justify-content-end{justify-content:flex-end}
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}.br-modal{--modal-size: var(--modal-medium);--modal-xsmall: 220px;--modal-small: 300px;--modal-medium: 500px;--modal-large: 640px;--modal-auto: auto;background:var(--background);box-shadow:var(--surface-shadow-sm);display:flex;flex-direction:column;max-width:var(--modal-size);z-index:var(--z-index-layer-4)}.br-modal-header{font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-bold);padding:var(--spacing-scale-2x) var(--spacing-scale-2x) 0;position:relative}.br-modal-header .close{position:absolute;right:var(--spacing-scale-base);top:var(--spacing-scale-base)}.br-modal .modal-title{font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-bold);margin-right:40px;max-height:calc(var(--font-size-scale-up-01)*3);overflow:hidden;text-overflow:ellipsis}.br-modal-body{flex:1;margin:var(--spacing-scale-3x) 0 var(--spacing-scale-2x);overflow:auto;padding:0 var(--spacing-scale-2x);width:auto}.br-modal-body::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-modal-body::-webkit-scrollbar-track{background:var(--gray-10)}.br-modal-body::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-modal-body:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-modal-body>*:last-child{margin-bottom:0}.br-modal-footer{display:flex;flex-wrap:wrap;padding:var(--spacing-scale-2x)}.br-modal.xsmall{--modal-size: var(--modal-xsmall)}.br-modal.small{--modal-size: var(--modal-small)}.br-modal.medium{--modal-size: var(--modal-medium)}.br-modal.large{--modal-size: var(--modal-large)}.br-modal.auto{--modal-size: var(--modal-auto)}.br-modal .loading.medium{min-height:calc(var(--loading-indetermined-diameter-md) + var(--spacing-scale-2x)*2)}.br-modal .terms{border:0;box-shadow:var(--surface-shadow-sm-inset),var(--surface-shadow-sm-inset-up);font-size:var(--font-size-scale-base);height:216px;margin-bottom:var(--spacing-scale-2x);margin-left:calc(var(--spacing-scale-2x)*-1);margin-right:calc(var(--spacing-scale-2x)*-1);overflow:auto;padding:var(--spacing-scale-2x);resize:none;width:auto}.br-modal .terms::-webkit-scrollbar{height:var(--spacing-scale-base);width:var(--spacing-scale-base)}.br-modal .terms::-webkit-scrollbar-track{background:var(--gray-10)}.br-modal .terms::-webkit-scrollbar-thumb{background:var(--gray-30)}.br-modal .terms:hover::-webkit-scrollbar-thumb{background:var(--gray-40)}.br-modal .terms:active{outline:none}.br-modal .terms:hover::-webkit-scrollbar-thumb{background:var(--color-secondary-07)}@media(max-width: 991px){.br-modal .terms{margin-left:unset !important;margin-right:unset !important}.br-modal-header .close{top:0}}.br-modal:focus{outline:none}.br-modal{box-sizing:border-box;max-height:calc(100vh - var(--spacing-scale-4x, 32px));overflow:hidden}.br-modal-body{min-height:0}dialog.br-modal{border:0;padding:0}dialog.br-modal[open]{animation:none}@media(prefers-reduced-motion: no-preference){dialog.br-modal[open]{animation:modal-open var(--duration-fast, 300ms) var(--animation-ease-out, ease-out) both}}dialog.br-modal::backdrop{background:rgba(0,0,0,.45)}.br-modal.scrollable{max-height:400px}.br-modal-footer.justify-content-end{justify-content:flex-end}@keyframes modal-open{from{opacity:0}to{opacity:1}}

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

@@ -3,18 +3,50 @@
  * © https://serpro.gov.br/ - MIT License.
  */
 import { Host, h } from "@stencil/core";
-import { captureFocus, restoreFocus } from "../../shared/utils/focus";
+import { captureFocus, FOCUSABLE_SELECTORS, filterVisibleElements, restoreFocus } from "../../shared/utils/focus";
 import { generateUniqueId } from "../../shared/utils/id";
+import { getScrollBehavior } from "../../shared/utils/motion";
 import { syncNativeModalDialog } from "../../shared/utils/native-dialog";
+import { isComposedDescendant } from "../../shared/utils/ownership";
+import { resolveAllowedPropValue } from "../../shared/utils/props";
+const MODAL_SIZES = ['xsmall', 'small', 'medium', 'large', 'auto'];
+const MODAL_FOOTER_ALIGNS = ['start', 'end', 'center'];
 /**
- * Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/modal?tab=designer).
+ * 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.
  *
+ * ### Para que serve
+ *
+ * - **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.
+ *
+ * ### Quando utilizar
+ *
+ * - **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).
+ *
+ * ### Estrutura e Slots
+ *
+ * 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.
+ *
+ * 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).
+ *
+
+
  * @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.
  * @slot close-button - Botão de fechar customizado. Se não for usado, o botão padrão será exibido.
  *
- * @category Feedback
+ * @category Feedback, Sobreposições
  * @status stable
  * @part container - Wrapper principal do modal.
  * @part header - Cabeçalho do modal.
@@ -23,6 +55,7 @@ import { syncNativeModalDialog } from "../../shared/utils/native-dialog";
  * @part footer - Rodapé do modal.
  * @part close-button - Botão de fechar do modal.
  *
+ *
  */
 export class Modal {
     constructor() {
@@ -45,7 +78,7 @@ export class Modal {
          */
         this.autoClose = false;
         /**
-         * Define o tamanho (largura) do modal.
+         * Define o tamanho (largura) do modal. Valores inválidos usam `medium`.
          */
         this.size = 'medium';
         /**
@@ -53,7 +86,7 @@ export class Modal {
          */
         this.scrollable = false;
         /**
-         * Define o alinhamento do conteúdo do rodapé (slot="footer").
+         * Define o alinhamento do conteúdo do rodapé (slot="footer"). Valores inválidos usam `center`.
          */
         this.alignFooter = 'center';
         this.isOpeningParentScrim = false;
@@ -249,14 +282,14 @@ export class Modal {
         const modal = root.querySelector('.br-modal');
         if (modal !== null) {
             modal.focus();
-            modal.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            modal.scrollIntoView({ behavior: getScrollBehavior(), block: 'start' });
         }
         if (typeof this.initialFocusSelector === 'string' && this.initialFocusSelector !== '') {
             const target = await this.waitForElement(this.initialFocusSelector);
             if (target !== null) {
                 const focusTarget = this.findDeepNativeFocusable(target) ?? target;
                 focusTarget.focus();
-                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                target.scrollIntoView({ behavior: getScrollBehavior(), block: 'start' });
             }
         }
         this.brModalOpened.emit();
@@ -358,23 +391,7 @@ export class Modal {
      * perfurando shadow roots na subida (getRootNode().host).
      */
     isOrInsideElement(target, container) {
-        if (target === container)
-            return true;
-        let node = target;
-        while (node !== null && node !== document) {
-            if (node === container)
-                return true;
-            const root = node.getRootNode();
-            if (root instanceof ShadowRoot) {
-                node = root.host;
-            }
-            else {
-                node = node.parentElement;
-                if (node === null)
-                    break;
-            }
-        }
-        return false;
+        return isComposedDescendant(container, target);
     }
     /**
      * Coleta todos os elementos focalizáveis dentro da modal,
@@ -405,7 +422,7 @@ export class Modal {
         });
         // Remove referências duplicadas e filtra elementos não visíveis.
         // Retorna apenas elementos realmente focáveis e perceptíveis ao usuário.
-        return Array.from(new Set(elements)).filter((el) => el.offsetWidth > 0 && el.offsetHeight > 0 && getComputedStyle(el).visibility !== 'hidden');
+        return filterVisibleElements(Array.from(new Set(elements)));
     }
     /**
      * INTEGRAÇÃO COM BR-SCRIM
@@ -465,12 +482,19 @@ export class Modal {
         }
     }
     getCssClassMap() {
+        const size = this.effectiveSize;
         return {
             'br-modal': true,
-            [this.size]: true,
+            [size]: true,
             scrollable: this.scrollable,
         };
     }
+    get effectiveSize() {
+        return resolveAllowedPropValue(this.el, 'size', this.size, MODAL_SIZES, 'medium');
+    }
+    get effectiveAlignFooter() {
+        return resolveAllowedPropValue(this.el, 'alignFooter', this.alignFooter, MODAL_FOOTER_ALIGNS, 'center');
+    }
     render() {
         if (!this.show) {
             return null;
@@ -478,7 +502,7 @@ export class Modal {
         const ModalContainer = this.usesStandaloneDialog ? 'dialog' : 'div';
         return (h(Host, null, h(ModalContainer, { ref: (element) => {
                 this.nativeDialogRef = this.usesStandaloneDialog ? element : null;
-            }, class: this.getCssClassMap(), role: this.usesStandaloneDialog ? undefined : 'dialog', tabIndex: -1, "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId, part: "container", onCancel: this.usesStandaloneDialog ? this.handleNativeCancel : undefined }, h("div", { class: "br-modal-header", part: "header" }, h("div", { class: "modal-title", id: this.titleId, part: "title" }, h("slot", { name: "header" }, this.titleText)), h("slot", { name: "close-button" }, h("br-button", { part: "close-button", class: "close", shape: "circle", density: "small", "prop:ariaLabel": "Fechar", onClick: this.handleClose }, h("br-icon", { iconName: "fa-solid:times", width: "16", height: "16" })))), h("div", { id: this.contentId, class: "br-modal-body", part: "body" }, h("slot", null)), h("div", { class: `br-modal-footer ${this.alignFooter !== undefined ? `justify-content-${this.alignFooter}` : ''}`, part: "footer" }, h("slot", { name: "footer" })))));
+            }, class: this.getCssClassMap(), role: this.usesStandaloneDialog ? undefined : 'dialog', tabIndex: -1, "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId, part: "container", onCancel: this.usesStandaloneDialog ? this.handleNativeCancel : undefined }, h("div", { class: "br-modal-header", part: "header" }, h("div", { class: "modal-title", id: this.titleId, part: "title" }, h("slot", { name: "header" }, this.titleText)), h("slot", { name: "close-button" }, h("br-button", { part: "close-button", class: "close", shape: "circle", density: "small", "prop:ariaLabel": "Fechar", onClick: this.handleClose }, h("br-icon", { iconName: "fa-solid:times", width: "16", height: "16" })))), h("div", { id: this.contentId, class: "br-modal-body", part: "body" }, h("slot", null)), h("div", { class: `br-modal-footer justify-content-${this.effectiveAlignFooter}`, part: "footer" }, h("slot", { name: "footer" })))));
     }
     static get is() { return "br-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -611,7 +635,7 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define o tamanho (largura) do modal."
+                    "text": "Define o tamanho (largura) do modal. Valores inv\u00E1lidos usam `medium`."
                 },
                 "getter": false,
                 "setter": false,
@@ -658,7 +682,7 @@ export class Modal {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Define o alinhamento do conte\u00FAdo do rodap\u00E9 (slot=\"footer\")."
+                    "text": "Define o alinhamento do conte\u00FAdo do rodap\u00E9 (slot=\"footer\"). Valores inv\u00E1lidos usam `center`."
                 },
                 "getter": false,
                 "setter": false,
@@ -828,15 +852,4 @@ export class Modal {
             }];
     }
 }
-Modal.FOCUSABLE_SELECTORS = [
-    'a[href]:not([disabled])',
-    'button:not([disabled])',
-    'br-button:not([disabled]):not([tabindex="-1"])',
-    'input:not([disabled])',
-    'br-input:not([disabled]):not([tabindex="-1"])',
-    'select:not([disabled])',
-    'br-select:not([disabled]):not([tabindex="-1"])',
-    'textarea:not([disabled])',
-    'br-textarea:not([disabled]):not([tabindex="-1"])',
-    '[tabindex]:not([tabindex="-1"])',
-].join(',');
+Modal.FOCUSABLE_SELECTORS = FOCUSABLE_SELECTORS;

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

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{display:block;min-height:0;flex:1}.br-notification-body{display:flex;flex-direction:column;height:100%;min-height:0}.br-notification-body__tabs{flex-shrink:0;background-color:var(--background-color, #fff);border-bottom:1px solid var(--border-color, #ccc);padding:0 var(--spacing-scale-2x, 16px);display:flex;align-items:center;min-height:48px}.br-notification-body__tabs:empty{display:none}.br-notification-body__list{flex:1;min-height:0;list-style:none;margin:0;padding:0}:host([internal-scroll=true]) .br-notification-body__list{overflow-y:auto;overscroll-behavior:contain}.br-notification-body__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-scale-4x, 32px) var(--spacing-scale-2x, 16px);color:var(--text-color-secondary, #555);text-align:center}.br-notification-body__empty p{margin:0;font-size:var(--font-size-scale-base, 1rem)}
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{display:block;min-height:0;flex:1}.br-notification-body{display:flex;flex-direction:column;height:100%;min-height:0}.br-notification-body__tabs{flex-shrink:0;background-color:var(--background-color, #fff);border-bottom:1px solid var(--border-color, #ccc);padding:0 var(--spacing-scale-2x, 16px);display:flex;align-items:center;min-height:48px}.br-notification-body__tabs:empty{display:none}.br-notification-body__list{flex:1;min-height:0;list-style:none;margin:0;padding:0}:host([internal-scroll=true]) .br-notification-body__list{overflow-y:auto;overscroll-behavior:contain}.br-notification-body__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-scale-4x, 32px) var(--spacing-scale-2x, 16px);color:var(--text-color-secondary, #555);text-align:center}.br-notification-body__empty p{margin:0;font-size:var(--font-size-scale-base, 1rem)}

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

@@ -5,11 +5,20 @@
 import { Host, h } from "@stencil/core";
 import { generateUniqueId } from "../../../shared/utils/id";
 /**
- * ## Design System
+ * Subcomponente de corpo da superfície `br-notification`, responsável por agrupar e organizar a lista de itens de notificação.
  *
- * Subcomponente `br-notification-body`: representa a região principal do painel de notificações,
- * organizando abas, lista e eventuais estados vazios.
+ * ### Papel na composiçã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.
@@ -66,7 +75,7 @@ export class NotificationBody {
         };
     }
     render() {
-        return (h(Host, { key: 'a2d6eb6a84119f51aaa6c701ebc82bc258572788' }, h("div", { key: '0e87deb55bd7e00e24214e17916934f01ee4d72e', class: this.getCssClassMap() }, h("div", { key: '59e7e3e10fb46201461df8f80326080eff87d83e', class: { 'br-notification-body__tabs': true, 'd-none': !this.hasTabs } }, h("slot", { key: '7f08f0232b6d712bdea3aca1b34ac298483126c9', name: "tabs", onSlotchange: () => this.checkSlotVisibility('tabs') })), h("div", { key: '14e3e45e33ae13507f8d971c0d9364317d2f1e7b', 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: '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))))));
     }
     static get is() { return "br-notification-body"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{display:block}.br-notification-header{display:flex;align-items:flex-start;gap:var(--spacing-scale-2x, 16px);width:100%}.br-notification-header__avatar{flex-shrink:0}.br-notification-header__avatar:empty{display:none}.br-notification-header__content{display:flex;flex-direction:column;flex:1;min-width:0}.br-notification-header__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-scale-up-01, 1.25rem);color:var(--text-color, #333);line-height:var(--line-height-tight, 1.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.br-notification-header__subtitle{font-size:var(--font-size-scale-base, 1rem);color:var(--interactive-color-default, #1351b4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:var(--spacing-scale-half, 4px)}.br-notification-header__actions{flex-shrink:0;display:flex;align-items:flex-start;gap:var(--spacing-scale-base, 8px);margin-left:auto}
+*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media(min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color: var(--color-light);--color-rgb: var(--color-light-rgb);--text-color: var(--color-light);--interactive: var(--interactive-light);--interactive-rgb: var(--color-rgb);--visited: var(--visited-light);--hover: var(--hover-light);--pressed: var(--pressed-light);--focus-color: var(--focus-color-light);--focus: var(--focus-color-light);--item-padding-y: var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin: var(--grid-portrait-margin);--grid-maxwidth: var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter: var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media(min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media(min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tablet-margin)}.row{--grid-gutter: var(--grid-tablet-gutter)}.container{--grid-maxwidth: calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media(min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-desktop-margin)}.row{--grid-gutter: var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media(min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin: var(--grid-tv-margin)}.row{--grid-gutter: var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth: calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media(min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media(min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media(min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset: var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media(min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background: var(--background);--table-color: var(--color);--table-border-color: var(--gray-20);--table-border-style: solid;--table-border-width: 1px;--table-hover: var(--color-rgb);--table-padding: var(--spacing-scale-3x);--table-font-weight: var(--font-weight-medium);--table-th-background: var(--background-alternative);--table-th-font-weight: var(--font-weight-semi-bold);--table-row-size: var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color: var(--color-dark);--color-rgb: var(--color-dark-rgb);--text-color: var(--color-dark);--interactive: var(--interactive-dark);--interactive-rgb: var(--interactive-dark-rgb);--visited: var(--visited-dark);--hover: var(--hover-dark);--pressed: var(--pressed-dark);--focus-color: var(--focus-color-dark);--focus: var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media(prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{display:block}.br-notification-header{display:flex;align-items:flex-start;gap:var(--spacing-scale-2x, 16px);width:100%}.br-notification-header__avatar{flex-shrink:0}.br-notification-header__avatar:empty{display:none}.br-notification-header__content{display:flex;flex-direction:column;flex:1;min-width:0}.br-notification-header__title{font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-scale-up-01, 1.25rem);color:var(--text-color, #333);line-height:var(--line-height-tight, 1.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.br-notification-header__subtitle{font-size:var(--font-size-scale-base, 1rem);color:var(--interactive-color-default, #1351b4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:var(--spacing-scale-half, 4px)}.br-notification-header__actions{flex-shrink:0;display:flex;align-items:flex-start;gap:var(--spacing-scale-base, 8px);margin-left:auto}