[{"data":1,"prerenderedAt":1751},["ShallowReactive",2],{"navigation":3,"-composables-use-overlay":561,"-composables-use-overlay-surround":1735,"-composables-use-overlay-description":1740},[4,108,126],{"title":5,"path":6,"stem":7,"children":8,"framework":11,"module":11,"icon":24},"Getting Started","/getting-started","1.getting-started/1.index",[9,13,42,46,51,56,68,73,85,98,103],{"title":10,"path":6,"stem":7,"framework":11,"module":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"framework":11,"module":11,"shadow":15,"path":16,"stem":17,"children":18,"page":41},"Installation",true,"/getting-started/installation","1.getting-started/2.installation",[19,25,29],{"title":14,"path":20,"stem":21,"framework":22,"module":23,"icon":24},"/getting-started/installation/nuxt","1.getting-started/2.installation/1.nuxt","nuxt","ui","i-lucide-square-play",{"title":14,"path":26,"stem":27,"framework":28,"module":23,"icon":24},"/getting-started/installation/vue","1.getting-started/2.installation/2.vue","vue",{"title":30,"framework":11,"module":11,"shadow":15,"path":31,"stem":32,"children":33,"page":41},"Pro","/getting-started/installation/pro","1.getting-started/2.installation/pro",[34,38],{"title":14,"path":35,"stem":36,"framework":22,"module":37,"icon":24},"/getting-started/installation/pro/nuxt","1.getting-started/2.installation/pro/1.nuxt","ui-pro",{"title":14,"path":39,"stem":40,"framework":28,"module":37,"icon":24},"/getting-started/installation/pro/vue","1.getting-started/2.installation/pro/2.vue",false,{"title":43,"path":44,"stem":45,"framework":11,"module":11},"Migration","/getting-started/migration","1.getting-started/2.migration",{"title":47,"path":48,"stem":49,"framework":11,"module":37,"icon":50},"License","/getting-started/license","1.getting-started/3.license","i-lucide-key-square",{"title":52,"path":53,"stem":54,"framework":11,"module":11,"icon":55},"Theme","/getting-started/theme","1.getting-started/3.theme","i-lucide-swatch-book",{"title":57,"framework":11,"module":11,"shadow":15,"path":58,"stem":59,"children":60,"page":41},"Icons","/getting-started/icons","1.getting-started/4.icons",[61,65],{"title":57,"path":62,"stem":63,"framework":22,"module":11,"icon":64},"/getting-started/icons/nuxt","1.getting-started/4.icons/1.nuxt","i-lucide-smile",{"title":57,"path":66,"stem":67,"framework":28,"module":11,"icon":64},"/getting-started/icons/vue","1.getting-started/4.icons/2.vue",{"title":69,"path":70,"stem":71,"framework":22,"module":11,"icon":72},"Fonts","/getting-started/fonts","1.getting-started/5.fonts","i-lucide-a-large-small",{"title":74,"framework":11,"module":11,"shadow":15,"path":75,"stem":76,"children":77,"page":41},"Color Mode","/getting-started/color-mode","1.getting-started/6.color-mode",[78,82],{"title":74,"path":79,"stem":80,"framework":22,"module":11,"icon":81},"/getting-started/color-mode/nuxt","1.getting-started/6.color-mode/1.nuxt","i-lucide-sun-moon",{"title":74,"path":83,"stem":84,"framework":28,"module":11,"icon":81},"/getting-started/color-mode/vue","1.getting-started/6.color-mode/2.vue",{"title":86,"framework":11,"module":11,"shadow":15,"path":87,"stem":88,"children":89,"page":41},"I18n","/getting-started/i18n","1.getting-started/7.i18n",[90,95],{"title":91,"path":92,"stem":93,"framework":22,"module":11,"icon":94},"Internationalization (i18n)","/getting-started/i18n/nuxt","1.getting-started/7.i18n/1.nuxt","i-lucide-languages",{"title":91,"path":96,"stem":97,"framework":28,"module":11,"icon":94},"/getting-started/i18n/vue","1.getting-started/7.i18n/2.vue",{"title":99,"path":100,"stem":101,"framework":22,"module":37,"icon":102},"Content","/getting-started/content","1.getting-started/8.content","i-simple-icons-markdown",{"title":104,"path":105,"stem":106,"framework":22,"module":37,"icon":107},"Typography","/getting-started/typography","1.getting-started/9.typography","i-lucide-type",{"title":109,"framework":11,"module":11,"icon":110,"path":111,"stem":112,"children":113,"page":41},"Composables","i-lucide-square-function","/composables","2.composables",[114,118,122],{"title":115,"path":116,"stem":117,"framework":11,"module":11},"defineShortcuts","/composables/define-shortcuts","2.composables/define-shortcuts",{"title":119,"path":120,"stem":121,"framework":11,"module":11},"useOverlay","/composables/use-overlay","2.composables/use-overlay",{"title":123,"path":124,"stem":125,"framework":11,"module":11},"useToast","/composables/use-toast","2.composables/use-toast",{"title":127,"framework":11,"module":11,"icon":128,"path":129,"stem":130,"children":131,"page":41},"Components","i-lucide-square-code","/components","3.components",[132,136,140,144,148,152,156,160,164,168,172,176,180,184,188,192,196,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349,353,357,361,365,369,373,377,381,385,389,393,397,401,405,409,413,417,421,425,429,433,437,441,445,449,453,457,461,465,469,473,477,481,485,489,493,497,501,505,509,513,517,521,525,529,533,537,541,545,549,553,557],{"title":133,"path":134,"stem":135,"framework":11,"module":11},"App","/components/app","3.components/0.app",{"title":137,"path":138,"stem":139,"framework":11,"module":11},"Accordion","/components/accordion","3.components/accordion",{"title":141,"path":142,"stem":143,"framework":11,"module":11},"Alert","/components/alert","3.components/alert",{"title":145,"path":146,"stem":147,"framework":11,"module":37},"AuthForm","/components/auth-form","3.components/auth-form",{"title":149,"path":150,"stem":151,"framework":11,"module":11},"Avatar","/components/avatar","3.components/avatar",{"title":153,"path":154,"stem":155,"framework":11,"module":11},"AvatarGroup","/components/avatar-group","3.components/avatar-group",{"title":157,"path":158,"stem":159,"framework":11,"module":11},"Badge","/components/badge","3.components/badge",{"title":161,"path":162,"stem":163,"framework":11,"module":37},"Banner","/components/banner","3.components/banner",{"title":165,"path":166,"stem":167,"framework":11,"module":37},"BlogPost","/components/blog-post","3.components/blog-post",{"title":169,"path":170,"stem":171,"framework":11,"module":37},"BlogPosts","/components/blog-posts","3.components/blog-posts",{"title":173,"path":174,"stem":175,"framework":11,"module":11},"Breadcrumb","/components/breadcrumb","3.components/breadcrumb",{"title":177,"path":178,"stem":179,"framework":11,"module":11},"Button","/components/button","3.components/button",{"title":181,"path":182,"stem":183,"framework":11,"module":11},"ButtonGroup","/components/button-group","3.components/button-group",{"title":185,"path":186,"stem":187,"framework":11,"module":11},"Calendar","/components/calendar","3.components/calendar",{"title":189,"path":190,"stem":191,"framework":11,"module":11},"Card","/components/card","3.components/card",{"title":193,"path":194,"stem":195,"framework":11,"module":11},"Carousel","/components/carousel","3.components/carousel",{"title":197,"path":198,"stem":199,"framework":11,"module":37,"badge":200},"ChatMessage","/components/chat-message","3.components/chat-message","New",{"title":202,"path":203,"stem":204,"framework":11,"module":37,"badge":200},"ChatMessages","/components/chat-messages","3.components/chat-messages",{"title":206,"path":207,"stem":208,"framework":11,"module":37,"badge":200},"ChatPalette","/components/chat-palette","3.components/chat-palette",{"title":210,"path":211,"stem":212,"framework":11,"module":37,"badge":200},"ChatPrompt","/components/chat-prompt","3.components/chat-prompt",{"title":214,"path":215,"stem":216,"framework":11,"module":37,"badge":200},"ChatPromptSubmit","/components/chat-prompt-submit","3.components/chat-prompt-submit",{"title":218,"path":219,"stem":220,"framework":11,"module":11},"Checkbox","/components/checkbox","3.components/checkbox",{"title":222,"path":223,"stem":224,"framework":11,"module":11,"badge":200},"CheckboxGroup","/components/checkbox-group","3.components/checkbox-group",{"title":226,"path":227,"stem":228,"framework":11,"module":11},"Chip","/components/chip","3.components/chip",{"title":230,"path":231,"stem":232,"framework":11,"module":11},"Collapsible","/components/collapsible","3.components/collapsible",{"title":234,"path":235,"stem":236,"framework":11,"module":37},"ColorModeAvatar","/components/color-mode-avatar","3.components/color-mode-avatar",{"title":238,"path":239,"stem":240,"framework":11,"module":37},"ColorModeButton","/components/color-mode-button","3.components/color-mode-button",{"title":242,"path":243,"stem":244,"framework":11,"module":37},"ColorModeImage","/components/color-mode-image","3.components/color-mode-image",{"title":246,"path":247,"stem":248,"framework":11,"module":37},"ColorModeSelect","/components/color-mode-select","3.components/color-mode-select",{"title":250,"path":251,"stem":252,"framework":11,"module":37},"ColorModeSwitch","/components/color-mode-switch","3.components/color-mode-switch",{"title":254,"path":255,"stem":256,"framework":11,"module":11},"ColorPicker","/components/color-picker","3.components/color-picker",{"title":258,"path":259,"stem":260,"framework":11,"module":11},"CommandPalette","/components/command-palette","3.components/command-palette",{"title":262,"path":263,"stem":264,"framework":11,"module":11},"Container","/components/container","3.components/container",{"title":266,"path":267,"stem":268,"framework":22,"module":37},"ContentNavigation","/components/content-navigation","3.components/content-navigation",{"title":270,"path":271,"stem":272,"framework":22,"module":37},"ContentSearch","/components/content-search","3.components/content-search",{"title":274,"path":275,"stem":276,"framework":22,"module":37},"ContentSearchButton","/components/content-search-button","3.components/content-search-button",{"title":278,"path":279,"stem":280,"framework":22,"module":37},"ContentSurround","/components/content-surround","3.components/content-surround",{"title":282,"path":283,"stem":284,"framework":22,"module":37},"ContentToc","/components/content-toc","3.components/content-toc",{"title":286,"path":287,"stem":288,"framework":11,"module":11},"ContextMenu","/components/context-menu","3.components/context-menu",{"title":290,"path":291,"stem":292,"framework":11,"module":37},"DashboardGroup","/components/dashboard-group","3.components/dashboard-group",{"title":294,"path":295,"stem":296,"framework":11,"module":37},"DashboardNavbar","/components/dashboard-navbar","3.components/dashboard-navbar",{"title":298,"path":299,"stem":300,"framework":11,"module":37},"DashboardPanel","/components/dashboard-panel","3.components/dashboard-panel",{"title":302,"path":303,"stem":304,"framework":11,"module":37},"DashboardResizeHandle","/components/dashboard-resize-handle","3.components/dashboard-resize-handle",{"title":306,"path":307,"stem":308,"framework":11,"module":37},"DashboardSearch","/components/dashboard-search","3.components/dashboard-search",{"title":310,"path":311,"stem":312,"framework":11,"module":37},"DashboardSearchButton","/components/dashboard-search-button","3.components/dashboard-search-button",{"title":314,"path":315,"stem":316,"framework":11,"module":37},"DashboardSidebar","/components/dashboard-sidebar","3.components/dashboard-sidebar",{"title":318,"path":319,"stem":320,"framework":11,"module":37},"DashboardSidebarCollapse","/components/dashboard-sidebar-collapse","3.components/dashboard-sidebar-collapse",{"title":322,"path":323,"stem":324,"framework":11,"module":37},"DashboardSidebarToggle","/components/dashboard-sidebar-toggle","3.components/dashboard-sidebar-toggle",{"title":326,"path":327,"stem":328,"framework":11,"module":37},"DashboardToolbar","/components/dashboard-toolbar","3.components/dashboard-toolbar",{"title":330,"path":331,"stem":332,"framework":11,"module":11},"Drawer","/components/drawer","3.components/drawer",{"title":334,"path":335,"stem":336,"framework":11,"module":11},"DropdownMenu","/components/dropdown-menu","3.components/dropdown-menu",{"title":338,"path":339,"stem":340,"framework":11,"module":37},"Error","/components/error","3.components/error",{"title":342,"path":343,"stem":344,"framework":11,"module":37},"Footer","/components/footer","3.components/footer",{"title":346,"path":347,"stem":348,"framework":11,"module":37},"FooterColumns","/components/footer-columns","3.components/footer-columns",{"title":350,"path":351,"stem":352,"framework":11,"module":11},"Form","/components/form","3.components/form",{"title":354,"path":355,"stem":356,"framework":11,"module":11},"FormField","/components/form-field","3.components/form-field",{"title":358,"path":359,"stem":360,"framework":11,"module":37},"Header","/components/header","3.components/header",{"title":362,"path":363,"stem":364,"framework":11,"module":11},"Icon","/components/icon","3.components/icon",{"title":366,"path":367,"stem":368,"framework":11,"module":11},"Input","/components/input","3.components/input",{"title":370,"path":371,"stem":372,"framework":11,"module":11},"InputMenu","/components/input-menu","3.components/input-menu",{"title":374,"path":375,"stem":376,"framework":11,"module":11},"InputNumber","/components/input-number","3.components/input-number",{"title":378,"path":379,"stem":380,"framework":11,"module":11},"Kbd","/components/kbd","3.components/kbd",{"title":382,"path":383,"stem":384,"framework":11,"module":11},"Link","/components/link","3.components/link",{"title":386,"path":387,"stem":388,"framework":11,"module":37},"LocaleSelect","/components/locale-select","3.components/locale-select",{"title":390,"path":391,"stem":392,"framework":11,"module":37},"Main","/components/main","3.components/main",{"title":394,"path":395,"stem":396,"framework":11,"module":11},"Modal","/components/modal","3.components/modal",{"title":398,"path":399,"stem":400,"framework":11,"module":11},"NavigationMenu","/components/navigation-menu","3.components/navigation-menu",{"title":402,"path":403,"stem":404,"framework":11,"module":37},"Page","/components/page","3.components/page",{"title":406,"path":407,"stem":408,"framework":11,"module":37},"PageAccordion","/components/page-accordion","3.components/page-accordion",{"title":410,"path":411,"stem":412,"framework":11,"module":37},"PageAnchors","/components/page-anchors","3.components/page-anchors",{"title":414,"path":415,"stem":416,"framework":11,"module":37},"PageAside","/components/page-aside","3.components/page-aside",{"title":418,"path":419,"stem":420,"framework":11,"module":37},"PageBody","/components/page-body","3.components/page-body",{"title":422,"path":423,"stem":424,"framework":11,"module":37},"PageCard","/components/page-card","3.components/page-card",{"title":426,"path":427,"stem":428,"framework":11,"module":37},"PageColumns","/components/page-columns","3.components/page-columns",{"title":430,"path":431,"stem":432,"framework":11,"module":37},"PageCTA","/components/page-cta","3.components/page-cta",{"title":434,"path":435,"stem":436,"framework":11,"module":37},"PageFeature","/components/page-feature","3.components/page-feature",{"title":438,"path":439,"stem":440,"framework":11,"module":37},"PageGrid","/components/page-grid","3.components/page-grid",{"title":442,"path":443,"stem":444,"framework":11,"module":37},"PageHeader","/components/page-header","3.components/page-header",{"title":446,"path":447,"stem":448,"framework":11,"module":37},"PageHero","/components/page-hero","3.components/page-hero",{"title":450,"path":451,"stem":452,"framework":11,"module":37},"PageLinks","/components/page-links","3.components/page-links",{"title":454,"path":455,"stem":456,"framework":11,"module":37},"PageList","/components/page-list","3.components/page-list",{"title":458,"path":459,"stem":460,"framework":11,"module":37},"PageLogos","/components/page-logos","3.components/page-logos",{"title":462,"path":463,"stem":464,"framework":11,"module":37},"PageMarquee","/components/page-marquee","3.components/page-marquee",{"title":466,"path":467,"stem":468,"framework":11,"module":37},"PageSection","/components/page-section","3.components/page-section",{"title":470,"path":471,"stem":472,"framework":11,"module":11},"Pagination","/components/pagination","3.components/pagination",{"title":474,"path":475,"stem":476,"framework":11,"module":11},"PinInput","/components/pin-input","3.components/pin-input",{"title":478,"path":479,"stem":480,"framework":11,"module":11},"Popover","/components/popover","3.components/popover",{"title":482,"path":483,"stem":484,"framework":11,"module":37},"PricingPlan","/components/pricing-plan","3.components/pricing-plan",{"title":486,"path":487,"stem":488,"framework":11,"module":37},"PricingPlans","/components/pricing-plans","3.components/pricing-plans",{"title":490,"path":491,"stem":492,"framework":11,"module":37,"badge":200},"PricingTable","/components/pricing-table","3.components/pricing-table",{"title":494,"path":495,"stem":496,"framework":11,"module":11},"Progress","/components/progress","3.components/progress",{"title":498,"path":499,"stem":500,"framework":11,"module":11},"RadioGroup","/components/radio-group","3.components/radio-group",{"title":502,"path":503,"stem":504,"framework":11,"module":11},"Select","/components/select","3.components/select",{"title":506,"path":507,"stem":508,"framework":11,"module":11},"SelectMenu","/components/select-menu","3.components/select-menu",{"title":510,"path":511,"stem":512,"framework":11,"module":11},"Separator","/components/separator","3.components/separator",{"title":514,"path":515,"stem":516,"framework":11,"module":11},"Skeleton","/components/skeleton","3.components/skeleton",{"title":518,"path":519,"stem":520,"framework":11,"module":11},"Slideover","/components/slideover","3.components/slideover",{"title":522,"path":523,"stem":524,"framework":11,"module":11},"Slider","/components/slider","3.components/slider",{"title":526,"path":527,"stem":528,"framework":11,"module":11},"Stepper","/components/stepper","3.components/stepper",{"title":530,"path":531,"stem":532,"framework":11,"module":11},"Switch","/components/switch","3.components/switch",{"title":534,"path":535,"stem":536,"framework":11,"module":11},"Table","/components/table","3.components/table",{"title":538,"path":539,"stem":540,"framework":11,"module":11},"Tabs","/components/tabs","3.components/tabs",{"title":542,"path":543,"stem":544,"framework":11,"module":11},"Textarea","/components/textarea","3.components/textarea",{"title":546,"path":547,"stem":548,"framework":11,"module":11},"Toast","/components/toast","3.components/toast",{"title":550,"path":551,"stem":552,"framework":11,"module":11},"Tooltip","/components/tooltip","3.components/tooltip",{"title":554,"path":555,"stem":556,"framework":11,"module":11},"Tree","/components/tree","3.components/tree",{"title":558,"path":559,"stem":560,"framework":11,"module":37},"User","/components/user","3.components/user",{"id":562,"title":119,"body":563,"category":11,"description":1730,"extension":1731,"framework":11,"links":11,"meta":1732,"module":11,"navigation":11,"path":120,"seo":1733,"stem":121,"__hash__":1734},"content/2.composables/use-overlay.md",{"type":564,"value":565,"toc":1712},"minimal",[566,571,586,728,742,761,765,772,775,819,825,831,847,853,858,874,880,885,900,906,911,921,927,932,942,948,951,955,961,964,974,1100,1106,1109,1119,1125,1128,1138,1312,1316,1322,1702,1708],[567,568,570],"h2",{"id":569},"usage","Usage",[572,573,574,575,578,579,582,583,585],"p",{},"Use the auto-imported ",[576,577,119],"code",{}," composable to programmatically control ",[580,581,394],"a",{"href":395}," and ",[580,584,518],{"href":519}," components.",[587,588,592],"pre",{"className":589,"code":590,"language":28,"meta":591,"style":591},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nconst overlay = useOverlay()\n\nconst modal = overlay.create(MyModal)\n\nasync function openModal() {\n  modal.open()\n}\n\u003C/script>\n","",[576,593,594,629,648,654,676,681,699,712,718],{"__ignoreMap":591},[595,596,599,603,607,611,614,617,620,624,626],"span",{"class":597,"line":598},"line",1,[595,600,602],{"class":601},"sMK4o","\u003C",[595,604,606],{"class":605},"swJcz","script",[595,608,610],{"class":609},"spNyl"," setup",[595,612,613],{"class":609}," lang",[595,615,616],{"class":601},"=",[595,618,619],{"class":601},"\"",[595,621,623],{"class":622},"sfazB","ts",[595,625,619],{"class":601},[595,627,628],{"class":601},">\n",[595,630,632,635,639,641,645],{"class":597,"line":631},2,[595,633,634],{"class":609},"const",[595,636,638],{"class":637},"sTEyZ"," overlay ",[595,640,616],{"class":601},[595,642,644],{"class":643},"s2Zo4"," useOverlay",[595,646,647],{"class":637},"()\n",[595,649,651],{"class":597,"line":650},3,[595,652,653],{"emptyLinePlaceholder":15},"\n",[595,655,657,659,662,664,667,670,673],{"class":597,"line":656},4,[595,658,634],{"class":609},[595,660,661],{"class":637}," modal ",[595,663,616],{"class":601},[595,665,666],{"class":637}," overlay",[595,668,669],{"class":601},".",[595,671,672],{"class":643},"create",[595,674,675],{"class":637},"(MyModal)\n",[595,677,679],{"class":597,"line":678},5,[595,680,653],{"emptyLinePlaceholder":15},[595,682,684,687,690,693,696],{"class":597,"line":683},6,[595,685,686],{"class":609},"async",[595,688,689],{"class":609}," function",[595,691,692],{"class":643}," openModal",[595,694,695],{"class":601},"()",[595,697,698],{"class":601}," {\n",[595,700,702,705,707,710],{"class":597,"line":701},7,[595,703,704],{"class":637},"  modal",[595,706,669],{"class":601},[595,708,709],{"class":643},"open",[595,711,647],{"class":605},[595,713,715],{"class":597,"line":714},8,[595,716,717],{"class":601},"}\n",[595,719,721,724,726],{"class":597,"line":720},9,[595,722,723],{"class":601},"\u003C/",[595,725,606],{"class":605},[595,727,628],{"class":601},[729,730,731],"ul",{},[732,733,734,735,737,738,741],"li",{},"The ",[576,736,119],{}," composable is created using ",[576,739,740],{},"createSharedComposable",", ensuring that the same overlay state is shared across your entire application.",[743,744,745],"note",{},[572,746,747,748,751,752,760],{},"In order to return a value from the overlay, the ",[576,749,750],{},"overlay.open().instance.result"," can be awaited. In order for this to work, however, the ",[753,754,755,756,759],"strong",{},"overlay component must emit a ",[576,757,758],{},"close"," event",". See example below for details.",[567,762,764],{"id":763},"api","API",[766,767,769],"h3",{"id":768},"createcomponent-t-options-overlayoptions-overlayinstance",[576,770,771],{},"create(component: T, options: OverlayOptions): OverlayInstance",[572,773,774],{},"Creates an overlay, and returns a factory instance",[729,776,777],{},[732,778,779,780],{},"Parameters:\n",[729,781,782,788],{},[732,783,784,787],{},[576,785,786],{},"component",": The overlay component",[732,789,790,793,794],{},[576,791,792],{},"options"," The overlay options\n",[729,795,796,805,811],{},[732,797,798,801,802],{},[576,799,800],{},"defaultOpen?: boolean"," Opens the overlay immediately after being created ",[576,803,804],{},"default: false",[732,806,807,810],{},[576,808,809],{},"props?: ComponentProps",": An optional object of props to pass to the rendered component.",[732,812,813,816,817],{},[576,814,815],{},"destroyOnClose?: boolean"," Removes the overlay from memory when closed ",[576,818,804],{},[766,820,822],{"id":821},"openid-symbol-props-componentpropst-openedoverlayt",[576,823,824],{},"open(id: symbol, props?: ComponentProps\u003CT>): OpenedOverlay\u003CT>",[572,826,827,828],{},"Opens the overlay using its ",[576,829,830],{},"id",[729,832,833],{},[732,834,779,835],{},[729,836,837,842],{},[732,838,839,841],{},[576,840,830],{},": The identifier of the overlay",[732,843,844,810],{},[576,845,846],{},"props",[766,848,850],{"id":849},"closeid-symbol-value-any-void",[576,851,852],{},"close(id: symbol, value?: any): void",[572,854,855,856],{},"Close an overlay using its ",[576,857,830],{},[729,859,860],{},[732,861,779,862],{},[729,863,864,868],{},[732,865,866,841],{},[576,867,830],{},[732,869,870,873],{},[576,871,872],{},"value",": A value to resolve the overlay promise with",[766,875,877],{"id":876},"patchid-symbol-props-componentpropst-void",[576,878,879],{},"patch(id: symbol, props: ComponentProps\u003CT>): void",[572,881,882,883],{},"Update an overlay using its ",[576,884,830],{},[729,886,887],{},[732,888,779,889],{},[729,890,891,895],{},[732,892,893,841],{},[576,894,830],{},[732,896,897,899],{},[576,898,846],{},": An object of props to update on the rendered component.",[766,901,903],{"id":902},"unmountid-symbol-void",[576,904,905],{},"unMount(id: symbol): void",[572,907,908,909],{},"Removes the overlay from the DOM using its ",[576,910,830],{},[729,912,913],{},[732,914,779,915],{},[729,916,917],{},[732,918,919,841],{},[576,920,830],{},[766,922,924],{"id":923},"isopenid-symbol-boolean",[576,925,926],{},"isOpen(id: symbol): boolean",[572,928,929,930],{},"Checks if an overlay its open using its ",[576,931,830],{},[729,933,934],{},[732,935,779,936],{},[729,937,938],{},[732,939,940,841],{},[576,941,830],{},[766,943,945],{"id":944},"overlays-overlay",[576,946,947],{},"overlays: Overlay[]",[572,949,950],{},"In-memory list of overlays that were created",[567,952,954],{"id":953},"overlay-instance-api","Overlay Instance API",[766,956,958],{"id":957},"openprops-componentpropst-promiseopenedoverlayt",[576,959,960],{},"open(props?: ComponentProps\u003CT>): Promise\u003COpenedOverlay\u003CT>>",[572,962,963],{},"Opens the overlay",[729,965,966],{},[732,967,779,968],{},[729,969,970],{},[732,971,972,810],{},[576,973,846],{},[587,975,977],{"className":589,"code":976,"language":28,"meta":591,"style":591},"\u003Cscript setup lang=\"ts\">\nconst overlay = useOverlay()\n\nconst modal = overlay.create(MyModalContent)\n\nfunction openModal() {\n  modal.open({\n    title: 'Welcome'\n  })\n}\n\u003C/script>\n",[576,978,979,999,1011,1015,1032,1036,1047,1061,1078,1086,1091],{"__ignoreMap":591},[595,980,981,983,985,987,989,991,993,995,997],{"class":597,"line":598},[595,982,602],{"class":601},[595,984,606],{"class":605},[595,986,610],{"class":609},[595,988,613],{"class":609},[595,990,616],{"class":601},[595,992,619],{"class":601},[595,994,623],{"class":622},[595,996,619],{"class":601},[595,998,628],{"class":601},[595,1000,1001,1003,1005,1007,1009],{"class":597,"line":631},[595,1002,634],{"class":609},[595,1004,638],{"class":637},[595,1006,616],{"class":601},[595,1008,644],{"class":643},[595,1010,647],{"class":637},[595,1012,1013],{"class":597,"line":650},[595,1014,653],{"emptyLinePlaceholder":15},[595,1016,1017,1019,1021,1023,1025,1027,1029],{"class":597,"line":656},[595,1018,634],{"class":609},[595,1020,661],{"class":637},[595,1022,616],{"class":601},[595,1024,666],{"class":637},[595,1026,669],{"class":601},[595,1028,672],{"class":643},[595,1030,1031],{"class":637},"(MyModalContent)\n",[595,1033,1034],{"class":597,"line":678},[595,1035,653],{"emptyLinePlaceholder":15},[595,1037,1038,1041,1043,1045],{"class":597,"line":683},[595,1039,1040],{"class":609},"function",[595,1042,692],{"class":643},[595,1044,695],{"class":601},[595,1046,698],{"class":601},[595,1048,1049,1051,1053,1055,1058],{"class":597,"line":701},[595,1050,704],{"class":637},[595,1052,669],{"class":601},[595,1054,709],{"class":643},[595,1056,1057],{"class":605},"(",[595,1059,1060],{"class":601},"{\n",[595,1062,1063,1066,1069,1072,1075],{"class":597,"line":714},[595,1064,1065],{"class":605},"    title",[595,1067,1068],{"class":601},":",[595,1070,1071],{"class":601}," '",[595,1073,1074],{"class":622},"Welcome",[595,1076,1077],{"class":601},"'\n",[595,1079,1080,1083],{"class":597,"line":720},[595,1081,1082],{"class":601},"  }",[595,1084,1085],{"class":605},")\n",[595,1087,1089],{"class":597,"line":1088},10,[595,1090,717],{"class":601},[595,1092,1094,1096,1098],{"class":597,"line":1093},11,[595,1095,723],{"class":601},[595,1097,606],{"class":605},[595,1099,628],{"class":601},[766,1101,1103],{"id":1102},"closevalue-any-void",[576,1104,1105],{},"close(value?: any): void",[572,1107,1108],{},"Close the overlay",[729,1110,1111],{},[732,1112,779,1113],{},[729,1114,1115],{},[732,1116,1117,873],{},[576,1118,872],{},[766,1120,1122],{"id":1121},"patchprops-componentpropst",[576,1123,1124],{},"patch(props: ComponentProps\u003CT>)",[572,1126,1127],{},"Updates the props of the overlay.",[729,1129,1130],{},[732,1131,779,1132],{},[729,1133,1134],{},[732,1135,1136,899],{},[576,1137,846],{},[587,1139,1141],{"className":589,"code":1140,"language":28,"meta":591,"style":591},"\u003Cscript setup lang=\"ts\">\nconst overlay = useOverlay()\n\nconst modal = overlay.create(MyModal, {\n  title: 'Welcome'\n})\n\nfunction openModal() {\n  modal.open()\n}\n\nfunction updateModalTitle() {\n  modal.patch({ title: 'Updated Title' })\n}\n\u003C/script>\n",[576,1142,1143,1163,1175,1179,1201,1214,1221,1225,1235,1245,1249,1253,1265,1298,1303],{"__ignoreMap":591},[595,1144,1145,1147,1149,1151,1153,1155,1157,1159,1161],{"class":597,"line":598},[595,1146,602],{"class":601},[595,1148,606],{"class":605},[595,1150,610],{"class":609},[595,1152,613],{"class":609},[595,1154,616],{"class":601},[595,1156,619],{"class":601},[595,1158,623],{"class":622},[595,1160,619],{"class":601},[595,1162,628],{"class":601},[595,1164,1165,1167,1169,1171,1173],{"class":597,"line":631},[595,1166,634],{"class":609},[595,1168,638],{"class":637},[595,1170,616],{"class":601},[595,1172,644],{"class":643},[595,1174,647],{"class":637},[595,1176,1177],{"class":597,"line":650},[595,1178,653],{"emptyLinePlaceholder":15},[595,1180,1181,1183,1185,1187,1189,1191,1193,1196,1199],{"class":597,"line":656},[595,1182,634],{"class":609},[595,1184,661],{"class":637},[595,1186,616],{"class":601},[595,1188,666],{"class":637},[595,1190,669],{"class":601},[595,1192,672],{"class":643},[595,1194,1195],{"class":637},"(MyModal",[595,1197,1198],{"class":601},",",[595,1200,698],{"class":601},[595,1202,1203,1206,1208,1210,1212],{"class":597,"line":678},[595,1204,1205],{"class":605},"  title",[595,1207,1068],{"class":601},[595,1209,1071],{"class":601},[595,1211,1074],{"class":622},[595,1213,1077],{"class":601},[595,1215,1216,1219],{"class":597,"line":683},[595,1217,1218],{"class":601},"}",[595,1220,1085],{"class":637},[595,1222,1223],{"class":597,"line":701},[595,1224,653],{"emptyLinePlaceholder":15},[595,1226,1227,1229,1231,1233],{"class":597,"line":714},[595,1228,1040],{"class":609},[595,1230,692],{"class":643},[595,1232,695],{"class":601},[595,1234,698],{"class":601},[595,1236,1237,1239,1241,1243],{"class":597,"line":720},[595,1238,704],{"class":637},[595,1240,669],{"class":601},[595,1242,709],{"class":643},[595,1244,647],{"class":605},[595,1246,1247],{"class":597,"line":1088},[595,1248,717],{"class":601},[595,1250,1251],{"class":597,"line":1093},[595,1252,653],{"emptyLinePlaceholder":15},[595,1254,1256,1258,1261,1263],{"class":597,"line":1255},12,[595,1257,1040],{"class":609},[595,1259,1260],{"class":643}," updateModalTitle",[595,1262,695],{"class":601},[595,1264,698],{"class":601},[595,1266,1268,1270,1272,1275,1277,1280,1283,1285,1287,1290,1293,1296],{"class":597,"line":1267},13,[595,1269,704],{"class":637},[595,1271,669],{"class":601},[595,1273,1274],{"class":643},"patch",[595,1276,1057],{"class":605},[595,1278,1279],{"class":601},"{",[595,1281,1282],{"class":605}," title",[595,1284,1068],{"class":601},[595,1286,1071],{"class":601},[595,1288,1289],{"class":622},"Updated Title",[595,1291,1292],{"class":601},"'",[595,1294,1295],{"class":601}," }",[595,1297,1085],{"class":605},[595,1299,1301],{"class":597,"line":1300},14,[595,1302,717],{"class":601},[595,1304,1306,1308,1310],{"class":597,"line":1305},15,[595,1307,723],{"class":601},[595,1309,606],{"class":605},[595,1311,628],{"class":601},[567,1313,1315],{"id":1314},"example","Example",[572,1317,1318,1319,1321],{},"Here's a complete example of how to use the ",[576,1320,119],{}," composable:",[587,1323,1325],{"className":589,"code":1324,"language":28,"meta":591,"style":591},"\u003Cscript setup lang=\"ts\">\nconst overlay = useOverlay()\n\n// Create with default props\nconst modalA = overlay.create(ModalA, { title: 'Welcome' })\nconst modalB = overlay.create(ModalB)\n\nconst slideoverA = overlay.create(SlideoverA)\n\nconst openModalA = () => {\n  // Open  Modal A, but override the title prop\n  modalA.open({ title: 'Hello' })\n}\n\nconst openModalB = async () => {\n  // Open modalB, and wait for its result\n  const modalBInstance = modalB.open()\n\n  const input = await modalBInstance.result\n\n  // Pass the result from modalB to the slideover, and open it.\n  slideoverA.open({ input })\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cbutton @click=\"openModal\">Open Modal\u003C/button>\n  \u003C/div>\n\u003C/template>\n",[576,1326,1327,1347,1359,1363,1369,1406,1424,1428,1446,1450,1467,1472,1500,1504,1508,1526,1532,1553,1558,1579,1584,1590,1610,1615,1624,1629,1639,1650,1683,1693],{"__ignoreMap":591},[595,1328,1329,1331,1333,1335,1337,1339,1341,1343,1345],{"class":597,"line":598},[595,1330,602],{"class":601},[595,1332,606],{"class":605},[595,1334,610],{"class":609},[595,1336,613],{"class":609},[595,1338,616],{"class":601},[595,1340,619],{"class":601},[595,1342,623],{"class":622},[595,1344,619],{"class":601},[595,1346,628],{"class":601},[595,1348,1349,1351,1353,1355,1357],{"class":597,"line":631},[595,1350,634],{"class":609},[595,1352,638],{"class":637},[595,1354,616],{"class":601},[595,1356,644],{"class":643},[595,1358,647],{"class":637},[595,1360,1361],{"class":597,"line":650},[595,1362,653],{"emptyLinePlaceholder":15},[595,1364,1365],{"class":597,"line":656},[595,1366,1368],{"class":1367},"sHwdD","// Create with default props\n",[595,1370,1371,1373,1376,1378,1380,1382,1384,1387,1389,1392,1394,1396,1398,1400,1402,1404],{"class":597,"line":678},[595,1372,634],{"class":609},[595,1374,1375],{"class":637}," modalA ",[595,1377,616],{"class":601},[595,1379,666],{"class":637},[595,1381,669],{"class":601},[595,1383,672],{"class":643},[595,1385,1386],{"class":637},"(ModalA",[595,1388,1198],{"class":601},[595,1390,1391],{"class":601}," {",[595,1393,1282],{"class":605},[595,1395,1068],{"class":601},[595,1397,1071],{"class":601},[595,1399,1074],{"class":622},[595,1401,1292],{"class":601},[595,1403,1295],{"class":601},[595,1405,1085],{"class":637},[595,1407,1408,1410,1413,1415,1417,1419,1421],{"class":597,"line":683},[595,1409,634],{"class":609},[595,1411,1412],{"class":637}," modalB ",[595,1414,616],{"class":601},[595,1416,666],{"class":637},[595,1418,669],{"class":601},[595,1420,672],{"class":643},[595,1422,1423],{"class":637},"(ModalB)\n",[595,1425,1426],{"class":597,"line":701},[595,1427,653],{"emptyLinePlaceholder":15},[595,1429,1430,1432,1435,1437,1439,1441,1443],{"class":597,"line":714},[595,1431,634],{"class":609},[595,1433,1434],{"class":637}," slideoverA ",[595,1436,616],{"class":601},[595,1438,666],{"class":637},[595,1440,669],{"class":601},[595,1442,672],{"class":643},[595,1444,1445],{"class":637},"(SlideoverA)\n",[595,1447,1448],{"class":597,"line":720},[595,1449,653],{"emptyLinePlaceholder":15},[595,1451,1452,1454,1457,1459,1462,1465],{"class":597,"line":1088},[595,1453,634],{"class":609},[595,1455,1456],{"class":637}," openModalA ",[595,1458,616],{"class":601},[595,1460,1461],{"class":601}," ()",[595,1463,1464],{"class":609}," =>",[595,1466,698],{"class":601},[595,1468,1469],{"class":597,"line":1093},[595,1470,1471],{"class":1367},"  // Open  Modal A, but override the title prop\n",[595,1473,1474,1477,1479,1481,1483,1485,1487,1489,1491,1494,1496,1498],{"class":597,"line":1255},[595,1475,1476],{"class":637},"  modalA",[595,1478,669],{"class":601},[595,1480,709],{"class":643},[595,1482,1057],{"class":605},[595,1484,1279],{"class":601},[595,1486,1282],{"class":605},[595,1488,1068],{"class":601},[595,1490,1071],{"class":601},[595,1492,1493],{"class":622},"Hello",[595,1495,1292],{"class":601},[595,1497,1295],{"class":601},[595,1499,1085],{"class":605},[595,1501,1502],{"class":597,"line":1267},[595,1503,717],{"class":601},[595,1505,1506],{"class":597,"line":1300},[595,1507,653],{"emptyLinePlaceholder":15},[595,1509,1510,1512,1515,1517,1520,1522,1524],{"class":597,"line":1305},[595,1511,634],{"class":609},[595,1513,1514],{"class":637}," openModalB ",[595,1516,616],{"class":601},[595,1518,1519],{"class":609}," async",[595,1521,1461],{"class":601},[595,1523,1464],{"class":609},[595,1525,698],{"class":601},[595,1527,1529],{"class":597,"line":1528},16,[595,1530,1531],{"class":1367},"  // Open modalB, and wait for its result\n",[595,1533,1535,1538,1541,1544,1547,1549,1551],{"class":597,"line":1534},17,[595,1536,1537],{"class":609},"  const",[595,1539,1540],{"class":637}," modalBInstance",[595,1542,1543],{"class":601}," =",[595,1545,1546],{"class":637}," modalB",[595,1548,669],{"class":601},[595,1550,709],{"class":643},[595,1552,647],{"class":605},[595,1554,1556],{"class":597,"line":1555},18,[595,1557,653],{"emptyLinePlaceholder":15},[595,1559,1561,1563,1566,1568,1572,1574,1576],{"class":597,"line":1560},19,[595,1562,1537],{"class":609},[595,1564,1565],{"class":637}," input",[595,1567,1543],{"class":601},[595,1569,1571],{"class":1570},"s7zQu"," await",[595,1573,1540],{"class":637},[595,1575,669],{"class":601},[595,1577,1578],{"class":637},"result\n",[595,1580,1582],{"class":597,"line":1581},20,[595,1583,653],{"emptyLinePlaceholder":15},[595,1585,1587],{"class":597,"line":1586},21,[595,1588,1589],{"class":1367},"  // Pass the result from modalB to the slideover, and open it.\n",[595,1591,1593,1596,1598,1600,1602,1604,1606,1608],{"class":597,"line":1592},22,[595,1594,1595],{"class":637},"  slideoverA",[595,1597,669],{"class":601},[595,1599,709],{"class":643},[595,1601,1057],{"class":605},[595,1603,1279],{"class":601},[595,1605,1565],{"class":637},[595,1607,1295],{"class":601},[595,1609,1085],{"class":605},[595,1611,1613],{"class":597,"line":1612},23,[595,1614,717],{"class":601},[595,1616,1618,1620,1622],{"class":597,"line":1617},24,[595,1619,723],{"class":601},[595,1621,606],{"class":605},[595,1623,628],{"class":601},[595,1625,1627],{"class":597,"line":1626},25,[595,1628,653],{"emptyLinePlaceholder":15},[595,1630,1632,1634,1637],{"class":597,"line":1631},26,[595,1633,602],{"class":601},[595,1635,1636],{"class":605},"template",[595,1638,628],{"class":601},[595,1640,1642,1645,1648],{"class":597,"line":1641},27,[595,1643,1644],{"class":601},"  \u003C",[595,1646,1647],{"class":605},"div",[595,1649,628],{"class":601},[595,1651,1653,1656,1659,1662,1664,1666,1669,1671,1674,1677,1679,1681],{"class":597,"line":1652},28,[595,1654,1655],{"class":601},"    \u003C",[595,1657,1658],{"class":605},"button",[595,1660,1661],{"class":609}," @click",[595,1663,616],{"class":601},[595,1665,619],{"class":601},[595,1667,1668],{"class":622},"openModal",[595,1670,619],{"class":601},[595,1672,1673],{"class":601},">",[595,1675,1676],{"class":637},"Open Modal",[595,1678,723],{"class":601},[595,1680,1658],{"class":605},[595,1682,628],{"class":601},[595,1684,1686,1689,1691],{"class":597,"line":1685},29,[595,1687,1688],{"class":601},"  \u003C/",[595,1690,1647],{"class":605},[595,1692,628],{"class":601},[595,1694,1696,1698,1700],{"class":597,"line":1695},30,[595,1697,723],{"class":601},[595,1699,1636],{"class":605},[595,1701,628],{"class":601},[572,1703,1704,1705,1707],{},"In this example, we're using the ",[576,1706,119],{}," composable to control multiple modals and slideovers.",[1709,1710,1711],"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 .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 .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 .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}",{"title":591,"searchDepth":631,"depth":631,"links":1713},[1714,1715,1724,1729],{"id":569,"depth":631,"text":570},{"id":763,"depth":631,"text":764,"children":1716},[1717,1718,1719,1720,1721,1722,1723],{"id":768,"depth":650,"text":771},{"id":821,"depth":650,"text":824},{"id":849,"depth":650,"text":852},{"id":876,"depth":650,"text":879},{"id":902,"depth":650,"text":905},{"id":923,"depth":650,"text":926},{"id":944,"depth":650,"text":947},{"id":953,"depth":631,"text":954,"children":1725},[1726,1727,1728],{"id":957,"depth":650,"text":960},{"id":1102,"depth":650,"text":1105},{"id":1121,"depth":650,"text":1124},{"id":1314,"depth":631,"text":1315},"A composable to programmatically control overlays.","md",{},{"title":119,"description":1730},"VKx8YBzpRDjgs--62mwG9g7eNfOvUT80dDmW7k9C__4",[1736,1738],{"title":115,"path":116,"stem":117,"description":1737,"children":-1},"A composable to define keyboard shortcuts in your app.",{"title":123,"path":124,"stem":125,"description":1739,"children":-1},"A composable to display toast notifications in your app.",{"data":1741,"body":1742},{},{"type":1743,"children":1744},"root",[1745],{"type":1746,"tag":572,"props":1747,"children":1748},"element",{},[1749],{"type":1750,"value":1730},"text",1747911350382]