[{"data":1,"prerenderedAt":863},["ShallowReactive",2],{"navigation_docs":3,"-guide-behavior-options":188,"-guide-behavior-options-surround":858},[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":70,"body":190,"description":852,"extension":853,"links":854,"meta":855,"navigation":645,"path":71,"seo":856,"stem":72,"__hash__":857},"docs\u002F4.guide\u002F04.behavior-options.md",{"type":191,"value":192,"toc":841},"minimark",[193,197,206,211,223,331,348,352,358,406,410,415,418,526,530,533,597,601,683,687,701,809,815,819,837],[194,195,70],"h1",{"id":196},"behavior-options",[198,199,200,201,205],"p",{},"By default modals work as proper ",[202,203,204],"strong",{},"ARIA dialogs in modal mode",": focus trap, body inert, scroll locked, close on Esc, close on overlay click. You opt out of pieces you don't need.",[207,208,210],"h2",{"id":209},"the-five-flags","The five flags",[198,212,213,214,218,219,222],{},"All available on ",[215,216,217],"code",{},"\u003CModalTarget>"," (per-target), ",[215,220,221],{},"createModal({ groups: { x: {...} } })"," (per-group), or both — props override the registered config.",[224,225,226,245],"table",{},[227,228,229],"thead",{},[230,231,232,236,239],"tr",{},[233,234,235],"th",{},"Flag",[233,237,238],{},"Default",[233,240,241,242],{},"Effect when ",[215,243,244],{},"true",[246,247,248,272,289,303,317],"tbody",{},[230,249,250,256,261],{},[251,252,253],"td",{},[215,254,255],{},"enableInteractOutside",[251,257,258],{},[215,259,260],{},"false",[251,262,263,264,267,268,271],{},"Switch to ",[202,265,266],{},"non-modal"," mode: no focus trap, body NOT inert, background text-selectable, ",[215,269,270],{},"aria-modal=\"false\"",".",[230,273,274,279,283],{},[251,275,276],{},[215,277,278],{},"disableCloseOnInteractOutside",[251,280,281],{},[215,282,260],{},[251,284,285,286,288],{},"Click outside the ",[215,287,217],{}," region does NOT close. (Relevant when the region is smaller than viewport.)",[230,290,291,296,300],{},[251,292,293],{},[215,294,295],{},"disableCloseOnInteractOverlay",[251,297,298],{},[215,299,260],{},[251,301,302],{},"Click in the empty area around the card (inside the region) does NOT close.",[230,304,305,310,314],{},[251,306,307],{},[215,308,309],{},"disableLockBodyScroll",[251,311,312],{},[215,313,260],{},[251,315,316],{},"Body scroll is NOT locked.",[230,318,319,324,328],{},[251,320,321],{},[215,322,323],{},"disableCloseOnEscape",[251,325,326],{},[215,327,260],{},[251,329,330],{},"Pressing Esc does NOT close the topmost modal of the group.",[198,332,333,334,337,338,341,342,344,345,347],{},"The asymmetric prefixes (",[215,335,336],{},"enable*"," vs ",[215,339,340],{},"disable*",") are intentional: every flag's ",[215,343,260],{}," matches the modal-mode default. You only ever set a flag to ",[215,346,244],{}," to opt out.",[207,349,351],{"id":350},"default-behavior-in-detail","Default behavior in detail",[198,353,354,355,357],{},"When all flags are at their ",[215,356,260],{}," defaults:",[359,360,361,368,374,386,394,400],"ul",{},[362,363,364,367],"li",{},[202,365,366],{},"Focus trap"," — Tab and Shift+Tab cycle within the dialog.",[362,369,370,373],{},[202,371,372],{},"Body inert"," — background elements are not focusable; assistive tech sees only the dialog.",[362,375,376,381,382,385],{},[202,377,378],{},[215,379,380],{},"body { overflow: hidden }"," + ",[215,383,384],{},"paddingRight"," compensation for vanished scrollbar.",[362,387,388,393],{},[202,389,390],{},[215,391,392],{},"body { user-select: none }"," — text selection blocked outside the modal (released on close).",[362,395,396,399],{},[202,397,398],{},"Esc closes the topmost"," modal of any active group.",[362,401,402,405],{},[202,403,404],{},"Click outside card closes"," — both inside and outside the region (when applicable).",[207,407,409],{"id":408},"common-configurations","Common configurations",[411,412,414],"h3",{"id":413},"confirmation-dialog-strict","Confirmation dialog (strict)",[198,416,417],{},"User must explicitly choose — no Esc, no outside-click escape.",[419,420,425],"pre",{"className":421,"code":422,"language":423,"meta":424,"style":424},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","createModal({\n  groups: {\n    confirm: {\n      disableCloseOnEscape: true,\n      disableCloseOnInteractOverlay: true,\n      disableCloseOnInteractOutside: true\n    }\n  }\n})\n","ts","",[215,426,427,444,457,467,482,494,505,511,517],{"__ignoreMap":424},[428,429,432,436,440],"span",{"class":430,"line":431},"line",1,[428,433,435],{"class":434},"s2Zo4","createModal",[428,437,439],{"class":438},"sTEyZ","(",[428,441,443],{"class":442},"sMK4o","{\n",[428,445,447,451,454],{"class":430,"line":446},2,[428,448,450],{"class":449},"swJcz","  groups",[428,452,453],{"class":442},":",[428,455,456],{"class":442}," {\n",[428,458,460,463,465],{"class":430,"line":459},3,[428,461,462],{"class":449},"    confirm",[428,464,453],{"class":442},[428,466,456],{"class":442},[428,468,470,473,475,479],{"class":430,"line":469},4,[428,471,472],{"class":449},"      disableCloseOnEscape",[428,474,453],{"class":442},[428,476,478],{"class":477},"sfNiH"," true",[428,480,481],{"class":442},",\n",[428,483,485,488,490,492],{"class":430,"line":484},5,[428,486,487],{"class":449},"      disableCloseOnInteractOverlay",[428,489,453],{"class":442},[428,491,478],{"class":477},[428,493,481],{"class":442},[428,495,497,500,502],{"class":430,"line":496},6,[428,498,499],{"class":449},"      disableCloseOnInteractOutside",[428,501,453],{"class":442},[428,503,504],{"class":477}," true\n",[428,506,508],{"class":430,"line":507},7,[428,509,510],{"class":442},"    }\n",[428,512,514],{"class":430,"line":513},8,[428,515,516],{"class":442},"  }\n",[428,518,520,523],{"class":430,"line":519},9,[428,521,522],{"class":442},"}",[428,524,525],{"class":438},")\n",[411,527,529],{"id":528},"side-panel-non-modal","Side panel (non-modal)",[198,531,532],{},"Doesn't trap focus, doesn't lock scroll — used like a navigator on the side.",[419,534,536],{"className":421,"code":535,"language":423,"meta":424,"style":424},"createModal({\n  groups: {\n    panel: {\n      enableInteractOutside: true,\n      disableLockBodyScroll: true\n    }\n  }\n})\n",[215,537,538,546,554,563,574,583,587,591],{"__ignoreMap":424},[428,539,540,542,544],{"class":430,"line":431},[428,541,435],{"class":434},[428,543,439],{"class":438},[428,545,443],{"class":442},[428,547,548,550,552],{"class":430,"line":446},[428,549,450],{"class":449},[428,551,453],{"class":442},[428,553,456],{"class":442},[428,555,556,559,561],{"class":430,"line":459},[428,557,558],{"class":449},"    panel",[428,560,453],{"class":442},[428,562,456],{"class":442},[428,564,565,568,570,572],{"class":430,"line":469},[428,566,567],{"class":449},"      enableInteractOutside",[428,569,453],{"class":442},[428,571,478],{"class":477},[428,573,481],{"class":442},[428,575,576,579,581],{"class":430,"line":484},[428,577,578],{"class":449},"      disableLockBodyScroll",[428,580,453],{"class":442},[428,582,504],{"class":477},[428,584,585],{"class":430,"line":496},[428,586,510],{"class":442},[428,588,589],{"class":430,"line":507},[428,590,516],{"class":442},[428,592,593,595],{"class":430,"line":513},[428,594,522],{"class":442},[428,596,525],{"class":438},[411,598,600],{"id":599},"per-target-override","Per-target override",[419,602,606],{"className":603,"code":604,"language":605,"meta":424,"style":424},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Group base config from createModal applied -->\n\u003CModalTarget group=\"confirm\" \u002F>\n\n\u003C!-- Same group, Esc re-enabled for this specific target -->\n\u003CModalTarget :disableCloseOnEscape=\"false\" group=\"confirm\" \u002F>\n","vue",[215,607,608,614,641,647,652],{"__ignoreMap":424},[428,609,610],{"class":430,"line":431},[428,611,613],{"class":612},"sHwdD","\u003C!-- Group base config from createModal applied -->\n",[428,615,616,619,622,626,629,632,636,638],{"class":430,"line":446},[428,617,618],{"class":442},"\u003C",[428,620,621],{"class":449},"ModalTarget",[428,623,625],{"class":624},"spNyl"," group",[428,627,628],{"class":442},"=",[428,630,631],{"class":442},"\"",[428,633,635],{"class":634},"sfazB","confirm",[428,637,631],{"class":442},[428,639,640],{"class":442}," \u002F>\n",[428,642,643],{"class":430,"line":459},[428,644,646],{"emptyLinePlaceholder":645},true,"\n",[428,648,649],{"class":430,"line":469},[428,650,651],{"class":612},"\u003C!-- Same group, Esc re-enabled for this specific target -->\n",[428,653,654,656,658,661,663,665,667,669,671,673,675,677,679,681],{"class":430,"line":484},[428,655,618],{"class":442},[428,657,621],{"class":449},[428,659,660],{"class":442}," :",[428,662,323],{"class":624},[428,664,628],{"class":442},[428,666,631],{"class":442},[428,668,260],{"class":477},[428,670,631],{"class":442},[428,672,625],{"class":624},[428,674,628],{"class":442},[428,676,631],{"class":442},[428,678,635],{"class":634},[428,680,631],{"class":442},[428,682,640],{"class":442},[207,684,686],{"id":685},"reading-effective-options-inside-a-modal","Reading effective options inside a modal",[198,688,689,692,693,696,697,700],{},[215,690,691],{},"useModalContext()"," returns ",[215,694,695],{},"effectiveOptions"," in the ",[202,698,699],{},"positive form"," for ergonomic reading:",[419,702,704],{"className":421,"code":703,"language":423,"meta":424,"style":424},"const { effectiveOptions } = useModalContext()\n\neffectiveOptions.value.interactOutside \u002F\u002F boolean\neffectiveOptions.value.closeOnInteractOutside \u002F\u002F boolean\neffectiveOptions.value.closeOnInteractOverlay \u002F\u002F boolean\neffectiveOptions.value.lockBodyScroll \u002F\u002F boolean\neffectiveOptions.value.closeOnEscape \u002F\u002F boolean\n",[215,705,706,728,732,749,764,779,794],{"__ignoreMap":424},[428,707,708,711,714,717,719,722,725],{"class":430,"line":431},[428,709,710],{"class":624},"const",[428,712,713],{"class":442}," {",[428,715,716],{"class":438}," effectiveOptions ",[428,718,522],{"class":442},[428,720,721],{"class":442}," =",[428,723,724],{"class":434}," useModalContext",[428,726,727],{"class":438},"()\n",[428,729,730],{"class":430,"line":446},[428,731,646],{"emptyLinePlaceholder":645},[428,733,734,736,738,741,743,746],{"class":430,"line":459},[428,735,695],{"class":438},[428,737,271],{"class":442},[428,739,740],{"class":438},"value",[428,742,271],{"class":442},[428,744,745],{"class":438},"interactOutside ",[428,747,748],{"class":612},"\u002F\u002F boolean\n",[428,750,751,753,755,757,759,762],{"class":430,"line":469},[428,752,695],{"class":438},[428,754,271],{"class":442},[428,756,740],{"class":438},[428,758,271],{"class":442},[428,760,761],{"class":438},"closeOnInteractOutside ",[428,763,748],{"class":612},[428,765,766,768,770,772,774,777],{"class":430,"line":484},[428,767,695],{"class":438},[428,769,271],{"class":442},[428,771,740],{"class":438},[428,773,271],{"class":442},[428,775,776],{"class":438},"closeOnInteractOverlay ",[428,778,748],{"class":612},[428,780,781,783,785,787,789,792],{"class":430,"line":496},[428,782,695],{"class":438},[428,784,271],{"class":442},[428,786,740],{"class":438},[428,788,271],{"class":442},[428,790,791],{"class":438},"lockBodyScroll ",[428,793,748],{"class":612},[428,795,796,798,800,802,804,807],{"class":430,"line":507},[428,797,695],{"class":438},[428,799,271],{"class":442},[428,801,740],{"class":438},[428,803,271],{"class":442},[428,805,806],{"class":438},"closeOnEscape ",[428,808,748],{"class":612},[198,810,811,812,814],{},"The translation negative→positive happens once at ",[215,813,217],{}," boundary.",[207,816,818],{"id":817},"custom-close-guards","Custom close guards",[198,820,821,822,825,826,828,829,832,833,836],{},"Block close attempts from inside the modal via ",[215,823,824],{},"onBeforeClose"," — return ",[215,827,260],{}," to veto. Callers can bypass guards with ",[215,830,831],{},"{ ignoreGuard: true }",". See ",[834,835,82],"a",{"href":83}," for the full pattern.",[838,839,840],"style",{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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 .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 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}",{"title":424,"searchDepth":446,"depth":446,"links":842},[843,844,845,850,851],{"id":209,"depth":446,"text":210},{"id":350,"depth":446,"text":351},{"id":408,"depth":446,"text":409,"children":846},[847,848,849],{"id":413,"depth":459,"text":414},{"id":528,"depth":459,"text":529},{"id":599,"depth":459,"text":600},{"id":685,"depth":446,"text":686},{"id":817,"depth":446,"text":818},"Modal mode, close triggers, scroll lock, focus trap.","md",null,{},{"title":70,"description":852},"OaFr_GcjZ0rwN9xsejqNYoioNQzNrU8FObbanESxrQY",[859,861],{"title":66,"path":67,"stem":68,"description":860,"children":-1},"How props flow into a modal and how to type the result promise end-to-end.",{"title":74,"path":75,"stem":76,"description":862,"children":-1},"Headless data-state hooks, Tailwind utilities, custom keyframes.",1779523617515]