[{"data":1,"prerenderedAt":743},["ShallowReactive",2],{"navigation_docs":3,"-guide-advanced-middleware-ordering-gotchas":271,"-guide-advanced-middleware-ordering-gotchas-surround":738},[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":128,"body":273,"description":732,"extension":733,"links":734,"meta":735,"navigation":417,"path":129,"seo":736,"stem":130,"__hash__":737},"docs\u002F1.guide\u002F6.advanced\u002F4.middleware-ordering-gotchas.md",{"type":274,"value":275,"toc":727},"minimark",[276,280,285,288,291,301,305,308,640,669,693,704,708,723],[277,278,279],"p",{},"When middleware behavior feels wrong, the problem is often not that you chose the wrong helpers. It is that the helpers are in the wrong order for the problem you are solving.",[281,282,284],"h2",{"id":283},"the-core-rule","The core rule",[277,286,287],{},"Middleware is a pipeline. Later steps receive the result of earlier steps.",[277,289,290],{},"So if a stack feels wrong, ask:",[292,293,294,298],"ul",{},[295,296,297],"li",{},"What is each middleware trying to solve?",[295,299,300],{},"Does that make sense in this order?",[281,302,304],{"id":303},"the-baseline-order","The baseline order",[277,306,307],{},"Many stacks work well when they start like this:",[309,310,315],"pre",{"className":311,"code":312,"language":313,"meta":314,"style":314},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useFloatingNode, 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\",\n  middlewares: {\n    offset: 8,\n    flip: true,\n    shift: { padding: 8 },\n  },\n});\n\u003C\u002Fscript>\n","vue","",[316,317,318,353,383,412,419,459,489,494,525,538,557,567,581,595,615,621,630],"code",{"__ignoreMap":314},[319,320,323,327,331,335,338,341,344,348,350],"span",{"class":321,"line":322},"line",1,[319,324,326],{"class":325},"sMK4o","\u003C",[319,328,330],{"class":329},"swJcz","script",[319,332,334],{"class":333},"spNyl"," setup",[319,336,337],{"class":333}," lang",[319,339,340],{"class":325},"=",[319,342,343],{"class":325},"\"",[319,345,347],{"class":346},"sfazB","ts",[319,349,343],{"class":325},[319,351,352],{"class":325},">\n",[319,354,356,360,363,367,370,373,376,378,380],{"class":321,"line":355},2,[319,357,359],{"class":358},"s7zQu","import",[319,361,362],{"class":325}," {",[319,364,366],{"class":365},"sTEyZ"," ref",[319,368,369],{"class":325}," }",[319,371,372],{"class":358}," from",[319,374,375],{"class":325}," \"",[319,377,313],{"class":346},[319,379,343],{"class":325},[319,381,382],{"class":325},";\n",[319,384,386,388,390,393,396,399,401,403,405,408,410],{"class":321,"line":385},3,[319,387,359],{"class":358},[319,389,362],{"class":325},[319,391,392],{"class":365}," useFloatingNode",[319,394,395],{"class":325},",",[319,397,398],{"class":365}," usePosition",[319,400,369],{"class":325},[319,402,372],{"class":358},[319,404,375],{"class":325},[319,406,407],{"class":346},"v-float",[319,409,343],{"class":325},[319,411,382],{"class":325},[319,413,415],{"class":321,"line":414},4,[319,416,418],{"emptyLinePlaceholder":417},true,"\n",[319,420,422,425,428,430,433,435,439,442,445,448,451,454,457],{"class":321,"line":421},5,[319,423,424],{"class":333},"const",[319,426,427],{"class":365}," anchorEl ",[319,429,340],{"class":325},[319,431,366],{"class":432},"s2Zo4",[319,434,326],{"class":325},[319,436,438],{"class":437},"sBMFI","HTMLElement",[319,440,441],{"class":325}," |",[319,443,444],{"class":437}," null",[319,446,447],{"class":325},">",[319,449,450],{"class":365},"(",[319,452,453],{"class":325},"null",[319,455,456],{"class":365},")",[319,458,382],{"class":325},[319,460,462,464,467,469,471,473,475,477,479,481,483,485,487],{"class":321,"line":461},6,[319,463,424],{"class":333},[319,465,466],{"class":365}," floatingEl ",[319,468,340],{"class":325},[319,470,366],{"class":432},[319,472,326],{"class":325},[319,474,438],{"class":437},[319,476,441],{"class":325},[319,478,444],{"class":437},[319,480,447],{"class":325},[319,482,450],{"class":365},[319,484,453],{"class":325},[319,486,456],{"class":365},[319,488,382],{"class":325},[319,490,492],{"class":321,"line":491},7,[319,493,418],{"emptyLinePlaceholder":417},[319,495,497,499,502,504,506,508,511,514,516,518,521,523],{"class":321,"line":496},8,[319,498,424],{"class":333},[319,500,501],{"class":365}," node ",[319,503,340],{"class":325},[319,505,392],{"class":432},[319,507,450],{"class":365},[319,509,510],{"class":325},"{",[319,512,513],{"class":365}," anchorEl",[319,515,395],{"class":325},[319,517,466],{"class":365},[319,519,520],{"class":325},"}",[319,522,456],{"class":365},[319,524,382],{"class":325},[319,526,528,530,533,535],{"class":321,"line":527},9,[319,529,171],{"class":432},[319,531,532],{"class":365},"(node",[319,534,395],{"class":325},[319,536,537],{"class":325}," {\n",[319,539,541,544,547,549,552,554],{"class":321,"line":540},10,[319,542,543],{"class":329},"  placement",[319,545,546],{"class":325},":",[319,548,375],{"class":325},[319,550,551],{"class":346},"bottom",[319,553,343],{"class":325},[319,555,556],{"class":325},",\n",[319,558,560,563,565],{"class":321,"line":559},11,[319,561,562],{"class":329},"  middlewares",[319,564,546],{"class":325},[319,566,537],{"class":325},[319,568,570,573,575,579],{"class":321,"line":569},12,[319,571,572],{"class":329},"    offset",[319,574,546],{"class":325},[319,576,578],{"class":577},"sbssI"," 8",[319,580,556],{"class":325},[319,582,584,587,589,593],{"class":321,"line":583},13,[319,585,586],{"class":329},"    flip",[319,588,546],{"class":325},[319,590,592],{"class":591},"sfNiH"," true",[319,594,556],{"class":325},[319,596,598,601,603,605,608,610,612],{"class":321,"line":597},14,[319,599,600],{"class":329},"    shift",[319,602,546],{"class":325},[319,604,362],{"class":325},[319,606,607],{"class":329}," padding",[319,609,546],{"class":325},[319,611,578],{"class":577},[319,613,614],{"class":325}," },\n",[319,616,618],{"class":321,"line":617},15,[319,619,620],{"class":325},"  },\n",[319,622,624,626,628],{"class":321,"line":623},16,[319,625,520],{"class":325},[319,627,456],{"class":365},[319,629,382],{"class":325},[319,631,633,636,638],{"class":321,"line":632},17,[319,634,635],{"class":325},"\u003C\u002F",[319,637,330],{"class":329},[319,639,352],{"class":325},[277,641,642,643,645,646,645,648,650,651,645,653,645,655,650,658,645,660,645,662,664,665,668],{},"That order reads naturally, and it matches the canonical order VFloat executes semantic middlewares (",[316,644,260],{},", ",[316,647,240],{},[316,649,244],{}," \u002F ",[316,652,252],{},[316,654,248],{},[316,656,657],{},"matchWidth",[316,659,256],{},[316,661,268],{},[316,663,264],{},", then ",[316,666,667],{},"custom","):",[292,670,671,679,686],{},[295,672,673,678],{},[674,675,676],"strong",{},[316,677,240],{}," creates initial clearance from the anchor.",[295,680,681,685],{},[674,682,683],{},[316,684,244],{}," evaluates whether that clearance leaves room on the preferred side.",[295,687,688,692],{},[674,689,690],{},[316,691,248],{}," nudges the panel back within viewport bounds after flipping has picked the best side.",[277,694,695,696,699,700,703],{},"Use ",[316,697,698],{},"middlewares"," object notation for declarative options following this canonical sequence, or provide an array (",[316,701,702],{},"middlewares: [...]",") when you need custom pipeline execution order.",[281,705,707],{"id":706},"where-to-go-next","Where to go next",[292,709,710,718],{},[295,711,712,713,717],{},"Read ",[714,715,716],"a",{"href":81},"Keep Content in View"," for practical stacks.",[295,719,712,720,722],{},[714,721,88],{"href":89}," for the conceptual model behind the order.",[724,725,726],"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":314,"searchDepth":355,"depth":355,"links":728},[729,730,731],{"id":283,"depth":355,"text":284},{"id":303,"depth":355,"text":304},{"id":706,"depth":355,"text":707},"Learn why middleware order matters and how it changes positioning results.","md",null,{},{"title":128,"description":732},"7EDjdGrgiBKpf7ABn5VCKAAOdKA5R4jK2tKb1ywhCy0",[739,741],{"title":124,"path":125,"stem":126,"description":740,"children":-1},"Avoid pitfalls when using virtual anchors for cursor-based positioning.",{"title":132,"path":133,"stem":134,"description":742,"children":-1},"Handle list navigation edge cases in complex floating menus.",1791046168007]