[{"data":1,"prerenderedAt":1021},["ShallowReactive",2],{"navigation_docs":3,"-guide-multiple-targets":188,"-guide-multiple-targets-surround":1016},[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":86,"body":190,"description":1010,"extension":1011,"links":1012,"meta":1013,"navigation":357,"path":87,"seo":1014,"stem":88,"__hash__":1015},"docs\u002F4.guide\u002F08.multiple-targets.md",{"type":191,"value":192,"toc":1003},"minimark",[193,197,206,211,258,262,529,542,635,639,649,772,782,827,831,851,858,919,923,929,999],[194,195,86],"h1",{"id":196},"multiple-targets",[198,199,200,201,205],"p",{},"Each group needs exactly one ",[202,203,204],"code",{},"\u003CModalTarget group=\"...\">",". Mounting multiple targets — one per group — lets each group render in a different DOM location, with its own overlay and behavior.",[207,208,210],"h2",{"id":209},"why-use-multiple-targets","Why use multiple targets",[212,213,214,227],"table",{},[215,216,217],"thead",{},[218,219,220,224],"tr",{},[221,222,223],"th",{},"Use case",[221,225,226],{},"Benefit",[228,229,230,239,247],"tbody",{},[218,231,232,236],{},[233,234,235],"td",{},"Confirm dialog above a form",[233,237,238],{},"Distinct overlay, can disable Esc\u002Foverlay-click independently",[218,240,241,244],{},[233,242,243],{},"Side panel",[233,245,246],{},"Non-modal mode, no body scroll lock, mounts inside a sidebar",[218,248,249,252],{},[233,250,251],{},"Different overlay colors \u002F animations per group",[233,253,254,255],{},"Each target has its own ",[202,256,257],{},"\u003CModalOverlay>",[207,259,261],{"id":260},"basic-multi-target-setup","Basic multi-target setup",[263,264,270],"pre",{"className":265,"code":266,"filename":267,"language":268,"meta":269,"style":269},"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  \u003CRouterView \u002F>\n\n  \u003C!-- Default modals -->\n  \u003CModalTarget group=\"default\">\n    \u003CModalOverlay class=\"overlay overlay--default\" \u002F>\n  \u003C\u002FModalTarget>\n\n  \u003C!-- Confirm dialogs: darker overlay, Esc disabled -->\n  \u003CModalTarget group=\"confirm\" :disable-close-on-escape=\"true\">\n    \u003CModalOverlay class=\"overlay overlay--strict\" \u002F>\n  \u003C\u002FModalTarget>\n\u003C\u002Ftemplate>\n","App.vue","vue","",[202,271,272,307,342,352,359,369,381,386,393,415,438,448,453,459,491,511,520],{"__ignoreMap":269},[273,274,277,281,285,289,292,295,298,302,304],"span",{"class":275,"line":276},"line",1,[273,278,280],{"class":279},"sMK4o","\u003C",[273,282,284],{"class":283},"swJcz","script",[273,286,288],{"class":287},"spNyl"," setup",[273,290,291],{"class":287}," lang",[273,293,294],{"class":279},"=",[273,296,297],{"class":279},"\"",[273,299,301],{"class":300},"sfazB","ts",[273,303,297],{"class":279},[273,305,306],{"class":279},">\n",[273,308,310,314,317,321,324,327,330,333,336,339],{"class":275,"line":309},2,[273,311,313],{"class":312},"s7zQu","import",[273,315,316],{"class":279}," {",[273,318,320],{"class":319},"sTEyZ"," ModalOverlay",[273,322,323],{"class":279},",",[273,325,326],{"class":319}," ModalTarget",[273,328,329],{"class":279}," }",[273,331,332],{"class":312}," from",[273,334,335],{"class":279}," '",[273,337,338],{"class":300},"@kolirt\u002Fvue-modal",[273,340,341],{"class":279},"'\n",[273,343,345,348,350],{"class":275,"line":344},3,[273,346,347],{"class":279},"\u003C\u002F",[273,349,284],{"class":283},[273,351,306],{"class":279},[273,353,355],{"class":275,"line":354},4,[273,356,358],{"emptyLinePlaceholder":357},true,"\n",[273,360,362,364,367],{"class":275,"line":361},5,[273,363,280],{"class":279},[273,365,366],{"class":283},"template",[273,368,306],{"class":279},[273,370,372,375,378],{"class":275,"line":371},6,[273,373,374],{"class":279},"  \u003C",[273,376,377],{"class":283},"RouterView",[273,379,380],{"class":279}," \u002F>\n",[273,382,384],{"class":275,"line":383},7,[273,385,358],{"emptyLinePlaceholder":357},[273,387,389],{"class":275,"line":388},8,[273,390,392],{"class":391},"sHwdD","  \u003C!-- Default modals -->\n",[273,394,396,398,401,404,406,408,411,413],{"class":275,"line":395},9,[273,397,374],{"class":279},[273,399,400],{"class":283},"ModalTarget",[273,402,403],{"class":287}," group",[273,405,294],{"class":279},[273,407,297],{"class":279},[273,409,410],{"class":300},"default",[273,412,297],{"class":279},[273,414,306],{"class":279},[273,416,418,421,424,427,429,431,434,436],{"class":275,"line":417},10,[273,419,420],{"class":279},"    \u003C",[273,422,423],{"class":283},"ModalOverlay",[273,425,426],{"class":287}," class",[273,428,294],{"class":279},[273,430,297],{"class":279},[273,432,433],{"class":300},"overlay overlay--default",[273,435,297],{"class":279},[273,437,380],{"class":279},[273,439,441,444,446],{"class":275,"line":440},11,[273,442,443],{"class":279},"  \u003C\u002F",[273,445,400],{"class":283},[273,447,306],{"class":279},[273,449,451],{"class":275,"line":450},12,[273,452,358],{"emptyLinePlaceholder":357},[273,454,456],{"class":275,"line":455},13,[273,457,458],{"class":391},"  \u003C!-- Confirm dialogs: darker overlay, Esc disabled -->\n",[273,460,462,464,466,468,470,472,475,477,480,482,484,487,489],{"class":275,"line":461},14,[273,463,374],{"class":279},[273,465,400],{"class":283},[273,467,403],{"class":287},[273,469,294],{"class":279},[273,471,297],{"class":279},[273,473,474],{"class":300},"confirm",[273,476,297],{"class":279},[273,478,479],{"class":287}," :disable-close-on-escape",[273,481,294],{"class":279},[273,483,297],{"class":279},[273,485,486],{"class":300},"true",[273,488,297],{"class":279},[273,490,306],{"class":279},[273,492,494,496,498,500,502,504,507,509],{"class":275,"line":493},15,[273,495,420],{"class":279},[273,497,423],{"class":283},[273,499,426],{"class":287},[273,501,294],{"class":279},[273,503,297],{"class":279},[273,505,506],{"class":300},"overlay overlay--strict",[273,508,297],{"class":279},[273,510,380],{"class":279},[273,512,514,516,518],{"class":275,"line":513},16,[273,515,443],{"class":279},[273,517,400],{"class":283},[273,519,306],{"class":279},[273,521,523,525,527],{"class":275,"line":522},17,[273,524,347],{"class":279},[273,526,366],{"class":283},[273,528,306],{"class":279},[198,530,531,532,534,535,537,538,541],{},"The ",[202,533,474],{}," target is mounted after ",[202,536,410],{}," in the DOM, so it paints on top by default. Add explicit ",[202,539,540],{},"z-index"," if your layout demands it:",[263,543,545],{"className":265,"code":544,"language":268,"meta":269,"style":269},"\u003CModalTarget group=\"default\" style=\"z-index: 100\">…\u003C\u002FModalTarget>\n\u003CModalTarget group=\"confirm\" style=\"z-index: 200\">…\u003C\u002FModalTarget>\n",[202,546,547,594],{"__ignoreMap":269},[273,548,549,551,553,555,557,559,561,563,566,568,570,573,576,580,582,585,588,590,592],{"class":275,"line":276},[273,550,280],{"class":279},[273,552,400],{"class":283},[273,554,403],{"class":287},[273,556,294],{"class":279},[273,558,297],{"class":279},[273,560,410],{"class":300},[273,562,297],{"class":279},[273,564,565],{"class":287}," style",[273,567,294],{"class":279},[273,569,297],{"class":279},[273,571,540],{"class":572},"sqsOY",[273,574,575],{"class":279},":",[273,577,579],{"class":578},"sbssI"," 100",[273,581,297],{"class":279},[273,583,584],{"class":279},">",[273,586,587],{"class":319},"…",[273,589,347],{"class":279},[273,591,400],{"class":283},[273,593,306],{"class":279},[273,595,596,598,600,602,604,606,608,610,612,614,616,618,620,623,625,627,629,631,633],{"class":275,"line":309},[273,597,280],{"class":279},[273,599,400],{"class":283},[273,601,403],{"class":287},[273,603,294],{"class":279},[273,605,297],{"class":279},[273,607,474],{"class":300},[273,609,297],{"class":279},[273,611,565],{"class":287},[273,613,294],{"class":279},[273,615,297],{"class":279},[273,617,540],{"class":572},[273,619,575],{"class":279},[273,621,622],{"class":578}," 200",[273,624,297],{"class":279},[273,626,584],{"class":279},[273,628,587],{"class":319},[273,630,347],{"class":279},[273,632,400],{"class":283},[273,634,306],{"class":279},[207,636,638],{"id":637},"different-dom-positions","Different DOM positions",[198,640,641,642,644,645,648],{},"Targets don't have to live in ",[202,643,267],{},". Mount a ",[202,646,647],{},"panel"," target inside a sidebar component:",[263,650,653],{"className":265,"code":651,"filename":652,"language":268,"meta":269,"style":269},"\u003Ctemplate>\n  \u003Caside class=\"sidebar\">\n    \u003Cnav>…\u003C\u002Fnav>\n\n    \u003CModalTarget\n      group=\"panel\"\n      :enable-interact-outside=\"true\"\n      :disable-lock-body-scroll=\"true\"\n    \u002F>\n  \u003C\u002Faside>\n\u003C\u002Ftemplate>\n","Sidebar.vue",[202,654,655,663,683,700,704,711,725,738,751,756,764],{"__ignoreMap":269},[273,656,657,659,661],{"class":275,"line":276},[273,658,280],{"class":279},[273,660,366],{"class":283},[273,662,306],{"class":279},[273,664,665,667,670,672,674,676,679,681],{"class":275,"line":309},[273,666,374],{"class":279},[273,668,669],{"class":283},"aside",[273,671,426],{"class":287},[273,673,294],{"class":279},[273,675,297],{"class":279},[273,677,678],{"class":300},"sidebar",[273,680,297],{"class":279},[273,682,306],{"class":279},[273,684,685,687,690,692,694,696,698],{"class":275,"line":344},[273,686,420],{"class":279},[273,688,689],{"class":283},"nav",[273,691,584],{"class":279},[273,693,587],{"class":319},[273,695,347],{"class":279},[273,697,689],{"class":283},[273,699,306],{"class":279},[273,701,702],{"class":275,"line":354},[273,703,358],{"emptyLinePlaceholder":357},[273,705,706,708],{"class":275,"line":361},[273,707,420],{"class":279},[273,709,710],{"class":283},"ModalTarget\n",[273,712,713,716,718,720,722],{"class":275,"line":371},[273,714,715],{"class":287},"      group",[273,717,294],{"class":279},[273,719,297],{"class":279},[273,721,647],{"class":300},[273,723,724],{"class":279},"\"\n",[273,726,727,730,732,734,736],{"class":275,"line":383},[273,728,729],{"class":287},"      :enable-interact-outside",[273,731,294],{"class":279},[273,733,297],{"class":279},[273,735,486],{"class":300},[273,737,724],{"class":279},[273,739,740,743,745,747,749],{"class":275,"line":388},[273,741,742],{"class":287},"      :disable-lock-body-scroll",[273,744,294],{"class":279},[273,746,297],{"class":279},[273,748,486],{"class":300},[273,750,724],{"class":279},[273,752,753],{"class":275,"line":395},[273,754,755],{"class":279},"    \u002F>\n",[273,757,758,760,762],{"class":275,"line":417},[273,759,443],{"class":279},[273,761,669],{"class":283},[273,763,306],{"class":279},[273,765,766,768,770],{"class":275,"line":440},[273,767,347],{"class":279},[273,769,366],{"class":283},[273,771,306],{"class":279},[198,773,774,777,778,781],{},[202,775,776],{},"[data-modal-region]"," is ",[202,779,780],{},"position: fixed; inset: 0"," by default. Override that to anchor the target to its parent:",[263,783,787],{"className":784,"code":785,"language":786,"meta":269,"style":269},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".sidebar [data-modal-region] {\n  position: absolute;\n}\n","css",[202,788,789,809,822],{"__ignoreMap":269},[273,790,791,794,797,800,803,806],{"class":275,"line":276},[273,792,793],{"class":279},".",[273,795,678],{"class":796},"sBMFI",[273,798,799],{"class":279}," [",[273,801,802],{"class":287},"data-modal-region",[273,804,805],{"class":279},"]",[273,807,808],{"class":279}," {\n",[273,810,811,814,816,819],{"class":275,"line":309},[273,812,813],{"class":572},"  position",[273,815,575],{"class":279},[273,817,818],{"class":319}," absolute",[273,820,821],{"class":279},";\n",[273,823,824],{"class":275,"line":344},[273,825,826],{"class":279},"}\n",[207,828,830],{"id":829},"esc-and-overlay-click-use-the-global-topmost","Esc and overlay-click use the global topmost",[198,832,833,834,838,839,841,842,844,845,847,848,850],{},"Even with multiple targets, the package keeps one global stack. Esc closes the ",[835,836,837],"strong",{},"globally topmost"," modal — not the topmost per-target. With a ",[202,840,410],{}," modal underneath a ",[202,843,474],{},", pressing Esc closes the ",[202,846,474],{}," first; once it's gone, the ",[202,849,410],{}," modal handles Esc again.",[198,852,853,854,857],{},"You can disable Esc per group via ",[202,855,856],{},"createModal({ groups })"," or per target via the prop:",[263,859,862],{"className":860,"code":861,"language":301,"meta":269,"style":269},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","createModal({\n  groups: {\n    confirm: { disableCloseOnEscape: true }\n  }\n})\n",[202,863,864,876,885,906,911],{"__ignoreMap":269},[273,865,866,870,873],{"class":275,"line":276},[273,867,869],{"class":868},"s2Zo4","createModal",[273,871,872],{"class":319},"(",[273,874,875],{"class":279},"{\n",[273,877,878,881,883],{"class":275,"line":309},[273,879,880],{"class":283},"  groups",[273,882,575],{"class":279},[273,884,808],{"class":279},[273,886,887,890,892,894,897,899,903],{"class":275,"line":344},[273,888,889],{"class":283},"    confirm",[273,891,575],{"class":279},[273,893,316],{"class":279},[273,895,896],{"class":283}," disableCloseOnEscape",[273,898,575],{"class":279},[273,900,902],{"class":901},"sfNiH"," true",[273,904,905],{"class":279}," }\n",[273,907,908],{"class":275,"line":354},[273,909,910],{"class":279},"  }\n",[273,912,913,916],{"class":275,"line":361},[273,914,915],{"class":279},"}",[273,917,918],{"class":319},")\n",[207,920,922],{"id":921},"per-target-overrides","Per-target overrides",[198,924,925,928],{},[202,926,927],{},"\u003CModalTarget>"," props override the registered group config for that specific mount point — useful when you want one group to behave differently in one spot:",[263,930,932],{"className":265,"code":931,"language":268,"meta":269,"style":269},"\u003C!-- Use the registered confirm config -->\n\u003CModalTarget group=\"confirm\" \u002F>\n\n\u003C!-- Same group, but Esc re-enabled here -->\n\u003CModalTarget group=\"confirm\" :disable-close-on-escape=\"false\" \u002F>\n",[202,933,934,939,957,961,966],{"__ignoreMap":269},[273,935,936],{"class":275,"line":276},[273,937,938],{"class":391},"\u003C!-- Use the registered confirm config -->\n",[273,940,941,943,945,947,949,951,953,955],{"class":275,"line":309},[273,942,280],{"class":279},[273,944,400],{"class":283},[273,946,403],{"class":287},[273,948,294],{"class":279},[273,950,297],{"class":279},[273,952,474],{"class":300},[273,954,297],{"class":279},[273,956,380],{"class":279},[273,958,959],{"class":275,"line":344},[273,960,358],{"emptyLinePlaceholder":357},[273,962,963],{"class":275,"line":354},[273,964,965],{"class":391},"\u003C!-- Same group, but Esc re-enabled here -->\n",[273,967,968,970,972,974,976,978,980,982,985,988,990,992,995,997],{"class":275,"line":361},[273,969,280],{"class":279},[273,971,400],{"class":283},[273,973,403],{"class":287},[273,975,294],{"class":279},[273,977,297],{"class":279},[273,979,474],{"class":300},[273,981,297],{"class":279},[273,983,984],{"class":279}," :",[273,986,987],{"class":287},"disable-close-on-escape",[273,989,294],{"class":279},[273,991,297],{"class":279},[273,993,994],{"class":901},"false",[273,996,297],{"class":279},[273,998,380],{"class":279},[1000,1001,1002],"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 pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":269,"searchDepth":309,"depth":309,"links":1004},[1005,1006,1007,1008,1009],{"id":209,"depth":309,"text":210},{"id":260,"depth":309,"text":261},{"id":637,"depth":309,"text":638},{"id":829,"depth":309,"text":830},{"id":921,"depth":309,"text":922},"When and how to use more than one ModalTarget — visual layering, scroll-lock policies, separate DOM positions.","md",null,{},{"title":86,"description":1010},"nYXx1a0NhlVXnLOwpAyWDkzshCFAUStKlBbZzbE26Zc",[1017,1019],{"title":82,"path":83,"stem":84,"description":1018,"children":-1},"Full reference for useModalContext — id, group, isTopmost, effectiveOptions, close, confirm, onBeforeClose.",{"title":90,"path":91,"stem":92,"description":1020,"children":-1},"Customize the dimming layer — slot content, pointer behavior, per-group overlays, and the data attributes used for styling and animations.",1779523619283]