@govbr-ds/webcomponents 2.1.0 → 2.1.1

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

@@ -0,0 +1,1336 @@
+/*!
+ * Construído por SERPRO
+ * © https://serpro.gov.br/ - MIT License.
+ */
+'use strict';
+
+var index = require('./index-CRdcutym.js');
+var id = require('./id-CjRFMzf6.js');
+var nativeDialog = require('./native-dialog--Ewqm4w0.js');
+var rafBatcher = require('./raf-batcher-yc87a4dS.js');
+
+/**
+ * Utilitário para detecção de ambiente de execução (browser/client).
+ *
+ * Verifica se o código está sendo executado no ambiente do navegador.
+ *
+ * @returns `true` quando `window` e `document` estão disponíveis.
+ */
+const isClient = () => {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+};
+
+/**
+ * Utilitários para bloqueio e liberação de scroll global na página.
+ *
+ * Permite controlar o scroll do body, útil para modais, overlays e menus.
+ */
+/**
+ * Estado global compartilhado do controle de lock de scroll.
+ */
+const state = {
+    // O lockCount registra quantos componentes solicitaram bloqueio simultaneamente.
+    lockCount: 0,
+    config: {
+        bodyClassName: 'bq-body--scroll-lock'},
+    scrollY: 0,
+    previousBodyStyle: {},
+    previousDocumentOverflow: '',
+};
+/**
+ * Aplica ou remove a classe CSS de bloqueio de scroll.
+ *
+ * @param shouldLock `true` para aplicar o lock; `false` para remover.
+ */
+const toggleScrollLockClass = (shouldLock) => {
+    const action = shouldLock ? 'add' : 'remove';
+    document.body.classList[action](state.config.bodyClassName);
+};
+const applyFixedBodyLock = () => {
+    state.scrollY = window.scrollY || window.pageYOffset || 0;
+    state.previousBodyStyle = {
+        left: document.body.style.left,
+        position: document.body.style.position,
+        right: document.body.style.right,
+        top: document.body.style.top,
+        width: document.body.style.width,
+    };
+    state.previousDocumentOverflow = document.documentElement.style.overflow;
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${state.scrollY}px`;
+    document.body.style.left = '0';
+    document.body.style.right = '0';
+    document.body.style.width = '100%';
+    document.documentElement.style.overflow = 'hidden';
+};
+const restoreFixedBodyLock = () => {
+    document.body.style.position = state.previousBodyStyle.position ?? '';
+    document.body.style.top = state.previousBodyStyle.top ?? '';
+    document.body.style.left = state.previousBodyStyle.left ?? '';
+    document.body.style.right = state.previousBodyStyle.right ?? '';
+    document.body.style.width = state.previousBodyStyle.width ?? '';
+    document.documentElement.style.overflow = state.previousDocumentOverflow;
+    window.scrollTo(0, state.scrollY);
+};
+/**
+ * Bloqueia o scroll do body com contagem de referência.
+ *
+ * Múltiplas chamadas exigem o mesmo número de `unlockBodyScroll`.
+ */
+const lockBodyScroll = () => {
+    if (!isClient())
+        return;
+    state.lockCount++;
+    // Só aplica classe na primeira solicitação.
+    if (state.lockCount !== 1)
+        return;
+    toggleScrollLockClass(true);
+    applyFixedBodyLock();
+};
+/**
+ * Remove o lock do body com contagem de referência.
+ *
+ * É seguro chamar mesmo quando nenhum lock está ativo.
+ */
+const unlockBodyScroll = () => {
+    if (!isClient())
+        return;
+    if (state.lockCount === 0)
+        return;
+    state.lockCount = Math.max(0, state.lockCount - 1);
+    // Só remove classe quando todos os locks forem liberados.
+    if (state.lockCount !== 0)
+        return;
+    restoreFixedBodyLock();
+    toggleScrollLockClass(false);
+};
+
+const scrimCss = () => `*,*::before,*::after{box-sizing:border-box}:host{line-height:var(--font-line-height-medium);-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}.help{font-size:var(--font-size-scale-base)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}:host{--br-scrim-opacity:1}:host .br-scrim{visibility:hidden;transition:visibility .3s ease;z-index:var(--z-index-layer-4);display:flex;align-items:center;justify-content:center;pointer-events:auto}:host dialog.br-scrim{background:rgba(0,0,0,0);border:0;color:inherit;margin:0;max-height:none;max-width:none;padding:0}:host dialog.br-scrim::backdrop{background:rgba(0,0,0,0)}:host .br-scrim.mode-fullscreen{position:fixed;z-index:var(--z-index-layer-4);inset:0}:host .br-scrim.mode-parent{position:absolute;z-index:var(--z-index-layer-4);inset:0;width:100%;height:100%}:host .br-scrim.opened{visibility:visible;pointer-events:auto}:host .br-scrim.variant-legibility{pointer-events:none;z-index:auto}:host .br-scrim.variant-legibility .mask{pointer-events:none;z-index:auto}:host .br-scrim.variant-legibility .content{pointer-events:auto;z-index:auto}:host .mask{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--surface-overlay-scrim);opacity:0;transition:opacity .3s ease;pointer-events:auto;z-index:0}:host .br-scrim.opened .mask{opacity:var(--br-scrim-opacity)}:host .br-scrim.has-spotlight .mask{display:none}:host .spotlight-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;overflow:visible}:host .br-scrim.mode-fullscreen .spotlight-overlay{position:fixed}:host .spotlight-overlay-rect{fill:var(--surface-overlay-scrim, #000);opacity:0;transition:opacity .3s ease}:host .br-scrim.opened .spotlight-overlay-rect{opacity:var(--br-scrim-opacity)}:host .br-scrim.legibility-anchor-center .mask{width:100%;height:var(--br-scrim-mask-size, 100%);top:50%;left:0;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center .content{position:absolute;top:50%;left:0;right:0;width:100%;height:var(--br-scrim-mask-size, 100%);transform:translateY(-50%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-top .mask,:host .br-scrim.legibility-anchor-bottom .mask{height:var(--br-scrim-mask-size, 100%);width:100%}:host .br-scrim.legibility-anchor-left .mask,:host .br-scrim.legibility-anchor-right .mask{width:var(--br-scrim-mask-size, 100%);height:100%}:host .br-scrim.legibility-anchor-top .mask{top:0;bottom:auto}:host .br-scrim.legibility-anchor-bottom .mask{bottom:0;top:auto}:host .br-scrim.legibility-anchor-left .mask{left:0;right:auto}:host .br-scrim.legibility-anchor-right .mask{right:0;left:auto}:host .br-scrim.legibility-anchor-top .content{position:absolute;inset:0 0 auto;width:100%;height:var(--br-scrim-mask-size, 100%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-bottom .content{position:absolute;inset:auto 0 0;width:100%;height:var(--br-scrim-mask-size, 100%);display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-left .content{position:absolute;inset:0 auto 0 0;width:var(--br-scrim-mask-size, 100%);height:100%;display:flex;align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-right .content{position:absolute;inset:0 0 0 auto;width:var(--br-scrim-mask-size, 100%);height:100%;display:flex;align-items:center;justify-content:center}:host .content{position:relative;outline:none;pointer-events:auto;opacity:0;transform:scale(0.9);transition:opacity .3s ease,transform .3s ease;background:rgba(0,0,0,0);padding:0;margin:0;border:none;box-shadow:none;overflow:visible;contain:none;display:inline-block;width:fit-content;height:fit-content;z-index:1}:host .content:focus{outline:var(--focus-outline);outline-offset:var(--focus-offset);box-shadow:var(--focus-shadow)}:host .br-scrim.content-layout-none .content,:host .br-scrim.content-layout-none .content-unwrapped{display:contents;position:unset;opacity:1;transform:none;width:auto;height:auto;z-index:unset;pointer-events:none;outline:none;background:rgba(0,0,0,0);padding:0;margin:0;border:none;box-shadow:none;transition:none}:host .br-scrim.opened .content{opacity:1;transform:scale(1);pointer-events:auto}:host .content ::slotted(*){opacity:1 !important;filter:none}:host .br-scrim.position-top:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:0;left:50%;transform:translateX(-50%)}:host .br-scrim.position-bottom:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}:host .br-scrim.position-left:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;left:0;transform:translateY(-50%)}:host .br-scrim.position-right:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;right:0;transform:translateY(-50%)}:host .br-scrim.position-center:not(.legibility-anchor-top):not(.legibility-anchor-bottom):not(.legibility-anchor-left):not(.legibility-anchor-right):not(.legibility-anchor-center) .content{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}:host .br-scrim[class*=legibility-anchor-].position-top .content{align-items:flex-start;justify-content:center}:host .br-scrim[class*=legibility-anchor-].position-bottom .content{align-items:flex-end;justify-content:center}:host .br-scrim[class*=legibility-anchor-].position-left .content{align-items:center;justify-content:flex-start}:host .br-scrim[class*=legibility-anchor-].position-right .content{align-items:center;justify-content:flex-end}:host .br-scrim[class*=legibility-anchor-].position-center .content{align-items:center;justify-content:center}:host .br-scrim.legibility-anchor-center.position-top .content{align-items:flex-start;justify-content:center;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-bottom .content{align-items:flex-end;justify-content:center;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-left .content{align-items:center;justify-content:flex-start;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-right .content{align-items:center;justify-content:flex-end;transform:translateY(-50%)}:host .br-scrim.legibility-anchor-center.position-center .content{align-items:center;justify-content:center;transform:translateY(-50%)}@media (width <= 768px){:host .content{max-width:95%;max-height:95%;width:auto}:host .br-scrim.position-top .content,:host .br-scrim.position-bottom .content{width:100%;max-width:100%;border-radius:0}}:host([data-wbc-preview-contained]){inset:0;pointer-events:none;position:absolute;z-index:1000}:host([data-wbc-preview-contained]) .br-scrim{pointer-events:auto}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}`;
+
+const Scrim = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.brScrimOpen = index.createEvent(this, "brScrimOpen", 7);
+        this.brScrimClose = index.createEvent(this, "brScrimClose", 7);
+        this.legibilityBatch = rafBatcher.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 = id.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() {
+        nativeDialog.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 && nativeDialog.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' ? (index.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" })) : (index.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 (index.h("svg", { class: "spotlight-overlay", "aria-hidden": "true", onClick: this.handleMaskClick, xmlns: "http://www.w3.org/2000/svg" }, index.h("defs", null, index.h("mask", { id: maskId }, index.h("rect", { width: "100%", height: "100%", fill: "white" }), spotlightShape)), index.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 ? (index.h("div", { class: "mask" })) : (index.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 = (index.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 }, index.h("slot", { key: 'd341205278a651d39ebbd18e1802f14aeab1c1a4' })));
+        return (index.h(index.Host, { key: 'a9aa507c3a541fc1978acc5269954b2ffebf2f6d' }, index.h("slot", { key: '53eb86b0900da07d1aa4ea6dd2116ae2c02a91d0', name: "activator" }), this.usesNativeDialog ? (index.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 ? (index.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)) : (index.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))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "isOpen": [{
+                "handleOpenChange": 0
+            }],
+        "zIndex": [{
+                "updateStyles": 0
+            }],
+        "bgColor": [{
+                "updateStyles": 0
+            }],
+        "customOpacity": [{
+                "updateStyles": 0
+            }],
+        "legibilitySize": [{
+                "updateStyles": 0
+            }],
+        "variant": [{
+                "handleVariantChange": 0
+            }],
+        "displayMode": [{
+                "handleLayerModeChange": 0
+            }],
+        "contentLayout": [{
+                "handleLayerModeChange": 0
+            }],
+        "spotlightTargetId": [{
+                "handleSpotlightChange": 0
+            }],
+        "spotlightPadding": [{
+                "handleSpotlightChange": 0
+            }],
+        "spotlightShape": [{
+                "handleSpotlightChange": 0
+            }],
+        "activator": [{
+                "handleActivatorChange": 0
+            }]
+    }; }
+};
+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(',');
+Scrim.style = scrimCss();
+
+exports.br_scrim = Scrim;