[{"data":1,"prerenderedAt":1140},["ShallowReactive",2],{"navigation_docs":3,"-guide-overlay":188,"-guide-overlay-surround":1135},[4,9,27,52,101,130,163],{"title":5,"path":6,"stem":7,"icon":8},"Playground","\u002Fplayground","1.playground","i-lucide-flask-conical",{"title":10,"path":11,"stem":12,"children":13,"page":26},"Getting Started","\u002Fgetting-started","2.getting-started",[14,18,22],{"title":15,"path":16,"stem":17},"Introduction","\u002Fgetting-started\u002Fintroduction","2.getting-started\u002F1.introduction",{"title":19,"path":20,"stem":21},"Installation","\u002Fgetting-started\u002Finstallation","2.getting-started\u002F2.installation",{"title":23,"path":24,"stem":25},"First modal","\u002Fgetting-started\u002Ffirst-modal","2.getting-started\u002F3.first-modal",false,{"title":28,"path":29,"stem":30,"children":31,"page":26},"Concepts","\u002Fconcepts","3.concepts",[32,36,40,44,48],{"title":33,"path":34,"stem":35},"Architecture","\u002Fconcepts\u002Farchitecture","3.concepts\u002F1.architecture",{"title":37,"path":38,"stem":39},"Imperative flow","\u002Fconcepts\u002Fimperative-flow","3.concepts\u002F2.imperative-flow",{"title":41,"path":42,"stem":43},"Stacking","\u002Fconcepts\u002Fstacking","3.concepts\u002F3.stacking",{"title":45,"path":46,"stem":47},"Groups","\u002Fconcepts\u002Fgroups","3.concepts\u002F4.groups",{"title":49,"path":50,"stem":51},"Headless primitives","\u002Fconcepts\u002Fheadless-primitives","3.concepts\u002F5.headless-primitives",{"title":53,"path":54,"stem":55,"children":56,"page":26},"Guide","\u002Fguide","4.guide",[57,61,65,69,73,77,81,85,89,93,97],{"title":58,"path":59,"stem":60},"Writing a modal","\u002Fguide\u002Fwriting-a-modal","4.guide\u002F01.writing-a-modal",{"title":62,"path":63,"stem":64},"Opening & closing","\u002Fguide\u002Fopening-and-closing","4.guide\u002F02.opening-and-closing",{"title":66,"path":67,"stem":68},"Props & results","\u002Fguide\u002Fpassing-props-and-results","4.guide\u002F03.passing-props-and-results",{"title":70,"path":71,"stem":72},"Behavior options","\u002Fguide\u002Fbehavior-options","4.guide\u002F04.behavior-options",{"title":74,"path":75,"stem":76},"Animations & styling","\u002Fguide\u002Fstyling-and-animations","4.guide\u002F05.styling-and-animations",{"title":78,"path":79,"stem":80},"useModal composable","\u002Fguide\u002Fusemodal-composable","4.guide\u002F06.usemodal-composable",{"title":82,"path":83,"stem":84},"Modal context","\u002Fguide\u002Fmodal-context","4.guide\u002F07.modal-context",{"title":86,"path":87,"stem":88},"Multiple targets","\u002Fguide\u002Fmultiple-targets","4.guide\u002F08.multiple-targets",{"title":90,"path":91,"stem":92},"Overlay","\u002Fguide\u002Foverlay","4.guide\u002F09.overlay",{"title":94,"path":95,"stem":96},"Async components","\u002Fguide\u002Fasync-components","4.guide\u002F10.async-components",{"title":98,"path":99,"stem":100},"TypeScript","\u002Fguide\u002Ftypescript","4.guide\u002F11.typescript",{"title":102,"path":103,"stem":104,"children":105,"page":26},"Recipes","\u002Frecipes","5.recipes",[106,110,114,118,122,126],{"title":107,"path":108,"stem":109},"Confirm dialog","\u002Frecipes\u002Fconfirm-dialog","5.recipes\u002F1.confirm-dialog",{"title":111,"path":112,"stem":113},"Form modal with validation","\u002Frecipes\u002Fform-modal-with-validation","5.recipes\u002F2.form-modal-with-validation",{"title":115,"path":116,"stem":117},"Image lightbox","\u002Frecipes\u002Fimage-lightbox","5.recipes\u002F3.image-lightbox",{"title":119,"path":120,"stem":121},"Command palette","\u002Frecipes\u002Fcommand-palette","5.recipes\u002F4.command-palette",{"title":123,"path":124,"stem":125},"Nested flows \u002F wizards","\u002Frecipes\u002Fnested-flows","5.recipes\u002F5.nested-flows",{"title":127,"path":128,"stem":129},"Global error modal","\u002Frecipes\u002Fglobal-error-modal","5.recipes\u002F6.global-error-modal",{"title":131,"path":132,"stem":133,"children":134,"page":26},"Api","\u002Fapi","6.api",[135,139,143,147,151,155,159],{"title":136,"path":137,"stem":138},"Functions","\u002Fapi\u002Ffunctions","6.api\u002F1.functions",{"title":140,"path":141,"stem":142},"Components","\u002Fapi\u002Fcomponents","6.api\u002F2.components",{"title":144,"path":145,"stem":146},"Composables","\u002Fapi\u002Fcomposables","6.api\u002F3.composables",{"title":148,"path":149,"stem":150},"Plugin","\u002Fapi\u002Fplugin","6.api\u002F4.plugin",{"title":152,"path":153,"stem":154},"State helpers","\u002Fapi\u002Fstate","6.api\u002F5.state",{"title":156,"path":157,"stem":158},"Global events","\u002Fapi\u002Fevents","6.api\u002F6.events",{"title":160,"path":161,"stem":162},"Types","\u002Fapi\u002Ftypes","6.api\u002F7.types",{"title":164,"path":165,"stem":166,"children":167,"page":26},"Resources","\u002Fresources","7.resources",[168,172,176,180,184],{"title":169,"path":170,"stem":171},"Migration from v1","\u002Fresources\u002Fmigration-from-v1","7.resources\u002F1.migration-from-v1",{"title":173,"path":174,"stem":175},"FAQ","\u002Fresources\u002Ffaq","7.resources\u002F2.faq",{"title":177,"path":178,"stem":179},"Troubleshooting","\u002Fresources\u002Ftroubleshooting","7.resources\u002F3.troubleshooting",{"title":181,"path":182,"stem":183},"Comparison","\u002Fresources\u002Fcomparison","7.resources\u002F4.comparison",{"title":185,"path":186,"stem":187},"Changelog","\u002Fresources\u002Fchangelog","7.resources\u002F5.changelog",{"id":189,"title":90,"body":190,"description":1129,"extension":1130,"links":1131,"meta":1132,"navigation":323,"path":91,"seo":1133,"stem":92,"__hash__":1134},"docs\u002F4.guide\u002F09.overlay.md",{"type":191,"value":192,"toc":1121},"minimark",[193,197,213,224,229,401,407,411,414,455,708,712,725,733,763,770,774,837,989,1001,1005,1014,1086,1097,1101,1109,1117],[194,195,90],"h1",{"id":196},"overlay",[198,199,200,204,205,208,209,212],"p",{},[201,202,203],"code",{},"\u003CModalOverlay>"," is the optional dimming layer rendered inside ",[201,206,207],{},"\u003CModalTarget>",". It mounts whenever the group has at least one active modal and unmounts after the last one closes — driven by ",[201,210,211],{},"\u003CPresence>"," from reka-ui, so enter\u002Fexit animations are respected.",[198,214,215,216,219,220,223],{},"The overlay is purely visual by default: ",[201,217,218],{},"position: absolute; inset: 0; pointer-events: none",". Clicks pass through to ",[201,221,222],{},"[data-modal-region]",", which is where the package detects \"click outside content\" to close the topmost modal.",[225,226,228],"h2",{"id":227},"minimal-usage","Minimal usage",[230,231,236],"pre",{"className":232,"code":233,"language":234,"meta":235,"style":235},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ModalOverlay, ModalTarget } from '@kolirt\u002Fvue-modal'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalTarget group=\"default\">\n    \u003CModalOverlay class=\"bg-black\u002F50\" \u002F>\n  \u003C\u002FModalTarget>\n\u003C\u002Ftemplate>\n","vue","",[201,237,238,273,308,318,325,335,358,382,392],{"__ignoreMap":235},[239,240,243,247,251,255,258,261,264,268,270],"span",{"class":241,"line":242},"line",1,[239,244,246],{"class":245},"sMK4o","\u003C",[239,248,250],{"class":249},"swJcz","script",[239,252,254],{"class":253},"spNyl"," setup",[239,256,257],{"class":253}," lang",[239,259,260],{"class":245},"=",[239,262,263],{"class":245},"\"",[239,265,267],{"class":266},"sfazB","ts",[239,269,263],{"class":245},[239,271,272],{"class":245},">\n",[239,274,276,280,283,287,290,293,296,299,302,305],{"class":241,"line":275},2,[239,277,279],{"class":278},"s7zQu","import",[239,281,282],{"class":245}," {",[239,284,286],{"class":285},"sTEyZ"," ModalOverlay",[239,288,289],{"class":245},",",[239,291,292],{"class":285}," ModalTarget",[239,294,295],{"class":245}," }",[239,297,298],{"class":278}," from",[239,300,301],{"class":245}," '",[239,303,304],{"class":266},"@kolirt\u002Fvue-modal",[239,306,307],{"class":245},"'\n",[239,309,311,314,316],{"class":241,"line":310},3,[239,312,313],{"class":245},"\u003C\u002F",[239,315,250],{"class":249},[239,317,272],{"class":245},[239,319,321],{"class":241,"line":320},4,[239,322,324],{"emptyLinePlaceholder":323},true,"\n",[239,326,328,330,333],{"class":241,"line":327},5,[239,329,246],{"class":245},[239,331,332],{"class":249},"template",[239,334,272],{"class":245},[239,336,338,341,344,347,349,351,354,356],{"class":241,"line":337},6,[239,339,340],{"class":245},"  \u003C",[239,342,343],{"class":249},"ModalTarget",[239,345,346],{"class":253}," group",[239,348,260],{"class":245},[239,350,263],{"class":245},[239,352,353],{"class":266},"default",[239,355,263],{"class":245},[239,357,272],{"class":245},[239,359,361,364,367,370,372,374,377,379],{"class":241,"line":360},7,[239,362,363],{"class":245},"    \u003C",[239,365,366],{"class":249},"ModalOverlay",[239,368,369],{"class":253}," class",[239,371,260],{"class":245},[239,373,263],{"class":245},[239,375,376],{"class":266},"bg-black\u002F50",[239,378,263],{"class":245},[239,380,381],{"class":245}," \u002F>\n",[239,383,385,388,390],{"class":241,"line":384},8,[239,386,387],{"class":245},"  \u003C\u002F",[239,389,343],{"class":249},[239,391,272],{"class":245},[239,393,395,397,399],{"class":241,"line":394},9,[239,396,313],{"class":245},[239,398,332],{"class":249},[239,400,272],{"class":245},[198,402,403,404,406],{},"You can omit ",[201,405,203],{}," entirely — modals will render without a backdrop.",[225,408,410],{"id":409},"customizing-with-the-default-slot","Customizing with the default slot",[198,412,413],{},"The overlay exposes a default slot. Use it to layer decorative elements on top of the base dimming color: gradients, noise textures, blur layers, branding watermarks, animated backgrounds.",[230,415,417],{"className":232,"code":416,"language":234,"meta":235,"style":235},"\u003CModalOverlay class=\"overlay\">\n  \u003Cdiv class=\"overlay__noise\" \u002F>\n  \u003Cdiv class=\"overlay__gradient\" \u002F>\n\u003C\u002FModalOverlay>\n",[201,418,419,437,442,447],{"__ignoreMap":235},[239,420,421,423,425,427,429,431,433,435],{"class":241,"line":242},[239,422,246],{"class":245},[239,424,366],{"class":249},[239,426,369],{"class":253},[239,428,260],{"class":245},[239,430,263],{"class":245},[239,432,196],{"class":266},[239,434,263],{"class":245},[239,436,272],{"class":245},[239,438,439],{"class":241,"line":275},[239,440,441],{"class":285},"  \u003Cdiv class=\"overlay__noise\" \u002F>\n",[239,443,444],{"class":241,"line":310},[239,445,446],{"class":285},"  \u003Cdiv class=\"overlay__gradient\" \u002F>\n",[239,448,449,451,453],{"class":241,"line":320},[239,450,313],{"class":245},[239,452,366],{"class":249},[239,454,272],{"class":245},[230,456,460],{"className":457,"code":458,"language":459,"meta":235,"style":235},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".overlay {\n  background: rgba(0, 0, 0, 0.55);\n}\n\n.overlay__noise {\n  position: absolute;\n  inset: 0;\n  background: url('\u002Fnoise.png') repeat;\n  opacity: 0.08;\n  mix-blend-mode: overlay;\n}\n\n.overlay__gradient {\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);\n}\n","css",[201,461,462,473,510,515,519,528,541,552,579,591,604,609,614,624,635,646,703],{"__ignoreMap":235},[239,463,464,467,470],{"class":241,"line":242},[239,465,466],{"class":245},".",[239,468,196],{"class":469},"sBMFI",[239,471,472],{"class":245}," {\n",[239,474,475,479,482,486,489,493,495,498,500,502,504,507],{"class":241,"line":275},[239,476,478],{"class":477},"sqsOY","  background",[239,480,481],{"class":245},":",[239,483,485],{"class":484},"s2Zo4"," rgba",[239,487,488],{"class":245},"(",[239,490,492],{"class":491},"sbssI","0",[239,494,289],{"class":245},[239,496,497],{"class":491}," 0",[239,499,289],{"class":245},[239,501,497],{"class":491},[239,503,289],{"class":245},[239,505,506],{"class":491}," 0.55",[239,508,509],{"class":245},");\n",[239,511,512],{"class":241,"line":310},[239,513,514],{"class":245},"}\n",[239,516,517],{"class":241,"line":320},[239,518,324],{"emptyLinePlaceholder":323},[239,520,521,523,526],{"class":241,"line":327},[239,522,466],{"class":245},[239,524,525],{"class":469},"overlay__noise",[239,527,472],{"class":245},[239,529,530,533,535,538],{"class":241,"line":337},[239,531,532],{"class":477},"  position",[239,534,481],{"class":245},[239,536,537],{"class":285}," absolute",[239,539,540],{"class":245},";\n",[239,542,543,546,548,550],{"class":241,"line":360},[239,544,545],{"class":477},"  inset",[239,547,481],{"class":245},[239,549,497],{"class":491},[239,551,540],{"class":245},[239,553,554,556,558,561,563,566,569,571,574,577],{"class":241,"line":384},[239,555,478],{"class":477},[239,557,481],{"class":245},[239,559,560],{"class":484}," url",[239,562,488],{"class":245},[239,564,565],{"class":245},"'",[239,567,568],{"class":266},"\u002Fnoise.png",[239,570,565],{"class":245},[239,572,573],{"class":245},")",[239,575,576],{"class":285}," repeat",[239,578,540],{"class":245},[239,580,581,584,586,589],{"class":241,"line":394},[239,582,583],{"class":477},"  opacity",[239,585,481],{"class":245},[239,587,588],{"class":491}," 0.08",[239,590,540],{"class":245},[239,592,594,597,599,602],{"class":241,"line":593},10,[239,595,596],{"class":477},"  mix-blend-mode",[239,598,481],{"class":245},[239,600,601],{"class":285}," overlay",[239,603,540],{"class":245},[239,605,607],{"class":241,"line":606},11,[239,608,514],{"class":245},[239,610,612],{"class":241,"line":611},12,[239,613,324],{"emptyLinePlaceholder":323},[239,615,617,619,622],{"class":241,"line":616},13,[239,618,466],{"class":245},[239,620,621],{"class":469},"overlay__gradient",[239,623,472],{"class":245},[239,625,627,629,631,633],{"class":241,"line":626},14,[239,628,532],{"class":477},[239,630,481],{"class":245},[239,632,537],{"class":285},[239,634,540],{"class":245},[239,636,638,640,642,644],{"class":241,"line":637},15,[239,639,545],{"class":477},[239,641,481],{"class":245},[239,643,497],{"class":491},[239,645,540],{"class":245},[239,647,649,651,653,656,658,661,664,667,669,672,675,677,679,681,683,685,687,689,691,693,696,698,701],{"class":241,"line":648},16,[239,650,478],{"class":477},[239,652,481],{"class":245},[239,654,655],{"class":484}," radial-gradient",[239,657,488],{"class":245},[239,659,660],{"class":285},"circle ",[239,662,663],{"class":245},"at",[239,665,666],{"class":285}," center",[239,668,289],{"class":245},[239,670,671],{"class":285}," transparent ",[239,673,674],{"class":491},"0%",[239,676,289],{"class":245},[239,678,485],{"class":484},[239,680,488],{"class":245},[239,682,492],{"class":491},[239,684,289],{"class":245},[239,686,497],{"class":491},[239,688,289],{"class":245},[239,690,497],{"class":491},[239,692,289],{"class":245},[239,694,695],{"class":491}," 0.4",[239,697,573],{"class":245},[239,699,700],{"class":491}," 100%",[239,702,509],{"class":245},[239,704,706],{"class":241,"line":705},17,[239,707,514],{"class":245},[225,709,711],{"id":710},"pointer-events","Pointer events",[198,713,714,715,718,719,722,723,466],{},"The root ",[201,716,717],{},"[data-modal-overlay]"," is ",[201,720,721],{},"pointer-events: none",". Slotted children inherit that — they're decorative and won't intercept clicks, which preserves the \"click overlay to close\" behavior driven by ",[201,724,222],{},[198,726,727,728,732],{},"If a slotted element ",[729,730,731],"strong",{},"must"," receive interaction (e.g. a logo link, a watermark with a tooltip), enable pointer events on that specific element:",[230,734,736],{"className":457,"code":735,"language":459,"meta":235,"style":235},".overlay__logo {\n  pointer-events: auto;\n}\n",[201,737,738,747,759],{"__ignoreMap":235},[239,739,740,742,745],{"class":241,"line":242},[239,741,466],{"class":245},[239,743,744],{"class":469},"overlay__logo",[239,746,472],{"class":245},[239,748,749,752,754,757],{"class":241,"line":275},[239,750,751],{"class":477},"  pointer-events",[239,753,481],{"class":245},[239,755,756],{"class":285}," auto",[239,758,540],{"class":245},[239,760,761],{"class":241,"line":310},[239,762,514],{"class":245},[198,764,765,766,769],{},"Keep this rare. Interactive controls (close buttons, action bars) usually belong inside ",[201,767,768],{},"\u003CModalContent>"," so they participate in focus management and don't compete with the click-outside-to-close behavior.",[225,771,773],{"id":772},"data-attributes-for-styling","Data attributes for styling",[775,776,777,790],"table",{},[778,779,780],"thead",{},[781,782,783,787],"tr",{},[784,785,786],"th",{},"Attribute",[784,788,789],{},"When present",[791,792,793,803,813,823],"tbody",{},[781,794,795,800],{},[796,797,798],"td",{},[201,799,717],{},[796,801,802],{},"Always — the anchor for CSS rules",[781,804,805,810],{},[796,806,807],{},[201,808,809],{},"data-state=\"open\"",[796,811,812],{},"Group has at least one active modal",[781,814,815,820],{},[796,816,817],{},[201,818,819],{},"data-state=\"closed\"",[796,821,822],{},"Last modal in the group is exiting",[781,824,825,830],{},[796,826,827],{},[201,828,829],{},"data-instant",[796,831,832,833,836],{},"Topmost modal was opened with ",[201,834,835],{},"instantEnter"," — overlay enter animation should be suppressed",[230,838,840],{"className":457,"code":839,"language":459,"meta":235,"style":235},"[data-modal-overlay] {\n  background: rgba(0, 0, 0, 0.5);\n  transition: opacity 200ms ease;\n}\n\n[data-modal-overlay][data-state='open'] {\n  opacity: 1;\n}\n\n[data-modal-overlay][data-state='closed'] {\n  opacity: 0;\n}\n",[201,841,842,855,882,900,904,908,933,944,948,952,975,985],{"__ignoreMap":235},[239,843,844,847,850,853],{"class":241,"line":242},[239,845,846],{"class":245},"[",[239,848,849],{"class":253},"data-modal-overlay",[239,851,852],{"class":245},"]",[239,854,472],{"class":245},[239,856,857,859,861,863,865,867,869,871,873,875,877,880],{"class":241,"line":275},[239,858,478],{"class":477},[239,860,481],{"class":245},[239,862,485],{"class":484},[239,864,488],{"class":245},[239,866,492],{"class":491},[239,868,289],{"class":245},[239,870,497],{"class":491},[239,872,289],{"class":245},[239,874,497],{"class":491},[239,876,289],{"class":245},[239,878,879],{"class":491}," 0.5",[239,881,509],{"class":245},[239,883,884,887,889,892,895,898],{"class":241,"line":310},[239,885,886],{"class":477},"  transition",[239,888,481],{"class":245},[239,890,891],{"class":285}," opacity ",[239,893,894],{"class":491},"200ms",[239,896,897],{"class":285}," ease",[239,899,540],{"class":245},[239,901,902],{"class":241,"line":320},[239,903,514],{"class":245},[239,905,906],{"class":241,"line":327},[239,907,324],{"emptyLinePlaceholder":323},[239,909,910,912,914,917,920,922,924,927,929,931],{"class":241,"line":337},[239,911,846],{"class":245},[239,913,849],{"class":253},[239,915,916],{"class":245},"][",[239,918,919],{"class":253},"data-state",[239,921,260],{"class":245},[239,923,565],{"class":245},[239,925,926],{"class":266},"open",[239,928,565],{"class":245},[239,930,852],{"class":245},[239,932,472],{"class":245},[239,934,935,937,939,942],{"class":241,"line":360},[239,936,583],{"class":477},[239,938,481],{"class":245},[239,940,941],{"class":491}," 1",[239,943,540],{"class":245},[239,945,946],{"class":241,"line":384},[239,947,514],{"class":245},[239,949,950],{"class":241,"line":394},[239,951,324],{"emptyLinePlaceholder":323},[239,953,954,956,958,960,962,964,966,969,971,973],{"class":241,"line":593},[239,955,846],{"class":245},[239,957,849],{"class":253},[239,959,916],{"class":245},[239,961,919],{"class":253},[239,963,260],{"class":245},[239,965,565],{"class":245},[239,967,968],{"class":266},"closed",[239,970,565],{"class":245},[239,972,852],{"class":245},[239,974,472],{"class":245},[239,976,977,979,981,983],{"class":241,"line":606},[239,978,583],{"class":477},[239,980,481],{"class":245},[239,982,497],{"class":491},[239,984,540],{"class":245},[239,986,987],{"class":241,"line":611},[239,988,514],{"class":245},[198,990,991,992,994,995,997,998,1000],{},"The package ships a built-in rule that disables the overlay enter animation while ",[201,993,829],{}," is set on ",[201,996,809],{},", so ",[201,999,835],{}," modals don't get a fading backdrop. Exit animations still run normally.",[225,1002,1004],{"id":1003},"per-group-overlays","Per-group overlays",[198,1006,1007,1008,1010,1011,1013],{},"Each ",[201,1009,207],{}," mounts its own ",[201,1012,203],{},". Different groups can have different backdrops, opacities, or animations without conflicting with each other:",[230,1015,1017],{"className":232,"code":1016,"language":234,"meta":235,"style":235},"\u003CModalTarget group=\"default\">\n  \u003CModalOverlay class=\"bg-black\u002F40\" \u002F>\n\u003C\u002FModalTarget>\n\n\u003CModalTarget group=\"confirm\">\n  \u003CModalOverlay class=\"bg-black\u002F70 backdrop-blur-sm\" \u002F>\n\u003C\u002FModalTarget>\n",[201,1018,1019,1037,1042,1050,1054,1073,1078],{"__ignoreMap":235},[239,1020,1021,1023,1025,1027,1029,1031,1033,1035],{"class":241,"line":242},[239,1022,246],{"class":245},[239,1024,343],{"class":249},[239,1026,346],{"class":253},[239,1028,260],{"class":245},[239,1030,263],{"class":245},[239,1032,353],{"class":266},[239,1034,263],{"class":245},[239,1036,272],{"class":245},[239,1038,1039],{"class":241,"line":275},[239,1040,1041],{"class":285},"  \u003CModalOverlay class=\"bg-black\u002F40\" \u002F>\n",[239,1043,1044,1046,1048],{"class":241,"line":310},[239,1045,313],{"class":245},[239,1047,343],{"class":249},[239,1049,272],{"class":245},[239,1051,1052],{"class":241,"line":320},[239,1053,324],{"emptyLinePlaceholder":323},[239,1055,1056,1058,1060,1062,1064,1066,1069,1071],{"class":241,"line":327},[239,1057,246],{"class":245},[239,1059,343],{"class":249},[239,1061,346],{"class":253},[239,1063,260],{"class":245},[239,1065,263],{"class":245},[239,1067,1068],{"class":266},"confirm",[239,1070,263],{"class":245},[239,1072,272],{"class":245},[239,1074,1075],{"class":241,"line":337},[239,1076,1077],{"class":285},"  \u003CModalOverlay class=\"bg-black\u002F70 backdrop-blur-sm\" \u002F>\n",[239,1079,1080,1082,1084],{"class":241,"line":360},[239,1081,313],{"class":245},[239,1083,343],{"class":249},[239,1085,272],{"class":245},[198,1087,1088,1089,1092,1093,1096],{},"See ",[1090,1091,86],"a",{"href":87}," for stacking, ",[201,1094,1095],{},"z-index",", and per-target overrides.",[225,1098,1100],{"id":1099},"errors","Errors",[198,1102,1103,1105,1106,1108],{},[201,1104,203],{}," must be a descendant of ",[201,1107,207],{},". Mounting it standalone throws:",[230,1110,1115],{"className":1111,"code":1113,"language":1114},[1112],"language-text","[@kolirt\u002Fvue-modal] \u003CModalOverlay> must be used inside \u003CModalTarget>.\n","text",[201,1116,1113],{"__ignoreMap":235},[1118,1119,1120],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":235,"searchDepth":275,"depth":275,"links":1122},[1123,1124,1125,1126,1127,1128],{"id":227,"depth":275,"text":228},{"id":409,"depth":275,"text":410},{"id":710,"depth":275,"text":711},{"id":772,"depth":275,"text":773},{"id":1003,"depth":275,"text":1004},{"id":1099,"depth":275,"text":1100},"Customize the dimming layer — slot content, pointer behavior, per-group overlays, and the data attributes used for styling and animations.","md",null,{},{"title":90,"description":1129},"uJjwfFM0R5y2CsMkeuEDmKe67aBxs7QqH5zT25gKPXA",[1136,1138],{"title":86,"path":87,"stem":88,"description":1137,"children":-1},"When and how to use more than one ModalTarget — visual layering, scroll-lock policies, separate DOM positions.",{"title":94,"path":95,"stem":96,"description":1139,"children":-1},"Keep heavy modal components out of the initial bundle with defineAsyncComponent.",1779523619545]