[{"data":1,"prerenderedAt":1081},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-popover":273,"-colorffy-ui-components-popover-surround":1076},[4,21,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,268],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,204,209,214,218,223,228,233,238,243,248,253,258,263],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F09.card","i-lucide-square",{"title":181,"path":182,"stem":183,"icon":184},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F10.datatable","i-lucide-table",{"title":186,"path":187,"stem":188,"icon":189},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F11.empty","i-lucide-inbox",{"title":191,"path":192,"stem":193,"icon":194},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F12.icons","i-lucide-shapes",{"title":196,"path":197,"stem":198,"icon":199},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F13.inputs","i-lucide-text-cursor-input",{"title":79,"path":201,"stem":202,"icon":203},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F14.layout","i-lucide-layout",{"title":205,"path":206,"stem":207,"icon":208},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F15.list","i-lucide-list",{"title":210,"path":211,"stem":212,"icon":213},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F16.loading","i-lucide-loader-circle",{"title":215,"path":216,"stem":217,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F17.modal",{"title":219,"path":220,"stem":221,"icon":222},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F18.navbar","i-lucide-panel-top",{"title":224,"path":225,"stem":226,"icon":227},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F19.navigation-bar","i-lucide-navigation",{"title":229,"path":230,"stem":231,"icon":232},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F20.popover","i-lucide-message-square",{"title":234,"path":235,"stem":236,"icon":237},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F21.popover-menu","i-lucide-ellipsis",{"title":239,"path":240,"stem":241,"icon":242},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F22.progress","i-lucide-loader",{"title":244,"path":245,"stem":246,"icon":247},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F23.segmented-controls","i-lucide-toggle-left",{"title":249,"path":250,"stem":251,"icon":252},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F24.sidebar","i-lucide-panel-left",{"title":254,"path":255,"stem":256,"icon":257},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F25.skeleton","i-lucide-square-dashed",{"title":259,"path":260,"stem":261,"icon":262},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F26.tabs","i-lucide-panels-top-left",{"title":264,"path":265,"stem":266,"icon":267},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F27.tooltip","i-lucide-message-circle",{"title":269,"path":270,"stem":271,"icon":272},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":274,"title":229,"body":275,"description":1069,"extension":1070,"links":1071,"meta":1072,"navigation":1073,"path":230,"seo":1074,"stem":231,"__hash__":1075},"docs\u002F3.colorffy-ui\u002F2.components\u002F20.popover.md",{"type":276,"value":277,"toc":1064},"minimark",[278,307,315,320,336,731,735,745,885,889,1029,1045,1060],[279,280,281,285,286,290,291,294,295,298,299,302,303,306],"p",{},[282,283,284],"code",{},"UiPopover"," renders a floating panel using the browser's native ",[287,288,289],"strong",{},"Popover API"," (the ",[282,292,293],{},"popover"," attribute) positioned with ",[287,296,297],{},"CSS anchor positioning",". A trigger toggles it by ",[282,300,301],{},"id",", and the popover anchors to any element that declares a matching ",[282,304,305],{},"anchor-name",".",[308,309,310,311,314],"tip",{},"For a ready-made user\u002Faccount dropdown with a header and item list, use ",[312,313,234],"a",{"href":235}," instead.",[316,317,319],"h2",{"id":318},"add-a-popover","Add a popover",[279,321,322,323,325,326,329,330,332,333,335],{},"The trigger targets the popover by ",[282,324,301],{}," (",[282,327,328],{},"popovertarget",") and declares the anchor (",[282,331,305],{},"); the popover positions against it via its ",[282,334,305],{}," prop.",[337,338,343],"pre",{"className":339,"code":340,"language":341,"meta":342,"style":342},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003C!-- Trigger: toggles the popover and acts as its anchor -->\n  \u003CUiButton\n    text=\"Open\"\n    popovertarget=\"profile-popover\"\n    style=\"anchor-name: --profile\"\n  \u002F>\n\n  \u003CUiPopover\n    id=\"profile-popover\"\n    anchor-name=\"--profile\"\n    position-block=\"bottom\"\n    position-inline=\"right\"\n    size=\"sm\"\n  >\n    \u003Ctemplate #header>\n      \u003Cstrong>Jane Doe\u003C\u002Fstrong>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #body>\n      \u003Cp>Product designer\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #footer>\n      \u003CUiButton\n        variant=\"text\"\n        text=\"Close\"\n        popovertarget=\"profile-popover\"\n        popovertargetaction=\"hide\"\n      \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUiPopover>\n\u003C\u002Ftemplate>\n","vue","",[282,344,345,361,368,377,397,412,427,433,440,448,462,477,492,507,522,528,544,566,576,590,608,617,631,638,653,668,682,697,703,712,722],{"__ignoreMap":342},[346,347,350,354,358],"span",{"class":348,"line":349},"line",1,[346,351,353],{"class":352},"sMK4o","\u003C",[346,355,357],{"class":356},"swJcz","template",[346,359,360],{"class":352},">\n",[346,362,364],{"class":348,"line":363},2,[346,365,367],{"class":366},"sHwdD","  \u003C!-- Trigger: toggles the popover and acts as its anchor -->\n",[346,369,371,374],{"class":348,"line":370},3,[346,372,373],{"class":352},"  \u003C",[346,375,376],{"class":356},"UiButton\n",[346,378,380,384,387,390,394],{"class":348,"line":379},4,[346,381,383],{"class":382},"spNyl","    text",[346,385,386],{"class":352},"=",[346,388,389],{"class":352},"\"",[346,391,393],{"class":392},"sfazB","Open",[346,395,396],{"class":352},"\"\n",[346,398,400,403,405,407,410],{"class":348,"line":399},5,[346,401,402],{"class":382},"    popovertarget",[346,404,386],{"class":352},[346,406,389],{"class":352},[346,408,409],{"class":392},"profile-popover",[346,411,396],{"class":352},[346,413,415,418,420,422,425],{"class":348,"line":414},6,[346,416,417],{"class":382},"    style",[346,419,386],{"class":352},[346,421,389],{"class":352},[346,423,424],{"class":392},"anchor-name: --profile",[346,426,396],{"class":352},[346,428,430],{"class":348,"line":429},7,[346,431,432],{"class":352},"  \u002F>\n",[346,434,436],{"class":348,"line":435},8,[346,437,439],{"emptyLinePlaceholder":438},true,"\n",[346,441,443,445],{"class":348,"line":442},9,[346,444,373],{"class":352},[346,446,447],{"class":356},"UiPopover\n",[346,449,451,454,456,458,460],{"class":348,"line":450},10,[346,452,453],{"class":382},"    id",[346,455,386],{"class":352},[346,457,389],{"class":352},[346,459,409],{"class":392},[346,461,396],{"class":352},[346,463,465,468,470,472,475],{"class":348,"line":464},11,[346,466,467],{"class":382},"    anchor-name",[346,469,386],{"class":352},[346,471,389],{"class":352},[346,473,474],{"class":392},"--profile",[346,476,396],{"class":352},[346,478,480,483,485,487,490],{"class":348,"line":479},12,[346,481,482],{"class":382},"    position-block",[346,484,386],{"class":352},[346,486,389],{"class":352},[346,488,489],{"class":392},"bottom",[346,491,396],{"class":352},[346,493,495,498,500,502,505],{"class":348,"line":494},13,[346,496,497],{"class":382},"    position-inline",[346,499,386],{"class":352},[346,501,389],{"class":352},[346,503,504],{"class":392},"right",[346,506,396],{"class":352},[346,508,510,513,515,517,520],{"class":348,"line":509},14,[346,511,512],{"class":382},"    size",[346,514,386],{"class":352},[346,516,389],{"class":352},[346,518,519],{"class":392},"sm",[346,521,396],{"class":352},[346,523,525],{"class":348,"line":524},15,[346,526,527],{"class":352},"  >\n",[346,529,531,534,536,539,542],{"class":348,"line":530},16,[346,532,533],{"class":352},"    \u003C",[346,535,357],{"class":356},[346,537,538],{"class":352}," #",[346,540,541],{"class":382},"header",[346,543,360],{"class":352},[346,545,547,550,552,555,559,562,564],{"class":348,"line":546},17,[346,548,549],{"class":352},"      \u003C",[346,551,287],{"class":356},[346,553,554],{"class":352},">",[346,556,558],{"class":557},"sTEyZ","Jane Doe",[346,560,561],{"class":352},"\u003C\u002F",[346,563,287],{"class":356},[346,565,360],{"class":352},[346,567,569,572,574],{"class":348,"line":568},18,[346,570,571],{"class":352},"    \u003C\u002F",[346,573,357],{"class":356},[346,575,360],{"class":352},[346,577,579,581,583,585,588],{"class":348,"line":578},19,[346,580,533],{"class":352},[346,582,357],{"class":356},[346,584,538],{"class":352},[346,586,587],{"class":382},"body",[346,589,360],{"class":352},[346,591,593,595,597,599,602,604,606],{"class":348,"line":592},20,[346,594,549],{"class":352},[346,596,279],{"class":356},[346,598,554],{"class":352},[346,600,601],{"class":557},"Product designer",[346,603,561],{"class":352},[346,605,279],{"class":356},[346,607,360],{"class":352},[346,609,611,613,615],{"class":348,"line":610},21,[346,612,571],{"class":352},[346,614,357],{"class":356},[346,616,360],{"class":352},[346,618,620,622,624,626,629],{"class":348,"line":619},22,[346,621,533],{"class":352},[346,623,357],{"class":356},[346,625,538],{"class":352},[346,627,628],{"class":382},"footer",[346,630,360],{"class":352},[346,632,634,636],{"class":348,"line":633},23,[346,635,549],{"class":352},[346,637,376],{"class":356},[346,639,641,644,646,648,651],{"class":348,"line":640},24,[346,642,643],{"class":382},"        variant",[346,645,386],{"class":352},[346,647,389],{"class":352},[346,649,650],{"class":392},"text",[346,652,396],{"class":352},[346,654,656,659,661,663,666],{"class":348,"line":655},25,[346,657,658],{"class":382},"        text",[346,660,386],{"class":352},[346,662,389],{"class":352},[346,664,665],{"class":392},"Close",[346,667,396],{"class":352},[346,669,671,674,676,678,680],{"class":348,"line":670},26,[346,672,673],{"class":382},"        popovertarget",[346,675,386],{"class":352},[346,677,389],{"class":352},[346,679,409],{"class":392},[346,681,396],{"class":352},[346,683,685,688,690,692,695],{"class":348,"line":684},27,[346,686,687],{"class":382},"        popovertargetaction",[346,689,386],{"class":352},[346,691,389],{"class":352},[346,693,694],{"class":392},"hide",[346,696,396],{"class":352},[346,698,700],{"class":348,"line":699},28,[346,701,702],{"class":352},"      \u002F>\n",[346,704,706,708,710],{"class":348,"line":705},29,[346,707,571],{"class":352},[346,709,357],{"class":356},[346,711,360],{"class":352},[346,713,715,718,720],{"class":348,"line":714},30,[346,716,717],{"class":352},"  \u003C\u002F",[346,719,284],{"class":356},[346,721,360],{"class":352},[346,723,725,727,729],{"class":348,"line":724},31,[346,726,561],{"class":352},[346,728,357],{"class":356},[346,730,360],{"class":352},[316,732,734],{"id":733},"position-the-panel","Position the panel",[279,736,737,740,741,744],{},[282,738,739],{},"positionBlock"," controls the vertical side and ",[282,742,743],{},"positionInline"," the horizontal side:",[337,746,748],{"className":339,"code":747,"language":341,"meta":342,"style":342},"\u003Ctemplate>\n  \u003CUiPopover id=\"p1\" anchor-name=\"--a1\" position-block=\"top\" position-inline=\"left\" \u002F>\n  \u003CUiPopover id=\"p2\" anchor-name=\"--a2\" position-block=\"bottom\" position-inline=\"right\" size=\"lg\" \u002F>\n\u003C\u002Ftemplate>\n",[282,749,750,758,815,877],{"__ignoreMap":342},[346,751,752,754,756],{"class":348,"line":349},[346,753,353],{"class":352},[346,755,357],{"class":356},[346,757,360],{"class":352},[346,759,760,762,764,767,769,771,774,776,779,781,783,786,788,791,793,795,798,800,803,805,807,810,812],{"class":348,"line":363},[346,761,373],{"class":352},[346,763,284],{"class":356},[346,765,766],{"class":382}," id",[346,768,386],{"class":352},[346,770,389],{"class":352},[346,772,773],{"class":392},"p1",[346,775,389],{"class":352},[346,777,778],{"class":382}," anchor-name",[346,780,386],{"class":352},[346,782,389],{"class":352},[346,784,785],{"class":392},"--a1",[346,787,389],{"class":352},[346,789,790],{"class":382}," position-block",[346,792,386],{"class":352},[346,794,389],{"class":352},[346,796,797],{"class":392},"top",[346,799,389],{"class":352},[346,801,802],{"class":382}," position-inline",[346,804,386],{"class":352},[346,806,389],{"class":352},[346,808,809],{"class":392},"left",[346,811,389],{"class":352},[346,813,814],{"class":352}," \u002F>\n",[346,816,817,819,821,823,825,827,830,832,834,836,838,841,843,845,847,849,851,853,855,857,859,861,863,866,868,870,873,875],{"class":348,"line":370},[346,818,373],{"class":352},[346,820,284],{"class":356},[346,822,766],{"class":382},[346,824,386],{"class":352},[346,826,389],{"class":352},[346,828,829],{"class":392},"p2",[346,831,389],{"class":352},[346,833,778],{"class":382},[346,835,386],{"class":352},[346,837,389],{"class":352},[346,839,840],{"class":392},"--a2",[346,842,389],{"class":352},[346,844,790],{"class":382},[346,846,386],{"class":352},[346,848,389],{"class":352},[346,850,489],{"class":392},[346,852,389],{"class":352},[346,854,802],{"class":382},[346,856,386],{"class":352},[346,858,389],{"class":352},[346,860,504],{"class":392},[346,862,389],{"class":352},[346,864,865],{"class":382}," size",[346,867,386],{"class":352},[346,869,389],{"class":352},[346,871,872],{"class":392},"lg",[346,874,389],{"class":352},[346,876,814],{"class":352},[346,878,879,881,883],{"class":348,"line":379},[346,880,561],{"class":352},[346,882,357],{"class":356},[346,884,360],{"class":352},[316,886,888],{"id":887},"props","Props",[890,891,892,911],"table",{},[893,894,895],"thead",{},[896,897,898,902,905,908],"tr",{},[899,900,901],"th",{},"Prop",[899,903,904],{},"Type",[899,906,907],{},"Default",[899,909,910],{},"Description",[912,913,914,935,957,976,995,1012],"tbody",{},[896,915,916,921,926,929],{},[917,918,919],"td",{},[282,920,301],{},[917,922,923],{},[282,924,925],{},"string",[917,927,928],{},"—",[917,930,931,932,934],{},"Unique id; the trigger targets it via ",[282,933,328],{}," (required).",[896,936,937,942,946,948],{},[917,938,939],{},[282,940,941],{},"anchorName",[917,943,944],{},[282,945,925],{},[917,947,928],{},[917,949,950,951,953,954,956],{},"CSS anchor name to position against, e.g. ",[282,952,474],{}," (required). The trigger must set ",[282,955,305],{}," to the same value.",[896,958,959,963,968,973],{},[917,960,961],{},[282,962,739],{},[917,964,965],{},[282,966,967],{},"'top' | 'bottom'",[917,969,970],{},[282,971,972],{},"'top'",[917,974,975],{},"Vertical placement relative to the anchor.",[896,977,978,982,987,992],{},[917,979,980],{},[282,981,743],{},[917,983,984],{},[282,985,986],{},"'left' | 'right'",[917,988,989],{},[282,990,991],{},"'left'",[917,993,994],{},"Horizontal placement relative to the anchor.",[896,996,997,1002,1007,1009],{},[917,998,999],{},[282,1000,1001],{},"size",[917,1003,1004],{},[282,1005,1006],{},"'sm' | 'lg'",[917,1008,928],{},[917,1010,1011],{},"Popover size.",[896,1013,1014,1019,1024,1026],{},[917,1015,1016],{},[282,1017,1018],{},"contentClass",[917,1020,1021],{},[282,1022,1023],{},"string | string[]",[917,1025,928],{},[917,1027,1028],{},"Extra classes on the inner content wrapper.",[279,1030,1031,1034,1035,1038,1039,1038,1042,306],{},[287,1032,1033],{},"Slots:"," ",[282,1036,1037],{},"#header",", ",[282,1040,1041],{},"#body",[282,1043,1044],{},"#footer",[1046,1047,1048,1049,1054,1055,1059],"note",{},"Built on the native ",[312,1050,289],{"href":1051,"rel":1052},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FPopover_API",[1053],"nofollow"," and ",[312,1056,297],{"href":1057,"rel":1058},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_anchor_positioning",[1053]," — supported in current Chromium and Safari; check browser support for your audience.",[1061,1062,1063],"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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":342,"searchDepth":363,"depth":363,"links":1065},[1066,1067,1068],{"id":318,"depth":363,"text":319},{"id":733,"depth":363,"text":734},{"id":887,"depth":363,"text":888},"An anchored popover panel built on the native Popover API and CSS anchor positioning.","md",null,{},{"icon":232},{"title":229,"description":1069},"gmRSxwSn2x6FLj52RTNp-ueEmEbkA0awqWJhH8iJUrA",[1077,1079],{"title":224,"path":225,"stem":226,"description":1078,"icon":227,"children":-1},"A data-driven bottom \u002F island navigation bar.",{"title":234,"path":235,"stem":236,"description":1080,"icon":237,"children":-1},"A popover menu with a header, avatar, and navigation items.",1782196219260]