[{"data":1,"prerenderedAt":1699},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fpopover\u002Fdeveloper":439},[4,30,256,281,366,375,402,424],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"Nuxt","\u002Fgetting-started\u002Fnuxt","1.getting-started\u002F3.nuxt","i-lucide-mountain",{"title":21,"path":22,"stem":23,"icon":24},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming","i-lucide-palette",{"title":26,"path":27,"stem":28,"icon":29},"MCP","\u002Fgetting-started\u002Fmcp","1.getting-started\u002F5.mcp","i-lucide-plug",{"title":31,"icon":6,"path":32,"stem":33,"children":34,"page":6},"Components","\u002Fcomponents","2.components",[35,43,51,59,67,75,83,92,100,104,108,116,124,133,141,149,157,166,174,182,191,199,203,211,220,228,236,240,248],{"title":36,"path":37,"stem":38,"children":39,"page":6},"Accordion","\u002Fcomponents\u002Faccordion","2.components\u002F01.accordion",[40],{"title":36,"path":41,"stem":42},"\u002Fcomponents\u002Faccordion\u002Foverview","2.components\u002F01.accordion\u002F1.overview",{"title":44,"path":45,"stem":46,"children":47,"page":6},"Alert","\u002Fcomponents\u002Falert","2.components\u002F02.alert",[48],{"title":44,"path":49,"stem":50},"\u002Fcomponents\u002Falert\u002Foverview","2.components\u002F02.alert\u002F1.overview",{"title":52,"path":53,"stem":54,"children":55,"page":6},"Button","\u002Fcomponents\u002Fbutton","2.components\u002F03.button",[56],{"title":52,"path":57,"stem":58},"\u002Fcomponents\u002Fbutton\u002Foverview","2.components\u002F03.button\u002F1.overview",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Card","\u002Fcomponents\u002Fcard","2.components\u002F04.card",[64],{"title":60,"path":65,"stem":66},"\u002Fcomponents\u002Fcard\u002Foverview","2.components\u002F04.card\u002F1.overview",{"title":68,"path":69,"stem":70,"children":71,"page":6},"Carousel","\u002Fcomponents\u002Fcarousel","2.components\u002F05.carousel",[72],{"title":68,"path":73,"stem":74},"\u002Fcomponents\u002Fcarousel\u002Foverview","2.components\u002F05.carousel\u002F1.overview",{"title":76,"path":77,"stem":78,"children":79,"page":6},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002F06.checkbox",[80],{"title":76,"path":81,"stem":82},"\u002Fcomponents\u002Fcheckbox\u002Foverview","2.components\u002F06.checkbox\u002F1.overview",{"title":84,"path":85,"stem":86,"children":87,"page":6},"Date Picker","\u002Fcomponents\u002Fdate-picker","2.components\u002F07.date-picker",[88],{"title":89,"path":90,"stem":91},"Date picker","\u002Fcomponents\u002Fdate-picker\u002Foverview","2.components\u002F07.date-picker\u002F1.overview",{"title":93,"path":94,"stem":95,"children":96,"page":6},"Dropdown","\u002Fcomponents\u002Fdropdown","2.components\u002F08.dropdown",[97],{"title":93,"path":98,"stem":99},"\u002Fcomponents\u002Fdropdown\u002Foverview","2.components\u002F08.dropdown\u002F1.overview",{"title":101,"path":102,"stem":103},"Heading","\u002Fcomponents\u002Fheading","2.components\u002F09.heading",{"title":105,"path":106,"stem":107},"Icon","\u002Fcomponents\u002Ficon","2.components\u002F10.icon",{"title":109,"path":110,"stem":111,"children":112,"page":6},"Input","\u002Fcomponents\u002Finput","2.components\u002F11.input",[113],{"title":109,"path":114,"stem":115},"\u002Fcomponents\u002Finput\u002Foverview","2.components\u002F11.input\u002F1.overview",{"title":117,"path":118,"stem":119,"children":120,"page":6},"Label","\u002Fcomponents\u002Flabel","2.components\u002F12.label",[121],{"title":117,"path":122,"stem":123},"\u002Fcomponents\u002Flabel\u002Foverview","2.components\u002F12.label\u002F1.overview",{"title":125,"path":126,"stem":127,"children":128,"page":6},"Phone Number","\u002Fcomponents\u002Fphone-number","2.components\u002F13.phone-number",[129],{"title":130,"path":131,"stem":132},"Phone number","\u002Fcomponents\u002Fphone-number\u002Foverview","2.components\u002F13.phone-number\u002F1.overview",{"title":134,"path":135,"stem":136,"children":137,"page":6},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002F14.popover",[138],{"title":134,"path":139,"stem":140},"\u002Fcomponents\u002Fpopover\u002Foverview","2.components\u002F14.popover\u002F1.overview",{"title":142,"path":143,"stem":144,"children":145,"page":6},"Quantity","\u002Fcomponents\u002Fquantity","2.components\u002F15.quantity",[146],{"title":142,"path":147,"stem":148},"\u002Fcomponents\u002Fquantity\u002Foverview","2.components\u002F15.quantity\u002F1.overview",{"title":150,"path":151,"stem":152,"children":153,"page":6},"Radio","\u002Fcomponents\u002Fradio","2.components\u002F16.radio",[154],{"title":150,"path":155,"stem":156},"\u002Fcomponents\u002Fradio\u002Foverview","2.components\u002F16.radio\u002F1.overview",{"title":158,"path":159,"stem":160,"children":161,"page":6},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002F17.radio-group",[162],{"title":163,"path":164,"stem":165},"Radio group","\u002Fcomponents\u002Fradio-group\u002Foverview","2.components\u002F17.radio-group\u002F1.overview",{"title":167,"path":168,"stem":169,"children":170,"page":6},"Rating","\u002Fcomponents\u002Frating","2.components\u002F18.rating",[171],{"title":167,"path":172,"stem":173},"\u002Fcomponents\u002Frating\u002Foverview","2.components\u002F18.rating\u002F1.overview",{"title":175,"path":176,"stem":177,"children":178,"page":6},"Required","\u002Fcomponents\u002Frequired","2.components\u002F19.required",[179],{"title":175,"path":180,"stem":181},"\u002Fcomponents\u002Frequired\u002Foverview","2.components\u002F19.required\u002F1.overview",{"title":183,"path":184,"stem":185,"children":186,"page":6},"Scroll Area","\u002Fcomponents\u002Fscroll-area","2.components\u002F20.scroll-area",[187],{"title":188,"path":189,"stem":190},"Scroll area","\u002Fcomponents\u002Fscroll-area\u002Foverview","2.components\u002F20.scroll-area\u002F1.overview",{"title":192,"path":193,"stem":194,"children":195,"page":6},"Select","\u002Fcomponents\u002Fselect","2.components\u002F21.select",[196],{"title":192,"path":197,"stem":198},"\u002Fcomponents\u002Fselect\u002Foverview","2.components\u002F21.select\u002F1.overview",{"title":200,"path":201,"stem":202},"Spinner","\u002Fcomponents\u002Fspinner","2.components\u002F22.spinner",{"title":204,"path":205,"stem":206,"children":207,"page":6},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002F23.switch",[208],{"title":204,"path":209,"stem":210},"\u002Fcomponents\u002Fswitch\u002Foverview","2.components\u002F23.switch\u002F1.overview",{"title":212,"path":213,"stem":214,"children":215,"page":6},"Tab Badge","\u002Fcomponents\u002Ftab-badge","2.components\u002F24.tab-badge",[216],{"title":217,"path":218,"stem":219},"Tab badge","\u002Fcomponents\u002Ftab-badge\u002Foverview","2.components\u002F24.tab-badge\u002F1.overview",{"title":221,"path":222,"stem":223,"children":224,"page":6},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002F25.tabs",[225],{"title":221,"path":226,"stem":227},"\u002Fcomponents\u002Ftabs\u002Foverview","2.components\u002F25.tabs\u002F1.overview",{"title":229,"path":230,"stem":231,"children":232,"page":6},"Tag","\u002Fcomponents\u002Ftag","2.components\u002F26.tag",[233],{"title":229,"path":234,"stem":235},"\u002Fcomponents\u002Ftag\u002Foverview","2.components\u002F26.tag\u002F1.overview",{"title":237,"path":238,"stem":239},"Text","\u002Fcomponents\u002Ftext","2.components\u002F27.text",{"title":241,"path":242,"stem":243,"children":244,"page":6},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002F28.textarea",[245],{"title":241,"path":246,"stem":247},"\u002Fcomponents\u002Ftextarea\u002Foverview","2.components\u002F28.textarea\u002F1.overview",{"title":249,"path":250,"stem":251,"children":252,"page":6},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002F29.tooltip",[253],{"title":249,"path":254,"stem":255},"\u002Fcomponents\u002Ftooltip\u002Foverview","2.components\u002F29.tooltip\u002F1.overview",{"title":257,"icon":6,"path":258,"stem":259,"children":260,"page":6},"Foundations","\u002Ffoundations","2.foundations",[261,269,273,277],{"title":262,"icon":6,"path":263,"stem":264,"children":265,"page":6},"Color","\u002Ffoundations\u002Fcolor","2.foundations\u002F1.color",[266],{"title":262,"path":267,"stem":268},"\u002Ffoundations\u002Fcolor\u002Foverview","2.foundations\u002F1.color\u002F1.overview",{"title":270,"path":271,"stem":272},"Icons","\u002Ffoundations\u002Ficons","2.foundations\u002F2.icons",{"title":274,"path":275,"stem":276},"Logos and Pins","\u002Ffoundations\u002Flogos-and-pins","2.foundations\u002F3.logos-and-pins",{"title":278,"path":279,"stem":280},"Web layers","\u002Ffoundations\u002Fweb-layers","2.foundations\u002F4.web-layers",{"title":282,"icon":6,"path":283,"stem":284,"children":285,"page":6},"WIP","\u002Fwip","3.wip",[286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362],{"title":287,"path":288,"stem":289},"Additional","\u002Fwip\u002Fadditional","3.wip\u002Fadditional",{"title":291,"path":292,"stem":293},"Alt text","\u002Fwip\u002Falt-text","3.wip\u002Falt-text",{"title":295,"path":296,"stem":297},"AnnouncementBar","\u002Fwip\u002Fannouncement-bar","3.wip\u002Fannouncement-bar",{"title":299,"path":300,"stem":301},"Avatar","\u002Fwip\u002Favatar","3.wip\u002Favatar",{"title":303,"path":304,"stem":305},"Banner","\u002Fwip\u002Fbanner","3.wip\u002Fbanner",{"title":307,"path":308,"stem":309},"Breadcrumbs","\u002Fwip\u002Fbreadcrumbs","3.wip\u002Fbreadcrumbs",{"title":311,"path":312,"stem":313},"Divider & scroll","\u002Fwip\u002Fdivider-scroll","3.wip\u002Fdivider-scroll",{"title":315,"path":316,"stem":317},"FieldMessage","\u002Fwip\u002Ffield-message","3.wip\u002Ffield-message",{"title":319,"path":320,"stem":321},"Focus Ring","\u002Fwip\u002Ffocus-ring","3.wip\u002Ffocus-ring",{"title":323,"path":324,"stem":325},"InlineSeparator","\u002Fwip\u002Finline-separator","3.wip\u002Finline-separator",{"title":327,"path":328,"stem":329},"Modal & drawer","\u002Fwip\u002Fmodal-drawer","3.wip\u002Fmodal-drawer",{"title":331,"path":332,"stem":333},"Optional","\u002Fwip\u002Foptional","3.wip\u002Foptional",{"title":335,"path":336,"stem":337},"Pagination","\u002Fwip\u002Fpagination","3.wip\u002Fpagination",{"title":339,"path":340,"stem":341},"PasswordInput","\u002Fwip\u002Fpassword-input","3.wip\u002Fpassword-input",{"title":343,"path":344,"stem":345},"Pinned bar page","\u002Fwip\u002Fpinned-bar-page","3.wip\u002Fpinned-bar-page",{"title":347,"path":348,"stem":349},"PromotionalBar","\u002Fwip\u002Fpromotional-bar","3.wip\u002Fpromotional-bar",{"title":351,"path":352,"stem":353},"SearchInput","\u002Fwip\u002Fsearch-input","3.wip\u002Fsearch-input",{"title":355,"path":356,"stem":357},"StatusLine","\u002Fwip\u002Fstatus-line","3.wip\u002Fstatus-line",{"title":359,"path":360,"stem":361},"Stepper & loaderBar","\u002Fwip\u002Fstepper-loader-bar","3.wip\u002Fstepper-loader-bar",{"title":363,"path":364,"stem":365},"TextInput","\u002Fwip\u002Ftext-input","3.wip\u002Ftext-input",{"title":367,"icon":6,"path":368,"stem":369,"children":370,"page":6},"Overview","\u002Foverview","4.overview",[371],{"title":372,"path":373,"stem":374},"For developers","\u002Foverview\u002Ffor-developers","4.overview\u002F1.for-developers",{"title":376,"icon":6,"path":377,"stem":378,"children":379,"page":6},"Brand","\u002Fbrand","5.brand",[380,389],{"title":381,"icon":6,"path":382,"stem":383,"children":384,"page":6},"Brand guidelines","\u002Fbrand\u002Fbrand-guidelines","5.brand\u002F1.brand-guidelines",[385],{"title":386,"path":387,"stem":388},"Dr. Max Trademarks Guidelines","\u002Fbrand\u002Fbrand-guidelines\u002Fdr-max-trademarks-guidelines","5.brand\u002F1.brand-guidelines\u002F2.dr-max-trademarks-guidelines",{"title":390,"icon":6,"path":391,"stem":392,"children":393,"page":6},"Assets","\u002Fbrand\u002Fassets","5.brand\u002F2.assets",[394,398],{"title":395,"path":396,"stem":397},"Logos","\u002Fbrand\u002Fassets\u002Flogos","5.brand\u002F2.assets\u002F2.logos",{"title":399,"path":400,"stem":401},"Dr. Max Tagline","\u002Fbrand\u002Fassets\u002Fdr-max-tagline","5.brand\u002F2.assets\u002F3.dr-max-tagline",{"title":403,"icon":6,"path":404,"stem":405,"children":406,"page":6},"Content","\u002Fcontent","6.content",[407,411],{"title":408,"path":409,"stem":410},"Content accessibility","\u002Fcontent\u002Fcontent-accessibility","6.content\u002F1.content-accessibility",{"title":412,"icon":6,"path":413,"stem":414,"children":415,"page":6},"Content guidance","\u002Fcontent\u002Fcontent-guidelines","6.content\u002F2.content-guidelines",[416,420],{"title":417,"path":418,"stem":419},"Category color-coding","\u002Fcontent\u002Fcontent-guidelines\u002Fcategory-color-coding","6.content\u002F2.content-guidelines\u002F2.category-color-coding",{"title":421,"path":422,"stem":423},"Pop-up banners","\u002Fcontent\u002Fcontent-guidelines\u002Fpop-up-banners","6.content\u002F2.content-guidelines\u002F3.pop-up-banners",{"title":425,"icon":6,"path":426,"stem":427,"children":428,"page":6},"Accessibility","\u002Faccessibility","7.accessibility",[429],{"title":430,"path":431,"stem":432,"children":433,"icon":6},"Accessibility guidance","\u002Faccessibility\u002Faccessibility-guidance","7.accessibility\u002F1.accessibility-guidance\u002F1.index",[434,435],{"title":425,"path":431,"stem":432},{"title":436,"path":437,"stem":438},"Understanding WCAG 2.2","\u002Faccessibility\u002Faccessibility-guidance\u002Funderstanding-wcag-2-2","7.accessibility\u002F1.accessibility-guidance\u002F2.understanding-wcag-2-2",{"id":440,"title":134,"body":441,"description":1691,"extension":1692,"links":1693,"meta":1694,"navigation":6,"path":1695,"seo":1696,"stem":1697,"__hash__":1698},"docs\u002F2.components\u002F14.popover\u002F3.developer.md",{"type":442,"value":443,"toc":1679},"minimark",[444,449,502,506,510,531,775,780,821,943,947,967,1058,1062,1072,1204,1208,1217,1318,1322,1329,1612,1616,1623,1667,1671,1675],[445,446,448],"h2",{"id":447},"import","Import",[450,451,456],"pre",{"className":452,"code":453,"language":454,"meta":455,"style":455},"language-ts shiki shiki-themes material-theme-palenight","import { Popover, PopoverContent, PopoverTrigger } from \"@dr-max\u002Fui\u002Fpopover\"\n","ts","",[457,458,459],"code",{"__ignoreMap":455},[460,461,464,467,471,475,478,481,483,486,489,492,495,499],"span",{"class":462,"line":463},"line",1,[460,465,447],{"class":466},"s6cf3",[460,468,470],{"class":469},"sAklC"," {",[460,472,474],{"class":473},"s0W1g"," Popover",[460,476,477],{"class":469},",",[460,479,480],{"class":473}," PopoverContent",[460,482,477],{"class":469},[460,484,485],{"class":473}," PopoverTrigger",[460,487,488],{"class":469}," }",[460,490,491],{"class":466}," from",[460,493,494],{"class":469}," \"",[460,496,498],{"class":497},"sfyAc","@dr-max\u002Fui\u002Fpopover",[460,500,501],{"class":469},"\"\n",[503,504,505],"p",{},"The entry carries its own precompiled CSS — no extra style imports needed.",[445,507,509],{"id":508},"usage","Usage",[503,511,512,513,515,516,519,520,523,524,527,528,530],{},"The popover is composed of three parts: ",[457,514,134],{}," holds the open state, ",[457,517,518],{},"PopoverTrigger"," toggles it, and ",[457,521,522],{},"PopoverContent"," is the floating panel rendered in a portal. Pass ",[457,525,526],{},"as-child"," to the trigger to use your own element — typically a ",[457,529,52],{}," — instead of the default plain button. Click the trigger below to open it:",[532,533,534,550],"code-preview",{},[535,536,537,546],"ui-popover",{},[538,539,541],"ui-popover-trigger",{":as-child":540},"true",[542,543,545],"ui-button",{"variant":544},"secondary","Open popover",[547,548,549],"ui-popover-content",{},"There are a lot of things you can do in space, and space essentially is unlimited resources.",[551,552,553],"template",{"v-slot:code":455},[450,554,558],{"className":555,"code":556,"language":557,"meta":455,"style":455},"language-vue shiki shiki-themes material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Button } from \"@dr-max\u002Fui\u002Fbutton\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@dr-max\u002Fui\u002Fpopover\"\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CPopover>\n    \u003CPopoverTrigger as-child>\n      \u003CButton variant=\"secondary\">Open popover\u003C\u002FButton>\n    \u003C\u002FPopoverTrigger>\n    \u003CPopoverContent>\n      There are a lot of things you can do in space, and space essentially is\n      unlimited resources.\n    \u003C\u002FPopoverContent>\n  \u003C\u002FPopover>\n\u003C\u002Ftemplate>\n","vue",[457,559,560,589,610,637,647,654,663,673,686,716,726,735,741,747,756,766],{"__ignoreMap":455},[460,561,562,565,569,573,576,579,582,584,586],{"class":462,"line":463},[460,563,564],{"class":469},"\u003C",[460,566,568],{"class":567},"s-wAU","script",[460,570,572],{"class":571},"sJ14y"," setup",[460,574,575],{"class":571}," lang",[460,577,578],{"class":469},"=",[460,580,581],{"class":469},"\"",[460,583,454],{"class":497},[460,585,581],{"class":469},[460,587,588],{"class":469},">\n",[460,590,592,594,596,599,601,603,605,608],{"class":462,"line":591},2,[460,593,447],{"class":466},[460,595,470],{"class":469},[460,597,598],{"class":473}," Button",[460,600,488],{"class":469},[460,602,491],{"class":466},[460,604,494],{"class":469},[460,606,607],{"class":497},"@dr-max\u002Fui\u002Fbutton",[460,609,501],{"class":469},[460,611,613,615,617,619,621,623,625,627,629,631,633,635],{"class":462,"line":612},3,[460,614,447],{"class":466},[460,616,470],{"class":469},[460,618,474],{"class":473},[460,620,477],{"class":469},[460,622,480],{"class":473},[460,624,477],{"class":469},[460,626,485],{"class":473},[460,628,488],{"class":469},[460,630,491],{"class":466},[460,632,494],{"class":469},[460,634,498],{"class":497},[460,636,501],{"class":469},[460,638,640,643,645],{"class":462,"line":639},4,[460,641,642],{"class":469},"\u003C\u002F",[460,644,568],{"class":567},[460,646,588],{"class":469},[460,648,650],{"class":462,"line":649},5,[460,651,653],{"emptyLinePlaceholder":652},true,"\n",[460,655,657,659,661],{"class":462,"line":656},6,[460,658,564],{"class":469},[460,660,551],{"class":567},[460,662,588],{"class":469},[460,664,666,669,671],{"class":462,"line":665},7,[460,667,668],{"class":469},"  \u003C",[460,670,134],{"class":567},[460,672,588],{"class":469},[460,674,676,679,681,684],{"class":462,"line":675},8,[460,677,678],{"class":469},"    \u003C",[460,680,518],{"class":567},[460,682,683],{"class":571}," as-child",[460,685,588],{"class":469},[460,687,689,692,694,697,699,701,703,705,708,710,712,714],{"class":462,"line":688},9,[460,690,691],{"class":469},"      \u003C",[460,693,52],{"class":567},[460,695,696],{"class":571}," variant",[460,698,578],{"class":469},[460,700,581],{"class":469},[460,702,544],{"class":497},[460,704,581],{"class":469},[460,706,707],{"class":469},">",[460,709,545],{"class":473},[460,711,642],{"class":469},[460,713,52],{"class":567},[460,715,588],{"class":469},[460,717,719,722,724],{"class":462,"line":718},10,[460,720,721],{"class":469},"    \u003C\u002F",[460,723,518],{"class":567},[460,725,588],{"class":469},[460,727,729,731,733],{"class":462,"line":728},11,[460,730,678],{"class":469},[460,732,522],{"class":567},[460,734,588],{"class":469},[460,736,738],{"class":462,"line":737},12,[460,739,740],{"class":473},"      There are a lot of things you can do in space, and space essentially is\n",[460,742,744],{"class":462,"line":743},13,[460,745,746],{"class":473},"      unlimited resources.\n",[460,748,750,752,754],{"class":462,"line":749},14,[460,751,721],{"class":469},[460,753,522],{"class":567},[460,755,588],{"class":469},[460,757,759,762,764],{"class":462,"line":758},15,[460,760,761],{"class":469},"  \u003C\u002F",[460,763,134],{"class":567},[460,765,588],{"class":469},[460,767,769,771,773],{"class":462,"line":768},16,[460,770,642],{"class":469},[460,772,551],{"class":567},[460,774,588],{"class":469},[776,777,779],"h3",{"id":778},"side-and-align","Side and align",[503,781,782,783,786,787,790,791,794,795,794,798,794,801,804,805,790,808,794,811,794,814,817,818,820],{},"The panel opens on ",[457,784,785],{},"side=\"top\""," centered on the trigger by default. Use ",[457,788,789],{},"side"," (",[457,792,793],{},"top",", ",[457,796,797],{},"right",[457,799,800],{},"bottom",[457,802,803],{},"left",") and ",[457,806,807],{},"align",[457,809,810],{},"start",[457,812,813],{},"center",[457,815,816],{},"end",") on ",[457,819,522],{}," to place it elsewhere — it flips automatically when there is not enough space:",[450,822,824],{"className":555,"code":823,"language":557,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CPopover>\n    \u003CPopoverTrigger as-child>\n      \u003CButton variant=\"secondary\">Open popover\u003C\u002FButton>\n    \u003C\u002FPopoverTrigger>\n    \u003CPopoverContent side=\"bottom\" align=\"start\">\n      Opens below the trigger, aligned to its left edge.\n    \u003C\u002FPopoverContent>\n  \u003C\u002FPopover>\n\u003C\u002Ftemplate>\n",[457,825,826,834,842,852,878,886,914,919,927,935],{"__ignoreMap":455},[460,827,828,830,832],{"class":462,"line":463},[460,829,564],{"class":469},[460,831,551],{"class":567},[460,833,588],{"class":469},[460,835,836,838,840],{"class":462,"line":591},[460,837,668],{"class":469},[460,839,134],{"class":567},[460,841,588],{"class":469},[460,843,844,846,848,850],{"class":462,"line":612},[460,845,678],{"class":469},[460,847,518],{"class":567},[460,849,683],{"class":571},[460,851,588],{"class":469},[460,853,854,856,858,860,862,864,866,868,870,872,874,876],{"class":462,"line":639},[460,855,691],{"class":469},[460,857,52],{"class":567},[460,859,696],{"class":571},[460,861,578],{"class":469},[460,863,581],{"class":469},[460,865,544],{"class":497},[460,867,581],{"class":469},[460,869,707],{"class":469},[460,871,545],{"class":473},[460,873,642],{"class":469},[460,875,52],{"class":567},[460,877,588],{"class":469},[460,879,880,882,884],{"class":462,"line":649},[460,881,721],{"class":469},[460,883,518],{"class":567},[460,885,588],{"class":469},[460,887,888,890,892,895,897,899,901,903,906,908,910,912],{"class":462,"line":656},[460,889,678],{"class":469},[460,891,522],{"class":567},[460,893,894],{"class":571}," side",[460,896,578],{"class":469},[460,898,581],{"class":469},[460,900,800],{"class":497},[460,902,581],{"class":469},[460,904,905],{"class":469}," align=",[460,907,581],{"class":469},[460,909,810],{"class":497},[460,911,581],{"class":469},[460,913,588],{"class":469},[460,915,916],{"class":462,"line":665},[460,917,918],{"class":473},"      Opens below the trigger, aligned to its left edge.\n",[460,920,921,923,925],{"class":462,"line":675},[460,922,721],{"class":469},[460,924,522],{"class":567},[460,926,588],{"class":469},[460,928,929,931,933],{"class":462,"line":688},[460,930,761],{"class":469},[460,932,134],{"class":567},[460,934,588],{"class":469},[460,936,937,939,941],{"class":462,"line":718},[460,938,642],{"class":469},[460,940,551],{"class":567},[460,942,588],{"class":469},[776,944,946],{"id":945},"offsets","Offsets",[503,948,949,952,953,956,957,960,961,963,964,966],{},[457,950,951],{},"side-offset"," sets the distance in px between the trigger and the panel (default ",[457,954,955],{},"8","); ",[457,958,959],{},"align-offset"," nudges the panel in px from its ",[457,962,810],{},"\u002F",[457,965,816],{}," alignment:",[450,968,970],{"className":555,"code":969,"language":557,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CPopoverContent side=\"bottom\" align=\"start\" :side-offset=\"12\" :align-offset=\"-4\">\n    …\n  \u003C\u002FPopoverContent>\n\u003C\u002Ftemplate>\n",[457,971,972,980,1037,1042,1050],{"__ignoreMap":455},[460,973,974,976,978],{"class":462,"line":463},[460,975,564],{"class":469},[460,977,551],{"class":567},[460,979,588],{"class":469},[460,981,982,984,986,988,990,992,994,996,998,1000,1002,1004,1007,1009,1011,1013,1017,1019,1021,1023,1025,1027,1030,1033,1035],{"class":462,"line":591},[460,983,668],{"class":469},[460,985,522],{"class":567},[460,987,894],{"class":571},[460,989,578],{"class":469},[460,991,581],{"class":469},[460,993,800],{"class":497},[460,995,581],{"class":469},[460,997,905],{"class":469},[460,999,581],{"class":469},[460,1001,810],{"class":497},[460,1003,581],{"class":469},[460,1005,1006],{"class":469}," :",[460,1008,951],{"class":571},[460,1010,578],{"class":469},[460,1012,581],{"class":469},[460,1014,1016],{"class":1015},"sx098","12",[460,1018,581],{"class":469},[460,1020,1006],{"class":469},[460,1022,959],{"class":571},[460,1024,578],{"class":469},[460,1026,581],{"class":469},[460,1028,1029],{"class":469},"-",[460,1031,1032],{"class":1015},"4",[460,1034,581],{"class":469},[460,1036,588],{"class":469},[460,1038,1039],{"class":462,"line":612},[460,1040,1041],{"class":473},"    …\n",[460,1043,1044,1046,1048],{"class":462,"line":639},[460,1045,761],{"class":469},[460,1047,522],{"class":567},[460,1049,588],{"class":469},[460,1051,1052,1054,1056],{"class":462,"line":649},[460,1053,642],{"class":469},[460,1055,551],{"class":567},[460,1057,588],{"class":469},[776,1059,1061],{"id":1060},"without-arrow","Without arrow",[503,1063,1064,1065,1068,1069,1071],{},"Set ",[457,1066,1067],{},":arrow=\"false\""," on ",[457,1070,522],{}," to hide the arrow pointing at the trigger:",[532,1073,1074,1083],{},[535,1075,1076,1080],{},[538,1077,1078],{":as-child":540},[542,1079,545],{"variant":544},[547,1081,549],{":arrow":1082},"false",[551,1084,1085],{"v-slot:code":455},[450,1086,1088],{"className":555,"code":1087,"language":557,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CPopover>\n    \u003CPopoverTrigger as-child>\n      \u003CButton variant=\"secondary\">Open popover\u003C\u002FButton>\n    \u003C\u002FPopoverTrigger>\n    \u003CPopoverContent :arrow=\"false\">\n      There are a lot of things you can do in space, and space essentially is\n      unlimited resources.\n    \u003C\u002FPopoverContent>\n  \u003C\u002FPopover>\n\u003C\u002Ftemplate>\n",[457,1089,1090,1098,1106,1116,1142,1150,1172,1176,1180,1188,1196],{"__ignoreMap":455},[460,1091,1092,1094,1096],{"class":462,"line":463},[460,1093,564],{"class":469},[460,1095,551],{"class":567},[460,1097,588],{"class":469},[460,1099,1100,1102,1104],{"class":462,"line":591},[460,1101,668],{"class":469},[460,1103,134],{"class":567},[460,1105,588],{"class":469},[460,1107,1108,1110,1112,1114],{"class":462,"line":612},[460,1109,678],{"class":469},[460,1111,518],{"class":567},[460,1113,683],{"class":571},[460,1115,588],{"class":469},[460,1117,1118,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140],{"class":462,"line":639},[460,1119,691],{"class":469},[460,1121,52],{"class":567},[460,1123,696],{"class":571},[460,1125,578],{"class":469},[460,1127,581],{"class":469},[460,1129,544],{"class":497},[460,1131,581],{"class":469},[460,1133,707],{"class":469},[460,1135,545],{"class":473},[460,1137,642],{"class":469},[460,1139,52],{"class":567},[460,1141,588],{"class":469},[460,1143,1144,1146,1148],{"class":462,"line":649},[460,1145,721],{"class":469},[460,1147,518],{"class":567},[460,1149,588],{"class":469},[460,1151,1152,1154,1156,1158,1161,1163,1165,1168,1170],{"class":462,"line":656},[460,1153,678],{"class":469},[460,1155,522],{"class":567},[460,1157,1006],{"class":469},[460,1159,1160],{"class":571},"arrow",[460,1162,578],{"class":469},[460,1164,581],{"class":469},[460,1166,1082],{"class":1167},"sbqyR",[460,1169,581],{"class":469},[460,1171,588],{"class":469},[460,1173,1174],{"class":462,"line":665},[460,1175,740],{"class":473},[460,1177,1178],{"class":462,"line":675},[460,1179,746],{"class":473},[460,1181,1182,1184,1186],{"class":462,"line":688},[460,1183,721],{"class":469},[460,1185,522],{"class":567},[460,1187,588],{"class":469},[460,1189,1190,1192,1194],{"class":462,"line":718},[460,1191,761],{"class":469},[460,1193,134],{"class":567},[460,1195,588],{"class":469},[460,1197,1198,1200,1202],{"class":462,"line":728},[460,1199,642],{"class":469},[460,1201,551],{"class":567},[460,1203,588],{"class":469},[776,1205,1207],{"id":1206},"open-by-default","Open by default",[503,1209,1210,1211,1068,1214,1216],{},"Use ",[457,1212,1213],{},"default-open",[457,1215,134],{}," to render the popover open while keeping it uncontrolled:",[450,1218,1220],{"className":555,"code":1219,"language":557,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CPopover default-open>\n    \u003CPopoverTrigger as-child>\n      \u003CButton variant=\"secondary\">Open popover\u003C\u002FButton>\n    \u003C\u002FPopoverTrigger>\n    \u003CPopoverContent>…\u003C\u002FPopoverContent>\n  \u003C\u002FPopover>\n\u003C\u002Ftemplate>\n",[457,1221,1222,1230,1241,1251,1277,1285,1302,1310],{"__ignoreMap":455},[460,1223,1224,1226,1228],{"class":462,"line":463},[460,1225,564],{"class":469},[460,1227,551],{"class":567},[460,1229,588],{"class":469},[460,1231,1232,1234,1236,1239],{"class":462,"line":591},[460,1233,668],{"class":469},[460,1235,134],{"class":567},[460,1237,1238],{"class":571}," default-open",[460,1240,588],{"class":469},[460,1242,1243,1245,1247,1249],{"class":462,"line":612},[460,1244,678],{"class":469},[460,1246,518],{"class":567},[460,1248,683],{"class":571},[460,1250,588],{"class":469},[460,1252,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1275],{"class":462,"line":639},[460,1254,691],{"class":469},[460,1256,52],{"class":567},[460,1258,696],{"class":571},[460,1260,578],{"class":469},[460,1262,581],{"class":469},[460,1264,544],{"class":497},[460,1266,581],{"class":469},[460,1268,707],{"class":469},[460,1270,545],{"class":473},[460,1272,642],{"class":469},[460,1274,52],{"class":567},[460,1276,588],{"class":469},[460,1278,1279,1281,1283],{"class":462,"line":649},[460,1280,721],{"class":469},[460,1282,518],{"class":567},[460,1284,588],{"class":469},[460,1286,1287,1289,1291,1293,1296,1298,1300],{"class":462,"line":656},[460,1288,678],{"class":469},[460,1290,522],{"class":567},[460,1292,707],{"class":469},[460,1294,1295],{"class":473},"…",[460,1297,642],{"class":469},[460,1299,522],{"class":567},[460,1301,588],{"class":469},[460,1303,1304,1306,1308],{"class":462,"line":665},[460,1305,761],{"class":469},[460,1307,134],{"class":567},[460,1309,588],{"class":469},[460,1311,1312,1314,1316],{"class":462,"line":675},[460,1313,642],{"class":469},[460,1315,551],{"class":567},[460,1317,588],{"class":469},[776,1319,1321],{"id":1320},"controlled-state","Controlled state",[503,1323,1324,1325,1328],{},"Bind the open state with ",[457,1326,1327],{},"v-model:open"," when the consumer needs to own it (e.g. closing the popover from a button inside the panel):",[450,1330,1332],{"className":555,"code":1331,"language":557,"meta":455,"style":455},"\u003Cscript setup lang=\"ts\">\nimport { Button } from \"@dr-max\u002Fui\u002Fbutton\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@dr-max\u002Fui\u002Fpopover\"\nimport { ref } from \"vue\"\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CPopover v-model:open=\"open\">\n    \u003CPopoverTrigger as-child>\n      \u003CButton variant=\"secondary\">Open popover\u003C\u002FButton>\n    \u003C\u002FPopoverTrigger>\n    \u003CPopoverContent>\n      \u003CButton variant=\"naked\" @click=\"open = false\">Close\u003C\u002FButton>\n    \u003C\u002FPopoverContent>\n  \u003C\u002FPopover>\n\u003C\u002Ftemplate>\n",[457,1333,1334,1354,1372,1398,1417,1421,1442,1450,1454,1462,1487,1497,1523,1531,1539,1586,1594,1603],{"__ignoreMap":455},[460,1335,1336,1338,1340,1342,1344,1346,1348,1350,1352],{"class":462,"line":463},[460,1337,564],{"class":469},[460,1339,568],{"class":567},[460,1341,572],{"class":571},[460,1343,575],{"class":571},[460,1345,578],{"class":469},[460,1347,581],{"class":469},[460,1349,454],{"class":497},[460,1351,581],{"class":469},[460,1353,588],{"class":469},[460,1355,1356,1358,1360,1362,1364,1366,1368,1370],{"class":462,"line":591},[460,1357,447],{"class":466},[460,1359,470],{"class":469},[460,1361,598],{"class":473},[460,1363,488],{"class":469},[460,1365,491],{"class":466},[460,1367,494],{"class":469},[460,1369,607],{"class":497},[460,1371,501],{"class":469},[460,1373,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396],{"class":462,"line":612},[460,1375,447],{"class":466},[460,1377,470],{"class":469},[460,1379,474],{"class":473},[460,1381,477],{"class":469},[460,1383,480],{"class":473},[460,1385,477],{"class":469},[460,1387,485],{"class":473},[460,1389,488],{"class":469},[460,1391,491],{"class":466},[460,1393,494],{"class":469},[460,1395,498],{"class":497},[460,1397,501],{"class":469},[460,1399,1400,1402,1404,1407,1409,1411,1413,1415],{"class":462,"line":639},[460,1401,447],{"class":466},[460,1403,470],{"class":469},[460,1405,1406],{"class":473}," ref",[460,1408,488],{"class":469},[460,1410,491],{"class":466},[460,1412,494],{"class":469},[460,1414,557],{"class":497},[460,1416,501],{"class":469},[460,1418,1419],{"class":462,"line":649},[460,1420,653],{"emptyLinePlaceholder":652},[460,1422,1423,1426,1429,1431,1434,1437,1439],{"class":462,"line":656},[460,1424,1425],{"class":571},"const",[460,1427,1428],{"class":473}," open ",[460,1430,578],{"class":469},[460,1432,1406],{"class":1433},"sdLwU",[460,1435,1436],{"class":473},"(",[460,1438,1082],{"class":1167},[460,1440,1441],{"class":473},")\n",[460,1443,1444,1446,1448],{"class":462,"line":665},[460,1445,642],{"class":469},[460,1447,568],{"class":567},[460,1449,588],{"class":469},[460,1451,1452],{"class":462,"line":675},[460,1453,653],{"emptyLinePlaceholder":652},[460,1455,1456,1458,1460],{"class":462,"line":688},[460,1457,564],{"class":469},[460,1459,551],{"class":567},[460,1461,588],{"class":469},[460,1463,1464,1466,1468,1471,1474,1477,1479,1481,1483,1485],{"class":462,"line":718},[460,1465,668],{"class":469},[460,1467,134],{"class":567},[460,1469,1470],{"class":571}," v-model",[460,1472,1473],{"class":469},":",[460,1475,1476],{"class":571},"open",[460,1478,578],{"class":469},[460,1480,581],{"class":469},[460,1482,1476],{"class":473},[460,1484,581],{"class":469},[460,1486,588],{"class":469},[460,1488,1489,1491,1493,1495],{"class":462,"line":728},[460,1490,678],{"class":469},[460,1492,518],{"class":567},[460,1494,683],{"class":571},[460,1496,588],{"class":469},[460,1498,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519,1521],{"class":462,"line":737},[460,1500,691],{"class":469},[460,1502,52],{"class":567},[460,1504,696],{"class":571},[460,1506,578],{"class":469},[460,1508,581],{"class":469},[460,1510,544],{"class":497},[460,1512,581],{"class":469},[460,1514,707],{"class":469},[460,1516,545],{"class":473},[460,1518,642],{"class":469},[460,1520,52],{"class":567},[460,1522,588],{"class":469},[460,1524,1525,1527,1529],{"class":462,"line":743},[460,1526,721],{"class":469},[460,1528,518],{"class":567},[460,1530,588],{"class":469},[460,1532,1533,1535,1537],{"class":462,"line":749},[460,1534,678],{"class":469},[460,1536,522],{"class":567},[460,1538,588],{"class":469},[460,1540,1541,1543,1545,1547,1549,1551,1554,1556,1559,1562,1564,1566,1568,1571,1573,1575,1577,1580,1582,1584],{"class":462,"line":758},[460,1542,691],{"class":469},[460,1544,52],{"class":567},[460,1546,696],{"class":571},[460,1548,578],{"class":469},[460,1550,581],{"class":469},[460,1552,1553],{"class":497},"naked",[460,1555,581],{"class":469},[460,1557,1558],{"class":469}," @",[460,1560,1561],{"class":571},"click",[460,1563,578],{"class":469},[460,1565,581],{"class":469},[460,1567,1476],{"class":473},[460,1569,1570],{"class":469}," = ",[460,1572,1082],{"class":1167},[460,1574,581],{"class":469},[460,1576,707],{"class":469},[460,1578,1579],{"class":473},"Close",[460,1581,642],{"class":469},[460,1583,52],{"class":567},[460,1585,588],{"class":469},[460,1587,1588,1590,1592],{"class":462,"line":768},[460,1589,721],{"class":469},[460,1591,522],{"class":567},[460,1593,588],{"class":469},[460,1595,1597,1599,1601],{"class":462,"line":1596},17,[460,1598,761],{"class":469},[460,1600,134],{"class":567},[460,1602,588],{"class":469},[460,1604,1606,1608,1610],{"class":462,"line":1605},18,[460,1607,642],{"class":469},[460,1609,551],{"class":567},[460,1611,588],{"class":469},[776,1613,1615],{"id":1614},"modal","Modal",[503,1617,1064,1618,1068,1620,1622],{},[457,1619,1614],{},[457,1621,134],{}," to disable interaction with outside elements while the popover is open:",[450,1624,1626],{"className":555,"code":1625,"language":557,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CPopover modal>\n    …\n  \u003C\u002FPopover>\n\u003C\u002Ftemplate>\n",[457,1627,1628,1636,1647,1651,1659],{"__ignoreMap":455},[460,1629,1630,1632,1634],{"class":462,"line":463},[460,1631,564],{"class":469},[460,1633,551],{"class":567},[460,1635,588],{"class":469},[460,1637,1638,1640,1642,1645],{"class":462,"line":591},[460,1639,668],{"class":469},[460,1641,134],{"class":567},[460,1643,1644],{"class":571}," modal",[460,1646,588],{"class":469},[460,1648,1649],{"class":462,"line":612},[460,1650,1041],{"class":473},[460,1652,1653,1655,1657],{"class":462,"line":639},[460,1654,761],{"class":469},[460,1656,134],{"class":567},[460,1658,588],{"class":469},[460,1660,1661,1663,1665],{"class":462,"line":649},[460,1662,642],{"class":469},[460,1664,551],{"class":567},[460,1666,588],{"class":469},[445,1668,1670],{"id":1669},"playground","Playground",[1672,1673],"component-playground",{"component":1674},"popover",[1676,1677,1678],"style",{},"html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}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 pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}",{"title":455,"searchDepth":463,"depth":591,"links":1680},[1681,1682,1690],{"id":447,"depth":591,"text":448},{"id":508,"depth":591,"text":509,"children":1683},[1684,1685,1686,1687,1688,1689],{"id":778,"depth":612,"text":779},{"id":945,"depth":612,"text":946},{"id":1060,"depth":612,"text":1061},{"id":1206,"depth":612,"text":1207},{"id":1320,"depth":612,"text":1321},{"id":1614,"depth":612,"text":1615},{"id":1669,"depth":591,"text":1670},"Reveal rich content in a floating panel anchored to a trigger.","md",null,{},"\u002Fcomponents\u002Fpopover\u002Fdeveloper",{"title":134,"description":1691},"2.components\u002F14.popover\u002F3.developer","VnhT62yJUf876mjZz8k31TSYS7wcTy0H63YK3NdRwj0",1793289682012]