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

package/dist/esm/br-modal.entry.js

@@ -11,7 +11,9 @@ const modalCss = "*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:
 const Modal = class {
     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"];
         }
@@ -26,32 +28,132 @@ const Modal = class {
         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`;
     }
@@ -71,6 +173,7 @@ const Modal = class {
     open() {
         return __awaiter(this, void 0, void 0, function* () {
             this.show = true;
+            this.openParentScrim();
         });
     }
     /**
@@ -78,22 +181,23 @@ const Modal = class {
      */
     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 (h(Host, null, h("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, h("div", { class: "br-modal-header" }, h("div", { class: "modal-title", id: this.titleId }, h("slot", { name: "header" }, this.titleText)), h("slot", { name: "close-button" }, h("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, h("br-icon", { "icon-name": "fa-solid:times" })))), h("div", { id: this.contentId, class: "br-modal-body" }, h("slot", null)), h("div", { class: `br-modal-footer ${this.alignFooter ? `justify-content-${this.alignFooter}` : ''}` }, h("slot", { name: "footer" })))));
+        return (h(Host, null, h("div", { class: this.getCssClassMap(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, "aria-describedby": this.contentId }, h("div", { class: "br-modal-header" }, h("div", { class: "modal-title", id: this.titleId }, h("slot", { name: "header" }, this.titleText)), h("slot", { name: "close-button" }, h("br-button", { class: "close", shape: "circle", density: "small", "aria-label": "Fechar", onClick: this.handleClose }, h("br-icon", { "icon-name": "fa-solid:times" })))), h("div", { id: this.contentId, class: "br-modal-body" }, h("slot", null)), h("div", { class: `br-modal-footer ${this.alignFooter !== undefined ? `justify-content-${this.alignFooter}` : ''}` }, h("slot", { name: "footer" })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "show": ["handleShowChange"]
+    }; }
 };
 Modal.style = modalCss;
 

package/dist/esm/br-modal.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"br-modal.entry.js","sources":["../../packages/webcomponents/src/components/modal/modal.scss?tag=br-modal&encapsulation=shadow","../../packages/webcomponents/src/components/modal/modal.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/modal/modal\";\n\n.br-modal.scrollable {\n  max-height: 400px;\n}\n\n.br-modal-footer.justify-content-end {\n  justify-content: flex-end;\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core'\n\nimport Helpers from '../../utils/helpers'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/modal?tab=designer).\n *\n * @slot header - Cabeçalho do modal. Se não for usado, o `title-text` será exibido.\n * @slot default - Corpo do modal.\n * @slot footer - Rodapé do modal.\n * @slot close-button - Botão de fechar customizado. Se não for usado, o botão padrão será exibido.\n *\n */\n@Component({\n  tag: 'br-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Modal {\n  /** Referência ao elemento host do componente. */\n  @Element() el: HTMLBrModalElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = Helpers.generateUniqueId('modal')\n\n  /** O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot `header` não é fornecido. */\n  @Prop() readonly titleText: string\n\n  /** Controla a visibilidade do modal. */\n  @Prop({ reflect: true, mutable: true }) show = false\n\n  /** Se `true`, o modal se fechará automaticamente ao clicar no botão de fechar ou pressionar a tecla 'Escape'. */\n  @Prop({ reflect: true }) autoClose = false\n\n  /** Seletor CSS para o elemento que deve receber foco quando o modal é aberto. */\n  @Prop() readonly initialFocusSelector: string\n\n  /**\n   * Define o tamanho (largura) do modal.\n   */\n  @Prop({ reflect: true }) readonly size: 'xsmall' | 'small' | 'medium' | 'large' | 'auto' = 'medium'\n\n  /** Se `true`, exibe um fundo escurecido (scrim) atrás do modal. */\n  @Prop({ reflect: true }) readonly scrim = false\n\n  /** Se `true`, habilita a rolagem interna do conteúdo do modal. */\n  @Prop({ reflect: true }) readonly scrollable = false\n\n  /**\n   * Define o alinhamento do conteúdo do rodapé (slot=\"footer\").\n   */\n  @Prop({ reflect: true }) readonly alignFooter: 'start' | 'end' | 'center' = 'center'\n\n  /** Evento emitido quando o modal solicita ser fechado (pelo botão 'x', tecla 'Escape' ou clique no scrim). */\n  @Event() brModalClose: EventEmitter<void>\n\n  private get titleId() {\n    return `${this.customId}-title`\n  }\n\n  private get contentId() {\n    return `${this.customId}-content`\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-modal': true,\n      [this.size]: true,\n      scrollable: this.scrollable,\n    }\n  }\n\n  private handleClose = () => {\n    this.brModalClose.emit()\n    if (this.autoClose) {\n      this.show = false\n\n      // Se o modal está dentro de um br-scrim, fecha o scrim também\n      const parentScrim = this.el.closest('br-scrim')\n      if (parentScrim) {\n        parentScrim.close()\n      }\n    }\n  }\n\n  /**\n   * Método público para abrir o modal\n   */\n  @Method()\n  async open() {\n    this.show = true\n  }\n\n  /**\n   * Método público para fechar o modal\n   */\n  @Method()\n  async close() {\n    this.show = false\n\n    // Se o modal está dentro de um br-scrim, fecha o scrim também\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim) {\n      parentScrim.close()\n    }\n  }\n\n  render() {\n    if (!this.show) {\n      return null\n    }\n\n    return (\n      <Host>\n        <div\n          class={this.getCssClassMap()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.titleId}\n          aria-describedby={this.contentId}\n        >\n          <div class=\"br-modal-header\">\n            <div class=\"modal-title\" id={this.titleId}>\n              <slot name=\"header\">{this.titleText}</slot>\n            </div>\n            <slot name=\"close-button\">\n              <br-button class=\"close\" shape=\"circle\" density=\"small\" aria-label=\"Fechar\" onClick={this.handleClose}>\n                <br-icon icon-name=\"fa-solid:times\"></br-icon>\n              </br-button>\n            </slot>\n          </div>\n          <div id={this.contentId} class=\"br-modal-body\">\n            <slot></slot>\n          </div>\n          <div class={`br-modal-footer ${this.alignFooter ? `justify-content-${this.alignFooter}` : ''}`}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"br-modal.entry.js","sources":["../../packages/webcomponents/src/components/modal/modal.scss?tag=br-modal&encapsulation=shadow","../../packages/webcomponents/src/components/modal/modal.tsx"],"sourcesContent":["@import \"~@govbr-ds/core/src/components/modal/modal\";\n\n.br-modal.scrollable {\n  max-height: 400px;\n}\n\n.br-modal-footer.justify-content-end {\n  justify-content: flex-end;\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core'\n\nimport Helpers from '../../utils/helpers'\nimport { CssClassMap } from '../../utils/interfaces'\n\n/**\n * ## Design System\n *\n * Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o [Design System do GovBR](https://www.gov.br/ds/components/modal?tab=designer).\n *\n * @slot header - Cabeçalho do modal. Se não for usado, o `title-text` será exibido.\n * @slot default - Corpo do modal.\n * @slot footer - Rodapé do modal.\n * @slot close-button - Botão de fechar customizado. Se não for usado, o botão padrão será exibido.\n *\n */\n@Component({\n  tag: 'br-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Modal {\n  /** Referência ao elemento host do componente. */\n  @Element() el: HTMLBrModalElement\n\n  @AttachInternals() elementInternals: ElementInternals\n\n  /**\n   * Identificador único.\n   * Caso não seja fornecido, um ID gerado automaticamente será usado.\n   */\n  @Prop({ reflect: true }) readonly customId: string = Helpers.generateUniqueId('modal')\n\n  /** O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot `header` não é fornecido. */\n  @Prop() readonly titleText: string\n\n  /** Controla a visibilidade do modal. */\n  @Prop({ reflect: true, mutable: true }) show = false\n\n  /**\n   * Define o comportamento de fechamento do modal.\n   *\n   * - `true`: O modal fecha automaticamente ao clicar no botão fechar.\n   * - `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\n   *   controlar manualmente o fechamento.\n   */\n  @Prop({ reflect: true }) autoClose = false\n\n  /** Seletor CSS para o elemento que deve receber foco quando o modal é aberto. */\n  @Prop() readonly initialFocusSelector: string\n\n  /**\n   * Define o tamanho (largura) do modal.\n   */\n  @Prop({ reflect: true }) readonly size: 'xsmall' | 'small' | 'medium' | 'large' | 'auto' = 'medium'\n\n  /** Se `true`, habilita a rolagem interna do conteúdo do modal. */\n  @Prop({ reflect: true }) readonly scrollable = false\n\n  /**\n   * Define o alinhamento do conteúdo do rodapé (slot=\"footer\").\n   */\n  @Prop({ reflect: true }) readonly alignFooter: 'start' | 'end' | 'center' = 'center'\n\n  private isOpeningParentScrim = false\n\n  /**\n   * Evento emitido quando o modal é aberto (quando `show` muda de `false` para `true`).\n   */\n  @Event() brModalOpen: EventEmitter<void>\n\n  /**\n   * Evento emitido após o modal ser fechado (quando `show` muda de `true` para `false`).\n   */\n  @Event() brModalClose: EventEmitter<void>\n\n  /**\n   * Evento emitido antes do fechamento do modal (quando o botão X é clicado).\n   * Se autoClose está desativado, o desenvolvedor deve fechar manualmente o modal após este evento.\n   * Se autoClose está ativado, o modal fecha automaticamente após este evento.\n   */\n  @Event() brModalBeforeClose: EventEmitter<void>\n\n  @Watch('show')\n  handleShowChange(newValue: boolean, oldValue: boolean) {\n    if (newValue) {\n      this.brModalOpen.emit()\n      this.openParentScrim()\n    } else if (oldValue === true) {\n      this.brModalClose.emit()\n      this.closeParentScrim()\n    }\n  }\n\n  private closeParentScrim() {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim && typeof parentScrim.close === 'function') {\n      parentScrim.close()\n    }\n  }\n\n  componentWillLoad() {\n    if (!this.show) {\n      const parentScrim = this.el.closest('br-scrim')\n      if (parentScrim !== null && parentScrim.isOpen) {\n        this.show = true\n      }\n    }\n  }\n\n  componentDidLoad() {\n    this.listenToParentScrimEvents()\n\n    if (this.show) {\n      this.openParentScrim()\n    }\n  }\n\n  disconnectedCallback() {\n    this.isOpeningParentScrim = false\n    this.removeParentScrimEventListeners()\n  }\n\n  /**\n   * Adiciona listeners para eventos do parent scrim\n   */\n  private listenToParentScrimEvents() {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim !== null) {\n      parentScrim.addEventListener('brScrimOpen', this.handleParentScrimOpen)\n      parentScrim.addEventListener('brScrimClose', this.handleParentScrimClose)\n    }\n  }\n\n  /**\n   * Remove listeners de eventos do parent scrim\n   */\n  private removeParentScrimEventListeners() {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim !== null) {\n      parentScrim.removeEventListener('brScrimOpen', this.handleParentScrimOpen)\n      parentScrim.removeEventListener('brScrimClose', this.handleParentScrimClose)\n    }\n  }\n\n  /**\n   * Handler para evento brScrimOpen do parent scrim\n   * Quando scrim abre programaticamente, a modal deve abrir também\n   */\n  private handleParentScrimOpen = () => {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim === null) return\n\n    if (!this.show) {\n      this.show = true\n    }\n  }\n\n  /**\n   * Handler para evento brScrimClose do parent scrim\n   * Se autoClose=true, fecha a modal junto com o scrim\n   * Se autoClose=false, não faz nada (modal permanece aberta)\n   */\n  private handleParentScrimClose = () => {\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim === null) return\n\n    if (this.autoClose && this.show) {\n      this.show = false\n    }\n  }\n\n  private openParentScrim() {\n    if (this.isOpeningParentScrim) return\n\n    const parentScrim = this.el.closest('br-scrim')\n    if (parentScrim && !parentScrim.isOpen) {\n      this.isOpeningParentScrim = true\n\n      Promise.resolve()\n        .then(() => {\n          try {\n            return parentScrim.open()\n          } catch (error) {\n            console.warn('br-modal: Erro ao abrir scrim pai:', error)\n            throw error\n          }\n        })\n        .finally(() => {\n          this.isOpeningParentScrim = false\n        })\n    }\n  }\n\n  private get titleId() {\n    return `${this.customId}-title`\n  }\n\n  private get contentId() {\n    return `${this.customId}-content`\n  }\n\n  private getCssClassMap(): CssClassMap {\n    return {\n      'br-modal': true,\n      [this.size]: true,\n      scrollable: this.scrollable,\n    }\n  }\n\n  private handleClose = () => {\n    this.brModalBeforeClose.emit()\n\n    if (this.autoClose) {\n      this.show = false\n    }\n  }\n\n  /**\n   * Método público para abrir o modal\n   */\n  @Method()\n  async open() {\n    this.show = true\n\n    this.openParentScrim()\n  }\n\n  /**\n   * Método público para fechar o modal\n   */\n  @Method()\n  async close() {\n    if (!this.autoClose) {\n      return\n    }\n\n    this.show = false\n  }\n\n  render() {\n    if (!this.show) {\n      return null\n    }\n\n    return (\n      <Host>\n        <div\n          class={this.getCssClassMap()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby={this.titleId}\n          aria-describedby={this.contentId}\n        >\n          <div class=\"br-modal-header\">\n            <div class=\"modal-title\" id={this.titleId}>\n              <slot name=\"header\">{this.titleText}</slot>\n            </div>\n            <slot name=\"close-button\">\n              <br-button class=\"close\" shape=\"circle\" density=\"small\" aria-label=\"Fechar\" onClick={this.handleClose}>\n                <br-icon icon-name=\"fa-solid:times\"></br-icon>\n              </br-button>\n            </slot>\n          </div>\n          <div id={this.contentId} class=\"br-modal-body\">\n            <slot></slot>\n          </div>\n          <div class={`br-modal-footer ${this.alignFooter !== undefined ? `justify-content-${this.alignFooter}` : ''}`}>\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/br-scrim.entry.js

@@ -87,6 +87,29 @@ const Scrim = class {
         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();
         };
@@ -104,6 +127,10 @@ const Scrim = class {
                 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;
@@ -139,7 +166,9 @@ const Scrim = class {
             }
             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
@@ -173,11 +202,15 @@ const Scrim = class {
                 }, 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();
             }
         };
@@ -186,37 +219,39 @@ const Scrim = class {
     // 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) {
@@ -243,6 +278,7 @@ const Scrim = class {
         this.setupActivator();
         this.setupActivatorSlotClick();
         this.addContentEventListener();
+        this.listenToModalEvents();
         if (this.isActive) {
             this.applyScrollStrategy();
             this.addGlobalEventInterception();
@@ -276,7 +312,6 @@ const Scrim = class {
             clearTimeout(this.restoreFocusTimeoutId);
             this.restoreFocusTimeoutId = null;
         }
-        // Remover event listeners
         window.removeEventListener('scroll', this.handleScrollClose);
         window.removeEventListener('scroll', this.handleBlockScroll);
         if (this.contentRef !== null) {
@@ -285,6 +320,58 @@ const Scrim = class {
         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)
@@ -473,7 +560,11 @@ const Scrim = class {
         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();
@@ -534,6 +625,9 @@ const Scrim = class {
         document.removeEventListener('focus', this.handleGlobalFocus, true);
         document.removeEventListener('focusin', this.handleGlobalFocus, true);
     }
+    // ======================================================================
+    // UTILITÁRIOS
+    // ======================================================================
     getCssClassMap() {
         return {
             'br-scrim': true,
@@ -584,7 +678,7 @@ const Scrim = class {
         });
     }
     render() {
-        return (h(Host, { key: '1aea7418642867cfb24c099729f34412f9aec7bf' }, h("slot", { key: '4468892291450f13cded3627ee91f31716108443', name: "activator" }), h("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' }, h("div", { key: '6c6df83177f1a14097ec5c08e409caaca3953d3b', class: "mask", onClick: this.handleMaskClick }), h("div", { key: '1af0ecd53a0aaf630069139a7e6935533a563e10', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, h("slot", { key: '2cb75f5b254ed22bbe821998700d9c1f4152dd5b' })))));
+        return (h(Host, { key: '249de7af4056263464615cbe086b419f74b8981b' }, h("slot", { key: '1698faa6b492e1ec594eba8425f20582a2af0e4a', name: "activator" }), h("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' }, h("div", { key: 'ef7408a6672fabf4d2f79bc7922f301fd102652e', class: "mask", onClick: this.handleMaskClick }), h("div", { key: '91ffb1a84478f09fc90cefbb97180c5db13dba5c', ref: (el) => (this.contentRef = el), id: `${this.customId}-content`, class: "content", tabIndex: -1, onKeyDown: this.handleKeyDown }, h("slot", { key: '0600ac804980446103154cebf83389ac92e44d9d' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }