[{"data":1,"prerenderedAt":3455},["ShallowReactive",2],{"navigation":3,"-docs-composables-use-overlay":929,"-docs-composables-use-overlay-description":3445},[4],{"title":5,"path":6,"stem":7,"children":8,"page":36},"Docs","/docs","docs",[9,163,792,828],{"title":10,"path":11,"stem":12,"children":13,"framework":16,"category":16,"description":16,"icon":30},"Get Started","/docs/getting-started","docs/1.getting-started/1.index",[14,19,37,47,53,76,140],{"title":15,"path":11,"stem":12,"framework":16,"category":16,"description":17,"icon":18},"Introduction",null,"Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.","i-lucide-house",{"title":20,"framework":16,"category":16,"description":16,"shadow":21,"path":22,"stem":23,"children":24,"page":36},"Installation",true,"/docs/getting-started/installation","docs/1.getting-started/2.installation",[25,31],{"title":20,"path":26,"stem":27,"framework":28,"category":16,"description":29,"icon":30},"/docs/getting-started/installation/nuxt","docs/1.getting-started/2.installation/1.nuxt","nuxt","Learn how to install and configure Nuxt UI in your Nuxt application.","i-lucide-square-play",{"title":20,"path":32,"stem":33,"framework":34,"category":16,"description":35,"icon":30},"/docs/getting-started/installation/vue","docs/1.getting-started/2.installation/2.vue","vue","Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.",false,{"title":38,"framework":16,"category":16,"description":16,"icon":39,"shadow":21,"path":40,"stem":41,"children":42,"page":36},"Migration","i-lucide-arrow-right-left","/docs/getting-started/migration","docs/1.getting-started/3.migration",[43],{"title":38,"path":44,"stem":45,"framework":16,"category":16,"description":46,"icon":39},"/docs/getting-started/migration/v4","docs/1.getting-started/3.migration/1.v4","A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.",{"title":48,"path":49,"stem":50,"framework":16,"category":16,"description":51,"icon":52},"Contribution","/docs/getting-started/contribution","docs/1.getting-started/4.contribution","A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.","i-lucide-handshake",{"title":54,"path":55,"stem":56,"children":57,"page":36},"Theme","/docs/getting-started/theme","docs/1.getting-started/5.theme",[58,64,70],{"title":59,"path":60,"stem":61,"framework":16,"category":16,"description":62,"icon":63},"Design System","/docs/getting-started/theme/design-system","docs/1.getting-started/5.theme/1.design-system","Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.","i-lucide-palette",{"title":65,"path":66,"stem":67,"framework":16,"category":16,"description":68,"icon":69},"CSS Variables","/docs/getting-started/theme/css-variables","docs/1.getting-started/5.theme/2.css-variables","Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.","i-lucide-swatch-book",{"title":71,"path":72,"stem":73,"framework":16,"category":16,"description":74,"icon":75},"Components","/docs/getting-started/theme/components","docs/1.getting-started/5.theme/3.components","Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.","i-lucide-layout-grid",{"title":77,"framework":16,"category":16,"description":16,"path":78,"stem":79,"children":80,"page":36},"Integrations","/docs/getting-started/integrations","docs/1.getting-started/6.integrations",[81,95,101,115,129,135],{"title":82,"framework":16,"category":16,"description":16,"shadow":21,"path":83,"stem":84,"children":85,"page":36},"Icons","/docs/getting-started/integrations/icons","docs/1.getting-started/6.integrations/1.icons",[86,91],{"title":82,"path":87,"stem":88,"framework":28,"category":16,"description":89,"icon":90},"/docs/getting-started/integrations/icons/nuxt","docs/1.getting-started/6.integrations/1.icons/1.nuxt","Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.","i-lucide-smile",{"title":82,"path":92,"stem":93,"framework":34,"category":16,"description":94,"icon":90},"/docs/getting-started/integrations/icons/vue","docs/1.getting-started/6.integrations/1.icons/2.vue","Nuxt UI integrates with Iconify to access over 200,000+ icons.",{"title":96,"path":97,"stem":98,"framework":28,"category":16,"description":99,"icon":100},"Fonts","/docs/getting-started/integrations/fonts","docs/1.getting-started/6.integrations/2.fonts","Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.","i-lucide-a-large-small",{"title":102,"framework":16,"category":16,"description":16,"shadow":21,"path":103,"stem":104,"children":105,"page":36},"Color Mode","/docs/getting-started/integrations/color-mode","docs/1.getting-started/6.integrations/3.color-mode",[106,111],{"title":102,"path":107,"stem":108,"framework":28,"category":16,"description":109,"icon":110},"/docs/getting-started/integrations/color-mode/nuxt","docs/1.getting-started/6.integrations/3.color-mode/1.nuxt","Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.","i-lucide-sun-moon",{"title":102,"path":112,"stem":113,"framework":34,"category":16,"description":114,"icon":110},"/docs/getting-started/integrations/color-mode/vue","docs/1.getting-started/6.integrations/3.color-mode/2.vue","Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.",{"title":116,"framework":16,"category":16,"description":16,"shadow":21,"path":117,"stem":118,"children":119,"page":36},"I18n","/docs/getting-started/integrations/i18n","docs/1.getting-started/6.integrations/4.i18n",[120,126],{"title":121,"path":122,"stem":123,"framework":28,"category":16,"description":124,"icon":125},"Internationalization (i18n)","/docs/getting-started/integrations/i18n/nuxt","docs/1.getting-started/6.integrations/4.i18n/1.nuxt","Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.","i-lucide-languages",{"title":121,"path":127,"stem":128,"framework":34,"category":16,"description":124,"icon":125},"/docs/getting-started/integrations/i18n/vue","docs/1.getting-started/6.integrations/4.i18n/2.vue",{"title":130,"path":131,"stem":132,"framework":28,"category":16,"description":133,"icon":134},"Content","/docs/getting-started/integrations/content","docs/1.getting-started/6.integrations/5.content","Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.","i-simple-icons-markdown",{"title":136,"path":137,"stem":138,"framework":34,"category":16,"description":139,"icon":134},"SSR","/docs/getting-started/integrations/ssr","docs/1.getting-started/6.integrations/6.ssr","Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.",{"title":141,"framework":16,"category":16,"description":16,"path":142,"stem":143,"children":144,"page":36},"Agents","/docs/getting-started/ai","docs/1.getting-started/7.ai",[145,151,157],{"title":146,"path":147,"stem":148,"framework":16,"category":16,"description":149,"icon":150},"MCP Server","/docs/getting-started/ai/mcp","docs/1.getting-started/7.ai/1.mcp","Use Nuxt UI components in your AI assistants with Model Context Protocol support.","i-lucide-server",{"title":152,"path":153,"stem":154,"framework":16,"category":16,"description":155,"icon":156},"LLMs.txt","/docs/getting-started/ai/llms-txt","docs/1.getting-started/7.ai/2.llms-txt","How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.","i-lucide-bot",{"title":158,"path":159,"stem":160,"framework":16,"category":16,"description":161,"icon":162},"Skills","/docs/getting-started/ai/skills","docs/1.getting-started/7.ai/3.skills","Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.","i-lucide-sparkles",{"title":71,"framework":16,"category":16,"description":16,"icon":164,"path":165,"stem":166,"children":167,"page":36},"i-lucide-square-code","/docs/components","docs/2.components",[168,174,180,186,192,197,202,207,212,217,222,228,233,238,243,248,253,258,264,269,274,279,284,290,295,300,305,311,316,321,326,331,336,341,346,352,357,362,367,372,378,384,389,394,399,404,409,414,419,424,429,434,439,446,451,456,461,466,471,476,481,486,491,496,501,506,511,516,521,526,531,536,541,546,551,556,561,567,572,577,582,587,592,597,602,607,612,617,622,627,632,637,642,647,652,657,662,667,672,677,682,687,692,697,702,707,712,717,722,727,732,737,742,747,752,757,762,767,772,777,782,787],{"title":169,"path":170,"stem":171,"framework":16,"category":172,"description":173},"Accordion","/docs/components/accordion","docs/2.components/accordion","data","A stacked set of collapsible panels.",{"title":175,"path":176,"stem":177,"framework":16,"category":178,"description":179},"Alert","/docs/components/alert","docs/2.components/alert","element","A callout to draw user's attention.",{"title":181,"path":182,"stem":183,"framework":16,"category":184,"description":185},"App","/docs/components/app","docs/2.components/app","layout","Wraps your app to provide global configurations and more.",{"title":187,"path":188,"stem":189,"framework":16,"category":190,"description":191},"AuthForm","/docs/components/auth-form","docs/2.components/auth-form","page","A customizable Form to create login, register or password reset forms.",{"title":193,"path":194,"stem":195,"framework":16,"category":178,"description":196},"Avatar","/docs/components/avatar","docs/2.components/avatar","An img element with fallback and Nuxt Image support.",{"title":198,"path":199,"stem":200,"framework":16,"category":178,"description":201},"AvatarGroup","/docs/components/avatar-group","docs/2.components/avatar-group","Stack multiple avatars in a group.",{"title":203,"path":204,"stem":205,"framework":16,"category":178,"description":206},"Badge","/docs/components/badge","docs/2.components/badge","A short text to represent a status or a category.",{"title":208,"path":209,"stem":210,"framework":16,"category":178,"description":211},"Banner","/docs/components/banner","docs/2.components/banner","Display a banner at the top of your website to inform users about important information.",{"title":213,"path":214,"stem":215,"framework":16,"category":190,"description":216},"BlogPost","/docs/components/blog-post","docs/2.components/blog-post","A customizable article to display in a blog page.",{"title":218,"path":219,"stem":220,"framework":16,"category":190,"description":221},"BlogPosts","/docs/components/blog-posts","docs/2.components/blog-posts","Display a list of blog posts in a responsive grid layout.",{"title":223,"path":224,"stem":225,"framework":16,"category":226,"description":227},"Breadcrumb","/docs/components/breadcrumb","docs/2.components/breadcrumb","navigation","A hierarchy of links to navigate through a website.",{"title":229,"path":230,"stem":231,"framework":16,"category":178,"description":232},"Button","/docs/components/button","docs/2.components/button","A button element that can act as a link or trigger an action.",{"title":234,"path":235,"stem":236,"framework":16,"category":178,"description":237},"Calendar","/docs/components/calendar","docs/2.components/calendar","A calendar component for selecting single dates, multiple dates or date ranges.",{"title":239,"path":240,"stem":241,"framework":16,"category":178,"description":242},"Card","/docs/components/card","docs/2.components/card","Display content in a card with a header, body and footer.",{"title":244,"path":245,"stem":246,"framework":16,"category":172,"description":247},"Carousel","/docs/components/carousel","docs/2.components/carousel","A carousel with motion and swipe built using Embla.",{"title":249,"path":250,"stem":251,"framework":16,"category":190,"description":252},"ChangelogVersion","/docs/components/changelog-version","docs/2.components/changelog-version","A customizable article to display in a changelog.",{"title":254,"path":255,"stem":256,"framework":16,"category":190,"description":257},"ChangelogVersions","/docs/components/changelog-versions","docs/2.components/changelog-versions","Display a list of changelog versions in a timeline.",{"title":259,"path":260,"stem":261,"framework":16,"category":262,"description":263},"ChatMessage","/docs/components/chat-message","docs/2.components/chat-message","chat","Display a chat message with icon, avatar, and actions.",{"title":265,"path":266,"stem":267,"framework":16,"category":262,"description":268},"ChatMessages","/docs/components/chat-messages","docs/2.components/chat-messages","Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.",{"title":270,"path":271,"stem":272,"framework":16,"category":262,"description":273},"ChatPalette","/docs/components/chat-palette","docs/2.components/chat-palette","A chat palette to create a chatbot interface inside an overlay.",{"title":275,"path":276,"stem":277,"framework":16,"category":262,"description":278},"ChatPrompt","/docs/components/chat-prompt","docs/2.components/chat-prompt","An enhanced Textarea for submitting prompts in AI chat interfaces.",{"title":280,"path":281,"stem":282,"framework":16,"category":262,"description":283},"ChatPromptSubmit","/docs/components/chat-prompt-submit","docs/2.components/chat-prompt-submit","A Button for submitting chat prompts with automatic status handling.",{"title":285,"path":286,"stem":287,"framework":16,"category":288,"description":289},"Checkbox","/docs/components/checkbox","docs/2.components/checkbox","form","An input element to toggle between checked and unchecked states.",{"title":291,"path":292,"stem":293,"framework":16,"category":288,"description":294},"CheckboxGroup","/docs/components/checkbox-group","docs/2.components/checkbox-group","A set of checklist buttons to select multiple option from a list.",{"title":296,"path":297,"stem":298,"framework":16,"category":178,"description":299},"Chip","/docs/components/chip","docs/2.components/chip","An indicator of a numeric value or a state.",{"title":301,"path":302,"stem":303,"framework":16,"category":178,"description":304},"Collapsible","/docs/components/collapsible","docs/2.components/collapsible","A collapsible element to toggle visibility of its content.",{"title":306,"path":307,"stem":308,"framework":16,"category":309,"description":310},"ColorModeAvatar","/docs/components/color-mode-avatar","docs/2.components/color-mode-avatar","color-mode","An Avatar with a different source for light and dark mode.",{"title":312,"path":313,"stem":314,"framework":16,"category":309,"description":315},"ColorModeButton","/docs/components/color-mode-button","docs/2.components/color-mode-button","A Button to switch between light and dark mode.",{"title":317,"path":318,"stem":319,"framework":16,"category":309,"description":320},"ColorModeImage","/docs/components/color-mode-image","docs/2.components/color-mode-image","An image element with a different source for light and dark mode.",{"title":322,"path":323,"stem":324,"framework":16,"category":309,"description":325},"ColorModeSelect","/docs/components/color-mode-select","docs/2.components/color-mode-select","A Select to switch between system, dark & light mode.",{"title":327,"path":328,"stem":329,"framework":16,"category":309,"description":330},"ColorModeSwitch","/docs/components/color-mode-switch","docs/2.components/color-mode-switch","A switch to toggle between light and dark mode.",{"title":332,"path":333,"stem":334,"framework":16,"category":288,"description":335},"ColorPicker","/docs/components/color-picker","docs/2.components/color-picker","A component to select a color.",{"title":337,"path":338,"stem":339,"framework":16,"category":226,"description":340},"CommandPalette","/docs/components/command-palette","docs/2.components/command-palette","A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.",{"title":342,"path":343,"stem":344,"framework":16,"category":184,"description":345},"Container","/docs/components/container","docs/2.components/container","A container lets you center and constrain the width of your content.",{"title":347,"path":348,"stem":349,"framework":28,"category":350,"description":351},"ContentNavigation","/docs/components/content-navigation","docs/2.components/content-navigation","content","An accordion-style navigation component for organizing page links.",{"title":353,"path":354,"stem":355,"framework":28,"category":350,"description":356},"ContentSearch","/docs/components/content-search","docs/2.components/content-search","A ready to use CommandPalette to add to your documentation.",{"title":358,"path":359,"stem":360,"framework":28,"category":350,"description":361},"ContentSearchButton","/docs/components/content-search-button","docs/2.components/content-search-button","A pre-styled Button to open the ContentSearch modal.",{"title":363,"path":364,"stem":365,"framework":28,"category":350,"description":366},"ContentSurround","/docs/components/content-surround","docs/2.components/content-surround","A pair of prev and next links to navigate between pages.",{"title":368,"path":369,"stem":370,"framework":28,"category":350,"description":371},"ContentToc","/docs/components/content-toc","docs/2.components/content-toc","A sticky Table of Contents with automatic active anchor link highlighting.",{"title":373,"path":374,"stem":375,"framework":16,"category":376,"description":377},"ContextMenu","/docs/components/context-menu","docs/2.components/context-menu","overlay","A menu to display actions when right-clicking on an element.",{"title":379,"path":380,"stem":381,"framework":16,"category":382,"description":383},"DashboardGroup","/docs/components/dashboard-group","docs/2.components/dashboard-group","dashboard","A fixed layout component that provides context for dashboard components with sidebar state management and persistence.",{"title":385,"path":386,"stem":387,"framework":16,"category":382,"description":388},"DashboardNavbar","/docs/components/dashboard-navbar","docs/2.components/dashboard-navbar","A responsive navbar to display in a dashboard.",{"title":390,"path":391,"stem":392,"framework":16,"category":382,"description":393},"DashboardPanel","/docs/components/dashboard-panel","docs/2.components/dashboard-panel","A resizable panel to display in a dashboard.",{"title":395,"path":396,"stem":397,"framework":16,"category":382,"description":398},"DashboardResizeHandle","/docs/components/dashboard-resize-handle","docs/2.components/dashboard-resize-handle","A handle to resize a sidebar or panel.",{"title":400,"path":401,"stem":402,"framework":16,"category":382,"description":403},"DashboardSearch","/docs/components/dashboard-search","docs/2.components/dashboard-search","A ready to use CommandPalette to add to your dashboard.",{"title":405,"path":406,"stem":407,"framework":16,"category":382,"description":408},"DashboardSearchButton","/docs/components/dashboard-search-button","docs/2.components/dashboard-search-button","A pre-styled Button to open the DashboardSearch modal.",{"title":410,"path":411,"stem":412,"framework":16,"category":382,"description":413},"DashboardSidebar","/docs/components/dashboard-sidebar","docs/2.components/dashboard-sidebar","A resizable and collapsible sidebar to display in a dashboard.",{"title":415,"path":416,"stem":417,"framework":16,"category":382,"description":418},"DashboardSidebarCollapse","/docs/components/dashboard-sidebar-collapse","docs/2.components/dashboard-sidebar-collapse","A Button to collapse the sidebar on desktop.",{"title":420,"path":421,"stem":422,"framework":16,"category":382,"description":423},"DashboardSidebarToggle","/docs/components/dashboard-sidebar-toggle","docs/2.components/dashboard-sidebar-toggle","A Button to toggle the sidebar on mobile.",{"title":425,"path":426,"stem":427,"framework":16,"category":382,"description":428},"DashboardToolbar","/docs/components/dashboard-toolbar","docs/2.components/dashboard-toolbar","A toolbar to display under the navbar in a dashboard.",{"title":430,"path":431,"stem":432,"framework":16,"category":376,"description":433},"Drawer","/docs/components/drawer","docs/2.components/drawer","A drawer that smoothly slides in & out of the screen.",{"title":435,"path":436,"stem":437,"framework":16,"category":376,"description":438},"DropdownMenu","/docs/components/dropdown-menu","docs/2.components/dropdown-menu","A menu to display actions when clicking on an element.",{"title":440,"path":441,"stem":442,"framework":16,"category":443,"description":444,"badge":445},"Editor","/docs/components/editor","docs/2.components/editor","editor","A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.","New",{"title":447,"path":448,"stem":449,"framework":16,"category":443,"description":450,"badge":445},"EditorDragHandle","/docs/components/editor-drag-handle","docs/2.components/editor-drag-handle","A draggable handle for reordering and selecting blocks in the editor.",{"title":452,"path":453,"stem":454,"framework":16,"category":443,"description":455,"badge":445},"EditorEmojiMenu","/docs/components/editor-emoji-menu","docs/2.components/editor-emoji-menu","An emoji picker menu that displays emoji suggestions when typing the : character in the editor.",{"title":457,"path":458,"stem":459,"framework":16,"category":443,"description":460,"badge":445},"EditorMentionMenu","/docs/components/editor-mention-menu","docs/2.components/editor-mention-menu","A mention menu that displays user suggestions when typing a trigger character in the editor.",{"title":462,"path":463,"stem":464,"framework":16,"category":443,"description":465,"badge":445},"EditorSuggestionMenu","/docs/components/editor-suggestion-menu","docs/2.components/editor-suggestion-menu","A command menu that displays formatting and action suggestions when typing the / character in the editor.",{"title":467,"path":468,"stem":469,"framework":16,"category":443,"description":470,"badge":445},"EditorToolbar","/docs/components/editor-toolbar","docs/2.components/editor-toolbar","A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.",{"title":472,"path":473,"stem":474,"framework":16,"category":172,"description":475},"Empty","/docs/components/empty","docs/2.components/empty","A component to display an empty state.",{"title":477,"path":478,"stem":479,"framework":16,"category":184,"description":480},"Error","/docs/components/error","docs/2.components/error","A pre-built error component with NuxtError support.",{"title":482,"path":483,"stem":484,"framework":16,"category":178,"description":485},"FieldGroup","/docs/components/field-group","docs/2.components/field-group","Group multiple button-like elements together.",{"title":487,"path":488,"stem":489,"framework":16,"category":288,"description":490},"FileUpload","/docs/components/file-upload","docs/2.components/file-upload","An input element to upload files.",{"title":492,"path":493,"stem":494,"framework":16,"category":184,"description":495},"Footer","/docs/components/footer","docs/2.components/footer","A responsive footer component.",{"title":497,"path":498,"stem":499,"framework":16,"category":226,"description":500},"FooterColumns","/docs/components/footer-columns","docs/2.components/footer-columns","A list of links as columns to display in your Footer.",{"title":502,"path":503,"stem":504,"framework":16,"category":288,"description":505},"Form","/docs/components/form","docs/2.components/form","A form component with built-in validation and submission handling.",{"title":507,"path":508,"stem":509,"framework":16,"category":288,"description":510},"FormField","/docs/components/form-field","docs/2.components/form-field","A wrapper for form elements that provides validation and error handling.",{"title":512,"path":513,"stem":514,"framework":16,"category":184,"description":515},"Header","/docs/components/header","docs/2.components/header","A responsive header component.",{"title":517,"path":518,"stem":519,"framework":16,"category":178,"description":520},"Icon","/docs/components/icon","docs/2.components/icon","A component to display any icon from Iconify or another component.",{"title":522,"path":523,"stem":524,"framework":16,"category":288,"description":525},"Input","/docs/components/input","docs/2.components/input","An input element to enter text.",{"title":527,"path":528,"stem":529,"framework":16,"category":288,"description":530},"InputDate","/docs/components/input-date","docs/2.components/input-date","An input component for date selection.",{"title":532,"path":533,"stem":534,"framework":16,"category":288,"description":535},"InputMenu","/docs/components/input-menu","docs/2.components/input-menu","An autocomplete input with real-time suggestions.",{"title":537,"path":538,"stem":539,"framework":16,"category":288,"description":540},"InputNumber","/docs/components/input-number","docs/2.components/input-number","An input for numerical values with a customizable range.",{"title":542,"path":543,"stem":544,"framework":16,"category":288,"description":545},"InputTags","/docs/components/input-tags","docs/2.components/input-tags","An input element that displays interactive tags.",{"title":547,"path":548,"stem":549,"framework":16,"category":288,"description":550},"InputTime","/docs/components/input-time","docs/2.components/input-time","An input for selecting a time.",{"title":552,"path":553,"stem":554,"framework":16,"category":178,"description":555},"Kbd","/docs/components/kbd","docs/2.components/kbd","A kbd element to display a keyboard key.",{"title":557,"path":558,"stem":559,"framework":16,"category":226,"description":560},"Link","/docs/components/link","docs/2.components/link","A wrapper around \u003CNuxtLink> with extra props.",{"title":562,"path":563,"stem":564,"framework":16,"category":565,"description":566},"LocaleSelect","/docs/components/locale-select","docs/2.components/locale-select","i18n","A Select to switch between locales.",{"title":568,"path":569,"stem":570,"framework":16,"category":184,"description":571},"Main","/docs/components/main","docs/2.components/main","A main element that fills the available viewport height.",{"title":573,"path":574,"stem":575,"framework":16,"category":172,"description":576},"Marquee","/docs/components/marquee","docs/2.components/marquee","A component to create infinite scrolling content.",{"title":578,"path":579,"stem":580,"framework":16,"category":376,"description":581},"Modal","/docs/components/modal","docs/2.components/modal","A dialog window that can be used to display a message or request user input.",{"title":583,"path":584,"stem":585,"framework":16,"category":226,"description":586},"NavigationMenu","/docs/components/navigation-menu","docs/2.components/navigation-menu","A list of links that can be displayed horizontally or vertically.",{"title":588,"path":589,"stem":590,"framework":16,"category":190,"description":591},"Page","/docs/components/page","docs/2.components/page","A grid layout for your pages with left and right columns.",{"title":593,"path":594,"stem":595,"framework":16,"category":190,"description":596},"PageAnchors","/docs/components/page-anchors","docs/2.components/page-anchors","A list of anchors to be displayed in the page.",{"title":598,"path":599,"stem":600,"framework":16,"category":190,"description":601},"PageAside","/docs/components/page-aside","docs/2.components/page-aside","A sticky aside to display your page navigation.",{"title":603,"path":604,"stem":605,"framework":16,"category":190,"description":606},"PageBody","/docs/components/page-body","docs/2.components/page-body","The main content of your page.",{"title":608,"path":609,"stem":610,"framework":16,"category":190,"description":611},"PageCard","/docs/components/page-card","docs/2.components/page-card","A pre-styled card component that displays a title, description and optional link.",{"title":613,"path":614,"stem":615,"framework":16,"category":190,"description":616},"PageColumns","/docs/components/page-columns","docs/2.components/page-columns","A responsive multi-column layout system for organizing content side-by-side.",{"title":618,"path":619,"stem":620,"framework":16,"category":190,"description":621},"PageCTA","/docs/components/page-cta","docs/2.components/page-cta","A call to action section to display in your pages.",{"title":623,"path":624,"stem":625,"framework":16,"category":190,"description":626},"PageFeature","/docs/components/page-feature","docs/2.components/page-feature","A component to showcase key features of your application.",{"title":628,"path":629,"stem":630,"framework":16,"category":190,"description":631},"PageGrid","/docs/components/page-grid","docs/2.components/page-grid","A responsive grid system for displaying content in a flexible layout.",{"title":633,"path":634,"stem":635,"framework":16,"category":190,"description":636},"PageHeader","/docs/components/page-header","docs/2.components/page-header","A responsive header for your pages.",{"title":638,"path":639,"stem":640,"framework":16,"category":190,"description":641},"PageHero","/docs/components/page-hero","docs/2.components/page-hero","A responsive hero for your pages.",{"title":643,"path":644,"stem":645,"framework":16,"category":190,"description":646},"PageLinks","/docs/components/page-links","docs/2.components/page-links","A list of links to be displayed in the page.",{"title":648,"path":649,"stem":650,"framework":16,"category":190,"description":651},"PageList","/docs/components/page-list","docs/2.components/page-list","A vertical list layout for displaying content in a stacked format.",{"title":653,"path":654,"stem":655,"framework":16,"category":190,"description":656},"PageLogos","/docs/components/page-logos","docs/2.components/page-logos","A list of logos or images to display on your pages.",{"title":658,"path":659,"stem":660,"framework":16,"category":190,"description":661},"PageSection","/docs/components/page-section","docs/2.components/page-section","A responsive section for your pages.",{"title":663,"path":664,"stem":665,"framework":16,"category":226,"description":666},"Pagination","/docs/components/pagination","docs/2.components/pagination","A list of buttons or links to navigate through pages.",{"title":668,"path":669,"stem":670,"framework":16,"category":288,"description":671},"PinInput","/docs/components/pin-input","docs/2.components/pin-input","An input element to enter a pin.",{"title":673,"path":674,"stem":675,"framework":16,"category":376,"description":676},"Popover","/docs/components/popover","docs/2.components/popover","A non-modal dialog that floats around a trigger element.",{"title":678,"path":679,"stem":680,"framework":16,"category":190,"description":681},"PricingPlan","/docs/components/pricing-plan","docs/2.components/pricing-plan","A customizable pricing plan to display in a pricing page.",{"title":683,"path":684,"stem":685,"framework":16,"category":190,"description":686},"PricingPlans","/docs/components/pricing-plans","docs/2.components/pricing-plans","Display a list of pricing plans in a responsive grid layout.",{"title":688,"path":689,"stem":690,"framework":16,"category":190,"description":691},"PricingTable","/docs/components/pricing-table","docs/2.components/pricing-table","A responsive pricing table component that displays tiered pricing plans with feature comparisons.",{"title":693,"path":694,"stem":695,"framework":16,"category":178,"description":696},"Progress","/docs/components/progress","docs/2.components/progress","An indicator showing the progress of a task.",{"title":698,"path":699,"stem":700,"framework":16,"category":288,"description":701},"RadioGroup","/docs/components/radio-group","docs/2.components/radio-group","A set of radio buttons to select a single option from a list.",{"title":703,"path":704,"stem":705,"framework":16,"category":172,"description":706,"badge":445},"ScrollArea","/docs/components/scroll-area","docs/2.components/scroll-area","A flexible scroll container with virtualization support.",{"title":708,"path":709,"stem":710,"framework":16,"category":288,"description":711},"Select","/docs/components/select","docs/2.components/select","A select element to choose from a list of options.",{"title":713,"path":714,"stem":715,"framework":16,"category":288,"description":716},"SelectMenu","/docs/components/select-menu","docs/2.components/select-menu","An advanced searchable select element.",{"title":718,"path":719,"stem":720,"framework":16,"category":178,"description":721},"Separator","/docs/components/separator","docs/2.components/separator","Separates content horizontally or vertically.",{"title":723,"path":724,"stem":725,"framework":16,"category":178,"description":726},"Skeleton","/docs/components/skeleton","docs/2.components/skeleton","A placeholder to show while content is loading.",{"title":728,"path":729,"stem":730,"framework":16,"category":376,"description":731},"Slideover","/docs/components/slideover","docs/2.components/slideover","A dialog that slides in from any side of the screen.",{"title":733,"path":734,"stem":735,"framework":16,"category":288,"description":736},"Slider","/docs/components/slider","docs/2.components/slider","An input to select a numeric value within a range.",{"title":738,"path":739,"stem":740,"framework":16,"category":226,"description":741},"Stepper","/docs/components/stepper","docs/2.components/stepper","A set of steps that are used to indicate progress through a multi-step process.",{"title":743,"path":744,"stem":745,"framework":16,"category":288,"description":746},"Switch","/docs/components/switch","docs/2.components/switch","A control that toggles between two states.",{"title":748,"path":749,"stem":750,"framework":16,"category":172,"description":751},"Table","/docs/components/table","docs/2.components/table","A responsive table element to display data in rows and columns.",{"title":753,"path":754,"stem":755,"framework":16,"category":226,"description":756},"Tabs","/docs/components/tabs","docs/2.components/tabs","A set of tab panels that are displayed one at a time.",{"title":758,"path":759,"stem":760,"framework":16,"category":288,"description":761},"Textarea","/docs/components/textarea","docs/2.components/textarea","A textarea element to input multi-line text.",{"title":54,"path":763,"stem":764,"framework":16,"category":184,"description":765,"badge":766},"/docs/components/theme","docs/2.components/theme","A headless component to theme child components.","Soon",{"title":768,"path":769,"stem":770,"framework":16,"category":172,"description":771},"Timeline","/docs/components/timeline","docs/2.components/timeline","A component that displays a sequence of events with dates, titles, icons or avatars.",{"title":773,"path":774,"stem":775,"framework":16,"category":376,"description":776},"Toast","/docs/components/toast","docs/2.components/toast","A succinct message to provide information or feedback to the user.",{"title":778,"path":779,"stem":780,"framework":16,"category":376,"description":781},"Tooltip","/docs/components/tooltip","docs/2.components/tooltip","A popup that reveals information when hovering over an element.",{"title":783,"path":784,"stem":785,"framework":16,"category":172,"description":786},"Tree","/docs/components/tree","docs/2.components/tree","A tree view component to display and interact with hierarchical data structures.",{"title":788,"path":789,"stem":790,"framework":16,"category":172,"description":791},"User","/docs/components/user","docs/2.components/user","Display user information with name, description and avatar.",{"title":793,"framework":16,"category":16,"description":16,"icon":794,"path":795,"stem":796,"children":797,"page":36},"Composables","i-lucide-square-function","/docs/composables","docs/3.composables",[798,803,808,813,818,823],{"title":799,"path":800,"stem":801,"framework":16,"category":16,"description":802},"defineLocale","/docs/composables/define-locale","docs/3.composables/define-locale","A utility to create a custom locale for your app.",{"title":804,"path":805,"stem":806,"framework":16,"category":16,"description":807},"defineShortcuts","/docs/composables/define-shortcuts","docs/3.composables/define-shortcuts","A composable to define keyboard shortcuts in your app.",{"title":809,"path":810,"stem":811,"framework":16,"category":16,"description":812},"extendLocale","/docs/composables/extend-locale","docs/3.composables/extend-locale","A utility to extend an existing locale with custom translations.",{"title":814,"path":815,"stem":816,"framework":16,"category":16,"description":817},"extractShortcuts","/docs/composables/extract-shortcuts","docs/3.composables/extract-shortcuts","A utility to extract keyboard shortcuts from menu items.",{"title":819,"path":820,"stem":821,"framework":16,"category":16,"description":822},"useOverlay","/docs/composables/use-overlay","docs/3.composables/use-overlay","A composable to programmatically control overlays.",{"title":824,"path":825,"stem":826,"framework":16,"category":16,"description":827},"useToast","/docs/composables/use-toast","docs/3.composables/use-toast","A composable to display toast notifications in your app.",{"title":829,"path":830,"stem":831,"children":832,"framework":28,"category":16,"description":16,"icon":928},"Typography","/docs/typography","docs/4.typography/1.index",[833,835,840,845,850,855,860,864,869,873,878,883,888,893,898,902,907,911,915,919,924],{"title":15,"path":830,"stem":831,"framework":28,"category":16,"description":834},"Beautiful typography components and utilities to style your content with Nuxt UI.",{"title":836,"path":837,"stem":838,"framework":28,"category":16,"description":839},"Headers and text","/docs/typography/headers-and-text","docs/4.typography/2.headers-and-text","Beautifully styled headings, paragraphs, text formatting, and links for optimal readability.",{"title":841,"path":842,"stem":843,"framework":28,"category":16,"description":844},"Lists and tables","/docs/typography/lists-and-tables","docs/4.typography/3.lists-and-tables","Organize information with styled lists and responsive tables for clear, consistent readability.",{"title":846,"path":847,"stem":848,"framework":28,"category":16,"description":849},"Images and embeds","/docs/typography/images-and-embeds","docs/4.typography/4.images-and-embeds","Responsive images, videos, and rich media embeds to enhance and illustrate your documentation.",{"title":851,"path":852,"stem":853,"framework":28,"category":16,"description":854},"Code","/docs/typography/code","docs/4.typography/5.code","Display inline code and syntax-highlighted code blocks with copy-to-clipboard support.",{"title":169,"path":856,"stem":857,"framework":28,"category":858,"description":859},"/docs/typography/accordion","docs/4.typography/accordion","components","Create expandable content sections for better information organization.",{"title":203,"path":861,"stem":862,"framework":28,"category":858,"description":863},"/docs/typography/badge","docs/4.typography/badge","Display version numbers, status labels, and tags within your content.",{"title":865,"path":866,"stem":867,"framework":28,"category":858,"description":868},"Callout","/docs/typography/callout","docs/4.typography/callout","Highlight important information with eye-catching colored boxes and icons.",{"title":239,"path":870,"stem":871,"framework":28,"category":858,"description":872},"/docs/typography/card","docs/4.typography/card","Create highlighted content blocks with optional links and navigation.",{"title":874,"path":875,"stem":876,"framework":28,"category":858,"description":877},"CardGroup","/docs/typography/card-group","docs/4.typography/card-group","Organize multiple cards in responsive grid layouts for better content presentation.",{"title":879,"path":880,"stem":881,"framework":28,"category":858,"description":882},"CodeCollapse","/docs/typography/code-collapse","docs/4.typography/code-collapse","Make long code blocks collapsible to save space and improve readability.",{"title":884,"path":885,"stem":886,"framework":28,"category":858,"description":887},"CodeGroup","/docs/typography/code-group","docs/4.typography/code-group","Group multiple code examples in tabbed interfaces for easy comparison.",{"title":889,"path":890,"stem":891,"framework":28,"category":858,"description":892},"CodePreview","/docs/typography/code-preview","docs/4.typography/code-preview","Display code examples with a preview and their source for clearer documentation.",{"title":894,"path":895,"stem":896,"framework":28,"category":858,"description":897},"CodeTree","/docs/typography/code-tree","docs/4.typography/code-tree","Visualize file and folder structures with syntax-highlighted code.",{"title":301,"path":899,"stem":900,"framework":28,"category":858,"description":901},"/docs/typography/collapsible","docs/4.typography/collapsible","Toggle content visibility with smooth expand and collapse animations.",{"title":903,"path":904,"stem":905,"framework":28,"category":858,"description":906},"Field","/docs/typography/field","docs/4.typography/field","Document API parameters, props, and configuration options clearly.",{"title":482,"path":908,"stem":909,"framework":28,"category":858,"description":910},"/docs/typography/field-group","docs/4.typography/field-group","Group related fields together for comprehensive API documentation.",{"title":517,"path":912,"stem":913,"framework":28,"category":858,"description":914},"/docs/typography/icon","docs/4.typography/icon","Display icons from popular icon libraries to enhance your content.",{"title":552,"path":916,"stem":917,"framework":28,"category":858,"description":918},"/docs/typography/kbd","docs/4.typography/kbd","Display keyboard shortcuts and key combinations with proper styling.",{"title":920,"path":921,"stem":922,"framework":28,"category":858,"description":923},"Steps","/docs/typography/steps","docs/4.typography/steps","Transform headings into numbered step-by-step guides and tutorials.",{"title":753,"path":925,"stem":926,"framework":28,"category":858,"description":927},"/docs/typography/tabs","docs/4.typography/tabs","Organize related content in interactive tabbed interfaces.","i-lucide-square-pilcrow",{"id":930,"title":819,"body":931,"category":16,"description":822,"extension":3441,"framework":16,"links":16,"meta":3442,"navigation":16,"path":820,"seo":3443,"stem":821,"__hash__":3444},"docs/docs/3.composables/use-overlay.md",{"type":932,"value":933,"toc":3416},"minimark",[934,939,954,1129,1143,1162,1166,1177,1182,1186,1222,1225,1230,1278,1281,1325,1330,1333,1346,1349,1378,1383,1386,1399,1403,1415,1418,1422,1458,1463,1466,1478,1482,1500,1505,1508,1514,1518,1538,1543,1546,1552,1555,1569,1572,1576,1579,1607,1617,1620,1626,1769,1772,1790,1793,1796,1802,1805,1831,1834,1837,1843,2045,2049,2053,2056,2430,2434,2444,2454,2801,2808,3019,3024,3242,3246,3250,3264,3271,3412],[935,936,938],"h2",{"id":937},"usage","Usage",[940,941,942,943,946,947,950,951,953],"p",{},"Use the auto-imported ",[944,945,819],"code",{}," composable to programmatically control ",[948,949,578],"a",{"href":579}," and ",[948,952,728],{"href":729}," components.",[955,956,960],"pre",{"className":957,"code":958,"language":34,"meta":959,"style":959},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst modal = overlay.create(LazyModalExample)\n\nasync function openModal() {\n  modal.open()\n}\n\u003C/script>\n","",[944,961,962,997,1026,1032,1050,1055,1077,1082,1100,1113,1119],{"__ignoreMap":959},[963,964,967,971,975,979,982,985,988,992,994],"span",{"class":965,"line":966},"line",1,[963,968,970],{"class":969},"sMK4o","\u003C",[963,972,974],{"class":973},"swJcz","script",[963,976,978],{"class":977},"spNyl"," setup",[963,980,981],{"class":977}," lang",[963,983,984],{"class":969},"=",[963,986,987],{"class":969},"\"",[963,989,991],{"class":990},"sfazB","ts",[963,993,987],{"class":969},[963,995,996],{"class":969},">\n",[963,998,1000,1004,1007,1011,1014,1017,1020,1023],{"class":965,"line":999},2,[963,1001,1003],{"class":1002},"s7zQu","import",[963,1005,1006],{"class":969}," {",[963,1008,1010],{"class":1009},"sTEyZ"," LazyModalExample",[963,1012,1013],{"class":969}," }",[963,1015,1016],{"class":1002}," from",[963,1018,1019],{"class":969}," '",[963,1021,1022],{"class":990},"#components",[963,1024,1025],{"class":969},"'\n",[963,1027,1029],{"class":965,"line":1028},3,[963,1030,1031],{"emptyLinePlaceholder":21},"\n",[963,1033,1035,1038,1041,1043,1047],{"class":965,"line":1034},4,[963,1036,1037],{"class":977},"const",[963,1039,1040],{"class":1009}," overlay ",[963,1042,984],{"class":969},[963,1044,1046],{"class":1045},"s2Zo4"," useOverlay",[963,1048,1049],{"class":1009},"()\n",[963,1051,1053],{"class":965,"line":1052},5,[963,1054,1031],{"emptyLinePlaceholder":21},[963,1056,1058,1060,1063,1065,1068,1071,1074],{"class":965,"line":1057},6,[963,1059,1037],{"class":977},[963,1061,1062],{"class":1009}," modal ",[963,1064,984],{"class":969},[963,1066,1067],{"class":1009}," overlay",[963,1069,1070],{"class":969},".",[963,1072,1073],{"class":1045},"create",[963,1075,1076],{"class":1009},"(LazyModalExample)\n",[963,1078,1080],{"class":965,"line":1079},7,[963,1081,1031],{"emptyLinePlaceholder":21},[963,1083,1085,1088,1091,1094,1097],{"class":965,"line":1084},8,[963,1086,1087],{"class":977},"async",[963,1089,1090],{"class":977}," function",[963,1092,1093],{"class":1045}," openModal",[963,1095,1096],{"class":969},"()",[963,1098,1099],{"class":969}," {\n",[963,1101,1103,1106,1108,1111],{"class":965,"line":1102},9,[963,1104,1105],{"class":1009},"  modal",[963,1107,1070],{"class":969},[963,1109,1110],{"class":1045},"open",[963,1112,1049],{"class":973},[963,1114,1116],{"class":965,"line":1115},10,[963,1117,1118],{"class":969},"}\n",[963,1120,1122,1125,1127],{"class":965,"line":1121},11,[963,1123,1124],{"class":969},"\u003C/",[963,1126,974],{"class":973},[963,1128,996],{"class":969},[1130,1131,1132],"ul",{},[1133,1134,1135,1136,1138,1139,1142],"li",{},"The ",[944,1137,819],{}," composable is created using ",[944,1140,1141],{},"createSharedComposable",", ensuring that the same overlay state is shared across your entire application.",[1144,1145,1146],"note",{},[940,1147,1148,1149,1152,1153,1161],{},"In order to return a value from the overlay, the ",[944,1150,1151],{},"overlay.open()"," can be awaited. In order for this to work, however, the ",[1154,1155,1156,1157,1160],"strong",{},"overlay component must emit a ",[944,1158,1159],{},"close"," event",". See example below for details.",[935,1163,1165],{"id":1164},"api","API",[940,1167,1168],{},[944,1169,1172,1175],{"className":1170,"language":1171,"style":959},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[963,1173,819],{"class":1174},"sBMFI",[963,1176,1096],{"class":969},[940,1178,1135,1179,1181],{},[944,1180,819],{}," composable provides methods to manage overlays globally. Each created overlay returns an instance with its own methods.",[1183,1184,1185],"h3",{"id":1073},"create()",[940,1187,1188],{},[944,1189,1190,1192,1195,1199,1202,1205,1208,1211,1213,1216,1219],{"className":1170,"language":1171,"style":959},[963,1191,1073],{"class":1174},[963,1193,1194],{"class":969},"(",[963,1196,1198],{"class":1197},"sHdIc","component",[963,1200,1201],{"class":969},":",[963,1203,1204],{"class":1174}," T",[963,1206,1207],{"class":969},",",[963,1209,1210],{"class":1197}," options",[963,1212,1201],{"class":969},[963,1214,1215],{"class":1174}," OverlayOptions",[963,1217,1218],{"class":969},"):",[963,1220,1221],{"class":1174}," OverlayInstance",[940,1223,1224],{},"Create an overlay, and return a factory instance.",[1226,1227,1229],"h4",{"id":1228},"parameters","Parameters",[1231,1232,1233,1241],"field-group",{},[1234,1235,1238],"field",{"name":1198,"type":1236,":required":1237},"T","true",[940,1239,1240],{},"The overlay component to render.",[1234,1242,1245,1248],{"name":1243,"type":1244},"options","OverlayOptions",[940,1246,1247],{},"Configuration options for the overlay.",[1249,1250,1251],"collapsible",{},[1231,1252,1253,1263,1270],{},[1234,1254,1257],{"name":1255,"type":1256},"defaultOpen","boolean",[940,1258,1259,1260,1070],{},"Open the overlay immediately after being created. Defaults to ",[944,1261,1262],{},"false",[1234,1264,1267],{"name":1265,"type":1266},"props","ComponentProps",[940,1268,1269],{},"An optional object of props to pass to the rendered component.",[1234,1271,1273],{"name":1272,"type":1256},"destroyOnClose",[940,1274,1275,1276,1070],{},"Removes the overlay from memory when closed. Defaults to ",[944,1277,1262],{},[1183,1279,1280],{"id":1110},"open()",[940,1282,1283],{},[944,1284,1285,1287,1289,1292,1294,1297,1299,1302,1305,1308,1310,1312,1315,1318,1320,1322],{"className":1170,"language":1171,"style":959},[963,1286,1110],{"class":1174},[963,1288,1194],{"class":969},[963,1290,1291],{"class":1197},"id",[963,1293,1201],{"class":969},[963,1295,1296],{"class":1174}," symbol",[963,1298,1207],{"class":969},[963,1300,1301],{"class":1197}," props",[963,1303,1304],{"class":969},"?:",[963,1306,1307],{"class":1174}," ComponentProps",[963,1309,970],{"class":969},[963,1311,1236],{"class":1174},[963,1313,1314],{"class":969},">):",[963,1316,1317],{"class":1174}," OpenedOverlay",[963,1319,970],{"class":969},[963,1321,1236],{"class":1174},[963,1323,1324],{"class":969},">",[940,1326,1327,1328,1070],{},"Open an overlay by its ",[944,1329,1291],{},[1226,1331,1229],{"id":1332},"parameters-1",[1231,1334,1335,1341],{},[1234,1336,1338],{"name":1291,"type":1337,":required":1237},"symbol",[940,1339,1340],{},"The identifier of the overlay.",[1234,1342,1344],{"name":1265,"type":1343},"ComponentProps\u003CT>",[940,1345,1269],{},[1183,1347,1348],{"id":1159},"close()",[940,1350,1351],{},[944,1352,1353,1355,1357,1359,1361,1363,1365,1368,1370,1373,1375],{"className":1170,"language":1171,"style":959},[963,1354,1159],{"class":1174},[963,1356,1194],{"class":969},[963,1358,1291],{"class":1197},[963,1360,1201],{"class":969},[963,1362,1296],{"class":1174},[963,1364,1207],{"class":969},[963,1366,1367],{"class":1197}," value",[963,1369,1304],{"class":969},[963,1371,1372],{"class":1174}," any",[963,1374,1218],{"class":969},[963,1376,1377],{"class":1174}," void",[940,1379,1380,1381,1070],{},"Close an overlay by its ",[944,1382,1291],{},[1226,1384,1229],{"id":1385},"parameters-2",[1231,1387,1388,1392],{},[1234,1389,1390],{"name":1291,"type":1337,":required":1237},[940,1391,1340],{},[1234,1393,1396],{"name":1394,"type":1395},"value","any",[940,1397,1398],{},"A value to resolve the overlay promise with.",[1183,1400,1402],{"id":1401},"closeall","closeAll()",[940,1404,1405],{},[944,1406,1407,1410,1413],{"className":1170,"language":1171,"style":959},[963,1408,1409],{"class":1174},"closeAll",[963,1411,1412],{"class":969},"():",[963,1414,1377],{"class":1174},[940,1416,1417],{},"Close all open overlays.",[1183,1419,1421],{"id":1420},"patch","patch()",[940,1423,1424],{},[944,1425,1426,1428,1430,1432,1434,1436,1438,1440,1442,1445,1447,1449,1451,1453,1456],{"className":1170,"language":1171,"style":959},[963,1427,1420],{"class":1174},[963,1429,1194],{"class":969},[963,1431,1291],{"class":1197},[963,1433,1201],{"class":969},[963,1435,1296],{"class":1174},[963,1437,1207],{"class":969},[963,1439,1301],{"class":1197},[963,1441,1201],{"class":969},[963,1443,1444],{"class":1174}," Partial",[963,1446,970],{"class":969},[963,1448,1266],{"class":1174},[963,1450,970],{"class":969},[963,1452,1236],{"class":1174},[963,1454,1455],{"class":969},">>):",[963,1457,1377],{"class":1174},[940,1459,1460,1461,1070],{},"Update an overlay by its ",[944,1462,1291],{},[1226,1464,1229],{"id":1465},"parameters-3",[1231,1467,1468,1472],{},[1234,1469,1470],{"name":1291,"type":1337,":required":1237},[940,1471,1340],{},[1234,1473,1475],{"name":1265,"type":1474,":required":1237},"Partial\u003CComponentProps\u003CT>>",[940,1476,1477],{},"An object of props to update on the rendered component.",[1183,1479,1481],{"id":1480},"unmount","unmount()",[940,1483,1484],{},[944,1485,1486,1488,1490,1492,1494,1496,1498],{"className":1170,"language":1171,"style":959},[963,1487,1480],{"class":1174},[963,1489,1194],{"class":969},[963,1491,1291],{"class":1197},[963,1493,1201],{"class":969},[963,1495,1296],{"class":1174},[963,1497,1218],{"class":969},[963,1499,1377],{"class":1174},[940,1501,1502,1503,1070],{},"Remove an overlay from the DOM by its ",[944,1504,1291],{},[1226,1506,1229],{"id":1507},"parameters-4",[1231,1509,1510],{},[1234,1511,1512],{"name":1291,"type":1337,":required":1237},[940,1513,1340],{},[1183,1515,1517],{"id":1516},"isopen","isOpen()",[940,1519,1520],{},[944,1521,1522,1525,1527,1529,1531,1533,1535],{"className":1170,"language":1171,"style":959},[963,1523,1524],{"class":1174},"isOpen",[963,1526,1194],{"class":969},[963,1528,1291],{"class":1197},[963,1530,1201],{"class":969},[963,1532,1296],{"class":1174},[963,1534,1218],{"class":969},[963,1536,1537],{"class":1174}," boolean",[940,1539,1540,1541,1070],{},"Check if an overlay is open using its ",[944,1542,1291],{},[1226,1544,1229],{"id":1545},"parameters-5",[1231,1547,1548],{},[1234,1549,1550],{"name":1291,"type":1337,":required":1237},[940,1551,1340],{},[1183,1553,1554],{"id":1554},"overlays",[940,1556,1557],{},[944,1558,1559,1561,1563,1566],{"className":1170,"language":1171,"style":959},[963,1560,1554],{"class":1174},[963,1562,1201],{"class":969},[963,1564,1565],{"class":1174}," Overlay",[963,1567,1568],{"class":1009},"[]",[940,1570,1571],{},"In-memory list of all overlays that were created.",[935,1573,1575],{"id":1574},"instance-api","Instance API",[1183,1577,1280],{"id":1578},"open-1",[940,1580,1581],{},[944,1582,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605],{"className":1170,"language":1171,"style":959},[963,1584,1110],{"class":1174},[963,1586,1194],{"class":969},[963,1588,1265],{"class":1197},[963,1590,1304],{"class":969},[963,1592,1307],{"class":1174},[963,1594,970],{"class":969},[963,1596,1236],{"class":1174},[963,1598,1314],{"class":969},[963,1600,1317],{"class":1174},[963,1602,970],{"class":969},[963,1604,1236],{"class":1174},[963,1606,1324],{"class":969},[940,1608,1609,1610,1613,1614,1616],{},"Open the overlay. Returns an ",[944,1611,1612],{},"OpenedOverlay"," which is a Promise that resolves with the value emitted by the ",[944,1615,1159],{}," event.",[1226,1618,1229],{"id":1619},"parameters-6",[1231,1621,1622],{},[1234,1623,1624],{"name":1265,"type":1343},[940,1625,1269],{},[955,1627,1629],{"className":957,"code":1628,"language":34,"meta":959,"style":959},"\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst modal = overlay.create(LazyModalExample)\n\nfunction openModal() {\n  modal.open({\n    title: 'Welcome'\n  })\n}\n\u003C/script>\n",[944,1630,1631,1651,1669,1673,1685,1689,1705,1709,1720,1733,1747,1755,1760],{"__ignoreMap":959},[963,1632,1633,1635,1637,1639,1641,1643,1645,1647,1649],{"class":965,"line":966},[963,1634,970],{"class":969},[963,1636,974],{"class":973},[963,1638,978],{"class":977},[963,1640,981],{"class":977},[963,1642,984],{"class":969},[963,1644,987],{"class":969},[963,1646,991],{"class":990},[963,1648,987],{"class":969},[963,1650,996],{"class":969},[963,1652,1653,1655,1657,1659,1661,1663,1665,1667],{"class":965,"line":999},[963,1654,1003],{"class":1002},[963,1656,1006],{"class":969},[963,1658,1010],{"class":1009},[963,1660,1013],{"class":969},[963,1662,1016],{"class":1002},[963,1664,1019],{"class":969},[963,1666,1022],{"class":990},[963,1668,1025],{"class":969},[963,1670,1671],{"class":965,"line":1028},[963,1672,1031],{"emptyLinePlaceholder":21},[963,1674,1675,1677,1679,1681,1683],{"class":965,"line":1034},[963,1676,1037],{"class":977},[963,1678,1040],{"class":1009},[963,1680,984],{"class":969},[963,1682,1046],{"class":1045},[963,1684,1049],{"class":1009},[963,1686,1687],{"class":965,"line":1052},[963,1688,1031],{"emptyLinePlaceholder":21},[963,1690,1691,1693,1695,1697,1699,1701,1703],{"class":965,"line":1057},[963,1692,1037],{"class":977},[963,1694,1062],{"class":1009},[963,1696,984],{"class":969},[963,1698,1067],{"class":1009},[963,1700,1070],{"class":969},[963,1702,1073],{"class":1045},[963,1704,1076],{"class":1009},[963,1706,1707],{"class":965,"line":1079},[963,1708,1031],{"emptyLinePlaceholder":21},[963,1710,1711,1714,1716,1718],{"class":965,"line":1084},[963,1712,1713],{"class":977},"function",[963,1715,1093],{"class":1045},[963,1717,1096],{"class":969},[963,1719,1099],{"class":969},[963,1721,1722,1724,1726,1728,1730],{"class":965,"line":1102},[963,1723,1105],{"class":1009},[963,1725,1070],{"class":969},[963,1727,1110],{"class":1045},[963,1729,1194],{"class":973},[963,1731,1732],{"class":969},"{\n",[963,1734,1735,1738,1740,1742,1745],{"class":965,"line":1115},[963,1736,1737],{"class":973},"    title",[963,1739,1201],{"class":969},[963,1741,1019],{"class":969},[963,1743,1744],{"class":990},"Welcome",[963,1746,1025],{"class":969},[963,1748,1749,1752],{"class":965,"line":1121},[963,1750,1751],{"class":969},"  }",[963,1753,1754],{"class":973},")\n",[963,1756,1758],{"class":965,"line":1757},12,[963,1759,1118],{"class":969},[963,1761,1763,1765,1767],{"class":965,"line":1762},13,[963,1764,1124],{"class":969},[963,1766,974],{"class":973},[963,1768,996],{"class":969},[1183,1770,1348],{"id":1771},"close-1",[940,1773,1774],{},[944,1775,1776,1778,1780,1782,1784,1786,1788],{"className":1170,"language":1171,"style":959},[963,1777,1159],{"class":1174},[963,1779,1194],{"class":969},[963,1781,1394],{"class":1197},[963,1783,1304],{"class":969},[963,1785,1372],{"class":1174},[963,1787,1218],{"class":969},[963,1789,1377],{"class":1174},[940,1791,1792],{},"Close the overlay.",[1226,1794,1229],{"id":1795},"parameters-7",[1231,1797,1798],{},[1234,1799,1800],{"name":1394,"type":1395},[940,1801,1398],{},[1183,1803,1421],{"id":1804},"patch-1",[940,1806,1807],{},[944,1808,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827,1829],{"className":1170,"language":1171,"style":959},[963,1810,1420],{"class":1174},[963,1812,1194],{"class":969},[963,1814,1265],{"class":1197},[963,1816,1201],{"class":969},[963,1818,1444],{"class":1174},[963,1820,970],{"class":969},[963,1822,1266],{"class":1174},[963,1824,970],{"class":969},[963,1826,1236],{"class":1174},[963,1828,1455],{"class":969},[963,1830,1377],{"class":1174},[940,1832,1833],{},"Update the props of the overlay.",[1226,1835,1229],{"id":1836},"parameters-8",[1231,1838,1839],{},[1234,1840,1841],{"name":1265,"type":1474,":required":1237},[940,1842,1477],{},[955,1844,1846],{"className":957,"code":1845,"language":34,"meta":959,"style":959},"\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst modal = overlay.create(LazyModalExample, {\n  props: { title: 'Welcome' }\n})\n\nfunction openModal() {\n  modal.open()\n}\n\nfunction updateModalTitle() {\n  modal.patch({ title: 'Updated Title' })\n}\n\u003C/script>\n",[944,1847,1848,1868,1886,1890,1902,1906,1927,1951,1958,1962,1972,1982,1986,1990,2002,2031,2036],{"__ignoreMap":959},[963,1849,1850,1852,1854,1856,1858,1860,1862,1864,1866],{"class":965,"line":966},[963,1851,970],{"class":969},[963,1853,974],{"class":973},[963,1855,978],{"class":977},[963,1857,981],{"class":977},[963,1859,984],{"class":969},[963,1861,987],{"class":969},[963,1863,991],{"class":990},[963,1865,987],{"class":969},[963,1867,996],{"class":969},[963,1869,1870,1872,1874,1876,1878,1880,1882,1884],{"class":965,"line":999},[963,1871,1003],{"class":1002},[963,1873,1006],{"class":969},[963,1875,1010],{"class":1009},[963,1877,1013],{"class":969},[963,1879,1016],{"class":1002},[963,1881,1019],{"class":969},[963,1883,1022],{"class":990},[963,1885,1025],{"class":969},[963,1887,1888],{"class":965,"line":1028},[963,1889,1031],{"emptyLinePlaceholder":21},[963,1891,1892,1894,1896,1898,1900],{"class":965,"line":1034},[963,1893,1037],{"class":977},[963,1895,1040],{"class":1009},[963,1897,984],{"class":969},[963,1899,1046],{"class":1045},[963,1901,1049],{"class":1009},[963,1903,1904],{"class":965,"line":1052},[963,1905,1031],{"emptyLinePlaceholder":21},[963,1907,1908,1910,1912,1914,1916,1918,1920,1923,1925],{"class":965,"line":1057},[963,1909,1037],{"class":977},[963,1911,1062],{"class":1009},[963,1913,984],{"class":969},[963,1915,1067],{"class":1009},[963,1917,1070],{"class":969},[963,1919,1073],{"class":1045},[963,1921,1922],{"class":1009},"(LazyModalExample",[963,1924,1207],{"class":969},[963,1926,1099],{"class":969},[963,1928,1929,1932,1934,1936,1939,1941,1943,1945,1948],{"class":965,"line":1079},[963,1930,1931],{"class":973},"  props",[963,1933,1201],{"class":969},[963,1935,1006],{"class":969},[963,1937,1938],{"class":973}," title",[963,1940,1201],{"class":969},[963,1942,1019],{"class":969},[963,1944,1744],{"class":990},[963,1946,1947],{"class":969},"'",[963,1949,1950],{"class":969}," }\n",[963,1952,1953,1956],{"class":965,"line":1084},[963,1954,1955],{"class":969},"}",[963,1957,1754],{"class":1009},[963,1959,1960],{"class":965,"line":1102},[963,1961,1031],{"emptyLinePlaceholder":21},[963,1963,1964,1966,1968,1970],{"class":965,"line":1115},[963,1965,1713],{"class":977},[963,1967,1093],{"class":1045},[963,1969,1096],{"class":969},[963,1971,1099],{"class":969},[963,1973,1974,1976,1978,1980],{"class":965,"line":1121},[963,1975,1105],{"class":1009},[963,1977,1070],{"class":969},[963,1979,1110],{"class":1045},[963,1981,1049],{"class":973},[963,1983,1984],{"class":965,"line":1757},[963,1985,1118],{"class":969},[963,1987,1988],{"class":965,"line":1762},[963,1989,1031],{"emptyLinePlaceholder":21},[963,1991,1993,1995,1998,2000],{"class":965,"line":1992},14,[963,1994,1713],{"class":977},[963,1996,1997],{"class":1045}," updateModalTitle",[963,1999,1096],{"class":969},[963,2001,1099],{"class":969},[963,2003,2005,2007,2009,2011,2013,2016,2018,2020,2022,2025,2027,2029],{"class":965,"line":2004},15,[963,2006,1105],{"class":1009},[963,2008,1070],{"class":969},[963,2010,1420],{"class":1045},[963,2012,1194],{"class":973},[963,2014,2015],{"class":969},"{",[963,2017,1938],{"class":973},[963,2019,1201],{"class":969},[963,2021,1019],{"class":969},[963,2023,2024],{"class":990},"Updated Title",[963,2026,1947],{"class":969},[963,2028,1013],{"class":969},[963,2030,1754],{"class":973},[963,2032,2034],{"class":965,"line":2033},16,[963,2035,1118],{"class":969},[963,2037,2039,2041,2043],{"class":965,"line":2038},17,[963,2040,1124],{"class":969},[963,2042,974],{"class":973},[963,2044,996],{"class":969},[935,2046,2048],{"id":2047},"examples","Examples",[1183,2050,2052],{"id":2051},"with-multiple-overlays","With multiple overlays",[940,2054,2055],{},"This example demonstrates how to manage multiple overlays and pass data between them:",[955,2057,2059],{"className":957,"code":2058,"language":34,"meta":959,"style":959},"\u003Cscript setup lang=\"ts\">\nimport { ModalA, ModalB, SlideoverA } from '#components'\n\nconst overlay = useOverlay()\n\n// Create with default props\nconst modalA = overlay.create(ModalA, { props: { title: 'Welcome' } })\nconst modalB = overlay.create(ModalB)\nconst slideoverA = overlay.create(SlideoverA)\n\nconst openModalA = () => {\n  // Open modalA, 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 input = await modalB.open()\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  \u003CUButton label=\"Open Modal\" @click=\"openModalA\" />\n\u003C/template>\n",[944,2060,2061,2081,2110,2114,2126,2130,2136,2180,2198,2216,2220,2237,2242,2270,2274,2278,2296,2301,2325,2330,2336,2356,2361,2370,2375,2385,2421],{"__ignoreMap":959},[963,2062,2063,2065,2067,2069,2071,2073,2075,2077,2079],{"class":965,"line":966},[963,2064,970],{"class":969},[963,2066,974],{"class":973},[963,2068,978],{"class":977},[963,2070,981],{"class":977},[963,2072,984],{"class":969},[963,2074,987],{"class":969},[963,2076,991],{"class":990},[963,2078,987],{"class":969},[963,2080,996],{"class":969},[963,2082,2083,2085,2087,2090,2092,2095,2097,2100,2102,2104,2106,2108],{"class":965,"line":999},[963,2084,1003],{"class":1002},[963,2086,1006],{"class":969},[963,2088,2089],{"class":1009}," ModalA",[963,2091,1207],{"class":969},[963,2093,2094],{"class":1009}," ModalB",[963,2096,1207],{"class":969},[963,2098,2099],{"class":1009}," SlideoverA",[963,2101,1013],{"class":969},[963,2103,1016],{"class":1002},[963,2105,1019],{"class":969},[963,2107,1022],{"class":990},[963,2109,1025],{"class":969},[963,2111,2112],{"class":965,"line":1028},[963,2113,1031],{"emptyLinePlaceholder":21},[963,2115,2116,2118,2120,2122,2124],{"class":965,"line":1034},[963,2117,1037],{"class":977},[963,2119,1040],{"class":1009},[963,2121,984],{"class":969},[963,2123,1046],{"class":1045},[963,2125,1049],{"class":1009},[963,2127,2128],{"class":965,"line":1052},[963,2129,1031],{"emptyLinePlaceholder":21},[963,2131,2132],{"class":965,"line":1057},[963,2133,2135],{"class":2134},"sHwdD","// Create with default props\n",[963,2137,2138,2140,2143,2145,2147,2149,2151,2154,2156,2158,2160,2162,2164,2166,2168,2170,2172,2174,2176,2178],{"class":965,"line":1079},[963,2139,1037],{"class":977},[963,2141,2142],{"class":1009}," modalA ",[963,2144,984],{"class":969},[963,2146,1067],{"class":1009},[963,2148,1070],{"class":969},[963,2150,1073],{"class":1045},[963,2152,2153],{"class":1009},"(ModalA",[963,2155,1207],{"class":969},[963,2157,1006],{"class":969},[963,2159,1301],{"class":973},[963,2161,1201],{"class":969},[963,2163,1006],{"class":969},[963,2165,1938],{"class":973},[963,2167,1201],{"class":969},[963,2169,1019],{"class":969},[963,2171,1744],{"class":990},[963,2173,1947],{"class":969},[963,2175,1013],{"class":969},[963,2177,1013],{"class":969},[963,2179,1754],{"class":1009},[963,2181,2182,2184,2187,2189,2191,2193,2195],{"class":965,"line":1084},[963,2183,1037],{"class":977},[963,2185,2186],{"class":1009}," modalB ",[963,2188,984],{"class":969},[963,2190,1067],{"class":1009},[963,2192,1070],{"class":969},[963,2194,1073],{"class":1045},[963,2196,2197],{"class":1009},"(ModalB)\n",[963,2199,2200,2202,2205,2207,2209,2211,2213],{"class":965,"line":1102},[963,2201,1037],{"class":977},[963,2203,2204],{"class":1009}," slideoverA ",[963,2206,984],{"class":969},[963,2208,1067],{"class":1009},[963,2210,1070],{"class":969},[963,2212,1073],{"class":1045},[963,2214,2215],{"class":1009},"(SlideoverA)\n",[963,2217,2218],{"class":965,"line":1115},[963,2219,1031],{"emptyLinePlaceholder":21},[963,2221,2222,2224,2227,2229,2232,2235],{"class":965,"line":1121},[963,2223,1037],{"class":977},[963,2225,2226],{"class":1009}," openModalA ",[963,2228,984],{"class":969},[963,2230,2231],{"class":969}," ()",[963,2233,2234],{"class":977}," =>",[963,2236,1099],{"class":969},[963,2238,2239],{"class":965,"line":1757},[963,2240,2241],{"class":2134},"  // Open modalA, but override the title prop\n",[963,2243,2244,2247,2249,2251,2253,2255,2257,2259,2261,2264,2266,2268],{"class":965,"line":1762},[963,2245,2246],{"class":1009},"  modalA",[963,2248,1070],{"class":969},[963,2250,1110],{"class":1045},[963,2252,1194],{"class":973},[963,2254,2015],{"class":969},[963,2256,1938],{"class":973},[963,2258,1201],{"class":969},[963,2260,1019],{"class":969},[963,2262,2263],{"class":990},"Hello",[963,2265,1947],{"class":969},[963,2267,1013],{"class":969},[963,2269,1754],{"class":973},[963,2271,2272],{"class":965,"line":1992},[963,2273,1118],{"class":969},[963,2275,2276],{"class":965,"line":2004},[963,2277,1031],{"emptyLinePlaceholder":21},[963,2279,2280,2282,2285,2287,2290,2292,2294],{"class":965,"line":2033},[963,2281,1037],{"class":977},[963,2283,2284],{"class":1009}," openModalB ",[963,2286,984],{"class":969},[963,2288,2289],{"class":977}," async",[963,2291,2231],{"class":969},[963,2293,2234],{"class":977},[963,2295,1099],{"class":969},[963,2297,2298],{"class":965,"line":2038},[963,2299,2300],{"class":2134},"  // Open modalB, and wait for its result\n",[963,2302,2304,2307,2310,2313,2316,2319,2321,2323],{"class":965,"line":2303},18,[963,2305,2306],{"class":977},"  const",[963,2308,2309],{"class":1009}," input",[963,2311,2312],{"class":969}," =",[963,2314,2315],{"class":1002}," await",[963,2317,2318],{"class":1009}," modalB",[963,2320,1070],{"class":969},[963,2322,1110],{"class":1045},[963,2324,1049],{"class":973},[963,2326,2328],{"class":965,"line":2327},19,[963,2329,1031],{"emptyLinePlaceholder":21},[963,2331,2333],{"class":965,"line":2332},20,[963,2334,2335],{"class":2134},"  // Pass the result from modalB to the slideover, and open it\n",[963,2337,2339,2342,2344,2346,2348,2350,2352,2354],{"class":965,"line":2338},21,[963,2340,2341],{"class":1009},"  slideoverA",[963,2343,1070],{"class":969},[963,2345,1110],{"class":1045},[963,2347,1194],{"class":973},[963,2349,2015],{"class":969},[963,2351,2309],{"class":1009},[963,2353,1013],{"class":969},[963,2355,1754],{"class":973},[963,2357,2359],{"class":965,"line":2358},22,[963,2360,1118],{"class":969},[963,2362,2364,2366,2368],{"class":965,"line":2363},23,[963,2365,1124],{"class":969},[963,2367,974],{"class":973},[963,2369,996],{"class":969},[963,2371,2373],{"class":965,"line":2372},24,[963,2374,1031],{"emptyLinePlaceholder":21},[963,2376,2378,2380,2383],{"class":965,"line":2377},25,[963,2379,970],{"class":969},[963,2381,2382],{"class":973},"template",[963,2384,996],{"class":969},[963,2386,2388,2391,2394,2397,2399,2401,2404,2406,2409,2411,2413,2416,2418],{"class":965,"line":2387},26,[963,2389,2390],{"class":969},"  \u003C",[963,2392,2393],{"class":973},"UButton",[963,2395,2396],{"class":977}," label",[963,2398,984],{"class":969},[963,2400,987],{"class":969},[963,2402,2403],{"class":990},"Open Modal",[963,2405,987],{"class":969},[963,2407,2408],{"class":977}," @click",[963,2410,984],{"class":969},[963,2412,987],{"class":969},[963,2414,2415],{"class":990},"openModalA",[963,2417,987],{"class":969},[963,2419,2420],{"class":969}," />\n",[963,2422,2424,2426,2428],{"class":965,"line":2423},27,[963,2425,1124],{"class":969},[963,2427,2382],{"class":973},[963,2429,996],{"class":969},[1183,2431,2433],{"id":2432},"confirm-dialog","Confirm dialog",[940,2435,2436,2437,2440,2441,2443],{},"This example demonstrates how to create a reusable confirm dialog pattern using a custom ",[944,2438,2439],{},"useConfirmDialog"," composable that wraps ",[944,2442,819],{},". This approach enables opinionated dialogs tailored to specific business requirements and design preferences.",[2445,2446,2447],"ol",{},[1133,2448,2449,2450,2453],{},"Create a ",[944,2451,2452],{},"ConfirmDialog"," component that emits a boolean value when closed:",[955,2455,2458],{"className":957,"code":2456,"filename":2457,"language":34,"meta":959,"style":959},"\u003Cscript lang=\"ts\" setup>\ninterface ConfirmDialogProps {\n  title?: string\n  description?: string\n}\n\ndefineProps\u003CConfirmDialogProps>()\n\nconst emits = defineEmits\u003C{\n  close: [value: boolean]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUModal\n    :title=\"title\"\n    :description=\"description\"\n    :dismissible=\"false\"\n    :ui=\"{ footer: 'justify-end' }\"\n  >\n    \u003Ctemplate #footer>\n      \u003CUButton label=\"Cancel\" color=\"neutral\" variant=\"outline\" @click=\"emits('close', false)\" />\n      \u003CUButton label=\"Confirm\" color=\"neutral\" @click=\"emits('close', true)\" />\n    \u003C/template>\n  \u003C/UModal>\n\u003C/template>\n","components/ConfirmDialog.vue",[944,2459,2460,2480,2490,2500,2509,2513,2517,2531,2535,2550,2569,2576,2584,2588,2596,2603,2618,2632,2645,2659,2664,2679,2734,2774,2783,2793],{"__ignoreMap":959},[963,2461,2462,2464,2466,2468,2470,2472,2474,2476,2478],{"class":965,"line":966},[963,2463,970],{"class":969},[963,2465,974],{"class":973},[963,2467,981],{"class":977},[963,2469,984],{"class":969},[963,2471,987],{"class":969},[963,2473,991],{"class":990},[963,2475,987],{"class":969},[963,2477,978],{"class":977},[963,2479,996],{"class":969},[963,2481,2482,2485,2488],{"class":965,"line":999},[963,2483,2484],{"class":977},"interface",[963,2486,2487],{"class":1174}," ConfirmDialogProps",[963,2489,1099],{"class":969},[963,2491,2492,2495,2497],{"class":965,"line":1028},[963,2493,2494],{"class":973},"  title",[963,2496,1304],{"class":969},[963,2498,2499],{"class":1174}," string\n",[963,2501,2502,2505,2507],{"class":965,"line":1034},[963,2503,2504],{"class":973},"  description",[963,2506,1304],{"class":969},[963,2508,2499],{"class":1174},[963,2510,2511],{"class":965,"line":1052},[963,2512,1118],{"class":969},[963,2514,2515],{"class":965,"line":1057},[963,2516,1031],{"emptyLinePlaceholder":21},[963,2518,2519,2522,2524,2527,2529],{"class":965,"line":1079},[963,2520,2521],{"class":1045},"defineProps",[963,2523,970],{"class":969},[963,2525,2526],{"class":1174},"ConfirmDialogProps",[963,2528,1324],{"class":969},[963,2530,1049],{"class":1009},[963,2532,2533],{"class":965,"line":1084},[963,2534,1031],{"emptyLinePlaceholder":21},[963,2536,2537,2539,2542,2544,2547],{"class":965,"line":1102},[963,2538,1037],{"class":977},[963,2540,2541],{"class":1009}," emits ",[963,2543,984],{"class":969},[963,2545,2546],{"class":1045}," defineEmits",[963,2548,2549],{"class":969},"\u003C{\n",[963,2551,2552,2555,2557,2560,2562,2564,2566],{"class":965,"line":1115},[963,2553,2554],{"class":973},"  close",[963,2556,1201],{"class":969},[963,2558,2559],{"class":1009}," [",[963,2561,1394],{"class":1174},[963,2563,1201],{"class":969},[963,2565,1537],{"class":1174},[963,2567,2568],{"class":1009},"]\n",[963,2570,2571,2574],{"class":965,"line":1121},[963,2572,2573],{"class":969},"}>",[963,2575,1049],{"class":1009},[963,2577,2578,2580,2582],{"class":965,"line":1757},[963,2579,1124],{"class":969},[963,2581,974],{"class":973},[963,2583,996],{"class":969},[963,2585,2586],{"class":965,"line":1762},[963,2587,1031],{"emptyLinePlaceholder":21},[963,2589,2590,2592,2594],{"class":965,"line":1992},[963,2591,970],{"class":969},[963,2593,2382],{"class":973},[963,2595,996],{"class":969},[963,2597,2598,2600],{"class":965,"line":2004},[963,2599,2390],{"class":969},[963,2601,2602],{"class":973},"UModal\n",[963,2604,2605,2608,2610,2612,2615],{"class":965,"line":2033},[963,2606,2607],{"class":977},"    :title",[963,2609,984],{"class":969},[963,2611,987],{"class":969},[963,2613,2614],{"class":990},"title",[963,2616,2617],{"class":969},"\"\n",[963,2619,2620,2623,2625,2627,2630],{"class":965,"line":2038},[963,2621,2622],{"class":977},"    :description",[963,2624,984],{"class":969},[963,2626,987],{"class":969},[963,2628,2629],{"class":990},"description",[963,2631,2617],{"class":969},[963,2633,2634,2637,2639,2641,2643],{"class":965,"line":2303},[963,2635,2636],{"class":977},"    :dismissible",[963,2638,984],{"class":969},[963,2640,987],{"class":969},[963,2642,1262],{"class":990},[963,2644,2617],{"class":969},[963,2646,2647,2650,2652,2654,2657],{"class":965,"line":2327},[963,2648,2649],{"class":977},"    :ui",[963,2651,984],{"class":969},[963,2653,987],{"class":969},[963,2655,2656],{"class":990},"{ footer: 'justify-end' }",[963,2658,2617],{"class":969},[963,2660,2661],{"class":965,"line":2332},[963,2662,2663],{"class":969},"  >\n",[963,2665,2666,2669,2671,2674,2677],{"class":965,"line":2338},[963,2667,2668],{"class":969},"    \u003C",[963,2670,2382],{"class":973},[963,2672,2673],{"class":969}," #",[963,2675,2676],{"class":977},"footer",[963,2678,996],{"class":969},[963,2680,2681,2684,2686,2688,2690,2692,2695,2697,2700,2702,2704,2707,2709,2712,2714,2716,2719,2721,2723,2725,2727,2730,2732],{"class":965,"line":2358},[963,2682,2683],{"class":969},"      \u003C",[963,2685,2393],{"class":973},[963,2687,2396],{"class":977},[963,2689,984],{"class":969},[963,2691,987],{"class":969},[963,2693,2694],{"class":990},"Cancel",[963,2696,987],{"class":969},[963,2698,2699],{"class":977}," color",[963,2701,984],{"class":969},[963,2703,987],{"class":969},[963,2705,2706],{"class":990},"neutral",[963,2708,987],{"class":969},[963,2710,2711],{"class":977}," variant",[963,2713,984],{"class":969},[963,2715,987],{"class":969},[963,2717,2718],{"class":990},"outline",[963,2720,987],{"class":969},[963,2722,2408],{"class":977},[963,2724,984],{"class":969},[963,2726,987],{"class":969},[963,2728,2729],{"class":990},"emits('close', false)",[963,2731,987],{"class":969},[963,2733,2420],{"class":969},[963,2735,2736,2738,2740,2742,2744,2746,2749,2751,2753,2755,2757,2759,2761,2763,2765,2767,2770,2772],{"class":965,"line":2363},[963,2737,2683],{"class":969},[963,2739,2393],{"class":973},[963,2741,2396],{"class":977},[963,2743,984],{"class":969},[963,2745,987],{"class":969},[963,2747,2748],{"class":990},"Confirm",[963,2750,987],{"class":969},[963,2752,2699],{"class":977},[963,2754,984],{"class":969},[963,2756,987],{"class":969},[963,2758,2706],{"class":990},[963,2760,987],{"class":969},[963,2762,2408],{"class":977},[963,2764,984],{"class":969},[963,2766,987],{"class":969},[963,2768,2769],{"class":990},"emits('close', true)",[963,2771,987],{"class":969},[963,2773,2420],{"class":969},[963,2775,2776,2779,2781],{"class":965,"line":2372},[963,2777,2778],{"class":969},"    \u003C/",[963,2780,2382],{"class":973},[963,2782,996],{"class":969},[963,2784,2785,2788,2791],{"class":965,"line":2377},[963,2786,2787],{"class":969},"  \u003C/",[963,2789,2790],{"class":973},"UModal",[963,2792,996],{"class":969},[963,2794,2795,2797,2799],{"class":965,"line":2387},[963,2796,1124],{"class":969},[963,2798,2382],{"class":973},[963,2800,996],{"class":969},[2445,2802,2803],{"start":999},[1133,2804,2449,2805,2807],{},[944,2806,2439],{}," composable that returns a Promise:",[955,2809,2813],{"className":2810,"code":2811,"filename":2812,"language":991,"meta":959,"style":959},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ConfirmDialog } from '#components'\n\nexport interface ConfirmDialogOptions {\n  title: string\n  description?: string\n}\n\nexport const useConfirmDialog = () => {\n  const overlay = useOverlay()\n\n  return (options: ConfirmDialogOptions): Promise\u003Cboolean> => {\n    const modal = overlay.create(ConfirmDialog, {\n      destroyOnClose: true,\n      props: options\n    })\n\n    return modal.open()\n  }\n}\n","composables/useConfirmDialog.ts",[944,2814,2815,2834,2838,2851,2859,2867,2871,2875,2893,2905,2909,2938,2962,2976,2986,2993,2997,3010,3015],{"__ignoreMap":959},[963,2816,2817,2819,2821,2824,2826,2828,2830,2832],{"class":965,"line":966},[963,2818,1003],{"class":1002},[963,2820,1006],{"class":969},[963,2822,2823],{"class":1009}," ConfirmDialog",[963,2825,1013],{"class":969},[963,2827,1016],{"class":1002},[963,2829,1019],{"class":969},[963,2831,1022],{"class":990},[963,2833,1025],{"class":969},[963,2835,2836],{"class":965,"line":999},[963,2837,1031],{"emptyLinePlaceholder":21},[963,2839,2840,2843,2846,2849],{"class":965,"line":1028},[963,2841,2842],{"class":1002},"export",[963,2844,2845],{"class":977}," interface",[963,2847,2848],{"class":1174}," ConfirmDialogOptions",[963,2850,1099],{"class":969},[963,2852,2853,2855,2857],{"class":965,"line":1034},[963,2854,2494],{"class":973},[963,2856,1201],{"class":969},[963,2858,2499],{"class":1174},[963,2860,2861,2863,2865],{"class":965,"line":1052},[963,2862,2504],{"class":973},[963,2864,1304],{"class":969},[963,2866,2499],{"class":1174},[963,2868,2869],{"class":965,"line":1057},[963,2870,1118],{"class":969},[963,2872,2873],{"class":965,"line":1079},[963,2874,1031],{"emptyLinePlaceholder":21},[963,2876,2877,2879,2882,2885,2887,2889,2891],{"class":965,"line":1084},[963,2878,2842],{"class":1002},[963,2880,2881],{"class":977}," const",[963,2883,2884],{"class":1009}," useConfirmDialog ",[963,2886,984],{"class":969},[963,2888,2231],{"class":969},[963,2890,2234],{"class":977},[963,2892,1099],{"class":969},[963,2894,2895,2897,2899,2901,2903],{"class":965,"line":1102},[963,2896,2306],{"class":977},[963,2898,1067],{"class":1009},[963,2900,2312],{"class":969},[963,2902,1046],{"class":1045},[963,2904,1049],{"class":973},[963,2906,2907],{"class":965,"line":1115},[963,2908,1031],{"emptyLinePlaceholder":21},[963,2910,2911,2914,2917,2919,2921,2923,2925,2928,2930,2932,2934,2936],{"class":965,"line":1121},[963,2912,2913],{"class":1002},"  return",[963,2915,2916],{"class":969}," (",[963,2918,1243],{"class":1197},[963,2920,1201],{"class":969},[963,2922,2848],{"class":1174},[963,2924,1218],{"class":969},[963,2926,2927],{"class":1174}," Promise",[963,2929,970],{"class":969},[963,2931,1256],{"class":1174},[963,2933,1324],{"class":969},[963,2935,2234],{"class":977},[963,2937,1099],{"class":969},[963,2939,2940,2943,2946,2948,2950,2952,2954,2956,2958,2960],{"class":965,"line":1757},[963,2941,2942],{"class":977},"    const",[963,2944,2945],{"class":1009}," modal",[963,2947,2312],{"class":969},[963,2949,1067],{"class":1009},[963,2951,1070],{"class":969},[963,2953,1073],{"class":1045},[963,2955,1194],{"class":973},[963,2957,2452],{"class":1009},[963,2959,1207],{"class":969},[963,2961,1099],{"class":969},[963,2963,2964,2967,2969,2973],{"class":965,"line":1762},[963,2965,2966],{"class":973},"      destroyOnClose",[963,2968,1201],{"class":969},[963,2970,2972],{"class":2971},"sfNiH"," true",[963,2974,2975],{"class":969},",\n",[963,2977,2978,2981,2983],{"class":965,"line":1992},[963,2979,2980],{"class":973},"      props",[963,2982,1201],{"class":969},[963,2984,2985],{"class":1009}," options\n",[963,2987,2988,2991],{"class":965,"line":2004},[963,2989,2990],{"class":969},"    }",[963,2992,1754],{"class":973},[963,2994,2995],{"class":965,"line":2033},[963,2996,1031],{"emptyLinePlaceholder":21},[963,2998,2999,3002,3004,3006,3008],{"class":965,"line":2038},[963,3000,3001],{"class":1002},"    return",[963,3003,2945],{"class":1009},[963,3005,1070],{"class":969},[963,3007,1110],{"class":1045},[963,3009,1049],{"class":973},[963,3011,3012],{"class":965,"line":2303},[963,3013,3014],{"class":969},"  }\n",[963,3016,3017],{"class":965,"line":2327},[963,3018,1118],{"class":969},[2445,3020,3021],{"start":1028},[1133,3022,3023],{},"Use the composable in your components:",[955,3025,3027],{"className":957,"code":3026,"language":34,"meta":959,"style":959},"\u003Cscript setup lang=\"ts\">\nconst confirm = useConfirmDialog()\n\nconst handleDelete = async () => {\n  const confirmed = await confirm({\n    title: 'Delete item',\n    description: 'Are you sure you want to delete this item?'\n  })\n\n  if (confirmed) {\n    console.log('Item deleted')\n  }\n}\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CUButton label=\"Delete item\" @click=\"handleDelete\" />\n\u003C/template>\n",[944,3028,3029,3049,3063,3067,3084,3102,3117,3131,3137,3141,3156,3177,3181,3185,3193,3197,3205,3234],{"__ignoreMap":959},[963,3030,3031,3033,3035,3037,3039,3041,3043,3045,3047],{"class":965,"line":966},[963,3032,970],{"class":969},[963,3034,974],{"class":973},[963,3036,978],{"class":977},[963,3038,981],{"class":977},[963,3040,984],{"class":969},[963,3042,987],{"class":969},[963,3044,991],{"class":990},[963,3046,987],{"class":969},[963,3048,996],{"class":969},[963,3050,3051,3053,3056,3058,3061],{"class":965,"line":999},[963,3052,1037],{"class":977},[963,3054,3055],{"class":1009}," confirm ",[963,3057,984],{"class":969},[963,3059,3060],{"class":1045}," useConfirmDialog",[963,3062,1049],{"class":1009},[963,3064,3065],{"class":965,"line":1028},[963,3066,1031],{"emptyLinePlaceholder":21},[963,3068,3069,3071,3074,3076,3078,3080,3082],{"class":965,"line":1034},[963,3070,1037],{"class":977},[963,3072,3073],{"class":1009}," handleDelete ",[963,3075,984],{"class":969},[963,3077,2289],{"class":977},[963,3079,2231],{"class":969},[963,3081,2234],{"class":977},[963,3083,1099],{"class":969},[963,3085,3086,3088,3091,3093,3095,3098,3100],{"class":965,"line":1052},[963,3087,2306],{"class":977},[963,3089,3090],{"class":1009}," confirmed",[963,3092,2312],{"class":969},[963,3094,2315],{"class":1002},[963,3096,3097],{"class":1045}," confirm",[963,3099,1194],{"class":973},[963,3101,1732],{"class":969},[963,3103,3104,3106,3108,3110,3113,3115],{"class":965,"line":1057},[963,3105,1737],{"class":973},[963,3107,1201],{"class":969},[963,3109,1019],{"class":969},[963,3111,3112],{"class":990},"Delete item",[963,3114,1947],{"class":969},[963,3116,2975],{"class":969},[963,3118,3119,3122,3124,3126,3129],{"class":965,"line":1079},[963,3120,3121],{"class":973},"    description",[963,3123,1201],{"class":969},[963,3125,1019],{"class":969},[963,3127,3128],{"class":990},"Are you sure you want to delete this item?",[963,3130,1025],{"class":969},[963,3132,3133,3135],{"class":965,"line":1084},[963,3134,1751],{"class":969},[963,3136,1754],{"class":973},[963,3138,3139],{"class":965,"line":1102},[963,3140,1031],{"emptyLinePlaceholder":21},[963,3142,3143,3146,3148,3151,3154],{"class":965,"line":1115},[963,3144,3145],{"class":1002},"  if",[963,3147,2916],{"class":973},[963,3149,3150],{"class":1009},"confirmed",[963,3152,3153],{"class":973},") ",[963,3155,1732],{"class":969},[963,3157,3158,3161,3163,3166,3168,3170,3173,3175],{"class":965,"line":1121},[963,3159,3160],{"class":1009},"    console",[963,3162,1070],{"class":969},[963,3164,3165],{"class":1045},"log",[963,3167,1194],{"class":973},[963,3169,1947],{"class":969},[963,3171,3172],{"class":990},"Item deleted",[963,3174,1947],{"class":969},[963,3176,1754],{"class":973},[963,3178,3179],{"class":965,"line":1757},[963,3180,3014],{"class":969},[963,3182,3183],{"class":965,"line":1762},[963,3184,1118],{"class":969},[963,3186,3187,3189,3191],{"class":965,"line":1992},[963,3188,1124],{"class":969},[963,3190,974],{"class":973},[963,3192,996],{"class":969},[963,3194,3195],{"class":965,"line":2004},[963,3196,1031],{"emptyLinePlaceholder":21},[963,3198,3199,3201,3203],{"class":965,"line":2033},[963,3200,970],{"class":969},[963,3202,2382],{"class":973},[963,3204,996],{"class":969},[963,3206,3207,3209,3211,3213,3215,3217,3219,3221,3223,3225,3227,3230,3232],{"class":965,"line":2038},[963,3208,2390],{"class":969},[963,3210,2393],{"class":973},[963,3212,2396],{"class":977},[963,3214,984],{"class":969},[963,3216,987],{"class":969},[963,3218,3112],{"class":990},[963,3220,987],{"class":969},[963,3222,2408],{"class":977},[963,3224,984],{"class":969},[963,3226,987],{"class":969},[963,3228,3229],{"class":990},"handleDelete",[963,3231,987],{"class":969},[963,3233,2420],{"class":969},[963,3235,3236,3238,3240],{"class":965,"line":2303},[963,3237,1124],{"class":969},[963,3239,2382],{"class":973},[963,3241,996],{"class":969},[935,3243,3245],{"id":3244},"caveats","Caveats",[1183,3247,3249],{"id":3248},"provide-inject","Provide / Inject",[940,3251,3252,3253,3256,3257,3260,3261,3263],{},"When opening overlays programmatically (e.g. modals, slideovers, etc), the overlay component can only access injected values from the component containing ",[944,3254,3255],{},"UApp"," (typically ",[944,3258,3259],{},"app.vue"," or layout components). This is because overlays are mounted outside of the page context by the ",[944,3262,3255],{}," component.",[940,3265,3266,3267,3270],{},"As such, using ",[944,3268,3269],{},"provide()"," in pages or parent components isn't supported directly. To pass provided values to overlays, the recommended approach is to use props instead:",[955,3272,3274],{"className":957,"code":3273,"language":34,"meta":959,"style":959},"\u003Cscript setup lang=\"ts\">\nimport { LazyModalExample } from '#components'\n\nconst overlay = useOverlay()\n\nconst providedValue = inject('valueProvidedInPage')\n\nconst modal = overlay.create(LazyModalExample, {\n  props: {\n    providedValue\n  }\n})\n\u003C/script>\n",[944,3275,3276,3296,3314,3318,3330,3334,3357,3361,3381,3389,3394,3398,3404],{"__ignoreMap":959},[963,3277,3278,3280,3282,3284,3286,3288,3290,3292,3294],{"class":965,"line":966},[963,3279,970],{"class":969},[963,3281,974],{"class":973},[963,3283,978],{"class":977},[963,3285,981],{"class":977},[963,3287,984],{"class":969},[963,3289,987],{"class":969},[963,3291,991],{"class":990},[963,3293,987],{"class":969},[963,3295,996],{"class":969},[963,3297,3298,3300,3302,3304,3306,3308,3310,3312],{"class":965,"line":999},[963,3299,1003],{"class":1002},[963,3301,1006],{"class":969},[963,3303,1010],{"class":1009},[963,3305,1013],{"class":969},[963,3307,1016],{"class":1002},[963,3309,1019],{"class":969},[963,3311,1022],{"class":990},[963,3313,1025],{"class":969},[963,3315,3316],{"class":965,"line":1028},[963,3317,1031],{"emptyLinePlaceholder":21},[963,3319,3320,3322,3324,3326,3328],{"class":965,"line":1034},[963,3321,1037],{"class":977},[963,3323,1040],{"class":1009},[963,3325,984],{"class":969},[963,3327,1046],{"class":1045},[963,3329,1049],{"class":1009},[963,3331,3332],{"class":965,"line":1052},[963,3333,1031],{"emptyLinePlaceholder":21},[963,3335,3336,3338,3341,3343,3346,3348,3350,3353,3355],{"class":965,"line":1057},[963,3337,1037],{"class":977},[963,3339,3340],{"class":1009}," providedValue ",[963,3342,984],{"class":969},[963,3344,3345],{"class":1045}," inject",[963,3347,1194],{"class":1009},[963,3349,1947],{"class":969},[963,3351,3352],{"class":990},"valueProvidedInPage",[963,3354,1947],{"class":969},[963,3356,1754],{"class":1009},[963,3358,3359],{"class":965,"line":1079},[963,3360,1031],{"emptyLinePlaceholder":21},[963,3362,3363,3365,3367,3369,3371,3373,3375,3377,3379],{"class":965,"line":1084},[963,3364,1037],{"class":977},[963,3366,1062],{"class":1009},[963,3368,984],{"class":969},[963,3370,1067],{"class":1009},[963,3372,1070],{"class":969},[963,3374,1073],{"class":1045},[963,3376,1922],{"class":1009},[963,3378,1207],{"class":969},[963,3380,1099],{"class":969},[963,3382,3383,3385,3387],{"class":965,"line":1102},[963,3384,1931],{"class":973},[963,3386,1201],{"class":969},[963,3388,1099],{"class":969},[963,3390,3391],{"class":965,"line":1115},[963,3392,3393],{"class":1009},"    providedValue\n",[963,3395,3396],{"class":965,"line":1121},[963,3397,3014],{"class":969},[963,3399,3400,3402],{"class":965,"line":1757},[963,3401,1955],{"class":969},[963,3403,1754],{"class":1009},[963,3405,3406,3408,3410],{"class":965,"line":1762},[963,3407,1124],{"class":969},[963,3409,974],{"class":973},[963,3411,996],{"class":969},[3413,3414,3415],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":959,"searchDepth":999,"depth":999,"links":3417},[3418,3419,3429,3434,3438],{"id":937,"depth":999,"text":938},{"id":1164,"depth":999,"text":1165,"children":3420},[3421,3422,3423,3424,3425,3426,3427,3428],{"id":1073,"depth":1028,"text":1185},{"id":1110,"depth":1028,"text":1280},{"id":1159,"depth":1028,"text":1348},{"id":1401,"depth":1028,"text":1402},{"id":1420,"depth":1028,"text":1421},{"id":1480,"depth":1028,"text":1481},{"id":1516,"depth":1028,"text":1517},{"id":1554,"depth":1028,"text":1554},{"id":1574,"depth":999,"text":1575,"children":3430},[3431,3432,3433],{"id":1578,"depth":1028,"text":1280},{"id":1771,"depth":1028,"text":1348},{"id":1804,"depth":1028,"text":1421},{"id":2047,"depth":999,"text":2048,"children":3435},[3436,3437],{"id":2051,"depth":1028,"text":2052},{"id":2432,"depth":1028,"text":2433},{"id":3244,"depth":999,"text":3245,"children":3439},[3440],{"id":3248,"depth":1028,"text":3249},"md",{},{"title":819,"description":822},"0Q7aSAyujN48TTVvwK8a4ZCF-jmK-4hWn-OFimcI_V0",{"data":3446,"body":3447},{},{"type":3448,"children":3449},"root",[3450],{"type":178,"tag":940,"props":3451,"children":3452},{},[3453],{"type":3454,"value":822},"text",1772538887742]