[{"data":1,"prerenderedAt":477},["ShallowReactive",2],{"navigation_docs":3,"-concepts-stacking":188,"-concepts-stacking-surround":472},[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":41,"body":190,"description":465,"extension":466,"links":467,"meta":468,"navigation":469,"path":42,"seo":470,"stem":43,"__hash__":471},"docs\u002F3.concepts\u002F3.stacking.md",{"type":191,"value":192,"toc":457},"minimark",[193,197,201,206,214,225,228,232,278,289,295,305,309,324,370,374,377,383,386,390,400,435,439,445,453],[194,195,41],"h1",{"id":196},"stacking",[198,199,200],"p",{},"Multiple modals can be open at once. The package keeps a single global stack and routes Esc, overlay clicks, and focus to the topmost layer — without unmounting underlying modals.",[202,203,205],"h2",{"id":204},"one-global-stack","One global stack",[198,207,208,209,213],{},"Every open modal lives in one ordered list. Opening appends, closing removes. The ",[210,211,212],"strong",{},"last entry"," is the global topmost modal.",[215,216,221],"pre",{"className":217,"code":219,"language":220},[218],"language-text","[ Modal A: default ]   ← opened first\n[ Modal B: default ]   ← opened second (global top)\n","text",[222,223,219],"code",{"__ignoreMap":224},"",[198,226,227],{},"This list drives all stacking decisions: which modal reacts to Esc, which one owns focus, which one closes when you click outside.",[202,229,231],{"id":230},"global-topmost-vs-topmost-in-group","Global topmost vs topmost in group",[233,234,235,248],"table",{},[236,237,238],"thead",{},[239,240,241,245],"tr",{},[242,243,244],"th",{},"Concept",[242,246,247],{},"Drives",[249,250,251,263],"tbody",{},[239,252,253,260],{},[254,255,256,259],"td",{},[210,257,258],{},"Global topmost"," — last entry overall",[254,261,262],{},"Esc key, overlay click — only the global topmost reacts.",[239,264,265,271],{},[254,266,267,270],{},[210,268,269],{},"Topmost in group"," — last entry with that group",[254,272,273,274,277],{},"Which modal is visually \"open\" inside a ",[222,275,276],{},"\u003CModalTarget>",".",[198,279,280,281,284,285,288],{},"These differ when groups mix. With a ",[222,282,283],{},"default"," form open and a ",[222,286,287],{},"confirm"," dialog on top:",[215,290,293],{"className":291,"code":292,"language":220},[218],"[ Modal A: default ]   ← mounted, data-state=\"closed\"\n[ Modal B: confirm ]   ← global top — reacts to Esc\n",[222,294,292],{"__ignoreMap":224},[198,296,297,298,301,302,304],{},"Pressing Esc closes ",[222,299,300],{},"Modal B",". The ",[222,303,283],{}," target ignores the event.",[202,306,308],{"id":307},"underlying-modals-stay-mounted","Underlying modals stay mounted",[198,310,311,312,315,316,319,320,323],{},"When a second modal opens on top, the underlying one is ",[210,313,314],{},"not unmounted",". Form values, scroll position, and local state are preserved. Its ",[222,317,318],{},"\u003CModalContent>"," switches to ",[222,321,322],{},"data-state=\"closed\""," so your CSS animates or hides it.",[233,325,326,338],{},[236,327,328],{},[239,329,330,333],{},[242,331,332],{},"State",[242,334,335],{},[222,336,337],{},"data-state",[249,339,340,350,360],{},[239,341,342,345],{},[254,343,344],{},"Visible top in its group",[254,346,347],{},[222,348,349],{},"\"open\"",[239,351,352,355],{},[254,353,354],{},"Mounted but covered",[254,356,357],{},[222,358,359],{},"\"closed\"",[239,361,362,365],{},[254,363,364],{},"Playing exit animation",[254,366,367,369],{},[222,368,359],{}," (until animation ends, then unmounts)",[202,371,373],{"id":372},"stack-swap-sequencing","Stack swap sequencing",[198,375,376],{},"When the visible top within a group changes, the package waits for the outgoing modal's CSS exit animation before promoting the next one. You never see two modals \"open\" simultaneously mid-transition.",[215,378,381],{"className":379,"code":380,"language":220},[218],"Group \"default\"           Group \"confirm\"\n─────────────────         ─────────────────\n[ A: open ]               (empty)\n\nopenModal(ConfirmDialog)  →  group \"confirm\"\n\n[ A: closed ]             [ B: open ]\n  (still mounted)\n\nclose B\n\n[ A: open ]               (empty)\n  (promoted back)\n",[222,382,380],{"__ignoreMap":224},[198,384,385],{},"Each group sequences its own stack independently.",[202,387,389],{"id":388},"same-group-stacking","Same-group stacking",[198,391,392,393,395,396,399],{},"Multiple modals in the same group stack inside one ",[222,394,276],{},". Only one is ",[222,397,398],{},"data-state=\"open\""," at a time; closing the top promotes the next one back after its enter animation.",[215,401,405],{"className":402,"code":403,"language":404,"meta":224,"style":224},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","openModal(FormDialog)\n\u002F\u002F from inside FormDialog:\nopenModal(ConfirmDialog)\n","ts",[222,406,407,420,427],{"__ignoreMap":224},[408,409,412,416],"span",{"class":410,"line":411},"line",1,[408,413,415],{"class":414},"s2Zo4","openModal",[408,417,419],{"class":418},"sTEyZ","(FormDialog)\n",[408,421,423],{"class":410,"line":422},2,[408,424,426],{"class":425},"sHwdD","\u002F\u002F from inside FormDialog:\n",[408,428,430,432],{"class":410,"line":429},3,[408,431,415],{"class":414},[408,433,434],{"class":418},"(ConfirmDialog)\n",[202,436,438],{"id":437},"cross-group-stacking","Cross-group stacking",[198,440,441,442,444],{},"Each group has its own ",[222,443,276],{},", so modals from different groups render in separate DOM subtrees with their own overlays. The global stack still coordinates Esc and overlay-click priority across groups.",[446,447,449,450,452],"callout",{"icon":448},"i-lucide-info","A modal opened in a group with no mounted ",[222,451,276],{}," has nowhere to render. Mount one target per group you use.",[454,455,456],"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 .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);}",{"title":224,"searchDepth":422,"depth":422,"links":458},[459,460,461,462,463,464],{"id":204,"depth":422,"text":205},{"id":230,"depth":422,"text":231},{"id":307,"depth":422,"text":308},{"id":372,"depth":422,"text":373},{"id":388,"depth":422,"text":389},{"id":437,"depth":422,"text":438},"How multiple modals stack and what \"topmost\" means globally vs per-group.","md",null,{},true,{"title":41,"description":465},"mirV7yACguU1SXXRsWoHUghyyHmGi0Rsm5G9lGB8NQI",[473,475],{"title":37,"path":38,"stem":39,"description":474,"children":-1},"Why the API is promise-based and how the modal lifecycle works.",{"title":45,"path":46,"stem":47,"description":476,"children":-1},"Why modals belong to named groups and what isolation that provides.",1779523617515]