@govbr-ds/webcomponents 2.0.0-next.61 → 2.0.0-next.62

package/dist/hydrate/index.mjs

@@ -37012,7 +37012,9 @@ const modalCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:
 class Modal {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.brModalOpen = createEvent(this, "brModalOpen", 7);
         this.brModalClose = createEvent(this, "brModalClose", 7);
+        this.brModalBeforeClose = createEvent(this, "brModalBeforeClose", 7);
         if (hostRef.$hostElement$["s-ei"]) {
             this.elementInternals = hostRef.$hostElement$["s-ei"];
         }
@@ -37027,32 +37029,132 @@ class Modal {
         this.customId = Helpers.generateUniqueId('modal');
         /** Controla a visibilidade do modal. */
         this.show = false;
-        /** Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'. */
+        /**
+         * Define o comportamento de fechamento do modal.
+         *
+         * - `true`: O modal fecha automaticamente ao clicar no botão fechar.
+         * - `false`: O modal emite `brModalBeforeClose` mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve
+         *   controlar manualmente o fechamento.
+         */
         this.autoClose = false;
         /**
          * Define o tamanho (largura) do modal.
          */
         this.size = 'medium';
-        /** Se `true`, exibe um fundo escurecido (scrim) atrás do modal. */
-        this.scrim = false;
         /** Se `true`, habilita a rolagem interna do conteúdo do modal. */
         this.scrollable = false;
         /**
          * Define o alinhamento do conteúdo do rodapé (slot="footer").
          */
         this.alignFooter = 'center';
+        this.isOpeningParentScrim = false;
+        /**
+         * Handler para evento brScrimOpen do parent scrim
+         * Quando scrim abre programaticamente, a modal deve abrir também
+         */
+        this.handleParentScrimOpen = () => {
+            const parentScrim = this.el.closest('br-scrim');
+            if (parentScrim === null)
+                return;
+            if (!this.show) {
+                this.show = true;
+            }
+        };
+        /**
+         * Handler para evento brScrimClose do parent scrim
+         * Se autoClose=true, fecha a modal junto com o scrim
+         * Se autoClose=false, não faz nada (modal permanece aberta)
+         */
+        this.handleParentScrimClose = () => {
+            const parentScrim = this.el.closest('br-scrim');
+            if (parentScrim === null)
+                return;
+            if (this.autoClose && this.show) {
+                this.show = false;
+            }
+        };
         this.handleClose = () => {
-            this.brModalClose.emit();
+            this.brModalBeforeClose.emit();
             if (this.autoClose) {
                 this.show = false;
-                // Se o modal está dentro de um br-scrim, fecha o scrim também
-                const parentScrim = this.el.closest('br-scrim');
-                if (parentScrim) {
-                    parentScrim.close();
-                }
             }
         };
     }
+    handleShowChange(newValue, oldValue) {
+        if (newValue) {
+            this.brModalOpen.emit();
+            this.openParentScrim();
+        }
+        else if (oldValue === true) {
+            this.brModalClose.emit();
+            this.closeParentScrim();
+        }
+    }
+    closeParentScrim() {
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim && typeof parentScrim.close === 'function') {
+            parentScrim.close();
+        }
+    }
+    componentWillLoad() {
+        if (!this.show) {
+            const parentScrim = this.el.closest('br-scrim');
+            if (parentScrim !== null && parentScrim.isOpen) {
+                this.show = true;
+            }
+        }
+    }
+    componentDidLoad() {
+        this.listenToParentScrimEvents();
+        if (this.show) {
+            this.openParentScrim();
+        }
+    }
+    disconnectedCallback() {
+        this.isOpeningParentScrim = false;
+        this.removeParentScrimEventListeners();
+    }
+    /**
+     * Adiciona listeners para eventos do parent scrim
+     */
+    listenToParentScrimEvents() {
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim !== null) {
+            parentScrim.addEventListener('brScrimOpen', this.handleParentScrimOpen);
+            parentScrim.addEventListener('brScrimClose', this.handleParentScrimClose);
+        }
+    }
+    /**
+     * Remove listeners de eventos do parent scrim
+     */
+    removeParentScrimEventListeners() {
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim !== null) {
+            parentScrim.removeEventListener('brScrimOpen', this.handleParentScrimOpen);
+            parentScrim.removeEventListener('brScrimClose', this.handleParentScrimClose);
+        }
+    }
+    openParentScrim() {
+        if (this.isOpeningParentScrim)
+            return;
+        const parentScrim = this.el.closest('br-scrim');
+        if (parentScrim && !parentScrim.isOpen) {
+            this.isOpeningParentScrim = true;
+            Promise.resolve()
+                .then(() => {
+                try {
+                    return parentScrim.open();
+                }
+                catch (error) {
+                    console.warn('br-modal: Erro ao abrir scrim pai:', error);
+                    throw error;
+                }
+            })
+                .finally(() => {
+                this.isOpeningParentScrim = false;
+            });
+        }
+    }
     get titleId() {
         return `${this.customId}-title`;
     }
