[{"data":1,"prerenderedAt":653},["ShallowReactive",2],{"navigation_docs":3,"-guide-positioning-middleware-pipeline":271,"-guide-positioning-middleware-pipeline-surround":648},[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":88,"body":273,"description":641,"extension":642,"links":643,"meta":644,"navigation":645,"path":89,"seo":646,"stem":90,"__hash__":647},"docs\u002F1.guide\u002F4.positioning\u002F3.middleware-pipeline.md",{"type":274,"value":275,"toc":634},"minimark",[276,280,283,288,300,303,306,310,313,316,397,409,413,419,499,502,564,568,571,609,613,630],[277,278,279],"p",{},"Middleware is what makes VFloat feel adaptable instead of rigid.",[277,281,282],{},"Without middleware, you get a base placement. With middleware options, that first guess can react to spacing, collisions, size constraints, and arrow alignment.",[284,285,287],"h2",{"id":286},"base-placement-comes-first","Base placement comes first",[277,289,290,291,295,296,299],{},"Every floating surface starts with a placement such as ",[292,293,294],"code",{},"\"bottom\""," or ",[292,297,298],{},"\"top-start\"",".",[277,301,302],{},"That gives VFloat an initial answer to the question: where should this surface appear if nothing gets in the way?",[277,304,305],{},"Then VFloat turns the middleware options into a pipeline.",[284,307,309],{"id":308},"middleware-is-a-pipeline-not-an-unordered-bag","Middleware is a pipeline, not an unordered bag",[277,311,312],{},"The easiest mistake is to think of middleware options as a list of independent features. In practice, VFloat turns them into a sequential pipeline where each middleware receives the coordinates computed by earlier steps and refines them.",[277,314,315],{},"For example, this stack:",[317,318,323],"pre",{"className":319,"code":320,"language":321,"meta":322,"style":322},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","middlewares: {\n  offset: 8,\n  flip: true,\n  shift: { padding: 8 },\n}\n","ts","",[292,324,325,341,356,370,391],{"__ignoreMap":322},[326,327,330,334,338],"span",{"class":328,"line":329},"line",1,[326,331,333],{"class":332},"sBMFI","middlewares",[326,335,337],{"class":336},"sMK4o",":",[326,339,340],{"class":336}," {\n",[326,342,344,347,349,353],{"class":328,"line":343},2,[326,345,346],{"class":332},"  offset",[326,348,337],{"class":336},[326,350,352],{"class":351},"sbssI"," 8",[326,354,355],{"class":336},",\n",[326,357,359,362,364,368],{"class":328,"line":358},3,[326,360,361],{"class":332},"  flip",[326,363,337],{"class":336},[326,365,367],{"class":366},"sfNiH"," true",[326,369,355],{"class":336},[326,371,373,376,378,381,384,386,388],{"class":328,"line":372},4,[326,374,375],{"class":332},"  shift",[326,377,337],{"class":336},[326,379,380],{"class":336}," {",[326,382,383],{"class":332}," padding",[326,385,337],{"class":336},[326,387,352],{"class":351},[326,389,390],{"class":336}," },\n",[326,392,394],{"class":328,"line":393},5,[326,395,396],{"class":336},"}\n",[277,398,399,400,402,403,405,406,408],{},"runs ",[292,401,240],{}," first (adding the 8px margin), then ",[292,404,244],{}," (evaluating whether the offset panel fits or needs opposite placement), and finally ",[292,407,248],{}," (sliding the panel along the viewport edge if needed).",[284,410,412],{"id":411},"canonical-pipeline-sequence","Canonical pipeline sequence",[277,414,415,416,418],{},"When you pass an object to ",[292,417,333],{},", VFloat runs the built-in middlewares in a deterministic, optimal order:",[420,421,422,431,438,445,455,462,470,477,484,491],"ol",{},[423,424,425,430],"li",{},[426,427,428,299],"strong",{},[292,429,260],{}," Positions relative to individual client rects for multi-line text anchors.",[423,432,433,437],{},[426,434,435,299],{},[292,436,240],{}," Creates space between the anchor and the floating element before checking collisions.",[423,439,440,444],{},[426,441,442,299],{},[292,443,244],{}," Evaluates fallback sides when the preferred side runs out of space.",[423,446,447,451,452,454],{},[426,448,449,299],{},[292,450,252],{}," Alternative to ",[292,453,244],{}," that picks the roomiest side dynamically.",[423,456,457,461],{},[426,458,459,299],{},[292,460,248],{}," Keeps the surface inside visible viewport boundaries along the cross-axis.",[423,463,464,469],{},[426,465,466,299],{},[292,467,468],{},"matchWidth"," Locks the floating panel's width to match the anchor element's width.",[423,471,472,476],{},[426,473,474,299],{},[292,475,256],{}," Resizes or constrains the floating element based on available space.",[423,478,479,483],{},[426,480,481,299],{},[292,482,268],{}," Computes visibility metadata when the anchor or floating panel is clipped or escaped.",[423,485,486,490],{},[426,487,488,299],{},[292,489,264],{}," Aligns an arrow element against the final, stabilized panel geometry.",[423,492,493,498],{},[426,494,495,299],{},[292,496,497],{},"custom"," Appends arbitrary custom middleware functions after built-ins.",[277,500,501],{},"If you need a non-standard pipeline sequence, pass an array of middlewares directly:",[317,503,505],{"className":319,"code":504,"language":321,"meta":322,"style":322},"middlewares: [offset(12), shift({ padding: 16 }), flip()];\n",[292,506,507],{"__ignoreMap":322},[326,508,509,511,513,517,520,523,526,529,532,535,537,540,543,545,548,551,553,555,558,561],{"class":328,"line":329},[326,510,333],{"class":332},[326,512,337],{"class":336},[326,514,516],{"class":515},"sTEyZ"," [",[326,518,240],{"class":519},"s2Zo4",[326,521,522],{"class":515},"(",[326,524,525],{"class":351},"12",[326,527,528],{"class":515},")",[326,530,531],{"class":336},",",[326,533,534],{"class":519}," shift",[326,536,522],{"class":515},[326,538,539],{"class":336},"{",[326,541,383],{"class":542},"swJcz",[326,544,337],{"class":336},[326,546,547],{"class":351}," 16",[326,549,550],{"class":336}," }",[326,552,528],{"class":515},[326,554,531],{"class":336},[326,556,557],{"class":519}," flip",[326,559,560],{"class":515},"()]",[326,562,563],{"class":336},";\n",[284,565,567],{"id":566},"mental-model-successive-refinement","Mental model: successive refinement",[277,569,570],{},"Think of middleware as a sequence of geometric refinements:",[420,572,573,579,585,591,597,603],{},[423,574,575,578],{},[426,576,577],{},"Initial placement."," Calculate the unconstrained position for the preferred side.",[423,580,581,584],{},[426,582,583],{},"Distance."," Push the floating surface away by the specified offset.",[423,586,587,590],{},[426,588,589],{},"Side selection."," Flip or auto-place to a side with sufficient space.",[423,592,593,596],{},[426,594,595],{},"Boundary retention."," Nudge the surface back inside the viewport boundaries.",[423,598,599,602],{},[426,600,601],{},"Dimension constraints."," Apply anchor width matching or maximum height constraints.",[423,604,605,608],{},[426,606,607],{},"Indicator alignment."," Position an arrow element pointed back at the trigger.",[284,610,612],{"id":611},"where-to-go-next","Where to go next",[614,615,616,624],"ul",{},[423,617,618,619,623],{},"Read ",[620,621,622],"a",{"href":81},"Keep Content in View"," for practical middleware choices.",[423,625,618,626,629],{},[620,627,628],{"href":129},"Middleware Ordering Gotchas"," for subtle collision gotchas.",[631,632,633],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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);}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":322,"searchDepth":343,"depth":343,"links":635},[636,637,638,639,640],{"id":286,"depth":343,"text":287},{"id":308,"depth":343,"text":309},{"id":411,"depth":343,"text":412},{"id":566,"depth":343,"text":567},{"id":611,"depth":343,"text":612},"Understand how middleware runs and how each step affects positioning.","md",null,{},true,{"title":88,"description":641},"6or8XTXjisPLNYb6lm3mHhQX0kYR7oxZZUk34PCD0Rg",[649,651],{"title":84,"path":85,"stem":86,"description":650,"children":-1},"Position floating content from pointer coordinates or other virtual anchors.",{"title":98,"path":99,"stem":100,"description":652,"children":-1},"Control floating open state from your own Vue state and event handling.",1791046167627]