@govbr-ds/webcomponents 2.1.3 → 2.2.0

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

@@ -4,10 +4,13 @@
  */
 'use strict';
 
-var index = require('./index-CRdcutym.js');
-var id = require('./id-CjRFMzf6.js');
+var index = require('./index-CGgZBuyy.js');
+var id = require('./id-DE4jSi-L.js');
+var motion = require('./motion-CgIooxWS.js');
 var nativeDialog = require('./native-dialog--Ewqm4w0.js');
+var props = require('./props-D8dybmr0.js');
 var rafBatcher = require('./raf-batcher-yc87a4dS.js');
+require('./prop-warning-xvEHQz8H.js');
 
 /**
  * Utilitário para detecção de ambiente de execução (browser/client).
@@ -105,7 +108,7 @@ const unlockBodyScroll = () => {
     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))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-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;box-sizing:border-box;width:100%;height:100%}: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 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}pre{font-family:monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}b,strong{font-weight:bolder}code{font-family:monospace;font-size:1em}small{font-size:80%}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:var(--font-line-height-medium);margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.d-none{display:none !important}@media (min-width: 576px){.d-sm-block{display:block !important}.d-sm-flex{display:flex !important}}[data-toggle=dropdown]+*{position:absolute}.dropdown{position:relative}.dropdown [data-toggle=dropdown]+*{box-shadow:var(--surface-shadow-sm);left:0;position:absolute;top:100%}.dropdown>.br-notification{left:auto;right:0}.dropdown .br-item{--color:var(--color-light);--color-rgb:var(--color-light-rgb);--text-color:var(--color-light);--interactive:var(--interactive-light);--interactive-rgb:var(--color-rgb);--visited:var(--visited-light);--hover:var(--hover-light);--pressed:var(--pressed-light);--focus-color:var(--focus-color-light);--focus:var(--focus-color-light);--item-padding-y:var(--spacing-scale-2x);background-color:var(--background-light);color:var(--color)}.dropdown .br-item:not(:last-child){border-bottom:1px solid var(--border-color)}.dropdown .br-item.selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}.justify-content-start{justify-content:flex-start !important}.justify-content-end{justify-content:flex-end !important}.justify-content-center{justify-content:center !important}.align-items-center{align-items:center !important}.col,[class*=col-]{padding-left:calc(var(--grid-gutter)*.5);padding-right:calc(var(--grid-gutter)*.5);width:100%}.col{flex:1 0 0%;min-width:8.3333333333%}.col-auto{flex:0 0 auto;width:auto}.col-2{flex-basis:16.6666666667%;max-width:16.6666666667%}.container,.container-fluid,.container-lg{--grid-margin:var(--grid-portrait-margin);--grid-maxwidth:var(--grid-portrait-maxwidth);margin-left:auto;margin-right:auto;max-width:var(--grid-maxwidth);padding-left:var(--grid-margin);padding-right:var(--grid-margin);width:100%}.row{--grid-gutter:var(--grid-portrait-gutter);display:flex;flex-wrap:wrap;margin-left:calc(var(--grid-gutter)*-0.5);margin-right:calc(var(--grid-gutter)*-0.5)}@media (min-width: 576px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-sm) - var(--grid-tablet-margin))}.col-sm-4{flex-basis:33.3333333333%;max-width:33.3333333333%}}@media (min-width: 992px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tablet-margin)}.row{--grid-gutter:var(--grid-tablet-gutter)}.container{--grid-maxwidth:calc(var(--grid-breakpoint-md) - var(--grid-tablet-margin))}}@media (min-width: 1280px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-desktop-margin)}.row{--grid-gutter:var(--grid-desktop-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-lg) - var(--grid-desktop-margin))}.col-lg-3{flex-basis:25%;max-width:25%}}@media (min-width: 1600px){.container,.container-lg,.container-fluid{--grid-margin:var(--grid-tv-margin)}.row{--grid-gutter:var(--grid-tv-gutter)}.container,.container-lg{--grid-maxwidth:calc(var(--grid-breakpoint-xl) - var(--grid-tv-margin))}}.ease{animation-timing-function:cubic-bezier(0.25, 0.1, 0.25, 1)}.ease-out{animation-timing-function:cubic-bezier(0, 0, 0.58, 1)}.ease-in-out{animation-timing-function:cubic-bezier(0.42, 0, 0.58, 1)}.fast{animation-duration:var(--duration-fast)}.slow{animation-duration:var(--duration-slow)}.mt-1{margin-top:var(--spacing-scale-half) !important}.mr-1{margin-right:var(--spacing-scale-half) !important}.mb-1{margin-bottom:var(--spacing-scale-half) !important}.ml-1{margin-left:var(--spacing-scale-half) !important}.mx-3{margin-left:var(--spacing-scale-2x) !important;margin-right:var(--spacing-scale-2x) !important}.mb-4{margin-bottom:var(--spacing-scale-3x) !important}.ml-auto{margin-left:auto !important}.pt-half{padding-top:var(--spacing-scale-half) !important}@media (min-width: 576px){.ml-sm-0{margin-left:var(--spacing-scale-default) !important}}.highlight{background:var(--status-highlight-background) linear-gradient(var(--status-highlight-overlay), var(--status-highlight-overlay));color:var(--status-highlight-text);padding:0 var(--spacing-scale-half)}[disabled],.disabled{cursor:not-allowed;opacity:var(--disabled)}[disabled] *,.disabled *{pointer-events:none}fieldset[disabled]{opacity:1}.text-center{text-align:center !important}.text-right{text-align:right !important}.text-nowrap{white-space:nowrap !important}.text-uppercase{text-transform:uppercase !important}.text-bold{font-weight:700 !important}.text-base{font-size:var(--font-size-scale-base) !important}.text-down-01{font-size:var(--font-size-scale-down-01) !important}@media (min-width: 576px){.text-sm-center{text-align:center !important}.text-sm-left{text-align:left !important}.text-sm-right{text-align:right !important}}p{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-2x);margin-top:0}p a{text-decoration:underline}@media (min-width: 576px){p{font-size:var(--font-size-scale-up-01)}}a{--focus-offset:var(--spacing-scale-half)}a:focus{outline:none}a.focus-visible,a:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}a:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}a:not(:disabled):active{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)))}a{color:var(--interactive);text-decoration:none}.main-content a{text-decoration:underline}button{cursor:pointer}img{max-width:100%;vertical-align:middle}h2,.h2{color:var(--color);font-size:var(--font-size-scale-up-03);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2xh);margin-top:var(--spacing-scale-3xh);padding-bottom:var(--spacing-scale-2xh)}@media (min-width: 576px){.h2,h2{font-size:var(--font-size-scale-up-05);font-weight:var(--font-weight-regular)}}ul,ol{margin-bottom:var(--spacing-scale-2x);margin-top:0;padding:0 0 0 var(--spacing-scale-5x)}table{--table-background:var(--background);--table-color:var(--color);--table-border-color:var(--gray-20);--table-border-style:solid;--table-border-width:1px;--table-hover:var(--color-rgb);--table-padding:var(--spacing-scale-3x);--table-font-weight:var(--font-weight-medium);--table-th-background:var(--background-alternative);--table-th-font-weight:var(--font-weight-semi-bold);--table-row-size:var(--spacing-scale-2x);border-collapse:collapse;width:100%}tr.selected,tr.is-selected{--color:var(--color-dark);--color-rgb:var(--color-dark-rgb);--text-color:var(--color-dark);--interactive:var(--interactive-dark);--interactive-rgb:var(--interactive-dark-rgb);--visited:var(--visited-dark);--hover:var(--hover-dark);--pressed:var(--pressed-dark);--focus-color:var(--focus-color-dark);--focus:var(--focus-color-dark)}label,.label{color:var(--color);font-size:var(--font-size-scale-base);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half)}fieldset,.fieldset{border:var(--surface-width-none);margin-bottom:var(--spacing-scale-5x);margin-top:0;padding:0}legend,.legend{color:var(--color);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-semi-bold);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-2x);margin-top:var(--spacing-scale-2x)}::placeholder,.placeholder{color:var(--color-light);font-size:var(--font-size-scale-base);font-style:italic;font-weight:var(--font-weight-regular);line-height:var(--font-line-height-medium);margin-bottom:var(--spacing-scale-half);margin-top:var(--spacing-scale-half);opacity:1}input,textarea,.input{color:var(--color-light);font-size:var(--font-size-scale-up-01);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);margin-bottom:var(--spacing-scale-half)}code,.code{background:var(--gray-5);border-radius:4px;color:var(--gray-80);display:inline-block;font-family:monospace;font-size:var(--font-size-scale-base);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-low);padding:var(--spacing-scale-half)}pre,.pre{background:var(--gray-5);margin:var(--spacing-scale-2x) 0 var(--spacing-scale-4x);padding:var(--spacing-scale-2x)}pre code,.pre code{display:inline;padding:0}*[data-toggle=collapse]:not(:disabled):hover{background-image:linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)))}*[data-toggle=collapse]:focus{outline:none}*[data-toggle=collapse].focus-visible,*[data-toggle=collapse]:focus-visible{outline-color:var(--focus);outline-offset:var(--focus-offset);outline-style:var(--focus-style);outline-width:var(--focus-width)}@media (prefers-reduced-motion: reduce){:host,:host::before,:host::after,:host *,:host *::before,:host *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}}:host-context([data-wbc-reduced-motion=true])::before,:host-context([data-wbc-reduced-motion=true])::after,:host-context([data-wbc-reduced-motion=true]) *,:host-context([data-wbc-reduced-motion=true]) *::before,:host-context([data-wbc-reduced-motion=true]) *::after{animation:none !important;scroll-behavior:auto !important;transition:none !important}:host{--br-scrim-opacity:1}:host .br-scrim{visibility:hidden;transition:none}@media (prefers-reduced-motion: no-preference){:host .br-scrim{transition:visibility var(--duration-fast, 300ms) var(--animation-ease-linear, linear)}}:host .br-scrim{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;box-sizing:border-box;width:100%;height:100%}: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:none}@media (prefers-reduced-motion: no-preference){:host .mask{transition:opacity var(--duration-fast, 300ms) var(--animation-ease-out, ease-out)}}:host .mask{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:none}@media (prefers-reduced-motion: no-preference){:host .spotlight-overlay-rect{transition:opacity var(--duration-fast, 300ms) var(--animation-ease-out, ease-out)}}: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;transition:none}@media (prefers-reduced-motion: no-preference){:host .content{transition:opacity var(--duration-fast, 300ms) var(--animation-ease-out, ease-out)}}:host .content{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;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}:host([data-wbc-preview-contained]) .br-scrim .content{box-sizing:border-box;max-width:calc(100% - var(--spacing-scale-4x, 32px));max-height:calc(100% - var(--spacing-scale-4x, 32px));overflow:auto}`;
 
 const Scrim = class {
     constructor(hostRef) {
@@ -130,7 +133,7 @@ const Scrim = class {
          */
         this.disableCloseOnClick = false;
         /**
-         * Define o valor de z-index do scrim
+         * Define o valor de z-index do scrim. Deve ser um inteiro entre 0 e Number.MAX_SAFE_INTEGER; valores inválidos usam 0.
          */
         this.zIndex = null;
         /**
@@ -146,7 +149,7 @@ const Scrim = class {
          */
         this.bgColor = null;
         /**
-         * Define a opacidade personalizada do scrim
+         * Define a opacidade personalizada do scrim. O valor é limitado ao intervalo `0`–`1`; entradas inválidas usam `0.4`.
          */
         this.customOpacity = null;
         /**
@@ -160,12 +163,18 @@ const Scrim = class {
          */
         this.displayMode = 'fullscreen';
         /**
-         * Determina quanto de rolagem (em pixels) é necessário para acionar a ação de fechamento automático do scrim.
+         * Determina quanto de rolagem (em pixels) é necessário para acionar a ação de fechamento automático do scrim. Valores negativos usam `0`.
          */
         this.scrollThreshold = 50;
         /**
          * Define o seletor para o elemento activator.
          * Nota: O slot 'activator' tem prioridade sobre esta propriedade.
+         *
+         * @example
+         * ```html
+         * <button id="abrir-ajuda" type="button">Abrir ajuda</button>
+         * <br-scrim activator="#abrir-ajuda">Conteúdo</br-scrim>
+         * ```
          */
         this.activator = null;
         /**
@@ -219,15 +228,34 @@ const Scrim = class {
          * - **largura** para âncoras `left` e `right`
          *
          * Só tem efeito quando `variant="legibility"` está definido.
+         *
+         * @example
+         * ```html
+         * <br-scrim variant="legibility" legibility-anchor="bottom" legibility-size="40%">
+         *   Texto sobre a imagem
+         * </br-scrim>
+         * ```
          */
         this.legibilitySize = null;