@@ -37072,6 +37174,7 @@ class Modal {
     open() {
         return __awaiter(this, void 0, void 0, function* () {
             this.show = true;
+            this.openParentScrim();
         });
     }
     /**
@@ -37079,22 +37182,23 @@ class Modal {
      */
     close() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.show = false;
-            // Se o modal está dentro de um br-scrim, fecha o scrim também
-            const parentScrim = this.el.closest('br-scrim');
-            if (parentScrim) {
-                parentScrim.close();
+            if (!this.autoClose) {
+                return;
             }
+            this.show = false;
         });
     }
     render() {
         if (!this.show) {
             return null;
         }
-        return (hAsync(Host, null, hAsync("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, hAsync("div", { class: "br-modal-header" }, hAsync("div", { class: "modal-title", id: this.titleId }, hAsync("slot", { name: "header" }, this.titleText)), hAsync("slot", { name: "close-button" }, hAsync("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, hAsync("br-icon", { "icon-name": "fa-solid:times" })))), hAsync("div", { id: this.contentId, class: "br-modal-body" }, hAsync("slot", null)), hAsync("div", { class: `br-modal-footer ${this.alignFooter ? `justify-content-${this.alignFooter}` : ''}` }, hAsync("slot", { name: "footer" })))));
+        return (hAsync(Host, null, hAsync("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, hAsync("div", { class: "br-modal-header" }, hAsync("div", { class: "modal-title", id: this.titleId }, hAsync("slot", { name: "header" }, this.titleText)), hAsync("slot", { name: "close-button" }, hAsync("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, hAsync("br-icon", { "icon-name": "fa-solid:times" })))), hAsync("div", { id: this.contentId, class: "br-modal-body" }, hAsync("slot", null)), hAsync("div", { class: `br-modal-footer ${this.alignFooter !== undefined ? `justify-content-${this.alignFooter}` : ''}` }, hAsync("slot", { name: "footer" })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "show": ["handleShowChange"]
+    }; }
     static get style() { return modalCss; }
     static get cmpMeta() { return {
         "$flags$": 329,
@@ -37106,7 +37210,6 @@ class Modal {
             "autoClose": [516, "auto-close"],
             "initialFocusSelector": [1, "initial-focus-selector"],
             "size": [513],
-            "scrim": [516],
             "scrollable": [516],
             "alignFooter": [513, "align-footer"],
             "open": [64],
@@ -37114,7 +37217,7 @@ class Modal {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["customId", "custom-id"], ["show", "show"], ["autoClose", "auto-close"], ["size", "size"], ["scrim", "scrim"], ["scrollable", "scrollable"], ["alignFooter", "align-footer"]]
+        "$attrsToReflect$": [["customId", "custom-id"], ["show", "show"], ["autoClose", "auto-close"], ["size", "size"], ["scrollable", "scrollable"], ["alignFooter", "align-footer"]]
     }; }
 }
 
