[{"data":1,"prerenderedAt":576},["ShallowReactive",2],{"navigation_docs":3,"-guide-core-concepts-placement-and-positioning":271,"-guide-core-concepts-placement-and-positioning-surround":571},[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":40,"body":273,"description":564,"extension":565,"links":566,"meta":567,"navigation":568,"path":41,"seo":569,"stem":42,"__hash__":570},"docs\u002F1.guide\u002F2.core-concepts\u002F2.placement-and-positioning.md",{"type":274,"value":275,"toc":551},"minimark",[276,280,283,288,291,294,314,325,329,340,343,347,355,360,391,413,423,427,430,473,492,496,499,502,527,531],[277,278,279],"p",{},"Positioning is usually the first part of VFloat people notice, so it helps to be clear about what the library is actually doing.",[277,281,282],{},"VFloat computes where the floating surface should sit relative to an anchor, then refines that result with placement, strategy, transforms, middleware, and the current layout.",[284,285,287],"h2",{"id":286},"placement-the-intended-side-and-alignment","Placement: the intended side and alignment",[277,289,290],{},"Placement is the first instruction you give the positioning engine.",[277,292,293],{},"Examples:",[295,296,297,304,309],"ul",{},[298,299,300],"li",{},[301,302,303],"code",{},"\"top\"",[298,305,306],{},[301,307,308],{},"\"bottom-start\"",[298,310,311],{},[301,312,313],{},"\"right-end\"",[277,315,316,317,320,321,324],{},"The side answers where the floating surface should appear. The optional ",[301,318,319],{},"-start"," or ",[301,322,323],{},"-end"," suffix answers how it should align along that side.",[284,326,328],{"id":327},"the-anchor-can-be-real-or-virtual","The anchor can be real or virtual",[277,330,331,332,335,336,339],{},"Most of the time the anchor is a real ",[301,333,334],{},"HTMLElement",". Sometimes it is a virtual element with a ",[301,337,338],{},"getBoundingClientRect()"," method.",[277,341,342],{},"That matters because VFloat's positioning model is based on geometry, not on the visual appearance of a particular component type.",[284,344,346],{"id":345},"positioning-is-computed-not-hardcoded","Positioning is computed, not hardcoded",[277,348,349,354],{},[350,351,352],"a",{"href":172},[301,353,171],{}," calculates the active coordinates and styles for your floating node.",[356,357,359],"h3",{"id":358},"automatic-style-application-by-default","Automatic style application by default",[277,361,362,363,366,367,369,370,373,374,373,377,373,380,373,383,386,387,390],{},"By default (",[301,364,365],{},"applyStyles: true","), ",[301,368,171],{}," automatically synchronizes positioning styles (",[301,371,372],{},"position",", ",[301,375,376],{},"top",[301,378,379],{},"left",[301,381,382],{},"transform",[301,384,385],{},"will-change",") directly onto your floating DOM element (",[301,388,389],{},"node.refs.floatingEl",").",[277,392,393,394,398,399,373,401,373,404,373,406,409,410,390],{},"Similarly, ",[350,395,396],{"href":176},[301,397,175],{}," automatically synchronizes computed physical insets (",[301,400,376],{},[301,402,403],{},"bottom",[301,405,379],{},[301,407,408],{},"right",") directly onto your arrow DOM element (",[301,411,412],{},"node.refs.arrowEl",[277,414,415,416,320,419,422],{},"This means you do not need to bind ",[301,417,418],{},":style=\"styles\"",[301,420,421],{},":style=\"arrowStyles\""," in your templates for standard floating surfaces.",[356,424,426],{"id":425},"manual-control-and-custom-applicators","Manual control and custom applicators",[277,428,429],{},"When you need custom styling pipelines, transitions, or manual binding:",[295,431,432,459],{},[298,433,434,438,439,442,443,320,445,447,448,451,452,455,456,458],{},[435,436,437],"strong",{},"Disable automatic binding:"," Pass ",[301,440,441],{},"{ applyStyles: false }"," to ",[301,444,171],{},[301,446,175],{},". Reactive ",[301,449,450],{},"styles"," (or ",[301,453,454],{},"arrowStyles",") remains available on the returned object to bind manually with ",[301,457,418],{},".",[298,460,461,464,465,442,468,320,470,472],{},[435,462,463],{},"Custom style applicators:"," Pass a custom callback ",[301,466,467],{},"applyStyles(element, styles)",[301,469,171],{},[301,471,175],{}," to intercept and apply styles with custom animation libraries, CSS transforms, or cleanup routines.",[277,474,475,476,478,479,373,482,373,485,488,489,458],{},"When you need deeper inspection into layout math, ",[301,477,171],{}," also returns ",[301,480,481],{},"placement",[301,483,484],{},"middlewareData",[301,486,487],{},"isPositioned",", and ",[301,490,491],{},"update",[284,493,495],{"id":494},"positioning-does-not-equal-interaction","Positioning does not equal interaction",[277,497,498],{},"One of the easiest mistakes in floating UI is to blur the line between where a surface should appear and when it should exist.",[277,500,501],{},"VFloat keeps these separate on purpose:",[295,503,504,510,517],{},[298,505,506,507],{},"Shared refs and open state belong to ",[301,508,509],{},"useFloatingNode()",[298,511,512,513,516],{},"Positioning belongs to ",[301,514,515],{},"usePosition()"," and middlewares",[298,518,519,520,523,524],{},"Interaction belongs to composables like ",[301,521,522],{},"useHover()"," and ",[301,525,526],{},"useClick()",[284,528,530],{"id":529},"where-to-go-next","Where to go next",[295,532,533,539,545],{},[298,534,535,536,538],{},"Read ",[350,537,88],{"href":89}," for the next layer of positioning logic.",[298,540,535,541,544],{},[350,542,543],{"href":85},"Use Virtual Anchors"," if your anchor is synthetic rather than a real element.",[298,546,535,547,550],{},[350,548,549],{"href":81},"Keep Content in View"," for practical middleware stacks.",{"title":552,"searchDepth":553,"depth":553,"links":554},"",2,[555,556,557,562,563],{"id":286,"depth":553,"text":287},{"id":327,"depth":553,"text":328},{"id":345,"depth":553,"text":346,"children":558},[559,561],{"id":358,"depth":560,"text":359},3,{"id":425,"depth":560,"text":426},{"id":494,"depth":553,"text":495},{"id":529,"depth":553,"text":530},"Learn how placements, strategies, and middleware shape the final position.","md",null,{},true,{"title":40,"description":564},"NOopF-Q4S6yWYfTsCsEzHw79QBxGX-dIc0f3IdVCyHQ",[572,574],{"title":36,"path":37,"stem":38,"description":573,"children":-1},"Understand the shared node object that ties VFloat behavior together.",{"title":44,"path":45,"stem":46,"description":575,"children":-1},"Learn how VFloat opens, closes, and coordinates floating surfaces.",1791046167495]