[{"data":1,"prerenderedAt":772},["ShallowReactive",2],{"navigation_docs":3,"-guide-core-concepts-positioning":226,"-guide-core-concepts-positioning-surround":767},[4,90],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":28},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,29,51,68],{"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 Menu","\u002Fguide\u002Fgetting-started\u002Ffirst-menu","1.guide\u002F1.getting-started\u002F3.first-menu",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},"Positioning","\u002Fguide\u002Fcore-concepts\u002Fpositioning","1.guide\u002F2.core-concepts\u002F2.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},"Hierarchy","\u002Fguide\u002Fcore-concepts\u002Fhierarchy","1.guide\u002F2.core-concepts\u002F4.hierarchy",{"title":40,"icon":52,"path":53,"stem":54,"children":55,"page":28},"i-lucide-crosshair","\u002Fguide\u002Fpositioning","1.guide\u002F3.positioning",[56,60,64],{"title":57,"path":58,"stem":59},"Middlewares","\u002Fguide\u002Fpositioning\u002Fmiddlewares","1.guide\u002F3.positioning\u002F1.middlewares",{"title":61,"path":62,"stem":63},"Virtual Anchors","\u002Fguide\u002Fpositioning\u002Fvirtual-anchors","1.guide\u002F3.positioning\u002F2.virtual-anchors",{"title":65,"path":66,"stem":67},"Animations and Transitions","\u002Fguide\u002Fpositioning\u002Fanimations-and-transitions","1.guide\u002F3.positioning\u002F3.animations-and-transitions",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":28},"Accessibility","i-lucide-person-standing","\u002Fguide\u002Faccessibility","1.guide\u002F4.accessibility",[74,78,82,86],{"title":75,"path":76,"stem":77},"ARIA & Semantics","\u002Fguide\u002Faccessibility\u002Faria-and-semantics","1.guide\u002F4.accessibility\u002F1.aria-and-semantics",{"title":79,"path":80,"stem":81},"Focus Models","\u002Fguide\u002Faccessibility\u002Ffocus-models","1.guide\u002F4.accessibility\u002F2.focus-models",{"title":83,"path":84,"stem":85},"Keyboard Navigation","\u002Fguide\u002Faccessibility\u002Fkeyboard-navigation","1.guide\u002F4.accessibility\u002F3.keyboard-navigation",{"title":87,"path":88,"stem":89},"Hover & Dismissal","\u002Fguide\u002Faccessibility\u002Fhover-and-dismissal","1.guide\u002F4.accessibility\u002F4.hover-and-dismissal",{"title":91,"icon":92,"path":93,"stem":94,"children":95},"API Reference","i-lucide-code-xml","\u002Fapi","2.api",[96,100,110,120,137,171,188],{"title":97,"path":93,"stem":98,"icon":99},"Overview","2.api\u002Findex","i-lucide-file-text",{"title":101,"icon":102,"path":103,"stem":104,"children":105,"page":28},"Reference","i-lucide-braces","\u002Fapi\u002Foverview","2.api\u002F1.overview",[106],{"title":107,"path":108,"stem":109},"Types","\u002Fapi\u002Foverview\u002Ftypes","2.api\u002F1.overview\u002F1.types",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":28},"Core","i-lucide-box","\u002Fapi\u002Fcore","2.api\u002F2.core",[116],{"title":117,"path":118,"stem":119},"useFloatingNode","\u002Fapi\u002Fcore\u002Fuse-floating-node","2.api\u002F2.core\u002F1.use-floating-node",{"title":40,"icon":121,"path":122,"stem":123,"children":124,"page":28},"i-lucide-move","\u002Fapi\u002Fpositioning","2.api\u002F3.positioning",[125,129,133],{"title":126,"path":127,"stem":128},"usePosition","\u002Fapi\u002Fpositioning\u002Fuse-position","2.api\u002F3.positioning\u002F1.use-position",{"title":130,"path":131,"stem":132},"useArrow","\u002Fapi\u002Fpositioning\u002Fuse-arrow","2.api\u002F3.positioning\u002F2.use-arrow",{"title":134,"path":135,"stem":136},"useClientPoint","\u002Fapi\u002Fpositioning\u002Fuse-client-point","2.api\u002F3.positioning\u002F3.use-client-point",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":28},"Interactions","i-lucide-mouse-pointer-click","\u002Fapi\u002Finteractions","2.api\u002F4.interactions",[143,147,151,155,159,163,167],{"title":144,"path":145,"stem":146},"useClick","\u002Fapi\u002Finteractions\u002Fuse-click","2.api\u002F4.interactions\u002F1.use-click",{"title":148,"path":149,"stem":150},"useHover","\u002Fapi\u002Finteractions\u002Fuse-hover","2.api\u002F4.interactions\u002F2.use-hover",{"title":152,"path":153,"stem":154},"useFocus","\u002Fapi\u002Finteractions\u002Fuse-focus","2.api\u002F4.interactions\u002F3.use-focus",{"title":156,"path":157,"stem":158},"useFocusTrap","\u002Fapi\u002Finteractions\u002Fuse-focus-trap","2.api\u002F4.interactions\u002F4.use-focus-trap",{"title":160,"path":161,"stem":162},"useOutsideClick","\u002Fapi\u002Finteractions\u002Fuse-outside-click","2.api\u002F4.interactions\u002F5.use-outside-click",{"title":164,"path":165,"stem":166},"useEscapeKey","\u002Fapi\u002Finteractions\u002Fuse-escape-key","2.api\u002F4.interactions\u002F6.use-escape-key",{"title":168,"path":169,"stem":170},"useRole","\u002Fapi\u002Finteractions\u002Fuse-role","2.api\u002F4.interactions\u002F7.use-role",{"title":83,"icon":172,"path":173,"stem":174,"children":175,"page":28},"i-lucide-keyboard","\u002Fapi\u002Fkeyboard-navigation","2.api\u002F5.keyboard-navigation",[176,180,184],{"title":177,"path":178,"stem":179},"useRovingFocus","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-roving-focus","2.api\u002F5.keyboard-navigation\u002F1.use-roving-focus",{"title":181,"path":182,"stem":183},"useAriaActivedescendant","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-aria-activedescendant","2.api\u002F5.keyboard-navigation\u002F2.use-aria-activedescendant",{"title":185,"path":186,"stem":187},"useTypeahead","\u002Fapi\u002Fkeyboard-navigation\u002Fuse-typeahead","2.api\u002F5.keyboard-navigation\u002F3.use-typeahead",{"title":189,"icon":190,"path":191,"stem":192,"children":193,"page":28},"Middleware","i-lucide-blocks","\u002Fapi\u002Fmiddleware","2.api\u002F6.middleware",[194,198,202,206,210,214,218,222],{"title":195,"path":196,"stem":197},"offset","\u002Fapi\u002Fmiddleware\u002Foffset","2.api\u002F6.middleware\u002F1.offset",{"title":199,"path":200,"stem":201},"flip","\u002Fapi\u002Fmiddleware\u002Fflip","2.api\u002F6.middleware\u002F2.flip",{"title":203,"path":204,"stem":205},"shift","\u002Fapi\u002Fmiddleware\u002Fshift","2.api\u002F6.middleware\u002F3.shift",{"title":207,"path":208,"stem":209},"autoPlacement","\u002Fapi\u002Fmiddleware\u002Fautoplacement","2.api\u002F6.middleware\u002F4.autoplacement",{"title":211,"path":212,"stem":213},"size","\u002Fapi\u002Fmiddleware\u002Fsize","2.api\u002F6.middleware\u002F5.size",{"title":215,"path":216,"stem":217},"inline","\u002Fapi\u002Fmiddleware\u002Finline","2.api\u002F6.middleware\u002F6.inline",{"title":219,"path":220,"stem":221},"arrow","\u002Fapi\u002Fmiddleware\u002Farrow","2.api\u002F6.middleware\u002F7.arrow",{"title":223,"path":224,"stem":225},"hide","\u002Fapi\u002Fmiddleware\u002Fhide","2.api\u002F6.middleware\u002F8.hide",{"id":227,"title":40,"body":228,"description":760,"extension":761,"links":762,"meta":763,"navigation":764,"path":41,"seo":765,"stem":42,"__hash__":766},"docs\u002F1.guide\u002F2.core-concepts\u002F2.positioning.md",{"type":229,"value":230,"toc":753},"minimark",[231,238,249,254,260,290,297,359,363,366,369,391,493,497,519,526,633,647,691,695,702,711,715,749],[232,233,234,237],"p",{},[235,236,126],"code",{}," answers one question: where should the floating element sit relative to the anchor?",[232,239,240,241,244,245,248],{},"It only runs when ",[235,242,243],{},"node.open.value"," is ",[235,246,247],{},"true",". When the surface is closed, it cleans up all scroll listeners, resize observers, and animation frames.",[250,251,253],"h2",{"id":252},"placement","Placement",[232,255,256,257,259],{},"A placement tells ",[235,258,126],{}," which side of the anchor to use and how to align along that side:",[261,262,263,280],"ul",{},[264,265,266,267,270,271,270,274,270,277],"li",{},"Sides: ",[235,268,269],{},"top",", ",[235,272,273],{},"bottom",[235,275,276],{},"left",[235,278,279],{},"right",[264,281,282,283,270,286,289],{},"Alignments: ",[235,284,285],{},"-start",[235,287,288],{},"-end",", or centered by default",[232,291,292,293,296],{},"For example, ",[235,294,295],{},"bottom-start"," places the surface below the anchor, aligned to its starting edge.",[298,299,304],"pre",{"className":300,"code":301,"language":302,"meta":303,"style":303},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","usePosition(node, {\n  placement: \"bottom-start\",\n});\n","ts","",[235,305,306,325,347],{"__ignoreMap":303},[307,308,311,314,318,322],"span",{"class":309,"line":310},"line",1,[307,312,126],{"class":313},"s2Zo4",[307,315,317],{"class":316},"sTEyZ","(node",[307,319,321],{"class":320},"sMK4o",",",[307,323,324],{"class":320}," {\n",[307,326,328,332,335,338,341,344],{"class":309,"line":327},2,[307,329,331],{"class":330},"swJcz","  placement",[307,333,334],{"class":320},":",[307,336,337],{"class":320}," \"",[307,339,295],{"class":340},"sfazB",[307,342,343],{"class":320},"\"",[307,345,346],{"class":320},",\n",[307,348,350,353,356],{"class":309,"line":349},3,[307,351,352],{"class":320},"}",[307,354,355],{"class":316},")",[307,357,358],{"class":320},";\n",[250,360,362],{"id":361},"middlewares-refine-coordinates","Middlewares refine coordinates",[232,364,365],{},"Raw coordinates are rarely enough. Elements hit screen boundaries, overlap their triggers, or need spacing.",[232,367,368],{},"Middlewares run sequentially to adjust the computed position:",[261,370,371,376,381,386],{},[264,372,373,375],{},[235,374,195],{},": Adds spacing between the anchor and the floating element.",[264,377,378,380],{},[235,379,199],{},": Flips the element to the opposite side if it overflows the viewport.",[264,382,383,385],{},[235,384,203],{},": Shifts the element along its axis to stay in view.",[264,387,388,390],{},[235,389,211],{},": Constrains the element width or height to available space.",[298,392,394],{"className":300,"code":393,"language":302,"meta":303,"style":303},"usePosition(node, {\n  placement: \"top\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n",[235,395,396,406,420,429,443,457,478,484],{"__ignoreMap":303},[307,397,398,400,402,404],{"class":309,"line":310},[307,399,126],{"class":313},[307,401,317],{"class":316},[307,403,321],{"class":320},[307,405,324],{"class":320},[307,407,408,410,412,414,416,418],{"class":309,"line":327},[307,409,331],{"class":330},[307,411,334],{"class":320},[307,413,337],{"class":320},[307,415,269],{"class":340},[307,417,343],{"class":320},[307,419,346],{"class":320},[307,421,422,425,427],{"class":309,"line":349},[307,423,424],{"class":330},"  middlewares",[307,426,334],{"class":320},[307,428,324],{"class":320},[307,430,432,435,437,441],{"class":309,"line":431},4,[307,433,434],{"class":330},"    offset",[307,436,334],{"class":320},[307,438,440],{"class":439},"sbssI"," 8",[307,442,346],{"class":320},[307,444,446,449,451,455],{"class":309,"line":445},5,[307,447,448],{"class":330},"    flip",[307,450,334],{"class":320},[307,452,454],{"class":453},"sfNiH"," true",[307,456,346],{"class":320},[307,458,460,463,465,468,471,473,475],{"class":309,"line":459},6,[307,461,462],{"class":330},"    shift",[307,464,334],{"class":320},[307,466,467],{"class":320}," {",[307,469,470],{"class":330}," padding",[307,472,334],{"class":320},[307,474,440],{"class":439},[307,476,477],{"class":320}," },\n",[307,479,481],{"class":309,"line":480},7,[307,482,483],{"class":320},"  },\n",[307,485,487,489,491],{"class":309,"line":486},8,[307,488,352],{"class":320},[307,490,355],{"class":316},[307,492,358],{"class":320},[250,494,496],{"id":495},"automatic-style-application","Automatic style application",[232,498,499,500,502,503,270,506,270,508,510,511,514,515,518],{},"By default, ",[235,501,126],{}," synchronizes ",[235,504,505],{},"position",[235,507,269],{},[235,509,276],{},", and ",[235,512,513],{},"transform"," directly onto ",[235,516,517],{},"node.refs.floatingEl",".",[232,520,521,522,525],{},"You do not need to bind ",[235,523,524],{},":style"," in your template:",[298,527,531],{"className":528,"code":529,"language":530,"meta":303,"style":303},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cbutton ref=\"anchorEl\">Trigger\u003C\u002Fbutton>\n  \u003C!-- Styles are applied directly to floatingEl -->\n  \u003Cdiv v-if=\"node.open.value\" ref=\"floatingEl\">Floating content\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[235,532,533,544,579,585,625],{"__ignoreMap":303},[307,534,535,538,541],{"class":309,"line":310},[307,536,537],{"class":320},"\u003C",[307,539,540],{"class":330},"template",[307,542,543],{"class":320},">\n",[307,545,546,549,552,556,559,561,564,566,569,572,575,577],{"class":309,"line":327},[307,547,548],{"class":320},"  \u003C",[307,550,551],{"class":330},"button",[307,553,555],{"class":554},"spNyl"," ref",[307,557,558],{"class":320},"=",[307,560,343],{"class":320},[307,562,563],{"class":340},"anchorEl",[307,565,343],{"class":320},[307,567,568],{"class":320},">",[307,570,571],{"class":316},"Trigger",[307,573,574],{"class":320},"\u003C\u002F",[307,576,551],{"class":330},[307,578,543],{"class":320},[307,580,581],{"class":309,"line":349},[307,582,584],{"class":583},"sHwdD","  \u003C!-- Styles are applied directly to floatingEl -->\n",[307,586,587,589,592,595,597,599,601,603,605,607,609,612,614,616,619,621,623],{"class":309,"line":431},[307,588,548],{"class":320},[307,590,591],{"class":330},"div",[307,593,594],{"class":554}," v-if",[307,596,558],{"class":320},[307,598,343],{"class":320},[307,600,243],{"class":340},[307,602,343],{"class":320},[307,604,555],{"class":554},[307,606,558],{"class":320},[307,608,343],{"class":320},[307,610,611],{"class":340},"floatingEl",[307,613,343],{"class":320},[307,615,568],{"class":320},[307,617,618],{"class":316},"Floating content",[307,620,574],{"class":320},[307,622,591],{"class":330},[307,624,543],{"class":320},[307,626,627,629,631],{"class":309,"line":445},[307,628,574],{"class":320},[307,630,540],{"class":330},[307,632,543],{"class":320},[232,634,635,636,639,640,642,643,646],{},"If you need manual control, pass ",[235,637,638],{},"{ applyStyles: false }",". ",[235,641,126],{}," returns reactive ",[235,644,645],{},"styles"," you can bind yourself:",[298,648,650],{"className":300,"code":649,"language":302,"meta":303,"style":303},"const { styles } = usePosition(node, { applyStyles: false });\n",[235,651,652],{"__ignoreMap":303},[307,653,654,657,659,662,664,667,670,672,674,676,679,681,684,687,689],{"class":309,"line":310},[307,655,656],{"class":554},"const",[307,658,467],{"class":320},[307,660,661],{"class":316}," styles ",[307,663,352],{"class":320},[307,665,666],{"class":320}," =",[307,668,669],{"class":313}," usePosition",[307,671,317],{"class":316},[307,673,321],{"class":320},[307,675,467],{"class":320},[307,677,678],{"class":330}," applyStyles",[307,680,334],{"class":320},[307,682,683],{"class":453}," false",[307,685,686],{"class":320}," }",[307,688,355],{"class":316},[307,690,358],{"class":320},[250,692,694],{"id":693},"real-and-virtual-anchors","Real and virtual anchors",[232,696,697,698,701],{},"The anchor does not have to be a real DOM element. It can be a virtual element that provides a ",[235,699,700],{},"getBoundingClientRect()"," method.",[232,703,704,705,710],{},"For cursor tracking and context menus, ",[706,707,708],"a",{"href":135},[235,709,134],{}," handles this automatically by creating a virtual anchor from pointer coordinates.",[250,712,714],{"id":713},"where-to-go-next","Where to go next",[261,716,717,722,728,734,742],{},[264,718,719,721],{},[706,720,57],{"href":58},": How middlewares refine coordinates, resolve collisions, and execute in sequence.",[264,723,724,727],{},[706,725,726],{"href":62},"Virtual anchors",": How to position against pointer events, context menus, and text selections.",[264,729,730,733],{},[706,731,732],{"href":66},"Animations and transitions",": How to animate floating surfaces without layout jumps.",[264,735,736,741],{},[706,737,738,740],{"href":127},[235,739,126],{}," API",": Full options and return values.",[264,743,744,748],{},[706,745,746,740],{"href":135},[235,747,134],{},": Virtual anchor helper for cursor positioning.",[750,751,752],"style",{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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 pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"title":303,"searchDepth":327,"depth":327,"links":754},[755,756,757,758,759],{"id":252,"depth":327,"text":253},{"id":361,"depth":327,"text":362},{"id":495,"depth":327,"text":496},{"id":693,"depth":327,"text":694},{"id":713,"depth":327,"text":714},"How VFloat calculates coordinates and keeps floating elements on screen.","md",null,{},true,{"title":40,"description":760},"dCvOftd7InEUPiWc8jGxaVZnQhVwB9nCtguEuu5zX38",[768,770],{"title":36,"path":37,"stem":38,"description":769,"children":-1},"A shared context for VFloat composables.",{"title":44,"path":45,"stem":46,"description":771,"children":-1},"How VFloat opens, closes, and coordinates floating surfaces.",1791268048956]