@@ -37844,6 +37947,29 @@ class Scrim {
         this.previouslyFocusedElement = null;
         this.focusTimeoutId = null;
         this.restoreFocusTimeoutId = null;
+        // ======================================================================
+        // GERENCIAMENTO DE COMPONENTES FILHOS
+        // ======================================================================
+        /**
+         * Handler para evento brModalOpen emitido por modal filha
+         */
+        this.handleModalOpen = (event) => {
+            const modalElement = event.target;
+            if (!this.isDirectChild(modalElement))
+                return;
+            if (!this.isOpen) {
+                this.open();
+            }
+        };
+        /**
+         * Handler para evento brModalClose emitido por modal filha
+         */
+        this.handleModalClose = (event) => {
+            const modalElement = event.target;
+            if (!this.isDirectChild(modalElement))
+                return;
+            this.close();
+        };
         this.handleActivatorClick = () => {
             this.toggle();
         };
@@ -37861,6 +37987,10 @@ class Scrim {
                 const reference = (_a = this.scrollOrigin) !== null && _a !== void 0 ? _a : this.lastScrollTop;
                 if (Math.abs(currentScroll - reference) > this.scrollThreshold) {
                     this.scrollOrigin = null;
+                    // Não fecha se tiver modal filha com autoClose=false ou não definido
+                    if (this.hasModalWithAutoClose()) {
+                        return;
+                    }
                     this.isOpen = false;
                     this.handleOpenChange(false);
                     return;
@@ -37896,7 +38026,9 @@ class Scrim {
             }
             if (event.key === 'Escape' && !this.disableCloseOnClick) {
                 event.preventDefault();
-                this.isOpen = false;
+                if (!this.hasModalWithAutoClose()) {
+                    this.isOpen = false;
+                }
             }
         };
         // Intercepta TODOS os eventos de clique globalmente quando scrim está ativo
@@ -37930,11 +38062,15 @@ class Scrim {
                 }, 0);
             }
         };
-        // ======================================================================
-        // MANIPULAÇÃO DE EVENTOS E UTILITÁRIOS
-        // ======================================================================
+        /**
+         * Handler para clique na máscara do scrim
+         * Fecha o scrim se disableCloseOnClick for false e não houver modal filha com autoClose=false
+         */
         this.handleMaskClick = (_event) => {
             if (!this.disableCloseOnClick) {
+                if (this.hasModalWithAutoClose()) {
+                    return;
+                }
                 this.close();
             }
         };