+        /**
+         * Seletor CSS do elemento que deve receber o posicionamento da variante
+         * `legibility`. Quando não informado (padrão), o alvo é o elemento pai
+         * direto do `<br-scrim>`.
+         */
+        this.legibilityTargetId = 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.
+         *
+         * @example
+         * ```html
+         * <button id="acao-principal" type="button">Continuar</button>
+         * <br-scrim variant="spotlight" spotlight-target-id="#acao-principal"></br-scrim>
+         * ```
          */
         this.spotlightTargetId = null;
         /**
-         * Espaçamento interno (em pixels) ao redor da área de fresta no scrim vazado.
+         * Espaçamento interno (em pixels) ao redor da área de fresta no scrim vazado. Valores negativos usam `0`.
          */
         this.spotlightPadding = 8;
         /**
@@ -318,10 +346,10 @@ const Scrim = class {
             this.toggle();
         };
         this.handleScrollClose = () => {
-            if (this.scrollStrategy === 'close' && this.isActive) {
+            if (this.effectiveScrollStrategy === 'close' && this.isActive) {
                 const currentScroll = this.getScrollPosition();
                 const reference = this.scrollOrigin ?? this.lastScrollTop;
-                if (Math.abs(currentScroll - reference) > this.scrollThreshold) {
+                if (Math.abs(currentScroll - reference) > this.effectiveScrollThreshold) {
                     this.scrollOrigin = null;
                     // Não fecha se tiver modal filha com autoClose=false (padrão)
                     if (this.hasModalWithAutoClose()) {
@@ -413,7 +441,7 @@ const Scrim = class {
                 if (this.hasModalWithAutoClose()) {
                     return;
                 }
-                if (this.contentLayout === 'none') {
+                if (this.effectiveContentLayout === 'none') {
                     this.brScrimClose.emit();
                     return;
                 }
@@ -441,14 +469,14 @@ const Scrim = class {
             }
         };
         /**
-         * Recalcula as coordenadas do elemento pai via getBoundingClientRect e aplica
+         * Recalcula as coordenadas do alvo 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)
+            const target = this.resolveLegibilityTarget();
+            if (target === null || this.scrimDivRef === null)
                 return;
-            const rect = parent.getBoundingClientRect();
+            const rect = target.getBoundingClientRect();
             this.scrimDivRef.style.setProperty('position', 'fixed');
             this.scrimDivRef.style.setProperty('inset', 'unset');
             this.scrimDivRef.style.setProperty('top', '0');
@@ -465,6 +493,40 @@ const Scrim = class {
     get isActive() {
         return this.isLegibilityVariant || this.isOpen;
     }
+    get effectiveCustomOpacity() {
+        return props.resolveNumberPropValue(this.el, 'customOpacity', this.customOpacity, 0, 1, 0.4, {
+            allowNull: true,
+        });
+    }
+    get effectiveScrollThreshold() {
+        return props.resolveNumberPropValue(this.el, 'scrollThreshold', this.scrollThreshold, 0, Number.MAX_SAFE_INTEGER, 50);
+    }
+    get effectiveSpotlightPadding() {
+        return props.resolveNumberPropValue(this.el, 'spotlightPadding', this.spotlightPadding, 0, Number.MAX_SAFE_INTEGER, 8);
+    }
+    get effectiveZIndex() {
+        return props.resolveIntegerPropValue(this.el, 'zIndex', this.zIndex, 0, Number.MAX_SAFE_INTEGER, 0, {
+            allowNull: true,
+        });
+    }
+    get effectivePositionContent() {
+        return props.resolveAllowedPropValue(this.el, 'positionContent', this.positionContent, ['top', 'center', 'right', 'left', 'bottom'], 'center');
+    }
+    get effectiveScrollStrategy() {
+        return props.resolveAllowedPropValue(this.el, 'scrollStrategy', this.scrollStrategy, ['block', 'close'], 'block');
+    }
+    get effectiveVariant() {
+        return props.resolveAllowedPropValue(this.el, 'variant', this.variant, ['focus', 'spotlight', 'legibility'], 'focus');
+    }
+    get effectiveLegibilityAnchor() {
+        return props.resolveAllowedPropValue(this.el, 'legibilityAnchor', this.legibilityAnchor, ['top', 'bottom', 'left', 'right', 'center'], 'bottom');
+    }
+    get effectiveSpotlightShape() {
+        return props.resolveAllowedPropValue(this.el, 'spotlightShape', this.spotlightShape, ['rect', 'rounded', 'circle'], 'rect');
+    }
+    get effectiveContentLayout() {
+        return props.resolveAllowedPropValue(this.el, 'contentLayout', this.contentLayout, ['default', 'none'], 'default');
+    }
     // ======================================================================
     // LIFECYCLE HOOKS E WATCHERS
     // ======================================================================
@@ -486,7 +548,7 @@ const Scrim = class {
                 this.brScrimOpen.emit();
             return;
         }
-        if (newValue && this.scrollStrategy === 'close') {
+        if (newValue && this.effectiveScrollStrategy === 'close') {
             const currentScroll = window.scrollY;
             this.lastScrollTop = currentScroll;
             this.scrollOrigin = currentScroll;
@@ -495,7 +557,7 @@ const Scrim = class {
         if (this.isActive) {
             this.previouslyFocusedElement = document.activeElement;
             this.applyScrollStrategy();
-            if (this.contentLayout !== 'none' && !this.usesNativeTopLayer) {
+            if (this.effectiveContentLayout !== 'none' && !this.usesNativeTopLayer) {
                 this.addGlobalEventInterception();
                 const hasModalChild = this.findModalChild() !== null;
                 if (hasModalChild) {
@@ -514,7 +576,7 @@ const Scrim = class {
             this.closeModalChild();
             this.cleanupSpotlight();
             this.resetScrolling();
-            if (this.contentLayout !== 'none') {
+            if (this.effectiveContentLayout !== 'none') {
                 this.removeGlobalEventInterception();
                 this.restoreFocus();
                 this.brScrimClose.emit();
@@ -524,16 +586,16 @@ const Scrim = class {
     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}`);
+        if (this.effectiveZIndex !== null && this.effectiveZIndex !== undefined) {
+            this.el.style.zIndex = `${this.effectiveZIndex}`;
+            this.el.style.setProperty('--z-index-layer-4', `${this.effectiveZIndex}`);
         }
         // 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}`);
+        if (this.effectiveCustomOpacity !== null) {
+            this.el.style.setProperty('--br-scrim-opacity', `${this.effectiveCustomOpacity}`);
         }
     }
     handleVariantChange() {
@@ -545,7 +607,7 @@ const Scrim = class {
                 this.cleanupSpotlight();
                 this.setupLegibility();
             }
-            else if (this.variant === 'spotlight') {
+            else if (this.effectiveVariant === 'spotlight') {
                 this.cleanupLegibility();
                 if (!this.usesNativeTopLayer)
                     this.addGlobalEventInterception();
@@ -561,7 +623,7 @@ const Scrim = class {
     }
     handleLayerModeChange() {
         this.removeGlobalEventInterception();
-        if (this.isActive && this.contentLayout !== 'none' && !this.usesNativeTopLayer) {
+        if (this.isActive && this.effectiveContentLayout !== 'none' && !this.usesNativeTopLayer) {
             this.addGlobalEventInterception();
         }
     }
@@ -570,12 +632,17 @@ const Scrim = class {
             this.setupSpotlight();
         }
     }
+    handleLegibilityTargetChange() {
+        if (this.isActive && this.isLegibilityVariant) {
+            this.setupLegibility();
+        }
+    }
     handleActivatorChange() {
         this.removeActivatorClickListener();
         this.setupActivator();
     }
     connectedCallback() {
-        if (this.scrollStrategy === 'close') {
+        if (this.effectiveScrollStrategy === 'close') {
             const currentScroll = window.scrollY;
             this.lastScrollTop = currentScroll;
             this.scrollOrigin = currentScroll;
@@ -593,7 +660,7 @@ const Scrim = class {
             this.restoreFocusTimeoutId = null;
         }
         window.removeEventListener('scroll', this.handleScrollClose);
-        if (this.scrollStrategy === 'block' && this.isActive) {
+        if (this.effectiveScrollStrategy === 'block' && this.isActive) {
             unlockBodyScroll();
         }
         if (this.contentRef !== null) {
@@ -625,7 +692,7 @@ const Scrim = class {
         }
         else if (this.isActive) {
             this.applyScrollStrategy();
-            if (this.contentLayout !== 'none' && !this.usesNativeTopLayer) {
+            if (this.effectiveContentLayout !== 'none' && !this.usesNativeTopLayer) {
                 this.addGlobalEventInterception();
                 const modalChild = this.findModalChild();
                 if (modalChild === null) {
@@ -640,6 +707,11 @@ const Scrim = class {
     }
     componentDidRender() {
         nativeDialog.syncNativeModalDialog(this.nativeDialogRef, this.isActive && this.usesNativeDialog);
+        // A referência interna do scrim é atribuída durante o render; recalcula
+        // depois dele para garantir o posicionamento inicial do alvo de legibility.
+        if (this.isLegibilityVariant) {
+            this.computeLegibilityRect();
+        }
     }
     // ======================================================================
     // MÉTODOS PÚBLICOS (API)
@@ -648,7 +720,7 @@ const Scrim = class {
      * Define o limite de rolagem para o fechamento automático do scrim.
      */
     async setScrollThreshold(threshold) {
-        this.scrollThreshold = threshold;
+        this.scrollThreshold = props.resolveNumberPropValue(this.el, 'scrollThreshold', threshold, 0, Number.MAX_SAFE_INTEGER, 50);
     }
     /**
      * Método público para exibir o scrim
@@ -845,10 +917,10 @@ const Scrim = class {
     // ESTRATÉGIAS DE ROLAGEM (SCROLL)
     // ======================================================================
     applyScrollStrategy() {
-        if (this.scrollStrategy === 'block') {
+        if (this.effectiveScrollStrategy === 'block') {
             this.enableScrollBlock();
         }
-        else if (this.scrollStrategy === 'close') {
+        else if (this.effectiveScrollStrategy === 'close') {
             this.enableScrollWatcher();
         }
     }
@@ -866,7 +938,7 @@ const Scrim = class {
         window.addEventListener('scroll', this.handleScrollClose, { passive: true });
     }
     resetScrolling() {
-        if (this.scrollStrategy === 'block') {
+        if (this.effectiveScrollStrategy === 'block') {
             unlockBodyScroll();
         }
         window.removeEventListener('scroll', this.handleScrollClose);
@@ -891,7 +963,7 @@ const Scrim = class {
         if (focusableElements.length > 0) {
             const firstElement = focusableElements[0];
             if (firstElement !== null && firstElement !== undefined) {
-                firstElement.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+                firstElement.scrollIntoView({ behavior: motion.getScrollBehavior(), block: 'nearest', inline: 'nearest' });
                 firstElement.focus({ preventScroll: true });
             }
         }
@@ -1048,7 +1120,7 @@ const Scrim = class {
      * eventos de teclado/foco/clique e nunca bloqueia rolagem.
      */
     get isLegibilityVariant() {
-        return this.variant === 'legibility';
+        return this.effectiveVariant === 'legibility';
     }
     /**
      * Resolve o display-mode efetivo.
@@ -1056,13 +1128,13 @@ const Scrim = class {
      * atributo `display-mode` tenha sido explicitamente definido pelo usuário.
      */
     get effectiveDisplayMode() {
-        if (this.variant === 'legibility' && !this.displayModeExplicit) {
+        if (this.effectiveVariant === 'legibility' && !this.displayModeExplicit) {
             return 'parent';
         }
-        return this.displayMode;
+        return props.resolveAllowedPropValue(this.el, 'displayMode', this.displayMode, ['fullscreen', 'parent'], 'fullscreen');
     }
     get usesNativeDialog() {
-        return this.effectiveDisplayMode === 'fullscreen' && !this.isLegibilityVariant && this.contentLayout !== 'none';
+        return (this.effectiveDisplayMode === 'fullscreen' && !this.isLegibilityVariant && this.effectiveContentLayout !== 'none');
     }
     get usesNativeTopLayer() {
         return this.usesNativeDialog && nativeDialog.supportsNativeModalDialog();
@@ -1074,13 +1146,13 @@ const Scrim = class {
         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) {
+        switch (this.effectiveVariant) {
             case 'focus':
             case 'spotlight':
                 if (this.bgColor === null) {
                     this.el.style.setProperty('--surface-overlay-scrim', '#000000');
                 }
-                if (this.customOpacity === null) {
+                if (this.effectiveCustomOpacity === null) {
                     this.el.style.setProperty('--br-scrim-opacity', '0.4');
                 }
                 break;
@@ -1094,7 +1166,7 @@ const Scrim = class {
                 if (this.bgColor === null) {
                     this.el.style.setProperty('--surface-overlay-scrim', '#000000');
                 }
-                if (this.customOpacity === null) {
+                if (this.effectiveCustomOpacity === null) {
                     // Se bgColor for um gradiente, o usuário deve setar customOpacity=1 ou omitir
                     this.el.style.setProperty('--br-scrim-opacity', '0.64');
                 }
@@ -1112,7 +1184,7 @@ const Scrim = class {
      */
     setupSpotlight() {
         this.cleanupSpotlight();
-        if (this.variant !== 'spotlight')
+        if (this.effectiveVariant !== 'spotlight')
             return;
         const target = this.resolveSpotlightTarget();
         if (target === null)
@@ -1159,10 +1231,11 @@ const Scrim = class {
     /**
      * 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.
+     * Aplica `position: fixed` com as coordenadas exatas do alvo via
+     * `getBoundingClientRect`, sem exigir CSS adicional no alvo. O alvo é
+     * resolvido por `legibilityTargetId` ou, por padrão, pelo pai direto.
      *
-     * Com `ResizeObserver`, observa o pai **e todos os seus ancestrais**: quando um
+     * Com `ResizeObserver`, observa o alvo **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.
      */
@@ -1170,16 +1243,16 @@ const Scrim = class {
         this.cleanupLegibility();
         if (!this.isLegibilityVariant)
             return;
-        const parent = this.el.parentElement;
-        if (parent === null)
+        const target = this.resolveLegibilityTarget();
+        if (target === null)
             return;
         this.computeLegibilityRect();
         if (typeof ResizeObserver !== 'undefined') {
             this.legibilityResizeObserver = new ResizeObserver(() => this.scheduleLegibilityRect());
-            this.legibilityResizeObserver.observe(parent);
+            this.legibilityResizeObserver.observe(target);
             // 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;
+            let ancestor = target.parentElement;
             while (ancestor !== null && ancestor !== document.documentElement) {
                 this.legibilityResizeObserver.observe(ancestor);
                 ancestor = ancestor.parentElement;
@@ -1207,6 +1280,24 @@ const Scrim = class {
         window.removeEventListener('load', this.scheduleLegibilityRect);
         this.resetLegibilityStyles();
     }
+    /**
+     * Resolve o alvo da variante legibility. O pai direto permanece como
+     * fallback para preservar o comportamento anterior e a compatibilidade.
+     */
+    resolveLegibilityTarget() {
+        const selector = this.legibilityTargetId ?? this.el.getAttribute('legibility-target-id');
+        if (selector !== null && selector !== '') {
+            try {
+                const target = document.querySelector(selector);
+                if (target !== null)
+                    return target;
+            }
+            catch {
+                console.warn(`br-scrim: Seletor legibilityTargetId inválido: ${selector}`);
+            }
+        }
+        return this.el.parentElement;
+    }
     /**
      * Remove os estilos inline de posicionamento aplicados pelo computeLegibilityRect.
      */
@@ -1228,47 +1319,47 @@ const Scrim = class {
      * 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" }));
+        const spotlightShape = this.effectiveSpotlightShape === '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.effectiveSpotlightShape === 'rounded' ? 8 : 0, ry: this.effectiveSpotlightShape === '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',
+            'scroll-block': this.effectiveScrollStrategy === 'block',
+            'position-top': this.effectivePositionContent === 'top',
+            'position-bottom': this.effectivePositionContent === 'bottom',
+            'position-left': this.effectivePositionContent === 'left',
+            'position-right': this.effectivePositionContent === 'right',
+            'position-center': this.effectivePositionContent === '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',
+            'variant-focus': this.effectiveVariant === 'focus',
+            'variant-spotlight': this.effectiveVariant === 'spotlight',
+            'variant-legibility': this.effectiveVariant === 'legibility',
+            'legibility-anchor-top': this.effectiveVariant === 'legibility' && this.effectiveLegibilityAnchor === 'top',
+            'legibility-anchor-bottom': this.effectiveVariant === 'legibility' && this.effectiveLegibilityAnchor === 'bottom',
+            'legibility-anchor-left': this.effectiveVariant === 'legibility' && this.effectiveLegibilityAnchor === 'left',
+            'legibility-anchor-right': this.effectiveVariant === 'legibility' && this.effectiveLegibilityAnchor === 'right',
+            'legibility-anchor-center': this.effectiveVariant === 'legibility' && this.effectiveLegibilityAnchor === 'center',
             'has-spotlight': this.spotlightRect !== null,
-            'content-layout-none': this.contentLayout === 'none',
+            'content-layout-none': this.effectiveContentLayout === '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 padding = this.effectiveSpotlightPadding;
         const rect = this.spotlightRect;
-        const isDialogContainer = !this.isLegibilityVariant && this.contentLayout !== 'none';
+        const isDialogContainer = !this.isLegibilityVariant && this.effectiveContentLayout !== '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) => {
+        const contentElement = (index.h("div", { key: '3ac232885a157cd05d718cfed0c63af7a3a769ac', ref: (el) => (this.contentRef = el ?? null), id: `${this.customId}-content`, class: this.effectiveContentLayout === 'none' ? 'content content-unwrapped' : 'content', tabIndex: this.effectiveContentLayout === 'none' ? undefined : -1 }, index.h("slot", { key: '9d2306c1cc3296e63272e2e08fb5b216eb1bdb9d' })));
+        return (index.h(index.Host, { key: 'c7c171f3e033e7c80ba0f9ce98515331385b2bf5' }, index.h("slot", { key: '7b379fa99c11d5a0227abf44a7fb3dc27ffe1cf4', 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) => {
@@ -1314,6 +1405,9 @@ const Scrim = class {
         "spotlightShape": [{
                 "handleSpotlightChange": 0
             }],
+        "legibilityTargetId": [{
+                "handleLegibilityTargetChange": 0
+            }],
         "activator": [{
                 "handleActivatorChange": 0
             }]