[{"data":1,"prerenderedAt":1047},["ShallowReactive",2],{"navigation_docs":3,"-guide-async-components":188,"-guide-async-components-surround":1042},[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":94,"body":190,"description":1036,"extension":1037,"links":1038,"meta":1039,"navigation":287,"path":95,"seo":1040,"stem":96,"__hash__":1041},"docs\u002F4.guide\u002F10.async-components.md",{"type":191,"value":192,"toc":1026},"minimark",[193,197,214,219,443,453,457,463,561,564,568,571,664,674,681,691,757,799,817,825,835,843,1016,1022],[194,195,94],"h1",{"id":196},"async-components",[198,199,200,201,205,206,209,210,213],"p",{},"Pass ",[202,203,204],"code",{},"defineAsyncComponent(() => import('.\u002FHeavy.vue'))"," to ",[202,207,208],{},"openModal"," or ",[202,211,212],{},"useModal",". Vue resolves the loader on first render, after the modal is already in the stack.",[215,216,218],"h2",{"id":217},"basic-usage","Basic usage",[220,221,226],"pre",{"className":222,"code":223,"language":224,"meta":225,"style":225},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineAsyncComponent } from 'vue'\nimport { openModal } from '@kolirt\u002Fvue-modal'\n\nconst HeavyEditor = defineAsyncComponent(() => import('.\u002FHeavyEditor.vue'))\n\nconst result = await openModal\u003C{ saved: boolean }>(HeavyEditor, {\n  group: 'default',\n  props: { documentId: 42 }\n}).catch(() => null)\n","ts","",[202,227,228,261,282,289,330,335,376,394,416],{"__ignoreMap":225},[229,230,233,237,241,245,248,251,254,258],"span",{"class":231,"line":232},"line",1,[229,234,236],{"class":235},"s7zQu","import",[229,238,240],{"class":239},"sMK4o"," {",[229,242,244],{"class":243},"sTEyZ"," defineAsyncComponent",[229,246,247],{"class":239}," }",[229,249,250],{"class":235}," from",[229,252,253],{"class":239}," '",[229,255,257],{"class":256},"sfazB","vue",[229,259,260],{"class":239},"'\n",[229,262,264,266,268,271,273,275,277,280],{"class":231,"line":263},2,[229,265,236],{"class":235},[229,267,240],{"class":239},[229,269,270],{"class":243}," openModal",[229,272,247],{"class":239},[229,274,250],{"class":235},[229,276,253],{"class":239},[229,278,279],{"class":256},"@kolirt\u002Fvue-modal",[229,281,260],{"class":239},[229,283,285],{"class":231,"line":284},3,[229,286,288],{"emptyLinePlaceholder":287},true,"\n",[229,290,292,296,299,302,305,308,311,314,317,319,322,325,327],{"class":231,"line":291},4,[229,293,295],{"class":294},"spNyl","const",[229,297,298],{"class":243}," HeavyEditor ",[229,300,301],{"class":239},"=",[229,303,244],{"class":304},"s2Zo4",[229,306,307],{"class":243},"(",[229,309,310],{"class":239},"()",[229,312,313],{"class":294}," =>",[229,315,316],{"class":239}," import",[229,318,307],{"class":243},[229,320,321],{"class":239},"'",[229,323,324],{"class":256},".\u002FHeavyEditor.vue",[229,326,321],{"class":239},[229,328,329],{"class":243},"))\n",[229,331,333],{"class":231,"line":332},5,[229,334,288],{"emptyLinePlaceholder":287},[229,336,338,340,343,345,348,350,353,357,360,364,367,370,373],{"class":231,"line":337},6,[229,339,295],{"class":294},[229,341,342],{"class":243}," result ",[229,344,301],{"class":239},[229,346,347],{"class":235}," await",[229,349,270],{"class":304},[229,351,352],{"class":239},"\u003C{",[229,354,356],{"class":355},"swJcz"," saved",[229,358,359],{"class":239},":",[229,361,363],{"class":362},"sBMFI"," boolean",[229,365,366],{"class":239}," }>",[229,368,369],{"class":243},"(HeavyEditor",[229,371,372],{"class":239},",",[229,374,375],{"class":239}," {\n",[229,377,379,382,384,386,389,391],{"class":231,"line":378},7,[229,380,381],{"class":355},"  group",[229,383,359],{"class":239},[229,385,253],{"class":239},[229,387,388],{"class":256},"default",[229,390,321],{"class":239},[229,392,393],{"class":239},",\n",[229,395,397,400,402,404,407,409,413],{"class":231,"line":396},8,[229,398,399],{"class":355},"  props",[229,401,359],{"class":239},[229,403,240],{"class":239},[229,405,406],{"class":355}," documentId",[229,408,359],{"class":239},[229,410,412],{"class":411},"sbssI"," 42",[229,414,415],{"class":239}," }\n",[229,417,419,422,425,428,431,433,435,437,440],{"class":231,"line":418},9,[229,420,421],{"class":239},"}",[229,423,424],{"class":243},")",[229,426,427],{"class":239},".",[229,429,430],{"class":304},"catch",[229,432,307],{"class":243},[229,434,310],{"class":239},[229,436,313],{"class":294},[229,438,439],{"class":239}," null",[229,441,442],{"class":243},")\n",[198,444,445,446,449,450,452],{},"The ",[202,447,448],{},"HeavyEditor"," bundle is fetched only when ",[202,451,208],{}," runs.",[215,454,456],{"id":455},"loading-and-error-states","Loading and error states",[198,458,459,462],{},[202,460,461],{},"defineAsyncComponent"," accepts a full options object:",[220,464,466],{"className":222,"code":465,"language":224,"meta":225,"style":225},"const HeavyEditor = defineAsyncComponent({\n  loader: () => import('.\u002FHeavyEditor.vue'),\n  loadingComponent: LoadingSpinner,\n  errorComponent: ErrorCard,\n  delay: 200,\n  timeout: 5000\n})\n",[202,467,468,483,509,521,533,545,555],{"__ignoreMap":225},[229,469,470,472,474,476,478,480],{"class":231,"line":232},[229,471,295],{"class":294},[229,473,298],{"class":243},[229,475,301],{"class":239},[229,477,244],{"class":304},[229,479,307],{"class":243},[229,481,482],{"class":239},"{\n",[229,484,485,488,490,493,495,497,499,501,503,505,507],{"class":231,"line":263},[229,486,487],{"class":304},"  loader",[229,489,359],{"class":239},[229,491,492],{"class":239}," ()",[229,494,313],{"class":294},[229,496,316],{"class":239},[229,498,307],{"class":243},[229,500,321],{"class":239},[229,502,324],{"class":256},[229,504,321],{"class":239},[229,506,424],{"class":243},[229,508,393],{"class":239},[229,510,511,514,516,519],{"class":231,"line":284},[229,512,513],{"class":355},"  loadingComponent",[229,515,359],{"class":239},[229,517,518],{"class":243}," LoadingSpinner",[229,520,393],{"class":239},[229,522,523,526,528,531],{"class":231,"line":291},[229,524,525],{"class":355},"  errorComponent",[229,527,359],{"class":239},[229,529,530],{"class":243}," ErrorCard",[229,532,393],{"class":239},[229,534,535,538,540,543],{"class":231,"line":332},[229,536,537],{"class":355},"  delay",[229,539,359],{"class":239},[229,541,542],{"class":411}," 200",[229,544,393],{"class":239},[229,546,547,550,552],{"class":231,"line":337},[229,548,549],{"class":355},"  timeout",[229,551,359],{"class":239},[229,553,554],{"class":411}," 5000\n",[229,556,557,559],{"class":231,"line":378},[229,558,421],{"class":239},[229,560,442],{"class":243},[198,562,563],{},"These render in place of the modal content while the bundle loads.",[215,565,567],{"id":566},"define-once-outside-the-composable","Define once, outside the composable",[198,569,570],{},"Create the async component at module scope so its reference is stable across re-renders:",[220,572,574],{"className":222,"code":573,"language":224,"meta":225,"style":225},"\u002F\u002F module level — created once\nconst ReportModal = defineAsyncComponent(() => import('.\u002FReportModal.vue'))\n\n\u002F\u002F inside setup()\nconst report = useModal\u003Cvoid>(ReportModal, { group: 'default' })\n",[202,575,576,582,612,616,621],{"__ignoreMap":225},[229,577,578],{"class":231,"line":232},[229,579,581],{"class":580},"sHwdD","\u002F\u002F module level — created once\n",[229,583,584,586,589,591,593,595,597,599,601,603,605,608,610],{"class":231,"line":263},[229,585,295],{"class":294},[229,587,588],{"class":243}," ReportModal ",[229,590,301],{"class":239},[229,592,244],{"class":304},[229,594,307],{"class":243},[229,596,310],{"class":239},[229,598,313],{"class":294},[229,600,316],{"class":239},[229,602,307],{"class":243},[229,604,321],{"class":239},[229,606,607],{"class":256},".\u002FReportModal.vue",[229,609,321],{"class":239},[229,611,329],{"class":243},[229,613,614],{"class":231,"line":284},[229,615,288],{"emptyLinePlaceholder":287},[229,617,618],{"class":231,"line":291},[229,619,620],{"class":580},"\u002F\u002F inside setup()\n",[229,622,623,625,628,630,633,636,639,642,645,647,649,652,654,656,658,660,662],{"class":231,"line":332},[229,624,295],{"class":294},[229,626,627],{"class":243}," report ",[229,629,301],{"class":239},[229,631,632],{"class":304}," useModal",[229,634,635],{"class":239},"\u003C",[229,637,638],{"class":362},"void",[229,640,641],{"class":239},">",[229,643,644],{"class":243},"(ReportModal",[229,646,372],{"class":239},[229,648,240],{"class":239},[229,650,651],{"class":355}," group",[229,653,359],{"class":239},[229,655,253],{"class":239},[229,657,388],{"class":256},[229,659,321],{"class":239},[229,661,247],{"class":239},[229,663,442],{"class":243},[198,665,666,667,669,670,673],{},"Calling ",[202,668,461],{}," inside ",[202,671,672],{},"setup"," or an event handler creates a new loader each time, defeating bundle deduplication.",[215,675,677,680],{"id":676},"defineoptions-modalgroup-is-not-picked-up",[202,678,679],{},"defineOptions({ modalGroup })"," is not picked up",[198,682,683,684,686,687,690],{},"When you open a regular (synchronous) component, the package reads ",[202,685,679],{}," off the component and uses it as the default group — so callers don't have to pass ",[202,688,689],{},"group"," every time:",[220,692,696],{"className":693,"code":694,"filename":695,"language":257,"meta":225,"style":225},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\ndefineOptions({ modalGroup: 'default' })\n\u003C\u002Fscript>\n","HeavyEditor.vue",[202,697,698,723,748],{"__ignoreMap":225},[229,699,700,702,705,708,711,713,716,718,720],{"class":231,"line":232},[229,701,635],{"class":239},[229,703,704],{"class":355},"script",[229,706,707],{"class":294}," setup",[229,709,710],{"class":294}," lang",[229,712,301],{"class":239},[229,714,715],{"class":239},"\"",[229,717,224],{"class":256},[229,719,715],{"class":239},[229,721,722],{"class":239},">\n",[229,724,725,728,730,733,736,738,740,742,744,746],{"class":231,"line":263},[229,726,727],{"class":304},"defineOptions",[229,729,307],{"class":243},[229,731,732],{"class":239},"{",[229,734,735],{"class":355}," modalGroup",[229,737,359],{"class":239},[229,739,253],{"class":239},[229,741,388],{"class":256},[229,743,321],{"class":239},[229,745,247],{"class":239},[229,747,442],{"class":243},[229,749,750,753,755],{"class":231,"line":284},[229,751,752],{"class":239},"\u003C\u002F",[229,754,704],{"class":355},[229,756,722],{"class":239},[220,758,760],{"className":222,"code":759,"language":224,"meta":225,"style":225},"\u002F\u002F Sync component — group is inferred from defineOptions\nawait openModal(HeavyEditor, { props: { documentId: 42 } })\n",[202,761,762,767],{"__ignoreMap":225},[229,763,764],{"class":231,"line":232},[229,765,766],{"class":580},"\u002F\u002F Sync component — group is inferred from defineOptions\n",[229,768,769,772,774,776,778,780,783,785,787,789,791,793,795,797],{"class":231,"line":263},[229,770,771],{"class":235},"await",[229,773,270],{"class":304},[229,775,369],{"class":243},[229,777,372],{"class":239},[229,779,240],{"class":239},[229,781,782],{"class":355}," props",[229,784,359],{"class":239},[229,786,240],{"class":239},[229,788,406],{"class":355},[229,790,359],{"class":239},[229,792,412],{"class":411},[229,794,247],{"class":239},[229,796,247],{"class":239},[229,798,442],{"class":243},[198,800,801,802,806,807,809,810,812,813,816],{},"This does ",[803,804,805],"strong",{},"not"," work with ",[202,808,461],{},". The group lookup runs synchronously inside ",[202,811,208],{},", before the async loader has resolved — at that moment the wrapper component has no ",[202,814,815],{},"modalGroup"," field because the inner component hasn't been imported yet. The call throws:",[220,818,823],{"className":819,"code":821,"language":822},[820],"language-text","[@kolirt\u002Fvue-modal] openModal() requires a `group` option\n(or `defineOptions({ modalGroup: ... })` on the component).\n","text",[202,824,821],{"__ignoreMap":225},[198,826,827,828,831,832,427],{},"The same applies to ",[202,829,830],{},"replaceModal()"," and ",[202,833,834],{},"useModal()",[836,837,839,840,842],"h3",{"id":838},"always-pass-group-explicitly","Always pass ",[202,841,689],{}," explicitly",[220,844,846],{"className":222,"code":845,"language":224,"meta":225,"style":225},"const HeavyEditor = defineAsyncComponent(() => import('.\u002FHeavyEditor.vue'))\n\n\u002F\u002F ✅ group passed explicitly\nawait openModal(HeavyEditor, {\n  group: 'default',\n  props: { documentId: 42 }\n})\n\n\u002F\u002F ✅ same rule for useModal\nconst editor = useModal(HeavyEditor, { group: 'default' })\n\n\u002F\u002F ❌ throws — modalGroup inside HeavyEditor.vue is unreachable here\nawait openModal(HeavyEditor, { props: { documentId: 42 } })\n",[202,847,848,876,880,885,897,911,927,933,937,942,974,979,985],{"__ignoreMap":225},[229,849,850,852,854,856,858,860,862,864,866,868,870,872,874],{"class":231,"line":232},[229,851,295],{"class":294},[229,853,298],{"class":243},[229,855,301],{"class":239},[229,857,244],{"class":304},[229,859,307],{"class":243},[229,861,310],{"class":239},[229,863,313],{"class":294},[229,865,316],{"class":239},[229,867,307],{"class":243},[229,869,321],{"class":239},[229,871,324],{"class":256},[229,873,321],{"class":239},[229,875,329],{"class":243},[229,877,878],{"class":231,"line":263},[229,879,288],{"emptyLinePlaceholder":287},[229,881,882],{"class":231,"line":284},[229,883,884],{"class":580},"\u002F\u002F ✅ group passed explicitly\n",[229,886,887,889,891,893,895],{"class":231,"line":291},[229,888,771],{"class":235},[229,890,270],{"class":304},[229,892,369],{"class":243},[229,894,372],{"class":239},[229,896,375],{"class":239},[229,898,899,901,903,905,907,909],{"class":231,"line":332},[229,900,381],{"class":355},[229,902,359],{"class":239},[229,904,253],{"class":239},[229,906,388],{"class":256},[229,908,321],{"class":239},[229,910,393],{"class":239},[229,912,913,915,917,919,921,923,925],{"class":231,"line":337},[229,914,399],{"class":355},[229,916,359],{"class":239},[229,918,240],{"class":239},[229,920,406],{"class":355},[229,922,359],{"class":239},[229,924,412],{"class":411},[229,926,415],{"class":239},[229,928,929,931],{"class":231,"line":378},[229,930,421],{"class":239},[229,932,442],{"class":243},[229,934,935],{"class":231,"line":396},[229,936,288],{"emptyLinePlaceholder":287},[229,938,939],{"class":231,"line":418},[229,940,941],{"class":580},"\u002F\u002F ✅ same rule for useModal\n",[229,943,945,947,950,952,954,956,958,960,962,964,966,968,970,972],{"class":231,"line":944},10,[229,946,295],{"class":294},[229,948,949],{"class":243}," editor ",[229,951,301],{"class":239},[229,953,632],{"class":304},[229,955,369],{"class":243},[229,957,372],{"class":239},[229,959,240],{"class":239},[229,961,651],{"class":355},[229,963,359],{"class":239},[229,965,253],{"class":239},[229,967,388],{"class":256},[229,969,321],{"class":239},[229,971,247],{"class":239},[229,973,442],{"class":243},[229,975,977],{"class":231,"line":976},11,[229,978,288],{"emptyLinePlaceholder":287},[229,980,982],{"class":231,"line":981},12,[229,983,984],{"class":580},"\u002F\u002F ❌ throws — modalGroup inside HeavyEditor.vue is unreachable here\n",[229,986,988,990,992,994,996,998,1000,1002,1004,1006,1008,1010,1012,1014],{"class":231,"line":987},13,[229,989,771],{"class":235},[229,991,270],{"class":304},[229,993,369],{"class":243},[229,995,372],{"class":239},[229,997,240],{"class":239},[229,999,782],{"class":355},[229,1001,359],{"class":239},[229,1003,240],{"class":239},[229,1005,406],{"class":355},[229,1007,359],{"class":239},[229,1009,412],{"class":411},[229,1011,247],{"class":239},[229,1013,247],{"class":239},[229,1015,442],{"class":243},[198,1017,1018,1019,1021],{},"Keep ",[202,1020,679],{}," on the inner component anyway — it documents the intended group and works if you ever switch back to a sync import.",[1023,1024,1025],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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":225,"searchDepth":263,"depth":263,"links":1027},[1028,1029,1030,1031],{"id":217,"depth":263,"text":218},{"id":455,"depth":263,"text":456},{"id":566,"depth":263,"text":567},{"id":676,"depth":263,"text":1032,"children":1033},"defineOptions({ modalGroup }) is not picked up",[1034],{"id":838,"depth":284,"text":1035},"Always pass group explicitly","Keep heavy modal components out of the initial bundle with defineAsyncComponent.","md",null,{},{"title":94,"description":1036},"UicPA7ZZ84f-ZVHK3QtBKjIoXJcsVThunSjzK4YDdt0",[1043,1045],{"title":90,"path":91,"stem":92,"description":1044,"children":-1},"Customize the dimming layer — slot content, pointer behavior, per-group overlays, and the data attributes used for styling and animations.",{"title":98,"path":99,"stem":100,"description":1046,"children":-1},"Full type-safety — group registry, typed promises, ExtractComponentProps, and useModalContext typing.",1779523619577]