@govbr-ds/webcomponents 2.1.0 → 2.1.1

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

@@ -0,0 +1,1825 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+import { Host, h, } from "@stencil/core";
+import { generateUniqueId } from "../../shared/utils/id";
+import { supportsNativeModalDialog, syncNativeModalDialog } from "../../shared/utils/native-dialog";
+import { createRafBatcher } from "../../shared/utils/raf-batcher";
+import { lockBodyScroll, unlockBodyScroll } from "../../shared/utils/scrollLock";
+/**
+ * ## Design System
+ *
+ * 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/scrim?tab=designer).
+ *
+ * @category Feedback
+ * @status stable
+ * @slot default - Slot para o conteúdo principal a ser exibido sobre o fundo escurecido do scrim.
+ * @slot activator - Slot para o elemento ativador do scrim, com prioridade sobre a propriedade activator.
+ */
+export class Scrim {
+    constructor() {
+        this.legibilityBatch = createRafBatcher(() => this.computeLegibilityRect());
+        this.hasActivatorSlot = false;
+        /** Rect do elemento alvo do scrim vazado. */
+        this.spotlightRect = null;
+        /**
+         * Identificador único.
+         * Caso não seja fornecido, um ID gerado automaticamente será usado.
+         */
+        this.customId = generateUniqueId();
+        /**
+         * Ativa/desativa o scrim
+         */
+        this.isOpen = false;
+        /**
+         * Desativa o fechamento do scrim ao ser clicado
+         */
+        this.disableCloseOnClick = false;
+        /**
+         * Define o valor de z-index do scrim
+         */
+        this.zIndex = null;
+        /**
+         * Cor de fundo personalizada para o scrim.
+         * Aceita os seguintes formatos de cor:
+         * - Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc.
+         * - Códigos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc.
+         * - Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc.
+         * - Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc.
+         * - Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc.
+         * - Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc.
+         * Se não especificada, usa a cor padrão do tema.
+         */
+        this.bgColor = null;
+        /**
+         * Define a opacidade personalizada do scrim
+         */
+        this.customOpacity = null;
+        /**
+         * Define o modo de exibição do scrim:
+         * - `'fullscreen'`: Ocupa toda a tela (`position: fixed`). (_padrão_)
+         * - `'parent'`: Ocupa apenas o elemento pai (`position: absolute`).
+         *   O elemento pai deve ter `position: relative` ou outro valor diferente de `static`.
+         *
+         * Para a variante `'legibility'`, este atributo é ignorado: o posicionamento é sempre
+         * calculado automaticamente a partir das coordenadas do elemento pai.
+         */
+        this.displayMode = 'fullscreen';
+        /**
+         * Determina quanto de rolagem (em pixels) é necessário para acionar a ação de fechamento automático do scrim.
+         */
+        this.scrollThreshold = 50;
+        /**
+         * Define o seletor para o elemento activator.
+         * Nota: O slot 'activator' tem prioridade sobre esta propriedade.
+         */
+        this.activator = null;
+        /**
+         * Define um rótulo acessível personalizado para o diálogo.
+         * Se não fornecido, será usado "Conteúdo do diálogo" como padrão.
+         */
+        this.ariaLabel = null;
+        /**
+         * Define a variante semântica do scrim
+         * - `'focus'`: Redireciona o foco hierárquico do usuário. Cor #000000 com opacidade 40%. (_padrão_)
+         * - `'spotlight'`: Scrim vazado — destaca um elemento específico criando uma fresta no overlay.
+         *   Aplica as mesmas cores da variante `'focus'`. Use `spotlightTargetId` para indicar o elemento a ser destacado.
+         * - `'legibility'`: Melhora o contraste e leitura de texto sobre superfícies. Cor #000000 com opacidade 64%.
+         *   Para cobertura parcial, use `legibilityAnchor` + `legibilitySize`.
+         *   Para gradiente suave, use `bgColor` com um valor de gradiente CSS e `customOpacity="1"`,
+         *   ex.: `bg-color="linear-gradient(to top, rgba(0,0,0,0.64), transparent)"`..
+         *
+         * Quando definida, aplica automaticamente as especificações de cor e opacidade do Design System.
+         * As propriedades `bgColor` e `customOpacity` têm prioridade e sobrepõem os valores da variante.
+         */
+        this.variant = 'focus';
+        /**
+         * Define a borda de ancoragem da faixa de cobertura da variante `legibility`.
+         *
+         * Controla de qual borda (ou centro) do elemento a máscara de overlay cresce,
+         * tendo seu tamanho determinado por `legibilitySize`.
+         *
+         * - `'top'`: faixa ancorada na borda superior, cresce para baixo.
+         * - `'bottom'`: faixa ancorada na borda inferior, cresce para cima.
+         * - `'left'`: faixa ancorada na borda esquerda, cresce para a direita.
+         * - `'right'`: faixa ancorada na borda direita, cresce para a esquerda.
+         * - `'center'`: faixa centralizada verticalmente no elemento.
+         *
+         * Quando `legibilitySize` é `null`, a máscara ocupa 100% independentemente
+         * da âncora definida, equivalendo a uma cobertura total.
+         *
+         * Só tem efeito quando `variant="legibility"`.
+         */
+        this.legibilityAnchor = 'bottom';
+        /**
+         * Define o tamanho da faixa de cobertura da variante `legibility`, usado em
+         * conjunto com `legibilityAnchor`.
+         *
+         * Aceita qualquer valor CSS de comprimento válido:
+         * - Percentual relativo ao elemento pai: `'40%'`, `'75%'`
+         * - Comprimento absoluto: `'120px'`, `'8rem'`, `'6em'`
+         * - Função CSS: `'calc(100% - 2rem)'`
+         *
+         * Quando `null` (padrão), a máscara ocupa **100%** da dimensão relevante:
+         * - **altura** para âncoras `top`, `bottom` e `center`
+         * - **largura** para âncoras `left` e `right`
+         *
+         * Só tem efeito quando `variant="legibility"` está definido.
+         */
+        this.legibilitySize = null;
+        /**
+         * Ativa o modo de scrim vazado (variante 'spotlight'), criando uma área de fresta no overlay
+         * que destaca o elemento referenciado pelo seletor CSS fornecido.
+         */
+        this.spotlightTargetId = null;
+        /**
+         * Espaçamento interno (em pixels) ao redor da área de fresta no scrim vazado.
+         */
+        this.spotlightPadding = 8;
+        /**
+         * Define a forma da área de fresta no scrim vazado.
+         * - 'rect': Retangular com bordas retas.
+         * - 'rounded': Retangular com bordas arredondadas (border-radius de 8px).
+         * - 'circle': Elipse inscrita na área do elemento alvo.
+         */
+        this.spotlightShape = 'rect';
+        /**
+         * Define como o scrim aplica estilos de layout ao elemento filho (slot padrão).
+         *
+         * - `'default'`: O scrim gerencia o layout do conteúdo, centralizando, animando e aplicando transformações e opacidade automaticamente.
+         *
+         * - `'none'`: o scrim age como um componente controlado pelo pai. O filho recebe apenas a máscara visual, sem interferência de posicionamento, transformação ou opacidade.
+         * Adequado para componentes que gerenciam seu próprio layout e estado de abertura. Além disso:
+         *
+         *   - Foco e eventos globais** não são interceptados pelo scrim — o componente filho gerencia seu próprio foco, navegação por teclado e fechamento via ESC.
+         *   - Clique no scrim emite `brScrimClose` sem fechar o scrim internamente, delegando o controle de estado ao pai (quem define `isOpen`).
+         *   - Use `zIndex` apenas para sobrescrever a camada bloqueadora no fallback CSS. Máscara e painel devem usar subcamadas locais, sem aritmética entre camadas globais.
+         *
+         */
+        this.contentLayout = 'default';
+        /** Indica se o atributo `display-mode` foi explicitamente informado pelo usuário */
+        this.displayModeExplicit = false;
+        // ======================================================================
+        // PROPRIEDADES PRIVADAS E VARIÁVEIS INTERNAS
+        // ======================================================================
+        this.contentRef = null;
+        this.activatorElement = null;
+        this.lastScrollTop = 0;
+        this.scrollOrigin = null;
+        this.previouslyFocusedElement = null;
+        this.focusTimeoutId = null;
+        this.restoreFocusTimeoutId = null;
+        /** ResizeObserver que monitora o elemento alvo do spotlight para recalcular a posição. */
+        this.spotlightResizeObserver = null;
+        /** Elemento atualmente sendo destacado pelo scrim vazado. */
+        this.spotlightTargetElement = null;
+        /** Referência ao container interno para estilos locais e fallback sem `<dialog>`. */
+        this.scrimDivRef = null;
+        this.nativeDialogRef = null;
+        /** ResizeObserver que monitora o elemento pai para recalcular a posição da variante legibility. */
+        this.legibilityResizeObserver = null;
+        this.globalInterceptionAttached = false;
+        /**
+         * Flag que suprime handleGlobalFocus enquanto a modal filha está
+         * gerenciando ativamente sua própria sequência de foco (moveFocusIntoModal).
+         */
+        this.isModalFocusing = false;
+        this.modalFocusSuppressId = null;
+        /**
+         * Handler para o evento `brModalFocusReady` emitido pela modal filha.
+         * Desativa o guard imediatamente assim que o foco está estabilizado,
+         * cancelando o timeout de segurança do `suppressFocusGuard`.
+         */
+        this.handleModalFocusReady = () => {
+            if (!this.isModalFocusing)
+                return;
+            this.isModalFocusing = false;
+            if (this.modalFocusSuppressId !== null) {
+                clearTimeout(this.modalFocusSuppressId);
+                this.modalFocusSuppressId = null;
+            }
+        };
+        /**
+         * Handler para evento brModalOpen emitido por modal filha
+         */
+        this.handleModalOpen = (event) => {
+            const modalElement = event.target;
+            if (!this.isDirectChild(modalElement))
+                return;
+            this.suppressFocusGuard();
+            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();
+        };
+        this.handleScrollClose = () => {
+            if (this.scrollStrategy === 'close' && this.isActive) {
+                const currentScroll = this.getScrollPosition();
+                const reference = this.scrollOrigin ?? this.lastScrollTop;
+                if (Math.abs(currentScroll - reference) > this.scrollThreshold) {
+                    this.scrollOrigin = null;
+                    // Não fecha se tiver modal filha com autoClose=false (padrão)
+                    if (this.hasModalWithAutoClose()) {
+                        return;
+                    }
+                    this.isOpen = false;
+                    return;
+                }
+                this.lastScrollTop = currentScroll;
+            }
+        };
+        // ======================================================================
+        // NAVEGAÇÃO POR TECLADO E INTERCEPTAÇÃO DE EVENTOS
+        // ======================================================================
+        this.handleKeyDown = (event) => {
+            if (!this.isActive)
+                return;
+            if (this.shouldHandleEscape(event)) {
+                this.isOpen = false;
+                return;
+            }
+            if (event.key === 'Tab') {
+                const modalChild = this.findModalChild();
+                if (modalChild?.show)
+                    return;
+                this.handleTabNavigation(event);
+            }
+        };
+        this.handleGlobalKeyDown = (event) => {
+            if (!this.isActive)
+                return;
+            if (event.key === 'Escape' && !this.disableCloseOnClick) {
+                if (this.hasModalWithAutoClose())
+                    return;
+                event.preventDefault();
+                this.isOpen = false;
+                return;
+            }
+            const realTarget = (event.composedPath?.()[0] ?? event.target);
+            if (!this.isElementInsideScrim(realTarget)) {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                this.focusFirstElement();
+                return;
+            }
+        };
+        // Intercepta TODOS os eventos de clique globalmente quando scrim está ativo
+        this.handleGlobalClick = (event) => {
+            if (!this.isActive)
+                return;
+            const target = (event.composedPath?.()[0] ?? event.target);
+            if (!this.isElementInsideScrim(target)) {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                if (!this.disableCloseOnClick) {
+                    this.close();
+                }
+                return;
+            }
+        };
+        /**
+         * Intercepta eventos de foco globalmente
+         */
+        this.handleGlobalFocus = (event) => {
+            if (!this.isActive)
+                return;
+            const realTarget = (event.composedPath?.()[0] ?? event.target);
+            const insideScrim = this.isElementInsideScrim(realTarget);
+            if (this.isModalFocusing)
+                return;
+            if (!insideScrim) {
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                requestAnimationFrame(() => {
+                    this.focusFirstElement();
+                });
+            }
+        };
+        /**
+         * Handler para clique na máscara do scrim.
+         * Fecha o scrim se disableCloseOnClick for false e não houver modal filha com autoClose=false.
+         * Não afeta o comportamento de ESC, que sempre fecha (W3C Dialog Pattern).
+         */
+        this.handleMaskClick = (_event) => {
+            if (!this.disableCloseOnClick) {
+                if (this.hasModalWithAutoClose()) {
+                    return;
+                }
+                if (this.contentLayout === 'none') {
+                    this.brScrimClose.emit();
+                    return;
+                }
+                this.close();
+            }
+        };
+        this.handleNativeCancel = (event) => {
+            event.preventDefault();
+            this.isOpen = false;
+        };
+        /**
+         * Recalcula as coordenadas da fresta com base no bounding rect do elemento alvo.
+         * Coordenadas são relativas ao viewport (mode-fullscreen) ou ao elemento pai (mode-parent).
+         */
+        this.computeSpotlightRect = () => {
+            if (this.spotlightTargetElement === null)
+                return;
+            const targetRect = this.spotlightTargetElement.getBoundingClientRect();
+            if (this.effectiveDisplayMode === 'parent' && this.el.parentElement !== null) {
+                const parentRect = this.el.parentElement.getBoundingClientRect();
+                this.spotlightRect = new DOMRect(targetRect.left - parentRect.left, targetRect.top - parentRect.top, targetRect.width, targetRect.height);
+            }
+            else {
+                this.spotlightRect = new DOMRect(targetRect.left, targetRect.top, targetRect.width, targetRect.height);
+            }
+        };
+        /**
+         * Recalcula as coordenadas do elemento pai via getBoundingClientRect e aplica
+         * como estilos inline no div interno, sobrepondo o `inset: 0` do mode-fullscreen.
+         */
+        this.computeLegibilityRect = () => {
+            const parent = this.el.parentElement;
+            if (parent === null || this.scrimDivRef === null)
+                return;
+            const rect = parent.getBoundingClientRect();
+            this.scrimDivRef.style.setProperty('position', 'fixed');
+            this.scrimDivRef.style.setProperty('inset', 'unset');
+            this.scrimDivRef.style.setProperty('top', '0');
+            this.scrimDivRef.style.setProperty('left', '0');
+            this.scrimDivRef.style.setProperty('width', `${rect.width}px`);
+            this.scrimDivRef.style.setProperty('height', `${rect.height}px`);
+            // Um ancestral transformado redefine a origem de position: fixed (caso dos previews).
+            const fixedOrigin = this.scrimDivRef.getBoundingClientRect();
+            this.scrimDivRef.style.setProperty('top', `${rect.top - fixedOrigin.top}px`);
+            this.scrimDivRef.style.setProperty('left', `${rect.left - fixedOrigin.left}px`);
+        };
+        this.scheduleLegibilityRect = () => this.legibilityBatch.schedule(undefined);
+    }
+    get isActive() {
+        return this.isLegibilityVariant || this.isOpen;
+    }
+    // ======================================================================
+    // LIFECYCLE HOOKS E WATCHERS
+    // ======================================================================
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: sincroniza foco, scroll, spotlight e emissão de eventos para abertura/fechamento.
+    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;
+        }
+        // Legibility é sempre ativo — ignora tentativas de fechar
+        if (this.isLegibilityVariant) {
+            this.updateStyles();
+            if (newValue)
+                this.brScrimOpen.emit();
+            return;
+        }
+        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();
+            if (this.contentLayout !== 'none' && !this.usesNativeTopLayer) {
+                this.addGlobalEventInterception();
+                const hasModalChild = this.findModalChild() !== null;
+                if (hasModalChild) {
+                    this.suppressFocusGuard();
+                }
+                else {
+                    this.focusTimeoutId = setTimeout(() => {
+                        this.focusFirstElement();
+                    }, 100);
+                }
+            }
+            this.setupSpotlight();
+            this.brScrimOpen.emit();
+        }
+        else {
+            this.closeModalChild();
+            this.cleanupSpotlight();
+            this.resetScrolling();
+            if (this.contentLayout !== 'none') {
+                this.removeGlobalEventInterception();
+                this.restoreFocus();
+                this.brScrimClose.emit();
+            }
+        }
+    }
+    updateStyles() {
+        // Aplica defaults da variante antes dos overrides manuais
+        this.applyVariantDefaults();
+        if (this.zIndex !== null && this.zIndex !== undefined) {
+            this.el.style.zIndex = `${this.zIndex}`;
+            this.el.style.setProperty('--z-index-layer-4', `${this.zIndex}`);
+        }
+        // bgColor e customOpacity sobrepõem os valores da variante
+        if (this.bgColor !== null) {
+            this.el.style.setProperty('--surface-overlay-scrim', this.bgColor);
+        }
+        if (this.customOpacity !== null) {
+            this.el.style.setProperty('--br-scrim-opacity', `${this.customOpacity}`);
+        }
+    }
+    handleVariantChange() {
+        this.updateStyles();
+        if (this.isActive) {
+            if (this.isLegibilityVariant) {
+                this.removeGlobalEventInterception();
+                this.resetScrolling();
+                this.cleanupSpotlight();
+                this.setupLegibility();
+            }
+            else if (this.variant === 'spotlight') {
+                this.cleanupLegibility();
+                if (!this.usesNativeTopLayer)
+                    this.addGlobalEventInterception();
+                this.setupSpotlight();
+            }
+            else {
+                this.cleanupLegibility();
+                if (!this.usesNativeTopLayer)
+                    this.addGlobalEventInterception();
+                this.cleanupSpotlight();
+            }
+        }
+    }
+    handleLayerModeChange() {
+        this.removeGlobalEventInterception();
+        if (this.isActive && this.contentLayout !== 'none' && !this.usesNativeTopLayer) {
+            this.addGlobalEventInterception();
+        }
+    }
+    handleSpotlightChange() {
+        if (this.isActive) {
+            this.setupSpotlight();
+        }
+    }
+    handleActivatorChange() {
+        this.removeActivatorClickListener();
+        this.setupActivator();
+    }
+    connectedCallback() {
+        if (this.scrollStrategy === 'close') {
+            const currentScroll = window.scrollY;
+            this.lastScrollTop = currentScroll;
+            this.scrollOrigin = currentScroll;
+            window.addEventListener('scroll', this.handleScrollClose, { passive: true });
+        }
+    }
+    disconnectedCallback() {
+        // Limpar timeouts pendentes
+        if (this.focusTimeoutId !== null) {
+            clearTimeout(this.focusTimeoutId);
+            this.focusTimeoutId = null;
+        }
+        if (this.restoreFocusTimeoutId !== null) {
+            clearTimeout(this.restoreFocusTimeoutId);
+            this.restoreFocusTimeoutId = null;
+        }
+        window.removeEventListener('scroll', this.handleScrollClose);
+        if (this.scrollStrategy === 'block' && this.isActive) {
+            unlockBodyScroll();
+        }
+        if (this.contentRef !== null) {
+            this.contentRef.removeEventListener('keydown', this.handleKeyDown);
+        }
+        this.removeActivatorClickListener();
+        this.cleanupActivatorSlotClick();
+        this.removeGlobalEventInterception();
+        this.removeModalEventListener();
+        this.cleanupSpotlight();
+        this.cleanupLegibility();
+        if (this.modalFocusSuppressId !== null) {
+            clearTimeout(this.modalFocusSuppressId);
+            this.modalFocusSuppressId = null;
+        }
+    }
+    componentWillLoad() {
+        this.hasActivatorSlot = this.checkActivatorSlot('activator');
+        this.displayModeExplicit = this.el.hasAttribute('display-mode');
+    }
+    componentDidLoad() {
+        this.updateStyles();
+        this.setupActivator();
+        this.setupActivatorSlotClick();
+        this.addContentEventListener();
+        this.listenToModalEvents();
+        if (this.isLegibilityVariant) {
+            this.setupLegibility();
+        }
+        else if (this.isActive) {
+            this.applyScrollStrategy();
+            if (this.contentLayout !== 'none' && !this.usesNativeTopLayer) {
+                this.addGlobalEventInterception();
+                const modalChild = this.findModalChild();
+                if (modalChild === null) {
+                    this.focusFirstElement();
+                    this.setupSpotlight();
+                }
+                else {
+                    this.suppressFocusGuard();
+                }
+            }
+        }
+    }
+    componentDidRender() {
+        syncNativeModalDialog(this.nativeDialogRef, this.isActive && this.usesNativeDialog);
+    }
+    // ======================================================================
+    // MÉTODOS PÚBLICOS (API)
+    // ======================================================================
+    /**
+     * Define o limite de rolagem para o fechamento automático do scrim.
+     */
+    async setScrollThreshold(threshold) {
+        this.scrollThreshold = threshold;
+    }
+    /**
+     * Método público para exibir o scrim
+     */
+    async open() {
+        this.isOpen = true;
+    }
+    /**
+     * Método público para esconder o scrim
+     */
+    async close() {
+        if (this.isLegibilityVariant)
+            return;
+        this.isOpen = false;
+    }
+    /**
+     * Método público para alternar o estado de exibição do scrim
+     */
+    async toggle() {
+        if (this.isLegibilityVariant)
+            return;
+        this.isOpen = !this.isActive;
+    }
+    /**
+     * Recalcula manualmente a posição e dimensões da fresta do scrim vazado.
+     * Útil quando o elemento alvo muda de posição sem disparar resize ou scroll.
+     */
+    async updateSpotlight() {
+        this.computeSpotlightRect();
+    }
+    /**
+     * Adiciona event listener ao contentRef para capturar eventos de teclado
+     * e gerenciar a navegação por teclado dentro do scrim.
+     */
+    addContentEventListener() {
+        if (this.contentRef !== null) {
+            this.contentRef.addEventListener('keydown', this.handleKeyDown);
+        }
+    }
+    // ======================================================================
+    // GERENCIAMENTO DE COMPONENTES FILHOS
+    // ======================================================================
+    /**
+     * Ativa o guard que suprime `handleGlobalFocus` enquanto a modal filha executa
+     * sua sequência assíncrona de foco (`moveFocusIntoModal`).
+     *
+     * O guard é desativado assim que o evento `brModalFocusReady` chega (via
+     * `handleModalFocusReady`). O timeout é apenas um safety net para o caso de
+     * o evento nunca chegar (ex: erro interno na modal).
+     */
+    suppressFocusGuard(safetyMs = 1000) {
+        this.isModalFocusing = true;
+        if (this.modalFocusSuppressId !== null) {
+            clearTimeout(this.modalFocusSuppressId);
+        }
+        this.modalFocusSuppressId = setTimeout(() => {
+            this.isModalFocusing = false;
+            this.modalFocusSuppressId = null;
+        }, safetyMs);
+    }
+    /**
+     * 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, brModalClose e brModalFocusReady das modais filhas
+     */
+    listenToModalEvents() {
+        this.el.addEventListener('brModalOpen', this.handleModalOpen);
+        this.el.addEventListener('brModalClose', this.handleModalClose);
+        this.el.addEventListener('brModalOpened', this.handleModalFocusReady);
+    }
+    /**
+     * Remove listeners dos eventos da modal
+     */
+    removeModalEventListener() {
+        this.el.removeEventListener('brModalOpen', this.handleModalOpen);
+        this.el.removeEventListener('brModalClose', this.handleModalClose);
+        this.el.removeEventListener('brModalOpened', this.handleModalFocusReady);
+    }
+    /**
+     * 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() {
+        const children = this.getDirectChildren();
+        const modalElement = children.find((child) => child.tagName === 'BR-MODAL');
+        return modalElement ?? 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;
+    }
+    /**
+     * Fecha a modal filha direta, se existir e estiver aberta.
+     * Chamado quando o scrim é fechado (ex: via ESC) para garantir sincronização de estado.
+     */
+    closeModalChild() {
+        const modal = this.findModalChild();
+        if (modal?.show) {
+            modal.show = false;
+        }
+    }
+    // ======================================================================
+    // GERENCIAMENTO DO ACTIVATOR (ELEMENTO ACIONADOR)
+    // ======================================================================
+    checkActivatorSlot(slotName) {
+        return this.el.querySelector(`[slot="${slotName}"]`) !== null;
+    }
+    setupActivatorSlotClick() {
+        if (this.el.shadowRoot === null)
+            return;
+        const slotEl = this.el.shadowRoot.querySelector('slot[name="activator"]');
+        if (slotEl === null || slotEl === undefined)
+            return;
+        const assignedElements = slotEl.assignedElements?.() ?? [];
+        if (assignedElements.length === 1) {
+            const el = assignedElements[0];
+            if (el && typeof el.addEventListener === 'function') {
+                el.addEventListener('click', this.handleActivatorClick);
+            }
+        }
+        else if (assignedElements.length > 1) {
+            console.warn('br-scrim: Slot "activator" deve conter apenas um elemento para aplicar o onClick automaticamente.');
+        }
+    }
+    setupActivator() {
+        this.removeActivatorClickListener();
+        this.activatorElement = null;
+        if (this.hasActivatorSlot || this.activator == null || this.activator === '') {
+            return;
+        }
+        if (this.activator === 'parent') {
+            const parentElement = this.el.parentElement;
+            if (parentElement !== null) {
+                this.activatorElement = parentElement;
+            }
+        }
+        else {
+            try {
+                const element = document.querySelector(this.activator);
+                if (element instanceof HTMLElement) {
+                    this.activatorElement = element;
+                }
+            }
+            catch {
+                console.warn(`br-scrim: Seletor activator inválido: ${this.activator}`);
+            }
+        }
+        this.addActivatorClickListener();
+    }
+    addActivatorClickListener() {
+        if (this.activatorElement === null || this.activatorElement === undefined)
+            return;
+        this.activatorElement.addEventListener('click', this.handleActivatorClick);
+    }
+    removeActivatorClickListener() {
+        if (this.activatorElement === null || this.activatorElement === undefined)
+            return;
+        this.activatorElement.removeEventListener('click', this.handleActivatorClick);
+    }
+    cleanupActivatorSlotClick() {
+        if (this.el.shadowRoot === null)
+            return;
+        const slotEl = this.el.shadowRoot.querySelector('slot[name="activator"]');
+        const assignedElements = slotEl?.assignedElements?.() ?? [];
+        if (assignedElements.length === 1) {
+            const element = assignedElements[0];
+            if (element && typeof element.removeEventListener === 'function') {
+                element.removeEventListener('click', this.handleActivatorClick);
+            }
+        }
+    }
+    // ======================================================================
+    // ESTRATÉGIAS DE ROLAGEM (SCROLL)
+    // ======================================================================
+    applyScrollStrategy() {
+        if (this.scrollStrategy === 'block') {
+            this.enableScrollBlock();
+        }
+        else if (this.scrollStrategy === 'close') {
+            this.enableScrollWatcher();
+        }
+    }
+    getScrollPosition() {
+        const targetWindow = this.el?.ownerDocument?.defaultView || window;
+        return targetWindow?.scrollY ?? targetWindow?.pageYOffset ?? 0;
+    }
+    enableScrollBlock() {
+        lockBodyScroll();
+    }
+    enableScrollWatcher() {
+        const currentScroll = window.scrollY;
+        this.lastScrollTop = currentScroll;
+        this.scrollOrigin = currentScroll;
+        window.addEventListener('scroll', this.handleScrollClose, { passive: true });
+    }
+    resetScrolling() {
+        if (this.scrollStrategy === 'block') {
+            unlockBodyScroll();
+        }
+        window.removeEventListener('scroll', this.handleScrollClose);
+        this.scrollOrigin = null;
+    }
+    // ======================================================================
+    // ACESSIBILIDADE E GERENCIAMENTO DE FOCO
+    // ======================================================================
+    focusFirstElement() {
+        if (this.contentRef == null)
+            return;
+        const modalChild = this.findModalChild();
+        if (modalChild?.show) {
+            // Devolver foco ao container da modal — a própria modal gerencia Tab/Shift+Tab internamente
+            const modalDialogEl = modalChild.shadowRoot?.querySelector('.br-modal');
+            modalDialogEl?.focus();
+            return;
+        }
+        this.contentRef.setAttribute('tabindex', '-1');
+        this.contentRef.focus();
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            const firstElement = focusableElements[0];
+            if (firstElement !== null && firstElement !== undefined) {
+                firstElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                firstElement.focus({ preventScroll: true });
+            }
+        }
+    }
+    restoreFocus() {
+        let targetElement = null;
+        if (this.previouslyFocusedElement instanceof HTMLElement && this.previouslyFocusedElement.isConnected) {
+            targetElement = this.previouslyFocusedElement;
+        }
+        else if (this.activatorElement instanceof HTMLElement) {
+            targetElement = this.activatorElement;
+        }
+        else {
+            const slotEl = this.el.shadowRoot?.querySelector('slot[name="activator"]');
+            if (this.hasActivatorSlot) {
+                const assignedElements = slotEl.assignedElements?.() ?? [];
+                if (assignedElements.length > 0 && assignedElements[0] instanceof HTMLElement) {
+                    targetElement = assignedElements[0];
+                }
+            }
+        }
+        if (targetElement !== null && targetElement !== undefined) {
+            this.restoreFocusTimeoutId = setTimeout(() => {
+                try {
+                    targetElement?.focus();
+                }
+                catch (error) {
+                    console.warn('br-scrim: Erro ao restaurar foco:', error);
+                }
+            }, 100);
+        }
+    }
+    getFocusableElements() {
+        if (this.contentRef == null)
+            return [];
+        const defaultSlot = this.contentRef.querySelector('slot:not([name])');
+        if (defaultSlot === null || defaultSlot === undefined)
+            return [];
+        const assignedElements = defaultSlot.assignedElements({ flatten: true });
+        const focusableElements = [];
+        assignedElements.forEach((el) => {
+            if (!(el instanceof HTMLElement))
+                return;
+            if (el.matches(Scrim.FOCUSABLE_SELECTORS)) {
+                focusableElements.push(el);
+            }
+            const nestedFocusables = Array.from(el.querySelectorAll(Scrim.FOCUSABLE_SELECTORS));
+            focusableElements.push(...nestedFocusables);
+        });
+        return this.filterVisibleElements(focusableElements);
+    }
+    filterVisibleElements(elements) {
+        return elements.filter((el) => el.offsetWidth > 0 && el.offsetHeight > 0 && getComputedStyle(el).visibility !== 'hidden');
+    }
+    /**
+     * Intercepta todos os eventos de teclado globalmente quando o scrim está ativo.
+     *
+     * Usa `composedPath()[0]` para obter o elemento real com foco, mesmo dentro de shadow roots.
+     * `event.target` é redirecionado ao cruzar shadow boundaries e não reflete o elemento concreto
+     * quando o foco está dentro do shadow DOM de componentes filhos como `br-modal`.
+     */
+    handleDocumentKeyDown(event) {
+        if (!this.isActive)
+            return;
+        if ((event.key === 'Escape' || event.key === 'Esc') && !this.disableCloseOnClick) {
+            if (this.hasModalWithAutoClose())
+                return;
+            this.close();
+        }
+    }
+    shouldHandleEscape(event) {
+        return (event.key === 'Escape' || event.key === 'Esc') && this.isActive;
+    }
+    handleTabNavigation(event) {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const isTabForward = !event.shiftKey;
+        if (this.shouldTrapFocus(isTabForward, firstElement, lastElement, event)) {
+            event.preventDefault();
+            this.wrapFocus(isTabForward, firstElement, lastElement);
+        }
+    }
+    shouldTrapFocus(isTabForward, firstElement, lastElement, event) {
+        const activeEl = (event?.composedPath?.()[0] ?? document.activeElement);
+        return (isTabForward && activeEl === lastElement) || (!isTabForward && activeEl === firstElement);
+    }
+    wrapFocus(isTabForward, firstElement, lastElement) {
+        (isTabForward ? firstElement : lastElement).focus();
+    }
+    /**
+     * Verifica se um elemento está dentro do scrim.
+     * Funciona com shadow DOM: aceita tanto o host (br-modal) quanto elementos
+     * dentro de shadow roots filhos — verifica o host mais próximo via getRootNode.
+     */
+    isElementInsideScrim(element) {
+        if (this.el.contains(element)) {
+            return true;
+        }
+        let node = element;
+        while (node !== null && node !== document) {
+            const root = node.getRootNode();
+            if (root instanceof ShadowRoot) {
+                const host = root.host;
+                if (this.el.contains(host)) {
+                    return true;
+                }
+                node = host;
+            }
+            else {
+                break;
+            }
+        }
+        return false;
+    }
+    /**
+     * Adiciona interceptação global de eventos
+     */
+    addGlobalEventInterception() {
+        if (this.globalInterceptionAttached)
+            return;
+        document.addEventListener('keydown', this.handleGlobalKeyDown, true);
+        // Intercepta eventos de clique globalmente
+        document.addEventListener('click', this.handleGlobalClick, true);
+        document.addEventListener('mousedown', this.handleGlobalClick, true);
+        document.addEventListener('mouseup', this.handleGlobalClick, true);
+        // Intercepta eventos de foco.
+        document.addEventListener('focusin', this.handleGlobalFocus, true);
+        this.globalInterceptionAttached = true;
+    }
+    /**
+     * Remove interceptação global de eventos
+     */
+    removeGlobalEventInterception() {
+        if (!this.globalInterceptionAttached)
+            return;
+        document.removeEventListener('keydown', this.handleGlobalKeyDown, true);
+        document.removeEventListener('click', this.handleGlobalClick, true);
+        document.removeEventListener('mousedown', this.handleGlobalClick, true);
+        document.removeEventListener('mouseup', this.handleGlobalClick, true);
+        document.removeEventListener('focusin', this.handleGlobalFocus, true);
+        this.globalInterceptionAttached = false;
+    }
+    // ======================================================================
+    // VARIANTE SEMÂNTICA (FOCO / LEGIBILIDADE / INIBIÇÃO)
+    // ======================================================================
+    /**
+     * Retorna true quando a variante é 'legibility'.
+     * Nesse modo o scrim é puramente decorativo: nunca fecha, nunca intercepta
+     * eventos de teclado/foco/clique e nunca bloqueia rolagem.
+     */
+    get isLegibilityVariant() {
+        return this.variant === 'legibility';
+    }
+    /**
+     * Resolve o display-mode efetivo.
+     * Para a variante 'legibility', usa 'parent' por padrão — a menos que o
+     * atributo `display-mode` tenha sido explicitamente definido pelo usuário.
+     */
+    get effectiveDisplayMode() {
+        if (this.variant === 'legibility' && !this.displayModeExplicit) {
+            return 'parent';
+        }
+        return this.displayMode;
+    }
+    get usesNativeDialog() {
+        return this.effectiveDisplayMode === 'fullscreen' && !this.isLegibilityVariant && this.contentLayout !== 'none';
+    }
+    get usesNativeTopLayer() {
+        return this.usesNativeDialog && supportsNativeModalDialog();
+    }
+    /**
+     * Aplica as especificações de cor e opacidade conforme a variante selecionada.
+     */
+    applyVariantDefaults() {
+        this.el.style.removeProperty('--surface-overlay-scrim');
+        this.el.style.removeProperty('--br-scrim-opacity');
+        this.el.style.removeProperty('--br-scrim-mask-size');
+        switch (this.variant) {
+            case 'focus':
+            case 'spotlight':
+                if (this.bgColor === null) {
+                    this.el.style.setProperty('--surface-overlay-scrim', '#000000');
+                }
+                if (this.customOpacity === null) {
+                    this.el.style.setProperty('--br-scrim-opacity', '0.4');
+                }
+                break;
+            case 'legibility': {
+                if (this.legibilitySize !== null) {
+                    this.el.style.setProperty('--br-scrim-mask-size', this.legibilitySize);
+                }
+                else {
+                    this.el.style.removeProperty('--br-scrim-mask-size');
+                }
+                if (this.bgColor === null) {
+                    this.el.style.setProperty('--surface-overlay-scrim', '#000000');
+                }
+                if (this.customOpacity === null) {
+                    // Se bgColor for um gradiente, o usuário deve setar customOpacity=1 ou omitir
+                    this.el.style.setProperty('--br-scrim-opacity', '0.64');
+                }
+                break;
+            }
+        }
+    }
+    // ======================================================================
+    // SCRIM VAZADO (SPOTLIGHT)
+    // ======================================================================
+    /**
+     * Inicializa o modo de scrim vazado: resolve o elemento alvo, calcula o rect
+     * inicial e instala um ResizeObserver para atualizar automaticamente.
+     * Só opera quando `variant === 'spotlight'`.
+     */
+    setupSpotlight() {
+        this.cleanupSpotlight();
+        if (this.variant !== 'spotlight')
+            return;
+        const target = this.resolveSpotlightTarget();
+        if (target === null)
+            return;
+        this.spotlightTargetElement = target;
+        this.computeSpotlightRect();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.spotlightResizeObserver = new ResizeObserver(this.computeSpotlightRect);
+            this.spotlightResizeObserver.observe(target);
+        }
+        window.addEventListener('resize', this.computeSpotlightRect);
+        window.addEventListener('scroll', this.computeSpotlightRect, { capture: true, passive: true });
+    }
+    /**
+     * Desmonta o modo de scrim vazado, removendo observers e limpando o estado.
+     */
+    cleanupSpotlight() {
+        if (this.spotlightResizeObserver !== null) {
+            this.spotlightResizeObserver.disconnect();
+            this.spotlightResizeObserver = null;
+        }
+        this.spotlightTargetElement = null;
+        this.spotlightRect = null;
+        window.removeEventListener('resize', this.computeSpotlightRect);
+        window.removeEventListener('scroll', this.computeSpotlightRect, true);
+    }
+    /**
+     * Resolve o elemento alvo do spotlight via prop `spotlightTargetId` (seletor CSS).
+     */
+    resolveSpotlightTarget() {
+        if (this.spotlightTargetId !== null && this.spotlightTargetId !== '') {
+            try {
+                return document.querySelector(this.spotlightTargetId);
+            }
+            catch {
+                console.warn(`br-scrim: Seletor spotlightTargetId inválido: ${this.spotlightTargetId}`);
+            }
+        }
+        return null;
+    }
+    // ======================================================================
+    // VARIANTE LEGIBILITY — POSICIONAMENTO POR BOUNDING RECT
+    // ======================================================================
+    /**
+     * Inicializa o posicionamento da variante legibility.
+     *
+     * Aplica `position: fixed` com as coordenadas exatas do elemento pai via
+     * `getBoundingClientRect`, sem exigir nenhum CSS adicional no pai.
+     *
+     * Com `ResizeObserver`, observa o pai **e todos os seus ancestrais**: quando um
+     * elemento irmão muda de tamanho (ex: menu abrindo), o ancestral comum redimensiona
+     * e o callback reposiciona o scrim automaticamente.
+     */
+    setupLegibility() {
+        this.cleanupLegibility();
+        if (!this.isLegibilityVariant)
+            return;
+        const parent = this.el.parentElement;
+        if (parent === null)
+            return;
+        this.computeLegibilityRect();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.legibilityResizeObserver = new ResizeObserver(() => this.scheduleLegibilityRect());
+            this.legibilityResizeObserver.observe(parent);
+            // Observa ancestrais até document.body para detectar deslocamentos causados
+            // por elementos irmãos que empurram o pai (ex: menu abrindo acima dele).
+            let ancestor = parent.parentElement;
+            while (ancestor !== null && ancestor !== document.documentElement) {
+                this.legibilityResizeObserver.observe(ancestor);
+                ancestor = ancestor.parentElement;
+            }
+        }
+        else {
+            requestAnimationFrame(() => requestAnimationFrame(this.scheduleLegibilityRect));
+            window.addEventListener('resize', this.scheduleLegibilityRect);
+        }
+        window.addEventListener('scroll', this.scheduleLegibilityRect, { capture: true, passive: true });
+        window.addEventListener('load', this.scheduleLegibilityRect);
+    }
+    /**
+     * Desmonta o posicionamento da variante legibility, removendo observers e listeners
+     * e limpando os estilos inline aplicados ao div interno do scrim.
+     */
+    cleanupLegibility() {
+        if (this.legibilityResizeObserver !== null) {
+            this.legibilityResizeObserver.disconnect();
+            this.legibilityResizeObserver = null;
+        }
+        this.legibilityBatch.cancel();
+        window.removeEventListener('resize', this.scheduleLegibilityRect);
+        window.removeEventListener('scroll', this.scheduleLegibilityRect, true);
+        window.removeEventListener('load', this.scheduleLegibilityRect);
+        this.resetLegibilityStyles();
+    }
+    /**
+     * Remove os estilos inline de posicionamento aplicados pelo computeLegibilityRect.
+     */
+    resetLegibilityStyles() {
+        if (this.scrimDivRef === null)
+            return;
+        this.scrimDivRef.style.removeProperty('position');
+        this.scrimDivRef.style.removeProperty('inset');
+        this.scrimDivRef.style.removeProperty('top');
+        this.scrimDivRef.style.removeProperty('left');
+        this.scrimDivRef.style.removeProperty('width');
+        this.scrimDivRef.style.removeProperty('height');
+    }
+    // ======================================================================
+    // UTILITÁRIOS
+    // ======================================================================
+    /**
+     * Renderiza o SVG de overlay do scrim vazado (spotlight).
+     * Retorna null quando não há elemento alvo resolvido.
+     */
+    renderSpotlightOverlay(maskId, rect, padding) {
+        const spotlightShape = this.spotlightShape === 'circle' ? (h("ellipse", { cx: rect.left + rect.width / 2, cy: rect.top + rect.height / 2, rx: rect.width / 2 + padding, ry: rect.height / 2 + padding, fill: "black" })) : (h("rect", { x: rect.left - padding, y: rect.top - padding, width: rect.width + padding * 2, height: rect.height + padding * 2, rx: this.spotlightShape === 'rounded' ? 8 : 0, ry: this.spotlightShape === 'rounded' ? 8 : 0, fill: "black" }));
+        return (h("svg", { class: "spotlight-overlay", "aria-hidden": "true", onClick: this.handleMaskClick, xmlns: "http://www.w3.org/2000/svg" }, h("defs", null, h("mask", { id: maskId }, h("rect", { width: "100%", height: "100%", fill: "white" }), spotlightShape)), h("rect", { class: "spotlight-overlay-rect", width: "100%", height: "100%", mask: `url(#${maskId})` })));
+    }
+    getCssClassMap() {
+        return {
+            'br-scrim': true,
+            opened: this.isActive,
+            'scroll-block': this.scrollStrategy === 'block',
+            'position-top': this.positionContent === 'top',
+            'position-bottom': this.positionContent === 'bottom',
+            'position-left': this.positionContent === 'left',
+            'position-right': this.positionContent === 'right',
+            'position-center': this.positionContent === 'center',
+            'mode-fullscreen': this.effectiveDisplayMode === 'fullscreen',
+            'mode-parent': this.effectiveDisplayMode === 'parent',
+            'variant-focus': this.variant === 'focus',
+            'variant-spotlight': this.variant === 'spotlight',
+            'variant-legibility': this.variant === 'legibility',
+            'legibility-anchor-top': this.variant === 'legibility' && this.legibilityAnchor === 'top',
+            'legibility-anchor-bottom': this.variant === 'legibility' && this.legibilityAnchor === 'bottom',
+            'legibility-anchor-left': this.variant === 'legibility' && this.legibilityAnchor === 'left',
+            'legibility-anchor-right': this.variant === 'legibility' && this.legibilityAnchor === 'right',
+            'legibility-anchor-center': this.variant === 'legibility' && this.legibilityAnchor === 'center',
+            'has-spotlight': this.spotlightRect !== null,
+            'content-layout-none': this.contentLayout === 'none',
+        };
+    }
+    // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: render preserva as variantes pública, local e nativa sem duplicar o conteúdo.
+    render() {
+        const maskId = `${this.customId}-spotlight-mask`;
+        const padding = this.spotlightPadding;
+        const rect = this.spotlightRect;
+        const isDialogContainer = !this.isLegibilityVariant && this.contentLayout !== 'none';
+        const maskElement = this.isLegibilityVariant ? (h("div", { class: "mask" })) : (h("div", { class: "mask", role: "button", "aria-label": "Fechar sobreposi\u00E7\u00E3o", tabIndex: 0, onClick: this.handleMaskClick, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    this.handleMaskClick(event);
+                }
+            } }));
+        const contentElement = (h("div", { key: 'f5046cd6fdf7a128bed5b76fb7065fa3a7dcad24', ref: (el) => (this.contentRef = el ?? null), id: `${this.customId}-content`, class: this.contentLayout === 'none' ? 'content content-unwrapped' : 'content', tabIndex: this.contentLayout === 'none' ? undefined : -1 }, h("slot", { key: 'd341205278a651d39ebbd18e1802f14aeab1c1a4' })));
+        return (h(Host, { key: 'a9aa507c3a541fc1978acc5269954b2ffebf2f6d' }, h("slot", { key: '53eb86b0900da07d1aa4ea6dd2116ae2c02a91d0', name: "activator" }), this.usesNativeDialog ? (h("dialog", { ref: (el) => {
+                this.nativeDialogRef = el;
+                this.scrimDivRef = el;
+            }, class: this.getCssClassMap(), id: this.customId, role: this.usesNativeTopLayer ? undefined : 'dialog', "aria-modal": "true", "aria-label": this.ariaLabel || 'Conteúdo do diálogo', "data-visible": this.isActive ? 'true' : 'false', onCancel: this.handleNativeCancel, onKeyDown: this.handleKeyDown }, maskElement, rect !== null && this.renderSpotlightOverlay(maskId, rect, padding), contentElement)) : isDialogContainer ? (h("div", { ref: (el) => {
+                this.nativeDialogRef = null;
+                this.scrimDivRef = el;
+            }, 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', onKeyDown: this.handleKeyDown }, maskElement, rect !== null && this.renderSpotlightOverlay(maskId, rect, padding), contentElement)) : (h("div", { ref: (el) => {
+                this.nativeDialogRef = null;
+                this.scrimDivRef = el;
+            }, class: this.getCssClassMap(), id: this.customId, role: "presentation", "data-visible": this.isActive ? 'true' : 'false' }, maskElement, rect !== null && this.renderSpotlightOverlay(maskId, rect, padding), contentElement))));
+    }
+    static get is() { return "br-scrim"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["scrim.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["scrim.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identificador \u00FAnico.\nCaso n\u00E3o seja fornecido, um ID gerado automaticamente ser\u00E1 usado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-id",
+                "defaultValue": "generateUniqueId()"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ativa/desativa o scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "is-open",
+                "defaultValue": "false"
+            },
+            "positionContent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrimPositionContent",
+                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "ScrimPositionContent": {
+                            "location": "import",
+                            "path": "./scrim.types",
+                            "id": "src/components/scrim/scrim.types.ts::ScrimPositionContent",
+                            "referenceLocation": "ScrimPositionContent"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posiciona o conte\u00FAdo no topo, centro, direita, esquerda, abaixo dentro do scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position-content"
+            },
+            "disableCloseOnClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desativa o fechamento do scrim ao ser clicado"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-close-on-click",
+                "defaultValue": "false"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o valor de z-index do scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "z-index",
+                "defaultValue": "null"
+            },
+            "bgColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cor de fundo personalizada para o scrim.\nAceita os seguintes formatos de cor:\n- Cores nomeadas do CSS: 'red', 'blue', 'green', 'yellow', etc.\n- C\u00F3digos hexadecimais: '#ff0000', '#00ff00', '#0000ff', etc.\n- Valores RGB: 'rgb(255, 0, 0)', 'rgb(0, 255, 0)', etc.\n- Valores RGBA: 'rgba(255, 0, 0, 0.5)', 'rgba(0, 255, 0, 0.8)', etc.\n- Valores HSL: 'hsl(0, 100%, 50%)', 'hsl(120, 100%, 50%)', etc.\n- Valores HSLA: 'hsla(0, 100%, 50%, 0.5)', 'hsla(240, 100%, 50%, 0.7)', etc.\nSe n\u00E3o especificada, usa a cor padr\u00E3o do tema."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bg-color",
+                "defaultValue": "null"
+            },
+            "customOpacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a opacidade personalizada do scrim"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-opacity",
+                "defaultValue": "null"
+            },
+            "displayMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrimDisplayMode",
+                    "resolved": "\"fullscreen\" | \"parent\"",
+                    "references": {
+                        "ScrimDisplayMode": {
+                            "location": "import",
+                            "path": "./scrim.types",
+                            "id": "src/components/scrim/scrim.types.ts::ScrimDisplayMode",
+                            "referenceLocation": "ScrimDisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o modo de exibi\u00E7\u00E3o do scrim:\n- `'fullscreen'`: Ocupa toda a tela (`position: fixed`). (_padr\u00E3o_)\n- `'parent'`: Ocupa apenas o elemento pai (`position: absolute`).\n  O elemento pai deve ter `position: relative` ou outro valor diferente de `static`.\n\nPara a variante `'legibility'`, este atributo \u00E9 ignorado: o posicionamento \u00E9 sempre\ncalculado automaticamente a partir das coordenadas do elemento pai."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "display-mode",
+                "defaultValue": "'fullscreen'"
+            },
+            "scrollStrategy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrimScrollStrategy",
+                    "resolved": "\"block\" | \"close\"",
+                    "references": {
+                        "ScrimScrollStrategy": {
+                            "location": "import",
+                            "path": "./scrim.types",
+                            "id": "src/components/scrim/scrim.types.ts::ScrimScrollStrategy",
+                            "referenceLocation": "ScrimScrollStrategy"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a estrat\u00E9gia de manipula\u00E7\u00E3o de rolagem quando scrim est\u00E1 aberto\n- 'block': Impede a rolagem completamente\n- 'close': Fecha o scrim quando ocorre rolagem"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-strategy"
+            },
+            "scrollThreshold": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determina quanto de rolagem (em pixels) \u00E9 necess\u00E1rio para acionar a a\u00E7\u00E3o de fechamento autom\u00E1tico do scrim."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "scroll-threshold",
+                "defaultValue": "50"
+            },
+            "activator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o seletor para o elemento activator.\nNota: O slot 'activator' tem prioridade sobre esta propriedade."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "activator",
+                "defaultValue": "null"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define um r\u00F3tulo acess\u00EDvel personalizado para o di\u00E1logo.\nSe n\u00E3o fornecido, ser\u00E1 usado \"Conte\u00FAdo do di\u00E1logo\" como padr\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "null"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrimVariant",
+                    "resolved": "\"focus\" | \"legibility\" | \"spotlight\"",
+                    "references": {
+                        "ScrimVariant": {
+                            "location": "import",
+                            "path": "./scrim.types",
+                            "id": "src/components/scrim/scrim.types.ts::ScrimVariant",
+                            "referenceLocation": "ScrimVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a variante sem\u00E2ntica do scrim\n- `'focus'`: Redireciona o foco hier\u00E1rquico do usu\u00E1rio. Cor #000000 com opacidade 40%. (_padr\u00E3o_)\n- `'spotlight'`: Scrim vazado \u2014 destaca um elemento espec\u00EDfico criando uma fresta no overlay.\n  Aplica as mesmas cores da variante `'focus'`. Use `spotlightTargetId` para indicar o elemento a ser destacado.\n- `'legibility'`: Melhora o contraste e leitura de texto sobre superf\u00EDcies. Cor #000000 com opacidade 64%.\n  Para cobertura parcial, use `legibilityAnchor` + `legibilitySize`.\n  Para gradiente suave, use `bgColor` com um valor de gradiente CSS e `customOpacity=\"1\"`,\n  ex.: `bg-color=\"linear-gradient(to top, rgba(0,0,0,0.64), transparent)\"`..\n\nQuando definida, aplica automaticamente as especifica\u00E7\u00F5es de cor e opacidade do Design System.\nAs propriedades `bgColor` e `customOpacity` t\u00EAm prioridade e sobrep\u00F5em os valores da variante."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'focus'"
+            },
+            "legibilityAnchor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrimLegibilityAnchor",
+                    "resolved": "\"bottom\" | \"center\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "ScrimLegibilityAnchor": {
+                            "location": "import",
+                            "path": "./scrim.types",
+                            "id": "src/components/scrim/scrim.types.ts::ScrimLegibilityAnchor",
+                            "referenceLocation": "ScrimLegibilityAnchor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a borda de ancoragem da faixa de cobertura da variante `legibility`.\n\nControla de qual borda (ou centro) do elemento a m\u00E1scara de overlay cresce,\ntendo seu tamanho determinado por `legibilitySize`.\n\n- `'top'`: faixa ancorada na borda superior, cresce para baixo.\n- `'bottom'`: faixa ancorada na borda inferior, cresce para cima.\n- `'left'`: faixa ancorada na borda esquerda, cresce para a direita.\n- `'right'`: faixa ancorada na borda direita, cresce para a esquerda.\n- `'center'`: faixa centralizada verticalmente no elemento.\n\nQuando `legibilitySize` \u00E9 `null`, a m\u00E1scara ocupa 100% independentemente\nda \u00E2ncora definida, equivalendo a uma cobertura total.\n\nS\u00F3 tem efeito quando `variant=\"legibility\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legibility-anchor",
+                "defaultValue": "'bottom'"
+            },
+            "legibilitySize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define o tamanho da faixa de cobertura da variante `legibility`, usado em\nconjunto com `legibilityAnchor`.\n\nAceita qualquer valor CSS de comprimento v\u00E1lido:\n- Percentual relativo ao elemento pai: `'40%'`, `'75%'`\n- Comprimento absoluto: `'120px'`, `'8rem'`, `'6em'`\n- Fun\u00E7\u00E3o CSS: `'calc(100% - 2rem)'`\n\nQuando `null` (padr\u00E3o), a m\u00E1scara ocupa **100%** da dimens\u00E3o relevante:\n- **altura** para \u00E2ncoras `top`, `bottom` e `center`\n- **largura** para \u00E2ncoras `left` e `right`\n\nS\u00F3 tem efeito quando `variant=\"legibility\"` est\u00E1 definido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "legibility-size",
+                "defaultValue": "null"
+            },
+            "spotlightTargetId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ativa o modo de scrim vazado (variante 'spotlight'), criando uma \u00E1rea de fresta no overlay\nque destaca o elemento referenciado pelo seletor CSS fornecido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spotlight-target-id",
+                "defaultValue": "null"
+            },
+            "spotlightPadding": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Espa\u00E7amento interno (em pixels) ao redor da \u00E1rea de fresta no scrim vazado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spotlight-padding",
+                "defaultValue": "8"
+            },
+            "spotlightShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrimSpotlightShape",
+                    "resolved": "\"circle\" | \"rect\" | \"rounded\"",
+                    "references": {
+                        "ScrimSpotlightShape": {
+                            "location": "import",
+                            "path": "./scrim.types",
+                            "id": "src/components/scrim/scrim.types.ts::ScrimSpotlightShape",
+                            "referenceLocation": "ScrimSpotlightShape"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define a forma da \u00E1rea de fresta no scrim vazado.\n- 'rect': Retangular com bordas retas.\n- 'rounded': Retangular com bordas arredondadas (border-radius de 8px).\n- 'circle': Elipse inscrita na \u00E1rea do elemento alvo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spotlight-shape",
+                "defaultValue": "'rect'"
+            },
+            "contentLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ScrimContentLayout",
+                    "resolved": "\"default\" | \"none\"",
+                    "references": {
+                        "ScrimContentLayout": {
+                            "location": "import",
+                            "path": "./scrim.types",
+                            "id": "src/components/scrim/scrim.types.ts::ScrimContentLayout",
+                            "referenceLocation": "ScrimContentLayout"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define como o scrim aplica estilos de layout ao elemento filho (slot padr\u00E3o).\n\n- `'default'`: O scrim gerencia o layout do conte\u00FAdo, centralizando, animando e aplicando transforma\u00E7\u00F5es e opacidade automaticamente.\n\n- `'none'`: o scrim age como um componente controlado pelo pai. O filho recebe apenas a m\u00E1scara visual, sem interfer\u00EAncia de posicionamento, transforma\u00E7\u00E3o ou opacidade.\nAdequado para componentes que gerenciam seu pr\u00F3prio layout e estado de abertura. Al\u00E9m disso:\n\n  - Foco e eventos globais** n\u00E3o s\u00E3o interceptados pelo scrim \u2014 o componente filho gerencia seu pr\u00F3prio foco, navega\u00E7\u00E3o por teclado e fechamento via ESC.\n  - Clique no scrim emite `brScrimClose` sem fechar o scrim internamente, delegando o controle de estado ao pai (quem define `isOpen`).\n  - Use `zIndex` apenas para sobrescrever a camada bloqueadora no fallback CSS. M\u00E1scara e painel devem usar subcamadas locais, sem aritm\u00E9tica entre camadas globais."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "content-layout",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasActivatorSlot": {},
+            "spotlightRect": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "brScrimOpen",
+                "name": "brScrimOpen",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica que o scrim foi aberto."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "brScrimClose",
+                "name": "brScrimClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indica que o scrim foi fechado"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setScrollThreshold": {
+                "complexType": {
+                    "signature": "(threshold: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "threshold",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Define o limite de rolagem para o fechamento autom\u00E1tico do scrim.",
+                    "tags": []
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo p\u00FAblico para exibir o scrim",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo p\u00FAblico para esconder o scrim",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9todo p\u00FAblico para alternar o estado de exibi\u00E7\u00E3o do scrim",
+                    "tags": []
+                }
+            },
+            "updateSpotlight": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Recalcula manualmente a posi\u00E7\u00E3o e dimens\u00F5es da fresta do scrim vazado.\n\u00DAtil quando o elemento alvo muda de posi\u00E7\u00E3o sem disparar resize ou scroll.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }, {
+                "propName": "zIndex",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "bgColor",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "customOpacity",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "legibilitySize",
+                "methodName": "updateStyles"
+            }, {
+                "propName": "variant",
+                "methodName": "handleVariantChange"
+            }, {
+                "propName": "displayMode",
+                "methodName": "handleLayerModeChange"
+            }, {
+                "propName": "contentLayout",
+                "methodName": "handleLayerModeChange"
+            }, {
+                "propName": "spotlightTargetId",
+                "methodName": "handleSpotlightChange"
+            }, {
+                "propName": "spotlightPadding",
+                "methodName": "handleSpotlightChange"
+            }, {
+                "propName": "spotlightShape",
+                "methodName": "handleSpotlightChange"
+            }, {
+                "propName": "activator",
+                "methodName": "handleActivatorChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleDocumentKeyDown",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+Scrim.FOCUSABLE_SELECTORS = [
+    'a[href]:not([disabled])',
+    'button:not([disabled])',
+    'br-button:not([disabled])',
+    'input:not([disabled])',
+    'br-input:not([disabled])',
+    'select:not([disabled])',
+    'br-select:not([disabled])',
+    'textarea:not([disabled])',
+    'br-textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');