@@ -37943,37 +38079,39 @@ class Scrim {
     // LIFECYCLE HOOKS E WATCHERS
     // ======================================================================
     handleOpenChange(newValue) {
-        // Cancelar qualquer timeout anterior
-        if (this.focusTimeoutId !== null) {
-            clearTimeout(this.focusTimeoutId);
-            this.focusTimeoutId = null;
-        }
-        if (this.restoreFocusTimeoutId !== null) {
-            clearTimeout(this.restoreFocusTimeoutId);
-            this.restoreFocusTimeoutId = null;
-        }
-        this.isActive = newValue;
-        if (newValue && this.scrollStrategy === 'close') {
-            const currentScroll = window.scrollY;
-            this.lastScrollTop = currentScroll;
-            this.scrollOrigin = currentScroll;
-        }
-        this.updateStyles();
-        if (this.isActive) {
-            this.previouslyFocusedElement = document.activeElement;
-            this.applyScrollStrategy();
-            this.addGlobalEventInterception();
-            this.focusTimeoutId = setTimeout(() => {
-                this.focusFirstElement();
-            }, 100);
-            this.brScrimOpen.emit();
-        }
-        else {
-            this.resetScrolling();
-            this.removeGlobalEventInterception();
-            this.restoreFocus();
-            this.brScrimClose.emit();
-        }
+        return __awaiter(this, void 0, void 0, function* () {
+            // Cancelar qualquer timeout anterior
+            if (this.focusTimeoutId !== null) {
+                clearTimeout(this.focusTimeoutId);
+                this.focusTimeoutId = null;
+            }
+            if (this.restoreFocusTimeoutId !== null) {
+                clearTimeout(this.restoreFocusTimeoutId);
+                this.restoreFocusTimeoutId = null;
+            }
+            this.isActive = newValue;
+            if (newValue && this.scrollStrategy === 'close') {
+                const currentScroll = window.scrollY;
+                this.lastScrollTop = currentScroll;
+                this.scrollOrigin = currentScroll;
+            }
+            this.updateStyles();
+            if (this.isActive) {
+                this.previouslyFocusedElement = document.activeElement;
+                this.applyScrollStrategy();
+                this.addGlobalEventInterception();
+                this.focusTimeoutId = setTimeout(() => {
+                    this.focusFirstElement();
+                }, 100);
+                this.brScrimOpen.emit();
+            }
+            else {
+                this.resetScrolling();
+                this.removeGlobalEventInterception();
+                this.restoreFocus();
+                this.brScrimClose.emit();
+            }
+        });
     }
     updateStyles() {
         if (this.zIndex !== null && this.zIndex !== undefined) {
@@ -38000,6 +38138,7 @@ class Scrim {
         this.setupActivator();
         this.setupActivatorSlotClick();
         this.addContentEventListener();
+        this.listenToModalEvents();
         if (this.isActive) {
             this.applyScrollStrategy();
             this.addGlobalEventInterception();
@@ -38033,7 +38172,6 @@ class Scrim {
             clearTimeout(this.restoreFocusTimeoutId);
             this.restoreFocusTimeoutId = null;
         }
-        // Remover event listeners
         window.removeEventListener('scroll', this.handleScrollClose);
         window.removeEventListener('scroll', this.handleBlockScroll);
         if (this.contentRef !== null) {
@@ -38042,6 +38180,58 @@ class Scrim {
         this.removeActivatorClickListener();
         this.cleanupActivatorSlotClick();
         this.removeGlobalEventInterception();
+        this.removeModalEventListener();
+    }
+    /**
+     * Verifica se um elemento é filho direto deste scrim (não nested)
+     */
+    isDirectChild(element) {
+        const children = this.getDirectChildren();
+        return children.some((child) => child === element || child.contains(element));
+    }
+    /**
+     * Adiciona listeners para eventos brModalOpen e brModalClose das modais filhas
+     */
+    listenToModalEvents() {
+        this.el.addEventListener('brModalOpen', this.handleModalOpen);
+        this.el.addEventListener('brModalClose', this.handleModalClose);
+    }
+    /**
+     * Remove listeners dos eventos da modal
+     */
+    removeModalEventListener() {
+        this.el.removeEventListener('brModalOpen', this.handleModalOpen);
+        this.el.removeEventListener('brModalClose', this.handleModalClose);
+    }
+    /**
+     * Retorna os elementos filhos diretos do scrim via slot padrão
+     */
+    getDirectChildren() {
+        const shadowRoot = this.el.shadowRoot;
+        if (shadowRoot === null)
+            return [];
+        const slot = shadowRoot.querySelector('slot:not([name])');
+        if (slot === null)
+            return [];
+        return slot.assignedElements();
+    }
+    /**
+     * Busca uma modal filha direta do scrim
+     */
+    findModalChild() {
+        var _a;
+        const children = this.getDirectChildren();
+        const modalElement = children.find((child) => child.tagName === 'BR-MODAL');
+        return (_a = modalElement) !== null && _a !== void 0 ? _a : null;
+    }
+    /**
+     * Verifica se há uma modal filha com autoClose=false (padrão ou explícito)
+     * Retorna true se:
+     * - Existe modal filha E autoClose não é explicitamente true
+     */
+    hasModalWithAutoClose() {
+        const modal = this.findModalChild();
+        return modal !== null && modal.autoClose !== true;
     }
     // ======================================================================
     // GERENCIAMENTO DO ACTIVATOR (ELEMENTO ACIONADOR)
@@ -38230,7 +38420,11 @@ class Scrim {
         return elements.filter((el) => el.offsetWidth > 0 && el.offsetHeight > 0 && getComputedStyle(el).visibility !== 'hidden');
     }
     shouldHandleEscape(event) {
-        return (event.key === 'Escape' || event.key === 'Esc') && this.isActive && !this.disableCloseOnClick;
+        if ((event.key === 'Escape' || event.key === 'Esc') && this.isActive && !this.disableCloseOnClick) {
+            // Não fecha se tiver modal filha com autoClose=false ou não definido
+            return !this.hasModalWithAutoClose();
+        }
+        return false;
     }
     handleTabNavigation(event) {
         const focusableElements = this.getFocusableElements();
@@ -38291,6 +38485,9 @@ class Scrim {
         document.removeEventListener('focus', this.handleGlobalFocus, true);
         document.removeEventListener('focusin', this.handleGlobalFocus, true);
     }
+    // ======================================================================
+    // UTILITÁRIOS
+    // ======================================================================
     getCssClassMap() {
         return {
             'br-scrim': true,
@@ -38341,7 +38538,7 @@ class Scrim {
         });
     }
     render() {
-        return (hAsync(Host, { key: '1aea7418642867cfb24c099729f34412f9aec7bf' }, hAsync("slot", { key: '4468892291450f13cded3627ee91f31716108443', name: "activator" }), hAsync("div", { key: '6019de52484c176a5f5d706ca1dc759039dae940', class: this.getCssClassMap(), id: this.customId, role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel || 'Conteúdo do diálogo', "data-visible": this.isActive ? 'true' : 'false' }, hAsync("div", { key: '6c6df83177f1a14097ec5c08e409caaca3953d3b', class: "mask", onClick: this.handleMaskClick }), hAsync("div", { key: '1af0ecd53a0aaf630069139a7e6935533a563e10', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '2cb75f5b254ed22bbe821998700d9c1f4152dd5b' })))));
+        return (hAsync(Host, { key: '249de7af4056263464615cbe086b419f74b8981b' }, hAsync("slot", { key: '1698faa6b492e1ec594eba8425f20582a2af0e4a', name: "activator" }), hAsync("div", { key: 'adedf3eb84f3d8f79ac9bb19209022301453c019', class: this.getCssClassMap(), id: this.customId, role: "dialog", "aria-modal": "true", "aria-label": this.ariaLabel || 'Conteúdo do diálogo', "data-visible": this.isActive ? 'true' : 'false' }, hAsync("div", { key: 'ef7408a6672fabf4d2f79bc7922f301fd102652e', class: "mask", onClick: this.handleMaskClick }), hAsync("div", { key: '91ffb1a84478f09fc90cefbb97180c5db13dba5c', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, hAsync("slot", { key: '0600ac804980446103154cebf83389ac92e44d9d' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/types/components/modal/modal.d.ts

@@ -23,7 +23,13 @@ export declare class Modal {
     readonly titleText: string;
     /** Controla a visibilidade do modal. */
     show: boolean;
-    /** Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'. */
+    /**
+     * Define o comportamento de fechamento do modal.
+     *
+     * - `true`: O modal fecha automaticamente ao clicar no botão fechar.
+     * - `false`: O modal emite `brModalBeforeClose` mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve
+     *   controlar manualmente o fechamento.
+     */
     autoClose: boolean;
     /** Seletor CSS para o elemento que deve receber foco quando o modal é aberto. */
     readonly initialFocusSelector: string;
@@ -31,16 +37,52 @@ export declare class Modal {
      * Define o tamanho (largura) do modal.
      */
     readonly size: 'xsmall' | 'small' | 'medium' | 'large' | 'auto';
-    /** Se `true`, exibe um fundo escurecido (scrim) atrás do modal. */
-    readonly scrim = false;
     /** Se `true`, habilita a rolagem interna do conteúdo do modal. */
     readonly scrollable = false;
     /**
      * Define o alinhamento do conteúdo do rodapé (slot="footer").
      */
     readonly alignFooter: 'start' | 'end' | 'center';
-    /** Evento emitido quando o modal solicita ser fechado (pelo botão 'x', tecla 'Escape' ou clique no scrim). */
+    private isOpeningParentScrim;
+    /**
+     * Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`).
+     */
+    brModalOpen: EventEmitter<void>;
+    /**
+     * Evento emitido após o modal ser fechado (quando `show` muda de `true` para `false`).
+     */
     brModalClose: EventEmitter<void>;
+    /**
+     * Evento emitido antes do fechamento do modal (quando o botão X é clicado).
+     * Se autoClose está desativado, o desenvolvedor deve fechar manualmente o modal após este evento.
+     * Se autoClose está ativado, o modal fecha automaticamente após este evento.
+     */
+    brModalBeforeClose: EventEmitter<void>;
+    handleShowChange(newValue: boolean, oldValue: boolean): void;
+    private closeParentScrim;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Adiciona listeners para eventos do parent scrim
+     */
+    private listenToParentScrimEvents;
+    /**
+     * Remove listeners de eventos do parent scrim
+     */
+    private removeParentScrimEventListeners;
+    /**
+     * Handler para evento brScrimOpen do parent scrim
+     * Quando scrim abre programaticamente, a modal deve abrir também
+     */
+    private handleParentScrimOpen;
+    /**
+     * Handler para evento brScrimClose do parent scrim
+     * Se autoClose=true, fecha a modal junto com o scrim
+     * Se autoClose=false, não faz nada (modal permanece aberta)
+     */
+    private handleParentScrimClose;
+    private openParentScrim;
     private get titleId();
     private get contentId();
     private getCssClassMap;

package/dist/types/components/scrim/scrim.d.ts

@@ -92,7 +92,7 @@ export declare class Scrim {
     private focusTimeoutId;
     private restoreFocusTimeoutId;
     private static readonly FOCUSABLE_SELECTORS;
-    handleOpenChange(newValue: boolean): void;
+    handleOpenChange(newValue: boolean): Promise<void>;
     updateStyles(): void;
     handleActivatorChange(): void;
     componentWillLoad(): void;
@@ -104,6 +104,40 @@ export declare class Scrim {
     private addContentEventListener;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Handler para evento brModalOpen emitido por modal filha
+     */
+    private handleModalOpen;
+    /**
+     * Handler para evento brModalClose emitido por modal filha
+     */
+    private handleModalClose;
+    /**
+     * Verifica se um elemento é filho direto deste scrim (não nested)
+     */
+    private isDirectChild;
+    /**
+     * Adiciona listeners para eventos brModalOpen e brModalClose das modais filhas
+     */
+    private listenToModalEvents;
+    /**
+     * Remove listeners dos eventos da modal
+     */
+    private removeModalEventListener;
+    /**
+     * Retorna os elementos filhos diretos do scrim via slot padrão
+     */
+    private getDirectChildren;
+    /**
+     * Busca uma modal filha direta do scrim
+     */
+    private findModalChild;
+    /**
+     * Verifica se há uma modal filha com autoClose=false (padrão ou explícito)
+     * Retorna true se:
+     * - Existe modal filha E autoClose não é explicitamente true
+     */
+    private hasModalWithAutoClose;
     private checkActivatorSlot;
     private setupActivatorSlotClick;
     private setupActivator;
@@ -145,6 +179,10 @@ export declare class Scrim {
      * Remove interceptação global de eventos
      */
     private removeGlobalEventInterception;
+    /**
+     * Handler para clique na máscara do scrim
+     * Fecha o scrim se disableCloseOnClick for false e não houver modal filha com autoClose=false
+     */
     private handleMaskClick;
     private getCssClassMap;
     /**

package/dist/types/components.d.ts

@@ -1418,7 +1418,7 @@ export namespace Components {
          */
         "alignFooter": 'start' | 'end' | 'center';
         /**
-          * Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'.
+          * Define o comportamento de fechamento do modal.  - `true`: O modal fecha automaticamente ao clicar no botão fechar. - `false`: O modal emite `brModalBeforeClose` mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve   controlar manualmente o fechamento.
           * @default false
          */
         "autoClose": boolean;
@@ -1439,11 +1439,6 @@ export namespace Components {
           * Método público para abrir o modal
          */
         "open": () => Promise<void>;
-        /**
-          * Se `true`, exibe um fundo escurecido (scrim) atrás do modal.
-          * @default false
-         */
-        "scrim": false;
         /**
           * Se `true`, habilita a rolagem interna do conteúdo do modal.
           * @default false
@@ -3165,7 +3160,9 @@ declare global {
         new (): HTMLBrMessageElement;
     };
     interface HTMLBrModalElementEventMap {
+        "brModalOpen": void;
         "brModalClose": void;
+        "brModalBeforeClose": void;
     }
     /**
      * ## Design System
@@ -5094,7 +5091,7 @@ declare namespace LocalJSX {
          */
         "alignFooter"?: 'start' | 'end' | 'center';
         /**
-          * Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'.
+          * Define o comportamento de fechamento do modal.  - `true`: O modal fecha automaticamente ao clicar no botão fechar. - `false`: O modal emite `brModalBeforeClose` mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve   controlar manualmente o fechamento.
           * @default false
          */
         "autoClose"?: boolean;
@@ -5108,14 +5105,17 @@ declare namespace LocalJSX {
          */
         "initialFocusSelector"?: string;
         /**
-          * Evento emitido quando o modal solicita ser fechado (pelo botão 'x', tecla 'Escape' ou clique no scrim).
+          * Evento emitido antes do fechamento do modal (quando o botão X é clicado). Se autoClose está desativado, o desenvolvedor deve fechar manualmente o modal após este evento. Se autoClose está ativado, o modal fecha automaticamente após este evento.
+         */
+        "onBrModalBeforeClose"?: (event: BrModalCustomEvent<void>) => void;
+        /**
+          * Evento emitido após o modal ser fechado (quando `show` muda de `true` para `false`).
          */
         "onBrModalClose"?: (event: BrModalCustomEvent<void>) => void;
         /**
-          * Se `true`, exibe um fundo escurecido (scrim) atrás do modal.
-          * @default false
+          * Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`).
          */
-        "scrim"?: false;
+        "onBrModalOpen"?: (event: BrModalCustomEvent<void>) => void;
         /**
           * Se `true`, habilita a rolagem interna do conteúdo do modal.
           * @default false