[{"data":1,"prerenderedAt":1405},["ShallowReactive",2],{"navigation_docs":3,"-guide-components-build-popovers-and-dropdowns":271,"-guide-components-build-popovers-and-dropdowns-surround":1400},[4,135],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,73,91,109],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":28},"Getting Started","i-lucide-rocket","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",[16,20,24],{"title":17,"path":18,"stem":19},"Introduction","\u002Fguide\u002Fgetting-started\u002Fintroduction","1.guide\u002F1.getting-started\u002F1.introduction",{"title":21,"path":22,"stem":23},"First Tooltip","\u002Fguide\u002Fgetting-started\u002Ffirst-tooltip","1.guide\u002F1.getting-started\u002F2.first-tooltip",{"title":25,"path":26,"stem":27},"First Popover","\u002Fguide\u002Fgetting-started\u002Ffirst-popover","1.guide\u002F1.getting-started\u002F3.first-popover",false,{"title":30,"icon":31,"path":32,"stem":33,"children":34,"page":28},"Core Concepts","i-lucide-boxes","\u002Fguide\u002Fcore-concepts","1.guide\u002F2.core-concepts",[35,39,43,47],{"title":36,"path":37,"stem":38},"Floating Node","\u002Fguide\u002Fcore-concepts\u002Ffloating-node","1.guide\u002F2.core-concepts\u002F1.floating-node",{"title":40,"path":41,"stem":42},"Placement & Positioning","\u002Fguide\u002Fcore-concepts\u002Fplacement-and-positioning","1.guide\u002F2.core-concepts\u002F2.placement-and-positioning",{"title":44,"path":45,"stem":46},"Interaction Model","\u002Fguide\u002Fcore-concepts\u002Finteraction-model","1.guide\u002F2.core-concepts\u002F3.interaction-model",{"title":48,"path":49,"stem":50},"Tree Coordination","\u002Fguide\u002Fcore-concepts\u002Ftree-coordination-explained","1.guide\u002F2.core-concepts\u002F4.tree-coordination-explained",{"title":52,"icon":53,"path":54,"stem":55,"children":56,"page":28},"Patterns","i-lucide-component","\u002Fguide\u002Fcomponents","1.guide\u002F3.components",[57,61,65,69],{"title":58,"path":59,"stem":60},"Tooltips","\u002Fguide\u002Fcomponents\u002Fbuild-accessible-tooltips","1.guide\u002F3.components\u002F1.build-accessible-tooltips",{"title":62,"path":63,"stem":64},"Popovers & Dropdowns","\u002Fguide\u002Fcomponents\u002Fbuild-popovers-and-dropdowns","1.guide\u002F3.components\u002F2.build-popovers-and-dropdowns",{"title":66,"path":67,"stem":68},"Dialogs & Modals","\u002Fguide\u002Fcomponents\u002Fbuild-dialogs-and-modals","1.guide\u002F3.components\u002F3.build-dialogs-and-modals",{"title":70,"path":71,"stem":72},"Nested Menus","\u002Fguide\u002Fcomponents\u002Fbuild-nested-menus","1.guide\u002F3.components\u002F4.build-nested-menus",{"title":74,"icon":75,"path":76,"stem":77,"children":78,"page":28},"Positioning","i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F4.positioning",[79,83,87],{"title":80,"path":81,"stem":82},"Keep in View","\u002Fguide\u002Fpositioning\u002Fkeep-content-in-view","1.guide\u002F4.positioning\u002F1.keep-content-in-view",{"title":84,"path":85,"stem":86},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fuse-virtual-anchors","1.guide\u002F4.positioning\u002F2.use-virtual-anchors",{"title":88,"path":89,"stem":90},"Middleware Pipeline","\u002Fguide\u002Fpositioning\u002Fmiddleware-pipeline","1.guide\u002F4.positioning\u002F3.middleware-pipeline",{"title":92,"icon":93,"path":94,"stem":95,"children":96,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F5.accessibility",[97,101,105],{"title":98,"path":99,"stem":100},"Open State","\u002Fguide\u002Faccessibility\u002Fcontrol-open-state","1.guide\u002F5.accessibility\u002F1.control-open-state",{"title":102,"path":103,"stem":104},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F5.accessibility\u002F2.focus-models",{"title":106,"path":107,"stem":108},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F5.accessibility\u002F3.keyboard-navigation",{"title":110,"icon":111,"path":112,"stem":113,"children":114,"page":28},"Advanced","i-lucide-cpu","\u002Fguide\u002Fadvanced","1.guide\u002F6.advanced",[115,119,123,127,131],{"title":116,"path":117,"stem":118},"Controlled vs Uncontrolled","\u002Fguide\u002Fadvanced\u002Fcontrolled-vs-uncontrolled","1.guide\u002F6.advanced\u002F1.controlled-vs-uncontrolled",{"title":120,"path":121,"stem":122},"Safe Polygons","\u002Fguide\u002Fadvanced\u002Fsafe-polygon-gotchas","1.guide\u002F6.advanced\u002F2.safe-polygon-gotchas",{"title":124,"path":125,"stem":126},"Virtual Anchor Gotchas","\u002Fguide\u002Fadvanced\u002Fvirtual-anchor-gotchas","1.guide\u002F6.advanced\u002F3.virtual-anchor-gotchas",{"title":128,"path":129,"stem":130},"Middleware Ordering","\u002Fguide\u002Fadvanced\u002Fmiddleware-ordering-gotchas","1.guide\u002F6.advanced\u002F4.middleware-ordering-gotchas",{"title":132,"path":133,"stem":134},"List Navigation","\u002Fguide\u002Fadvanced\u002Flist-navigation-gotchas","1.guide\u002F6.advanced\u002F5.list-navigation-gotchas",{"title":136,"icon":137,"path":138,"stem":139,"children":140},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[141,145,155,165,182,216,233],{"title":142,"path":138,"stem":143,"icon":144},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":146,"icon":147,"path":148,"stem":149,"children":150,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[151],{"title":152,"path":153,"stem":154},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[161],{"title":162,"path":163,"stem":164},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":74,"icon":166,"path":167,"stem":168,"children":169,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[170,174,178],{"title":171,"path":172,"stem":173},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":175,"path":176,"stem":177},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":179,"path":180,"stem":181},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":183,"icon":184,"path":185,"stem":186,"children":187,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[188,192,196,200,204,208,212],{"title":189,"path":190,"stem":191},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":193,"path":194,"stem":195},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":197,"path":198,"stem":199},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":201,"path":202,"stem":203},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":205,"path":206,"stem":207},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":209,"path":210,"stem":211},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":213,"path":214,"stem":215},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":106,"icon":217,"path":218,"stem":219,"children":220,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[221,225,229],{"title":222,"path":223,"stem":224},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":226,"path":227,"stem":228},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":230,"path":231,"stem":232},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":234,"icon":235,"path":236,"stem":237,"children":238,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[239,243,247,251,255,259,263,267],{"title":240,"path":241,"stem":242},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":244,"path":245,"stem":246},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":248,"path":249,"stem":250},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":252,"path":253,"stem":254},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":256,"path":257,"stem":258},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":260,"path":261,"stem":262},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":264,"path":265,"stem":266},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":268,"path":269,"stem":270},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":272,"title":62,"body":273,"description":1394,"extension":1395,"links":1396,"meta":1397,"navigation":455,"path":63,"seo":1398,"stem":64,"__hash__":1399},"docs\u002F1.guide\u002F3.components\u002F2.build-popovers-and-dropdowns.md",{"type":274,"value":275,"toc":1387},"minimark",[276,280,283,324,329,332,1000,1004,1090,1093,1124,1142,1146,1175,1181,1213,1217,1333,1336,1359,1363,1383],[277,278,279],"p",{},"Popovers and dropdowns are click-driven surfaces that present rich interactive content. Unlike tooltips, which close when the cursor leaves, a popover stays open while the user works with form controls, links, or actions inside it.",[277,281,282],{},"For a reliable popover or dropdown, the core stack combines:",[284,285,286,296,303,310,317],"ul",{},[287,288,289,295],"li",{},[290,291,292],"a",{"href":163},[293,294,162],"code",{}," for shared refs and open state",[287,297,298,302],{},[290,299,300],{"href":172},[293,301,171],{}," with collision-aware middlewares",[287,304,305,309],{},[290,306,307],{"href":190},[293,308,189],{}," for anchor toggling",[287,311,312,316],{},[290,313,314],{"href":206},[293,315,205],{}," for outside pointer dismissal",[287,318,319,323],{},[290,320,321],{"href":210},[293,322,209],{}," for Escape key dismissal",[325,326,328],"h2",{"id":327},"the-complete-example","The complete example",[277,330,331],{},"Here is a full working popover with collision handling, outside clicks, and keyboard dismissal:",[333,334,339],"pre",{"className":335,"code":336,"language":337,"meta":338,"style":338},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useClick, useEscapeKey, useFloatingNode, useOutsideClick, usePosition } from \"v-float\";\n\nconst anchorEl = ref\u003CHTMLElement | null>(null);\nconst floatingEl = ref\u003CHTMLElement | null>(null);\n\nconst node = useFloatingNode({ anchorEl, floatingEl });\nusePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n\nuseClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\" type=\"button\" class=\"trigger\">Open actions\u003C\u002Fbutton>\n\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"panel\">\n    \u003Ch2>Quick actions\u003C\u002Fh2>\n    \u003Cp>Choose the next step for this record.\u003C\u002Fp>\n    \u003Cdiv class=\"actions\">\n      \u003Cbutton type=\"button\">Edit\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\">Duplicate\u003C\u002Fbutton>\n      \u003Cbutton type=\"button\">Archive\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue","",[293,340,341,376,406,450,457,497,527,532,563,576,595,605,619,633,653,659,668,673,683,692,701,711,716,726,780,785,829,848,866,886,915,943,971,981,991],{"__ignoreMap":338},[342,343,346,350,354,358,361,364,367,371,373],"span",{"class":344,"line":345},"line",1,[342,347,349],{"class":348},"sMK4o","\u003C",[342,351,353],{"class":352},"swJcz","script",[342,355,357],{"class":356},"spNyl"," setup",[342,359,360],{"class":356}," lang",[342,362,363],{"class":348},"=",[342,365,366],{"class":348},"\"",[342,368,370],{"class":369},"sfazB","ts",[342,372,366],{"class":348},[342,374,375],{"class":348},">\n",[342,377,379,383,386,390,393,396,399,401,403],{"class":344,"line":378},2,[342,380,382],{"class":381},"s7zQu","import",[342,384,385],{"class":348}," {",[342,387,389],{"class":388},"sTEyZ"," ref",[342,391,392],{"class":348}," }",[342,394,395],{"class":381}," from",[342,397,398],{"class":348}," \"",[342,400,337],{"class":369},[342,402,366],{"class":348},[342,404,405],{"class":348},";\n",[342,407,409,411,413,416,419,422,424,427,429,432,434,437,439,441,443,446,448],{"class":344,"line":408},3,[342,410,382],{"class":381},[342,412,385],{"class":348},[342,414,415],{"class":388}," useClick",[342,417,418],{"class":348},",",[342,420,421],{"class":388}," useEscapeKey",[342,423,418],{"class":348},[342,425,426],{"class":388}," useFloatingNode",[342,428,418],{"class":348},[342,430,431],{"class":388}," useOutsideClick",[342,433,418],{"class":348},[342,435,436],{"class":388}," usePosition",[342,438,392],{"class":348},[342,440,395],{"class":381},[342,442,398],{"class":348},[342,444,445],{"class":369},"v-float",[342,447,366],{"class":348},[342,449,405],{"class":348},[342,451,453],{"class":344,"line":452},4,[342,454,456],{"emptyLinePlaceholder":455},true,"\n",[342,458,460,463,466,468,471,473,477,480,483,486,489,492,495],{"class":344,"line":459},5,[342,461,462],{"class":356},"const",[342,464,465],{"class":388}," anchorEl ",[342,467,363],{"class":348},[342,469,389],{"class":470},"s2Zo4",[342,472,349],{"class":348},[342,474,476],{"class":475},"sBMFI","HTMLElement",[342,478,479],{"class":348}," |",[342,481,482],{"class":475}," null",[342,484,485],{"class":348},">",[342,487,488],{"class":388},"(",[342,490,491],{"class":348},"null",[342,493,494],{"class":388},")",[342,496,405],{"class":348},[342,498,500,502,505,507,509,511,513,515,517,519,521,523,525],{"class":344,"line":499},6,[342,501,462],{"class":356},[342,503,504],{"class":388}," floatingEl ",[342,506,363],{"class":348},[342,508,389],{"class":470},[342,510,349],{"class":348},[342,512,476],{"class":475},[342,514,479],{"class":348},[342,516,482],{"class":475},[342,518,485],{"class":348},[342,520,488],{"class":388},[342,522,491],{"class":348},[342,524,494],{"class":388},[342,526,405],{"class":348},[342,528,530],{"class":344,"line":529},7,[342,531,456],{"emptyLinePlaceholder":455},[342,533,535,537,540,542,544,546,549,552,554,556,559,561],{"class":344,"line":534},8,[342,536,462],{"class":356},[342,538,539],{"class":388}," node ",[342,541,363],{"class":348},[342,543,426],{"class":470},[342,545,488],{"class":388},[342,547,548],{"class":348},"{",[342,550,551],{"class":388}," anchorEl",[342,553,418],{"class":348},[342,555,504],{"class":388},[342,557,558],{"class":348},"}",[342,560,494],{"class":388},[342,562,405],{"class":348},[342,564,566,568,571,573],{"class":344,"line":565},9,[342,567,171],{"class":470},[342,569,570],{"class":388},"(node",[342,572,418],{"class":348},[342,574,575],{"class":348}," {\n",[342,577,579,582,585,587,590,592],{"class":344,"line":578},10,[342,580,581],{"class":352},"  placement",[342,583,584],{"class":348},":",[342,586,398],{"class":348},[342,588,589],{"class":369},"bottom-start",[342,591,366],{"class":348},[342,593,594],{"class":348},",\n",[342,596,598,601,603],{"class":344,"line":597},11,[342,599,600],{"class":352},"  middlewares",[342,602,584],{"class":348},[342,604,575],{"class":348},[342,606,608,611,613,617],{"class":344,"line":607},12,[342,609,610],{"class":352},"    offset",[342,612,584],{"class":348},[342,614,616],{"class":615},"sbssI"," 8",[342,618,594],{"class":348},[342,620,622,625,627,631],{"class":344,"line":621},13,[342,623,624],{"class":352},"    flip",[342,626,584],{"class":348},[342,628,630],{"class":629},"sfNiH"," true",[342,632,594],{"class":348},[342,634,636,639,641,643,646,648,650],{"class":344,"line":635},14,[342,637,638],{"class":352},"    shift",[342,640,584],{"class":348},[342,642,385],{"class":348},[342,644,645],{"class":352}," padding",[342,647,584],{"class":348},[342,649,616],{"class":615},[342,651,652],{"class":348}," },\n",[342,654,656],{"class":344,"line":655},15,[342,657,658],{"class":348},"  },\n",[342,660,662,664,666],{"class":344,"line":661},16,[342,663,558],{"class":348},[342,665,494],{"class":388},[342,667,405],{"class":348},[342,669,671],{"class":344,"line":670},17,[342,672,456],{"emptyLinePlaceholder":455},[342,674,676,678,681],{"class":344,"line":675},18,[342,677,189],{"class":470},[342,679,680],{"class":388},"(node)",[342,682,405],{"class":348},[342,684,686,688,690],{"class":344,"line":685},19,[342,687,205],{"class":470},[342,689,680],{"class":388},[342,691,405],{"class":348},[342,693,695,697,699],{"class":344,"line":694},20,[342,696,209],{"class":470},[342,698,680],{"class":388},[342,700,405],{"class":348},[342,702,704,707,709],{"class":344,"line":703},21,[342,705,706],{"class":348},"\u003C\u002F",[342,708,353],{"class":352},[342,710,375],{"class":348},[342,712,714],{"class":344,"line":713},22,[342,715,456],{"emptyLinePlaceholder":455},[342,717,719,721,724],{"class":344,"line":718},23,[342,720,349],{"class":348},[342,722,723],{"class":352},"template",[342,725,375],{"class":348},[342,727,729,732,735,737,739,741,744,746,749,751,753,755,757,760,762,764,767,769,771,774,776,778],{"class":344,"line":728},24,[342,730,731],{"class":348},"  \u003C",[342,733,734],{"class":352},"button",[342,736,389],{"class":356},[342,738,363],{"class":348},[342,740,366],{"class":348},[342,742,743],{"class":369},"anchorEl",[342,745,366],{"class":348},[342,747,748],{"class":356}," type",[342,750,363],{"class":348},[342,752,366],{"class":348},[342,754,734],{"class":369},[342,756,366],{"class":348},[342,758,759],{"class":356}," class",[342,761,363],{"class":348},[342,763,366],{"class":348},[342,765,766],{"class":369},"trigger",[342,768,366],{"class":348},[342,770,485],{"class":348},[342,772,773],{"class":388},"Open actions",[342,775,706],{"class":348},[342,777,734],{"class":352},[342,779,375],{"class":348},[342,781,783],{"class":344,"line":782},25,[342,784,456],{"emptyLinePlaceholder":455},[342,786,788,790,793,796,798,800,803,805,807,809,811,814,816,818,820,822,825,827],{"class":344,"line":787},26,[342,789,731],{"class":348},[342,791,792],{"class":352},"div",[342,794,795],{"class":356}," v-if",[342,797,363],{"class":348},[342,799,366],{"class":348},[342,801,802],{"class":369},"node.open.value",[342,804,366],{"class":348},[342,806,389],{"class":356},[342,808,363],{"class":348},[342,810,366],{"class":348},[342,812,813],{"class":369},"floatingEl",[342,815,366],{"class":348},[342,817,759],{"class":356},[342,819,363],{"class":348},[342,821,366],{"class":348},[342,823,824],{"class":369},"panel",[342,826,366],{"class":348},[342,828,375],{"class":348},[342,830,832,835,837,839,842,844,846],{"class":344,"line":831},27,[342,833,834],{"class":348},"    \u003C",[342,836,325],{"class":352},[342,838,485],{"class":348},[342,840,841],{"class":388},"Quick actions",[342,843,706],{"class":348},[342,845,325],{"class":352},[342,847,375],{"class":348},[342,849,851,853,855,857,860,862,864],{"class":344,"line":850},28,[342,852,834],{"class":348},[342,854,277],{"class":352},[342,856,485],{"class":348},[342,858,859],{"class":388},"Choose the next step for this record.",[342,861,706],{"class":348},[342,863,277],{"class":352},[342,865,375],{"class":348},[342,867,869,871,873,875,877,879,882,884],{"class":344,"line":868},29,[342,870,834],{"class":348},[342,872,792],{"class":352},[342,874,759],{"class":356},[342,876,363],{"class":348},[342,878,366],{"class":348},[342,880,881],{"class":369},"actions",[342,883,366],{"class":348},[342,885,375],{"class":348},[342,887,889,892,894,896,898,900,902,904,906,909,911,913],{"class":344,"line":888},30,[342,890,891],{"class":348},"      \u003C",[342,893,734],{"class":352},[342,895,748],{"class":356},[342,897,363],{"class":348},[342,899,366],{"class":348},[342,901,734],{"class":369},[342,903,366],{"class":348},[342,905,485],{"class":348},[342,907,908],{"class":388},"Edit",[342,910,706],{"class":348},[342,912,734],{"class":352},[342,914,375],{"class":348},[342,916,918,920,922,924,926,928,930,932,934,937,939,941],{"class":344,"line":917},31,[342,919,891],{"class":348},[342,921,734],{"class":352},[342,923,748],{"class":356},[342,925,363],{"class":348},[342,927,366],{"class":348},[342,929,734],{"class":369},[342,931,366],{"class":348},[342,933,485],{"class":348},[342,935,936],{"class":388},"Duplicate",[342,938,706],{"class":348},[342,940,734],{"class":352},[342,942,375],{"class":348},[342,944,946,948,950,952,954,956,958,960,962,965,967,969],{"class":344,"line":945},32,[342,947,891],{"class":348},[342,949,734],{"class":352},[342,951,748],{"class":356},[342,953,363],{"class":348},[342,955,366],{"class":348},[342,957,734],{"class":369},[342,959,366],{"class":348},[342,961,485],{"class":348},[342,963,964],{"class":388},"Archive",[342,966,706],{"class":348},[342,968,734],{"class":352},[342,970,375],{"class":348},[342,972,974,977,979],{"class":344,"line":973},33,[342,975,976],{"class":348},"    \u003C\u002F",[342,978,792],{"class":352},[342,980,375],{"class":348},[342,982,984,987,989],{"class":344,"line":983},34,[342,985,986],{"class":348},"  \u003C\u002F",[342,988,792],{"class":352},[342,990,375],{"class":348},[342,992,994,996,998],{"class":344,"line":993},35,[342,995,706],{"class":348},[342,997,723],{"class":352},[342,999,375],{"class":348},[325,1001,1003],{"id":1002},"robust-positioning-with-collision-detection","Robust positioning with collision detection",[333,1005,1008],{"className":1006,"code":1007,"language":370,"meta":338,"style":338},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","usePosition(node, {\n  placement: \"bottom-start\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n",[293,1009,1010,1020,1034,1042,1052,1062,1078,1082],{"__ignoreMap":338},[342,1011,1012,1014,1016,1018],{"class":344,"line":345},[342,1013,171],{"class":470},[342,1015,570],{"class":388},[342,1017,418],{"class":348},[342,1019,575],{"class":348},[342,1021,1022,1024,1026,1028,1030,1032],{"class":344,"line":378},[342,1023,581],{"class":352},[342,1025,584],{"class":348},[342,1027,398],{"class":348},[342,1029,589],{"class":369},[342,1031,366],{"class":348},[342,1033,594],{"class":348},[342,1035,1036,1038,1040],{"class":344,"line":408},[342,1037,600],{"class":352},[342,1039,584],{"class":348},[342,1041,575],{"class":348},[342,1043,1044,1046,1048,1050],{"class":344,"line":452},[342,1045,610],{"class":352},[342,1047,584],{"class":348},[342,1049,616],{"class":615},[342,1051,594],{"class":348},[342,1053,1054,1056,1058,1060],{"class":344,"line":459},[342,1055,624],{"class":352},[342,1057,584],{"class":348},[342,1059,630],{"class":629},[342,1061,594],{"class":348},[342,1063,1064,1066,1068,1070,1072,1074,1076],{"class":344,"line":499},[342,1065,638],{"class":352},[342,1067,584],{"class":348},[342,1069,385],{"class":348},[342,1071,645],{"class":352},[342,1073,584],{"class":348},[342,1075,616],{"class":615},[342,1077,652],{"class":348},[342,1079,1080],{"class":344,"line":529},[342,1081,658],{"class":348},[342,1083,1084,1086,1088],{"class":344,"line":534},[342,1085,558],{"class":348},[342,1087,494],{"class":388},[342,1089,405],{"class":348},[277,1091,1092],{},"A production popover needs more than just a base placement:",[284,1094,1095,1104,1116],{},[287,1096,1097,1103],{},[1098,1099,1100],"strong",{},[293,1101,1102],{},"offset: 8"," separates the panel from the trigger by 8 pixels.",[287,1105,1106,1111,1112,1115],{},[1098,1107,1108],{},[293,1109,1110],{},"flip: true"," checks if the bottom placement fits in the viewport. If the bottom overflows, it flips to ",[293,1113,1114],{},"top-start"," automatically.",[287,1117,1118,1123],{},[1098,1119,1120],{},[293,1121,1122],{},"shift: { padding: 8 }"," prevents the panel from overflowing horizontal screen edges by nudging it inward with an 8-pixel margin.",[277,1125,1126,1127,1129,1130,1129,1132,1134,1135,1137,1138,1141],{},"This three-middleware stack (",[293,1128,240],{}," → ",[293,1131,244],{},[293,1133,248],{},") represents the battle-tested default for dropdown panels. ",[293,1136,171],{}," automatically applies the resulting GPU-accelerated CSS transforms directly onto ",[293,1139,1140],{},"node.refs.floatingEl",".",[325,1143,1145],{"id":1144},"coordinating-click-outside-click-and-escape","Coordinating click, outside click, and Escape",[333,1147,1149],{"className":1006,"code":1148,"language":370,"meta":338,"style":338},"useClick(node);\nuseOutsideClick(node);\nuseEscapeKey(node);\n",[293,1150,1151,1159,1167],{"__ignoreMap":338},[342,1152,1153,1155,1157],{"class":344,"line":345},[342,1154,189],{"class":470},[342,1156,680],{"class":388},[342,1158,405],{"class":348},[342,1160,1161,1163,1165],{"class":344,"line":378},[342,1162,205],{"class":470},[342,1164,680],{"class":388},[342,1166,405],{"class":348},[342,1168,1169,1171,1173],{"class":344,"line":408},[342,1170,209],{"class":470},[342,1172,680],{"class":388},[342,1174,405],{"class":348},[277,1176,1177,1178,584],{},"These composables cooperate through the shared ",[293,1179,1180],{},"node",[284,1182,1183,1192,1204],{},[287,1184,1185,1191],{},[1098,1186,1187],{},[290,1188,1189],{"href":190},[293,1190,189],{}," opens the popover when the trigger button is clicked, and closes it if clicked again. It safely ignores modifier keys and right clicks.",[287,1193,1194,1200,1201,1203],{},[1098,1195,1196],{},[290,1197,1198],{"href":206},[293,1199,205],{}," registers document-level pointer listeners to close the surface when clicking away, while safely ignoring clicks inside ",[293,1202,1140],{}," (such as on the \"Edit\" or \"Duplicate\" buttons).",[287,1205,1206,1212],{},[1098,1207,1208],{},[290,1209,1210],{"href":210},[293,1211,209],{}," closes the surface when the user presses Escape, taking care not to intercept keystrokes while an IME is actively composing.",[325,1214,1216],{"id":1215},"the-template-bindings","The template bindings",[333,1218,1220],{"className":335,"code":1219,"language":337,"meta":338,"style":338},"\u003Cbutton ref=\"anchorEl\" type=\"button\" class=\"trigger\">Open actions\u003C\u002Fbutton>\n\n\u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\" class=\"panel\">\n  ...\n\u003C\u002Fdiv>\n",[293,1221,1222,1268,1272,1320,1325],{"__ignoreMap":338},[342,1223,1224,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1262,1264,1266],{"class":344,"line":345},[342,1225,349],{"class":348},[342,1227,734],{"class":352},[342,1229,389],{"class":356},[342,1231,363],{"class":348},[342,1233,366],{"class":348},[342,1235,743],{"class":369},[342,1237,366],{"class":348},[342,1239,748],{"class":356},[342,1241,363],{"class":348},[342,1243,366],{"class":348},[342,1245,734],{"class":369},[342,1247,366],{"class":348},[342,1249,759],{"class":356},[342,1251,363],{"class":348},[342,1253,366],{"class":348},[342,1255,766],{"class":369},[342,1257,366],{"class":348},[342,1259,485],{"class":348},[342,1261,773],{"class":388},[342,1263,706],{"class":348},[342,1265,734],{"class":352},[342,1267,375],{"class":348},[342,1269,1270],{"class":344,"line":378},[342,1271,456],{"emptyLinePlaceholder":455},[342,1273,1274,1276,1278,1280,1282,1284,1286,1288,1291,1293,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316,1318],{"class":344,"line":408},[342,1275,349],{"class":348},[342,1277,792],{"class":352},[342,1279,795],{"class":381},[342,1281,363],{"class":348},[342,1283,366],{"class":348},[342,1285,1180],{"class":388},[342,1287,1141],{"class":348},[342,1289,1290],{"class":388},"open",[342,1292,1141],{"class":348},[342,1294,1295],{"class":388},"value",[342,1297,366],{"class":348},[342,1299,389],{"class":356},[342,1301,363],{"class":348},[342,1303,366],{"class":348},[342,1305,813],{"class":369},[342,1307,366],{"class":348},[342,1309,759],{"class":356},[342,1311,363],{"class":348},[342,1313,366],{"class":348},[342,1315,824],{"class":369},[342,1317,366],{"class":348},[342,1319,375],{"class":348},[342,1321,1322],{"class":344,"line":452},[342,1323,1324],{"class":388},"  ...\n",[342,1326,1327,1329,1331],{"class":344,"line":459},[342,1328,706],{"class":348},[342,1330,792],{"class":352},[342,1332,375],{"class":348},[277,1334,1335],{},"The template maintains a clean contract:",[284,1337,1338,1344,1353],{},[287,1339,1340,1343],{},[293,1341,1342],{},"ref=\"anchorEl\""," associates the trigger button with the positioning engine.",[287,1345,1346,1349,1350,1352],{},[293,1347,1348],{},"ref=\"floatingEl\""," associates the popover container (automatically positioned by ",[293,1351,171],{},").",[287,1354,1355,1358],{},[293,1356,1357],{},"v-if=\"node.open.value\""," mounts the panel when active.",[325,1360,1362],{"id":1361},"where-to-go-next","Where to go next",[284,1364,1365,1372,1377],{},[287,1366,1367,1368,1371],{},"Read ",[290,1369,1370],{"href":81},"Keep Content in View"," to explore advanced sizing and collision strategies.",[287,1373,1367,1374,1376],{},[290,1375,106],{"href":107}," if your dropdown acts like a menu or listbox with arrow key navigation.",[287,1378,1367,1379,1382],{},[290,1380,1381],{"href":67},"Build Dialogs and Modals"," if your surface needs focus trapping or modal semantics.",[1384,1385,1386],"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 pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}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":338,"searchDepth":378,"depth":378,"links":1388},[1389,1390,1391,1392,1393],{"id":327,"depth":378,"text":328},{"id":1002,"depth":378,"text":1003},{"id":1144,"depth":378,"text":1145},{"id":1215,"depth":378,"text":1216},{"id":1361,"depth":378,"text":1362},"Compose popovers and dropdowns with click, focus, and dismissal patterns.","md",null,{},{"title":62,"description":1394},"kG5dd7zfJuPBpIGtEN2-s7vjSd39hHjXXwBwKZyeIt8",[1401,1403],{"title":58,"path":59,"stem":60,"description":1402,"children":-1},"Build accessible tooltips with the right interaction and dismissal behavior.",{"title":66,"path":67,"stem":68,"description":1404,"children":-1},"Build dialogs and modals with focus trapping and dismissal behavior.",1791046165701]