[{"data":1,"prerenderedAt":1313},["ShallowReactive",2],{"navigation_docs":3,"-guide-writing-a-modal":188,"-guide-writing-a-modal-surround":1308},[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":58,"body":190,"description":1302,"extension":1303,"links":1304,"meta":1305,"navigation":369,"path":59,"seo":1306,"stem":60,"__hash__":1307},"docs\u002F4.guide\u002F01.writing-a-modal.md",{"type":191,"value":192,"toc":1296},"minimark",[193,197,218,223,233,249,253,1008,1011,1148,1159,1167,1283,1293],[194,195,58],"h1",{"id":196},"writing-a-modal",[198,199,200,201,205,206,209,210,213,214,217],"p",{},"A modal is a regular Vue SFC. Wrap your markup in ",[202,203,204],"code",{},"\u003CModalRoot>"," + ",[202,207,208],{},"\u003CModalContent>",", then use ",[202,211,212],{},"useModalContext\u003CT>()"," to resolve or reject the promise returned by ",[202,215,216],{},"openModal",".",[219,220,222],"h2",{"id":221},"required-structure","Required structure",[224,225,230],"pre",{"className":226,"code":228,"language":229},[227],"language-text","\u003CModalRoot>            ← dialog root; manages presence, ARIA, events\n  \u003CModalContent>       ← visible card; drives data-state animations\n    \u003CModalTitle>       ← labels the dialog\n    \u003CModalDescription> ← describes the dialog\n    …content…\n  \u003C\u002FModalContent>\n\u003C\u002FModalRoot>\n","text",[202,231,228],{"__ignoreMap":232},"",[198,234,235,237,238,242,243,245,246,248],{},[202,236,204],{}," ",[239,240,241],"strong",{},"must"," contain a ",[202,244,208],{},". The exit-animation wait lives inside ",[202,247,208],{}," — without it, the modal hangs in the DOM forever.",[219,250,252],{"id":251},"complete-example","Complete example",[224,254,259],{"className":255,"code":256,"filename":257,"language":258,"meta":232,"style":232},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport {\n  ModalContent,\n  ModalDescription,\n  ModalRoot,\n  ModalTitle,\n  useModalContext\n} from '@kolirt\u002Fvue-modal'\n\ndefineOptions({ modalGroup: 'default' })\n\nconst props = defineProps\u003C{\n  title: string\n  message: string\n}>()\n\nconst { close, confirm } = useModalContext\u003Cboolean>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CModalRoot class=\"root\">\n    \u003CModalContent class=\"card\">\n      \u003CModalTitle>{{ props.title }}\u003C\u002FModalTitle>\n      \u003CModalDescription>{{ props.message }}\u003C\u002FModalDescription>\n\n      \u003Cdiv class=\"actions\">\n        \u003Cbutton @click=\"close()\">Cancel\u003C\u002Fbutton>\n        \u003Cbutton @click=\"confirm(true)\">OK\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FModalContent>\n  \u003C\u002FModalRoot>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.root {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 1rem;\n}\n.card {\n  width: 100%;\n  max-width: 24rem;\n  padding: 1.5rem;\n  border-radius: 0.5rem;\n  background: white;\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n}\n.actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  margin-top: 1.5rem;\n}\n\u003C\u002Fstyle>\n","ConfirmDialog.vue","vue",[202,260,261,296,306,316,324,332,340,346,364,371,404,409,426,438,448,457,462,497,507,512,522,545,567,587,606,611,632,664,693,703,713,723,732,737,750,759,774,787,799,813,819,828,841,854,866,879,892,933,938,947,958,970,982,994,999],{"__ignoreMap":232},[262,263,266,270,274,278,281,284,287,291,293],"span",{"class":264,"line":265},"line",1,[262,267,269],{"class":268},"sMK4o","\u003C",[262,271,273],{"class":272},"swJcz","script",[262,275,277],{"class":276},"spNyl"," setup",[262,279,280],{"class":276}," lang",[262,282,283],{"class":268},"=",[262,285,286],{"class":268},"\"",[262,288,290],{"class":289},"sfazB","ts",[262,292,286],{"class":268},[262,294,295],{"class":268},">\n",[262,297,299,303],{"class":264,"line":298},2,[262,300,302],{"class":301},"s7zQu","import",[262,304,305],{"class":268}," {\n",[262,307,309,313],{"class":264,"line":308},3,[262,310,312],{"class":311},"sTEyZ","  ModalContent",[262,314,315],{"class":268},",\n",[262,317,319,322],{"class":264,"line":318},4,[262,320,321],{"class":311},"  ModalDescription",[262,323,315],{"class":268},[262,325,327,330],{"class":264,"line":326},5,[262,328,329],{"class":311},"  ModalRoot",[262,331,315],{"class":268},[262,333,335,338],{"class":264,"line":334},6,[262,336,337],{"class":311},"  ModalTitle",[262,339,315],{"class":268},[262,341,343],{"class":264,"line":342},7,[262,344,345],{"class":311},"  useModalContext\n",[262,347,349,352,355,358,361],{"class":264,"line":348},8,[262,350,351],{"class":268},"}",[262,353,354],{"class":301}," from",[262,356,357],{"class":268}," '",[262,359,360],{"class":289},"@kolirt\u002Fvue-modal",[262,362,363],{"class":268},"'\n",[262,365,367],{"class":264,"line":366},9,[262,368,370],{"emptyLinePlaceholder":369},true,"\n",[262,372,374,378,381,384,387,390,392,395,398,401],{"class":264,"line":373},10,[262,375,377],{"class":376},"s2Zo4","defineOptions",[262,379,380],{"class":311},"(",[262,382,383],{"class":268},"{",[262,385,386],{"class":272}," modalGroup",[262,388,389],{"class":268},":",[262,391,357],{"class":268},[262,393,394],{"class":289},"default",[262,396,397],{"class":268},"'",[262,399,400],{"class":268}," }",[262,402,403],{"class":311},")\n",[262,405,407],{"class":264,"line":406},11,[262,408,370],{"emptyLinePlaceholder":369},[262,410,412,415,418,420,423],{"class":264,"line":411},12,[262,413,414],{"class":276},"const",[262,416,417],{"class":311}," props ",[262,419,283],{"class":268},[262,421,422],{"class":376}," defineProps",[262,424,425],{"class":268},"\u003C{\n",[262,427,429,432,434],{"class":264,"line":428},13,[262,430,431],{"class":272},"  title",[262,433,389],{"class":268},[262,435,437],{"class":436},"sBMFI"," string\n",[262,439,441,444,446],{"class":264,"line":440},14,[262,442,443],{"class":272},"  message",[262,445,389],{"class":268},[262,447,437],{"class":436},[262,449,451,454],{"class":264,"line":450},15,[262,452,453],{"class":268},"}>",[262,455,456],{"class":311},"()\n",[262,458,460],{"class":264,"line":459},16,[262,461,370],{"emptyLinePlaceholder":369},[262,463,465,467,470,473,476,479,481,484,487,489,492,495],{"class":264,"line":464},17,[262,466,414],{"class":276},[262,468,469],{"class":268}," {",[262,471,472],{"class":311}," close",[262,474,475],{"class":268},",",[262,477,478],{"class":311}," confirm ",[262,480,351],{"class":268},[262,482,483],{"class":268}," =",[262,485,486],{"class":376}," useModalContext",[262,488,269],{"class":268},[262,490,491],{"class":436},"boolean",[262,493,494],{"class":268},">",[262,496,456],{"class":311},[262,498,500,503,505],{"class":264,"line":499},18,[262,501,502],{"class":268},"\u003C\u002F",[262,504,273],{"class":272},[262,506,295],{"class":268},[262,508,510],{"class":264,"line":509},19,[262,511,370],{"emptyLinePlaceholder":369},[262,513,515,517,520],{"class":264,"line":514},20,[262,516,269],{"class":268},[262,518,519],{"class":272},"template",[262,521,295],{"class":268},[262,523,525,528,531,534,536,538,541,543],{"class":264,"line":524},21,[262,526,527],{"class":268},"  \u003C",[262,529,530],{"class":272},"ModalRoot",[262,532,533],{"class":276}," class",[262,535,283],{"class":268},[262,537,286],{"class":268},[262,539,540],{"class":289},"root",[262,542,286],{"class":268},[262,544,295],{"class":268},[262,546,548,551,554,556,558,560,563,565],{"class":264,"line":547},22,[262,549,550],{"class":268},"    \u003C",[262,552,553],{"class":272},"ModalContent",[262,555,533],{"class":276},[262,557,283],{"class":268},[262,559,286],{"class":268},[262,561,562],{"class":289},"card",[262,564,286],{"class":268},[262,566,295],{"class":268},[262,568,570,573,576,578,581,583,585],{"class":264,"line":569},23,[262,571,572],{"class":268},"      \u003C",[262,574,575],{"class":272},"ModalTitle",[262,577,494],{"class":268},[262,579,580],{"class":311},"{{ props.title }}",[262,582,502],{"class":268},[262,584,575],{"class":272},[262,586,295],{"class":268},[262,588,590,592,595,597,600,602,604],{"class":264,"line":589},24,[262,591,572],{"class":268},[262,593,594],{"class":272},"ModalDescription",[262,596,494],{"class":268},[262,598,599],{"class":311},"{{ props.message }}",[262,601,502],{"class":268},[262,603,594],{"class":272},[262,605,295],{"class":268},[262,607,609],{"class":264,"line":608},25,[262,610,370],{"emptyLinePlaceholder":369},[262,612,614,616,619,621,623,625,628,630],{"class":264,"line":613},26,[262,615,572],{"class":268},[262,617,618],{"class":272},"div",[262,620,533],{"class":276},[262,622,283],{"class":268},[262,624,286],{"class":268},[262,626,627],{"class":289},"actions",[262,629,286],{"class":268},[262,631,295],{"class":268},[262,633,635,638,641,644,646,648,651,653,655,658,660,662],{"class":264,"line":634},27,[262,636,637],{"class":268},"        \u003C",[262,639,640],{"class":272},"button",[262,642,643],{"class":276}," @click",[262,645,283],{"class":268},[262,647,286],{"class":268},[262,649,650],{"class":289},"close()",[262,652,286],{"class":268},[262,654,494],{"class":268},[262,656,657],{"class":311},"Cancel",[262,659,502],{"class":268},[262,661,640],{"class":272},[262,663,295],{"class":268},[262,665,667,669,671,673,675,677,680,682,684,687,689,691],{"class":264,"line":666},28,[262,668,637],{"class":268},[262,670,640],{"class":272},[262,672,643],{"class":276},[262,674,283],{"class":268},[262,676,286],{"class":268},[262,678,679],{"class":289},"confirm(true)",[262,681,286],{"class":268},[262,683,494],{"class":268},[262,685,686],{"class":311},"OK",[262,688,502],{"class":268},[262,690,640],{"class":272},[262,692,295],{"class":268},[262,694,696,699,701],{"class":264,"line":695},29,[262,697,698],{"class":268},"      \u003C\u002F",[262,700,618],{"class":272},[262,702,295],{"class":268},[262,704,706,709,711],{"class":264,"line":705},30,[262,707,708],{"class":268},"    \u003C\u002F",[262,710,553],{"class":272},[262,712,295],{"class":268},[262,714,716,719,721],{"class":264,"line":715},31,[262,717,718],{"class":268},"  \u003C\u002F",[262,720,530],{"class":272},[262,722,295],{"class":268},[262,724,726,728,730],{"class":264,"line":725},32,[262,727,502],{"class":268},[262,729,519],{"class":272},[262,731,295],{"class":268},[262,733,735],{"class":264,"line":734},33,[262,736,370],{"emptyLinePlaceholder":369},[262,738,740,742,745,748],{"class":264,"line":739},34,[262,741,269],{"class":268},[262,743,744],{"class":272},"style",[262,746,747],{"class":276}," scoped",[262,749,295],{"class":268},[262,751,753,755,757],{"class":264,"line":752},35,[262,754,217],{"class":268},[262,756,540],{"class":436},[262,758,305],{"class":268},[262,760,762,766,768,771],{"class":264,"line":761},36,[262,763,765],{"class":764},"sqsOY","  display",[262,767,389],{"class":268},[262,769,770],{"class":311}," flex",[262,772,773],{"class":268},";\n",[262,775,777,780,782,785],{"class":264,"line":776},37,[262,778,779],{"class":764},"  justify-content",[262,781,389],{"class":268},[262,783,784],{"class":311}," center",[262,786,773],{"class":268},[262,788,790,793,795,797],{"class":264,"line":789},38,[262,791,792],{"class":764},"  align-items",[262,794,389],{"class":268},[262,796,784],{"class":311},[262,798,773],{"class":268},[262,800,802,805,807,811],{"class":264,"line":801},39,[262,803,804],{"class":764},"  padding",[262,806,389],{"class":268},[262,808,810],{"class":809},"sbssI"," 1rem",[262,812,773],{"class":268},[262,814,816],{"class":264,"line":815},40,[262,817,818],{"class":268},"}\n",[262,820,822,824,826],{"class":264,"line":821},41,[262,823,217],{"class":268},[262,825,562],{"class":436},[262,827,305],{"class":268},[262,829,831,834,836,839],{"class":264,"line":830},42,[262,832,833],{"class":764},"  width",[262,835,389],{"class":268},[262,837,838],{"class":809}," 100%",[262,840,773],{"class":268},[262,842,844,847,849,852],{"class":264,"line":843},43,[262,845,846],{"class":764},"  max-width",[262,848,389],{"class":268},[262,850,851],{"class":809}," 24rem",[262,853,773],{"class":268},[262,855,857,859,861,864],{"class":264,"line":856},44,[262,858,804],{"class":764},[262,860,389],{"class":268},[262,862,863],{"class":809}," 1.5rem",[262,865,773],{"class":268},[262,867,869,872,874,877],{"class":264,"line":868},45,[262,870,871],{"class":764},"  border-radius",[262,873,389],{"class":268},[262,875,876],{"class":809}," 0.5rem",[262,878,773],{"class":268},[262,880,882,885,887,890],{"class":264,"line":881},46,[262,883,884],{"class":764},"  background",[262,886,389],{"class":268},[262,888,889],{"class":311}," white",[262,891,773],{"class":268},[262,893,895,898,900,903,906,909,912,914,917,919,921,923,925,927,930],{"class":264,"line":894},47,[262,896,897],{"class":764},"  box-shadow",[262,899,389],{"class":268},[262,901,902],{"class":809}," 0",[262,904,905],{"class":809}," 10px",[262,907,908],{"class":809}," 30px",[262,910,911],{"class":376}," rgba",[262,913,380],{"class":268},[262,915,916],{"class":809},"0",[262,918,475],{"class":268},[262,920,902],{"class":809},[262,922,475],{"class":268},[262,924,902],{"class":809},[262,926,475],{"class":268},[262,928,929],{"class":809}," 0.2",[262,931,932],{"class":268},");\n",[262,934,936],{"class":264,"line":935},48,[262,937,818],{"class":268},[262,939,941,943,945],{"class":264,"line":940},49,[262,942,217],{"class":268},[262,944,627],{"class":436},[262,946,305],{"class":268},[262,948,950,952,954,956],{"class":264,"line":949},50,[262,951,765],{"class":764},[262,953,389],{"class":268},[262,955,770],{"class":311},[262,957,773],{"class":268},[262,959,961,963,965,968],{"class":264,"line":960},51,[262,962,779],{"class":764},[262,964,389],{"class":268},[262,966,967],{"class":311}," flex-end",[262,969,773],{"class":268},[262,971,973,976,978,980],{"class":264,"line":972},52,[262,974,975],{"class":764},"  gap",[262,977,389],{"class":268},[262,979,876],{"class":809},[262,981,773],{"class":268},[262,983,985,988,990,992],{"class":264,"line":984},53,[262,986,987],{"class":764},"  margin-top",[262,989,389],{"class":268},[262,991,863],{"class":809},[262,993,773],{"class":268},[262,995,997],{"class":264,"line":996},54,[262,998,818],{"class":268},[262,1000,1002,1004,1006],{"class":264,"line":1001},55,[262,1003,502],{"class":268},[262,1005,744],{"class":272},[262,1007,295],{"class":268},[198,1009,1010],{},"Open it from anywhere:",[224,1012,1015],{"className":1013,"code":1014,"language":290,"meta":232,"style":232},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { openModal } from '@kolirt\u002Fvue-modal'\nimport ConfirmDialog from '.\u002FConfirmDialog.vue'\n\nconst ok = await openModal\u003Cboolean>(ConfirmDialog, {\n  props: { title: 'Delete?', message: 'This cannot be undone.' }\n}).catch(() => false)\n",[202,1016,1017,1036,1053,1057,1084,1122],{"__ignoreMap":232},[262,1018,1019,1021,1023,1026,1028,1030,1032,1034],{"class":264,"line":265},[262,1020,302],{"class":301},[262,1022,469],{"class":268},[262,1024,1025],{"class":311}," openModal",[262,1027,400],{"class":268},[262,1029,354],{"class":301},[262,1031,357],{"class":268},[262,1033,360],{"class":289},[262,1035,363],{"class":268},[262,1037,1038,1040,1043,1046,1048,1051],{"class":264,"line":298},[262,1039,302],{"class":301},[262,1041,1042],{"class":311}," ConfirmDialog ",[262,1044,1045],{"class":301},"from",[262,1047,357],{"class":268},[262,1049,1050],{"class":289},".\u002FConfirmDialog.vue",[262,1052,363],{"class":268},[262,1054,1055],{"class":264,"line":308},[262,1056,370],{"emptyLinePlaceholder":369},[262,1058,1059,1061,1064,1066,1069,1071,1073,1075,1077,1080,1082],{"class":264,"line":318},[262,1060,414],{"class":276},[262,1062,1063],{"class":311}," ok ",[262,1065,283],{"class":268},[262,1067,1068],{"class":301}," await",[262,1070,1025],{"class":376},[262,1072,269],{"class":268},[262,1074,491],{"class":436},[262,1076,494],{"class":268},[262,1078,1079],{"class":311},"(ConfirmDialog",[262,1081,475],{"class":268},[262,1083,305],{"class":268},[262,1085,1086,1089,1091,1093,1096,1098,1100,1103,1105,1107,1110,1112,1114,1117,1119],{"class":264,"line":326},[262,1087,1088],{"class":272},"  props",[262,1090,389],{"class":268},[262,1092,469],{"class":268},[262,1094,1095],{"class":272}," title",[262,1097,389],{"class":268},[262,1099,357],{"class":268},[262,1101,1102],{"class":289},"Delete?",[262,1104,397],{"class":268},[262,1106,475],{"class":268},[262,1108,1109],{"class":272}," message",[262,1111,389],{"class":268},[262,1113,357],{"class":268},[262,1115,1116],{"class":289},"This cannot be undone.",[262,1118,397],{"class":268},[262,1120,1121],{"class":268}," }\n",[262,1123,1124,1126,1129,1131,1134,1136,1139,1142,1146],{"class":264,"line":334},[262,1125,351],{"class":268},[262,1127,1128],{"class":311},")",[262,1130,217],{"class":268},[262,1132,1133],{"class":376},"catch",[262,1135,380],{"class":311},[262,1137,1138],{"class":268},"()",[262,1140,1141],{"class":276}," =>",[262,1143,1145],{"class":1144},"sfNiH"," false",[262,1147,403],{"class":311},[198,1149,1150,1151,1154,1155,1158],{},"Because ",[202,1152,1153],{},"modalGroup: 'default'"," is declared on the component, ",[202,1156,1157],{},"group"," doesn't need to be passed at the call site.",[219,1160,1162,1163,1166],{"id":1161},"what-usemodalcontext-gives-you","What ",[202,1164,1165],{},"useModalContext"," gives you",[224,1168,1170],{"className":1013,"code":1169,"language":290,"meta":232,"style":232},"const {\n  id,               \u002F\u002F number — unique id of this modal instance\n  group,            \u002F\u002F ModalGroup — the group this modal belongs to\n  isClosing,        \u002F\u002F ComputedRef\u003Cboolean> — exit animation in progress\n  isTopmost,        \u002F\u002F ComputedRef\u003Cboolean> — topmost within its group\n  isTopmostGlobal,  \u002F\u002F ComputedRef\u003Cboolean> — topmost across all groups\n  effectiveOptions, \u002F\u002F ComputedRef\u003CModalEffectiveOptions> — merged behavior\n  close,            \u002F\u002F (opts?) => void — reject the promise\n  confirm,          \u002F\u002F (data, opts?) => void — resolve the promise\n  onBeforeClose     \u002F\u002F (handler) => void — register a close guard\n} = useModalContext\u003Cboolean>()\n",[202,1171,1172,1178,1189,1199,1209,1219,1229,1239,1249,1259,1267],{"__ignoreMap":232},[262,1173,1174,1176],{"class":264,"line":265},[262,1175,414],{"class":276},[262,1177,305],{"class":268},[262,1179,1180,1183,1185],{"class":264,"line":298},[262,1181,1182],{"class":311},"  id",[262,1184,475],{"class":268},[262,1186,1188],{"class":1187},"sHwdD","               \u002F\u002F number — unique id of this modal instance\n",[262,1190,1191,1194,1196],{"class":264,"line":308},[262,1192,1193],{"class":311},"  group",[262,1195,475],{"class":268},[262,1197,1198],{"class":1187},"            \u002F\u002F ModalGroup — the group this modal belongs to\n",[262,1200,1201,1204,1206],{"class":264,"line":318},[262,1202,1203],{"class":311},"  isClosing",[262,1205,475],{"class":268},[262,1207,1208],{"class":1187},"        \u002F\u002F ComputedRef\u003Cboolean> — exit animation in progress\n",[262,1210,1211,1214,1216],{"class":264,"line":326},[262,1212,1213],{"class":311},"  isTopmost",[262,1215,475],{"class":268},[262,1217,1218],{"class":1187},"        \u002F\u002F ComputedRef\u003Cboolean> — topmost within its group\n",[262,1220,1221,1224,1226],{"class":264,"line":334},[262,1222,1223],{"class":311},"  isTopmostGlobal",[262,1225,475],{"class":268},[262,1227,1228],{"class":1187},"  \u002F\u002F ComputedRef\u003Cboolean> — topmost across all groups\n",[262,1230,1231,1234,1236],{"class":264,"line":342},[262,1232,1233],{"class":311},"  effectiveOptions",[262,1235,475],{"class":268},[262,1237,1238],{"class":1187}," \u002F\u002F ComputedRef\u003CModalEffectiveOptions> — merged behavior\n",[262,1240,1241,1244,1246],{"class":264,"line":348},[262,1242,1243],{"class":311},"  close",[262,1245,475],{"class":268},[262,1247,1248],{"class":1187},"            \u002F\u002F (opts?) => void — reject the promise\n",[262,1250,1251,1254,1256],{"class":264,"line":366},[262,1252,1253],{"class":311},"  confirm",[262,1255,475],{"class":268},[262,1257,1258],{"class":1187},"          \u002F\u002F (data, opts?) => void — resolve the promise\n",[262,1260,1261,1264],{"class":264,"line":373},[262,1262,1263],{"class":311},"  onBeforeClose     ",[262,1265,1266],{"class":1187},"\u002F\u002F (handler) => void — register a close guard\n",[262,1268,1269,1271,1273,1275,1277,1279,1281],{"class":264,"line":406},[262,1270,351],{"class":268},[262,1272,483],{"class":268},[262,1274,486],{"class":376},[262,1276,269],{"class":268},[262,1278,491],{"class":436},[262,1280,494],{"class":268},[262,1282,456],{"class":311},[198,1284,1285,1288,1289,1292],{},[202,1286,1287],{},"useModalContext()"," throws if called outside a modal component. See the ",[1290,1291,82],"a",{"href":83}," page for a full reference.",[744,1294,1295],{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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}",{"title":232,"searchDepth":298,"depth":298,"links":1297},[1298,1299,1300],{"id":221,"depth":298,"text":222},{"id":251,"depth":298,"text":252},{"id":1161,"depth":298,"text":1301},"What useModalContext gives you","Structure of a modal component using ModalRoot, ModalContent, and useModalContext.","md",null,{},{"title":58,"description":1302},"sYZtiS3KBbwIQxsbEVQp9MMpNVJWJc19YWwoc0y5OVY",[1309,1311],{"title":49,"path":50,"stem":51,"description":1310,"children":-1},"Why the package ships no visual styles and how to drive animations with data attributes.",{"title":62,"path":63,"stem":64,"description":1312,"children":-1},"openModal, closeModal, replaceModal — signatures, return values, and pitfalls.",1779523617515]